/* Pons Liquid — photographic sky, liquid glass, bento.
   The art direction is Pons': a real sky as the ground, thick optical glass as
   the material, and floating cards carrying the substance. Same system as
   ponsdividends, so the two read as coming from the same hand.

   Layout is a bento grid rather than a stack of full-width sections: six hooks,
   four layers and a spec sheet are all lists, and a grid shows a list at a
   glance where a scroll hides it. */

:root{
  --ink:#0A0A0B;
  --line:rgba(255,255,255,.09);
  --label:#86868B;
  --navy:#052033;
  --accent-soft:#8ED8FF;
  --accent-warm:#FFD426;
  --ok:#30D158;
  --r:26px;
  --r-sm:16px;
  --gap:14px;
  --maxw:1120px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Geist,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.6;letter-spacing:-.006em;
  color:var(--navy);-webkit-font-smoothing:antialiased;
  background:#3E93DE;
}
/* The splash is one screen, so it does not scroll — except where it cannot
   fit. On a phone the headline wraps to three lines and the figures become a
   2x2 block, which is 120px more than an 812px viewport has; clipping that
   would put the status pill somewhere no thumb can reach. */
body.is-splash{overflow:hidden}
@media (max-width:760px),(max-height:700px){ body.is-splash{overflow:auto} }
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- ground ----------
   A watercourse. The splash runs the footage; every other page keeps the still
   it starts from, because a text page does not need a video decoder running
   behind it.

   Sharp, never blurred — the scrim below is what protects the type. */
.sky-plate{
  position:fixed;inset:0;z-index:-4;overflow:hidden;
  background:url("assets/water.jpg?v=d4ae9a75") center/cover no-repeat #1B4F86;
}
/* The still is the clip's own first frame, so the handover from one to the
   other is invisible — and it is what shows on a phone, on a data-saver
   connection, and under prefers-reduced-motion, where sky.js drops the video. */
.sky-video{
  position:fixed;inset:0;z-index:-3;
  width:100%;height:100%;object-fit:cover;
  background:#1B4F86;opacity:0;
}
.sky-video.on{opacity:1}
/* The crossfade exists for the loop handover only. Fading the first frame in
   over a frozen copy of itself reads as a double exposure. */
.sky-video.xf{transition:opacity 2.2s linear}
/* Deep enough for white copy over sun glitter, open enough in the middle that
   the water is still legible as water. */
.sky-scrim{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(8,38,74,.72) 0%, rgba(9,40,78,.52) 22%, rgba(10,44,84,.46) 38%,
      rgba(9,40,78,.50) 62%, rgba(6,30,62,.70) 86%, rgba(5,26,54,.82) 100%),
    radial-gradient(110% 70% at 50% 40%, rgba(22,90,160,.26), transparent 68%);
}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-family:"Instrument Sans",Geist,sans-serif;font-weight:500;line-height:1.1;letter-spacing:-.035em}
h1{font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:-.042em}
h2{font-size:clamp(1.3rem,2.2vw,1.7rem)}
h3{font-size:1.02rem;font-weight:600;letter-spacing:-.024em;line-height:1.25}
p{margin:0 0 .85em}
p:last-child{margin-bottom:0}
.label{
  display:block;font-family:"Geist Mono",ui-monospace,monospace;
  font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--label);
}
.mono{font-family:"Geist Mono",ui-monospace,monospace;font-size:.92em;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.fineprint{font-size:12.5px;line-height:1.55;color:var(--label)}

:where(a,button):focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:8px}
:where(a,button,summary,[role="button"]){cursor:pointer}

/* ---------- glass primitives ---------- */
.glass-pill{
  background:linear-gradient(150deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.15) 52%,rgba(255,255,255,.24) 100%);
  border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 14px 34px -18px rgba(6,40,84,.55);
  border-radius:999px;
}

/* ---------- nav ---------- */
.nav{position:relative;z-index:60;padding:18px 20px 0}
.nav-pill{
  max-width:980px;margin:0 auto;
  display:flex;align-items:center;gap:18px;
  padding:6px 6px 6px 16px;border-radius:999px;
  background:transparent;
  border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.08);
}
.brand{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;
  font-family:"Instrument Sans",sans-serif;font-weight:500;font-size:1rem;letter-spacing:-.03em;
  text-shadow:0 1px 2px rgba(6,40,84,.5), 0 2px 12px rgba(6,40,84,.4);
}
.brand img{width:22px;height:22px;display:block}
.nav-links{display:flex;gap:22px}
.nav-pill .nav-links{margin-left:10px}
.nav-links a{
  color:rgba(255,255,255,.82);text-decoration:none;font-size:13.5px;font-weight:500;
  text-shadow:0 1px 2px rgba(6,40,84,.55), 0 2px 12px rgba(6,40,84,.45);
  transition:color .2s var(--ease);
}
.nav-links a:hover,.nav-links a.on{color:#fff}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.glass-circle{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.88);text-decoration:none;
  background:none;border:1px solid rgba(255,255,255,.28);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.glass-circle:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:#fff}
/* The visible circle stays 34px so the pill keeps its proportions; the tap area
   is grown past it instead, which is the part a thumb actually needs. */
.glass-circle{position:relative}
.glass-circle::after{content:"";position:absolute;inset:-5px;border-radius:50%}
.btn-white{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;
  background:#fff;color:var(--ink);text-decoration:none;border:0;
  border-radius:999px;padding:9px 18px;font:inherit;font-size:13.5px;font-weight:500;letter-spacing:-.012em;
  white-space:nowrap;transition:transform .2s var(--ease),background .2s var(--ease);
}
.btn-white:hover{background:#EAF3FF}
.btn-white:active{transform:scale(.97)}
.nav-links-mobile{display:none;justify-content:center;margin-top:12px}
@media (max-width:760px){
  .nav-pill .nav-links{display:none}
  /* The links move out of the pill on a phone, where they are also the row a
     thumb reaches for — so they get a real 44px band rather than 22px of text. */
  .nav-links-mobile{display:flex;gap:6px}
  .nav-links-mobile a{padding:11px 12px}
  .nav{padding:14px 14px 0}
  .nav-pill{gap:10px;padding:5px 5px 5px 14px}
  .brand{font-size:.92rem}
  .btn-white{padding:11px 16px;font-size:13px;min-height:44px}
}

/* ---------- splash ---------- */
.splash{position:relative;min-height:100dvh;display:flex;flex-direction:column}
/* The drop sits between the footage and the page's wash. That is what lets the
   ripple sample the raw video and still match its surroundings exactly: the
   scrim is laid over the drop and the water together, so there is nothing to
   approximate. Stack, bottom to top: plate, video, drop, scrim, copy, nav. */
/* Above the page's wash, not under it.

   The drop spent several rounds under `.sky-scrim` — that was right while its
   body was transparent, because the veil then fell on the glass and on the
   water showing through it alike. That version is gone, and the veil stayed:
   it was painting a navy wash straight over the render, which is why the same
   file looked pale and flat here and bright in the logo. Measured before the
   fix: 2.2x darker relative to its own water than the logo is. */
.splash-stage{
  position:relative;z-index:2;flex:1 1 auto;min-height:180px;
  display:flex;align-items:flex-end;justify-content:center;padding:18px 20px 0;
}
/* The drop stays where it is. Its shadow lives on the wrapper so nothing the
   canvas does to the surface can smear it, and the wrapper is also what
   carries the breathing — the mark keeps its own entrance animation. */
.mark-wrap{
  display:flex;align-items:center;justify-content:center;
  max-width:100%;min-height:0;
  filter:drop-shadow(0 30px 50px rgba(4,30,66,.38));
  animation:breathe 14s ease-in-out infinite;
}
/* ±5px over 14s, no rotation, no lateral drift. An order of magnitude under
   the drift that was removed: you do not see the object travel, you see that
   it is not dead. */
@keyframes breathe{
  0%,100%{transform:translate3d(0,5px,0)}
  50%    {transform:translate3d(0,-5px,0)}
}
.mark{
  position:relative;width:auto;height:auto;
  max-height:min(42vh,380px);max-width:86vw;display:block;
  animation:mark-in 1.1s var(--ease) both;
}
.mark img{
  width:auto;height:auto;max-height:min(42vh,380px);max-width:86vw;
  object-fit:contain;display:block;
}
/* Light gathered around the glass, kept faint. A dark version of this was
   tried — the logo's plate is dimmed, so darkening the water behind the drop
   seemed like the way to match it — and it simply erased the drop. Measured,
   the canvas already draws the render faithfully (64.4 against the raw image's
   64.7): the file was never the problem, so nothing here should try to fix it. */
.halo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:210%;height:120%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,
    rgba(200,235,255,.30) 0%, rgba(170,215,255,.14) 46%, transparent 76%);
  filter:blur(6px);
  animation:halo 11s ease-in-out infinite;
}
@keyframes halo{
  0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(.96)}
  50%    {opacity:1; transform:translate(-50%,-50%) scale(1.05)}
}

/* The canvas is laid exactly over the image and only takes its place once it
   has a frame in it — until then, and forever without WebGL, the render is
   what you see. */
#liquid{
  position:absolute;left:0;top:0;
  opacity:0;pointer-events:none;
  transition:opacity .25s linear;
}
.mark.is-live #liquid{opacity:1}
/* Named, not `img`: the canvas replaces *the drop*, and a selector that says
   "every image in here" hides anything else the mark ever holds — a reflection,
   a second layer. The sister site was bitten by exactly this with a descendant
   selector; a child selector is not enough on its own. */
.mark.is-live > #drop{visibility:hidden}
@keyframes mark-in{
  from{opacity:0;transform:translateY(24px) scale(.965)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){ .mark,.mark-wrap,.halo{animation:none} }

.splash-copy{position:relative;z-index:2;text-align:center;padding:24px 20px 0;color:#fff}
.splash-copy h1{
  color:#fff;font-size:clamp(1.55rem,3.4vw,2.6rem);
  text-shadow:0 1px 4px rgba(6,40,84,.4), 0 6px 44px rgba(6,40,84,.4);margin-bottom:12px;
}
.splash-copy h1 em{font-style:normal;color:var(--accent-soft)}
.splash-line{
  font-size:15px;color:rgba(255,255,255,.86);
  text-shadow:0 1px 3px rgba(6,40,84,.65), 0 2px 16px rgba(6,40,84,.45);margin:0;
}
/* Laid out at its final height from the first paint, with placeholders. It used
   to be built when the numbers landed, which shoved the pills below it down a
   second into the page. */
.hero-stats{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:18px}
.hero-stats div{text-align:center}
.hero-stats dt{
  font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin-bottom:3px;text-shadow:0 1px 3px rgba(6,40,84,.6);
}
.hero-stats dd{
  margin:0;font-family:"Instrument Sans",sans-serif;font-size:1.02rem;font-weight:500;
  letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 3px rgba(6,40,84,.7), 0 2px 14px rgba(6,40,84,.5);
  transition:color .35s var(--ease);
}
.hero-stats dd.tick{animation:tick .5s var(--ease)}
@keyframes tick{ from{opacity:.35} to{opacity:1} }
@media (max-width:620px){
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;max-width:300px;margin-inline:auto}
}

.splash-foot{
  position:relative;z-index:2;
  display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;
  padding:26px 20px 30px;
}
.status-pill,.credit-pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
  font-size:12.5px;color:rgba(255,255,255,.92);text-decoration:none;
  text-shadow:0 1px 2px rgba(6,40,84,.4);
}
.credit-pill:hover{color:#fff}
.status-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-warm);flex:0 0 6px}
.status-pill .dot-on{background:var(--ok);animation:ping 2.4s infinite}

/* A laptop with browser chrome often lands just under 700px of viewport. The
   splash shrinks there rather than dropping its figures. */
@media (max-height:780px){
  .splash-stage{padding-top:10px}
  .mark,.mark img{max-height:30vh}
  .splash-copy{padding-top:18px}
  .hero-stats{gap:18px;margin-top:12px}
  .hero-stats dd{font-size:.95rem}
  .splash-foot{padding:18px 20px 22px}
}
@media (max-height:520px){ .hero-stats{display:none} }
/* Narrow screens spend their height on wrapped type, so the mark gives some
   back rather than pushing the pills below the fold. */
@media (max-width:620px){
  .mark,.mark img{max-height:min(34vh,300px)}
  .splash-copy{padding-top:16px}
  .splash-foot{padding:20px 16px 26px}
}

/* ---------- inner pages ---------- */
.page{max-width:var(--maxw);margin:0 auto;padding:0 20px 70px}
.page-head{padding:44px 4px 26px;color:#fff}
.page-head .label{color:rgba(255,255,255,.66);margin-bottom:12px}
.page-head h1{color:#fff;text-shadow:0 1px 4px rgba(6,40,84,.35)}
.page-head .lede{
  max-width:64ch;margin-top:14px;color:rgba(255,255,255,.84);font-size:15px;
  text-shadow:0 1px 3px rgba(6,40,84,.4);
}
.page-next{padding:26px 4px 0}
.page-next a{color:rgba(255,255,255,.9);text-decoration:none;font-size:14px;text-shadow:0 1px 3px rgba(6,40,84,.45)}
.page-next a:hover{color:#fff}
.page-foot{max-width:64ch;margin:44px auto 0;text-align:center;color:rgba(255,255,255,.9)}
.page-foot p{font-size:13px;line-height:1.6;text-shadow:0 1px 3px rgba(6,40,84,.55)}
.page-foot .fineprint{color:rgba(255,255,255,.78);margin-top:12px}
.section-head{padding:26px 4px 16px;color:#fff}
.section-head .label{color:rgba(255,255,255,.6);margin-bottom:10px}
.section-head h2{color:#fff;text-shadow:0 1px 4px rgba(6,40,84,.35)}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin-bottom:var(--gap)}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}
.span-8{grid-column:span 8}
.span-12{grid-column:1/-1}
@media (max-width:1000px){
  .span-3,.span-4{grid-column:span 6}
  .span-5,.span-7,.span-8{grid-column:1/-1}
}
@media (max-width:700px){ .bento>*{grid-column:1/-1!important} }

/* ---------- tiles ----------
   One material for every tile, and it is the header's: clear glass over the
   sky. Black panels and frosted white ones were two surfaces on one page and
   both read as stickers laid on the photograph. */
.tile{
  border-radius:var(--r);padding:26px;display:flex;flex-direction:column;
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),
             inset 0 -1px 0 rgba(255,255,255,.06),
             0 18px 44px -28px rgba(6,32,60,.5);
}
.tile .label{margin-bottom:14px;color:rgba(255,255,255,.68)}
.tile p{color:rgba(255,255,255,.80);font-size:14.5px}
.tile h2,.tile h3{color:#fff}
.tile strong{color:#fff;font-weight:500}
/* Glass sits over a photograph whose brightness moves, so the dim tones are
   kept a notch stronger than they would be on a solid panel. */
.tile .fineprint{color:rgba(255,255,255,.72)}
.tile a{color:var(--accent-soft)}
/* The one solid surface on the site, kept for the tile that has to read as a
   panel rather than a pane: matte black, the way Pons announces a feature. */
.tile.matte{
  background:rgba(10,10,11,.62);
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 22px 50px -30px rgba(4,20,44,.8);
}

.tile-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.tile-top .label{margin-bottom:0}
.dot-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.04em;text-transform:uppercase}
.dot-live i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:ping 2.4s infinite}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(48,209,88,.55)}
  70%{box-shadow:0 0 0 8px rgba(48,209,88,0)}
  100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}
}

/* ---------- hook cards ---------- */
.hook{gap:0}
.hook-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hook-code{
  font-family:"Geist Mono",monospace;font-size:13px;font-weight:500;
  letter-spacing:.14em;color:#fff;
}
/* The callback name is the card's one piece of hard fact, so it gets a fill of
   its own: cyan outline alone disappeared against the brighter half of the sky. */
.hook-on{
  font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.08em;
  padding:4px 9px;border-radius:999px;
  background:rgba(8,44,84,.55);
  border:1px solid rgba(142,216,255,.42);color:var(--accent-soft);white-space:nowrap;
}
.hook h3{margin-top:14px}
.hook p{margin-top:10px;font-size:13.5px;flex:1 1 auto}
.hook-rule{
  margin-top:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);
  font-family:"Geist Mono",monospace;font-size:11.5px;color:rgba(255,255,255,.74);
}
.hook-rule span{color:var(--accent-soft)}
.hook-cut{
  margin-top:12px;font-size:12px;color:rgba(255,255,255,.70);
  display:flex;gap:8px;align-items:flex-start;
}
.hook-cut svg{flex:0 0 13px;margin-top:3px;color:var(--accent-warm)}

/* ---------- code block ---------- */
.code{
  margin-top:auto;padding:16px;border-radius:var(--r-sm);
  background:rgba(4,18,38,.42);border:1px solid rgba(255,255,255,.12);
  font-family:"Geist Mono",monospace;font-size:11.5px;line-height:1.75;
  color:rgba(255,255,255,.72);
  /* These blocks are call traces and bit arithmetic — the line breaks are the
     content. They scroll inside their own box rather than widening the page. */
  white-space:pre;overflow-x:auto;
}
.code b{color:#fff;font-weight:500}
.code i{font-style:normal;color:var(--accent-soft)}
.code .cm{color:rgba(255,255,255,.42)}

/* ---------- key/value + spec lists ---------- */
.kv{margin:0;display:flex;flex-direction:column;justify-content:flex-start;flex:1 1 auto}
.kv>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.kv>div:last-child{border-bottom:0}
.kv dt{font-size:13px;color:rgba(255,255,255,.74)}
.kv dd{margin:0;font-size:13px;font-weight:500;text-align:right;color:#fff;font-variant-numeric:tabular-nums}
.tile .fineprint.kv-note{margin-top:18px;flex:0 0 auto}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0 0 16px;background:rgba(255,255,255,.14);border-radius:var(--r-sm);overflow:hidden}
.stats>div{background:rgba(255,255,255,.05);padding:15px 16px}
.stats dt{font-size:11px;color:rgba(255,255,255,.70);margin-bottom:5px}
.stats dd{margin:0;font-family:"Instrument Sans",sans-serif;font-size:1.18rem;font-weight:500;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:#fff}
@media (max-width:620px){.stats{grid-template-columns:1fr 1fr}}

/* ---------- steps, chips, toggles ---------- */
.step{font-family:"Geist Mono",monospace;font-size:11px;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:.1em;margin-bottom:14px;display:block}
.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:20px}
.chip{padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);font-size:12.5px;color:#fff}
.chip-accent{background:var(--accent-soft);color:#052135;border-color:transparent;font-weight:500}
.arrow{color:rgba(255,255,255,.5);font-size:13px}
.toggle-row{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px;font-size:13.5px;color:#fff}
.toggle{flex:0 0 auto;width:46px;height:28px;border-radius:999px;background:rgba(255,255,255,.18);position:relative;transition:background .3s var(--ease)}
.toggle[data-on="true"]{background:#fff}
.toggle i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .3s var(--ease),background .3s var(--ease);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.toggle[data-on="true"] i{transform:translateX(18px);background:#1668BC}

/* ---------- comparison table ---------- */
.table-wrap{overflow-x:auto;margin-top:6px}
table.cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:13px}
table.cmp th,table.cmp td{padding:13px 12px;text-align:center;border-bottom:1px solid rgba(255,255,255,.12)}
table.cmp thead th{
  font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.70);font-weight:500;border-bottom-color:rgba(255,255,255,.2);
}
table.cmp thead th.us{color:var(--accent-soft)}
table.cmp th[scope="row"]{text-align:left;color:#fff;font-weight:400}
table.cmp tbody tr:last-child td,table.cmp tbody tr:last-child th{border-bottom:0}
/* Never colour alone: the yes/no is a glyph plus its own label for a screen
   reader, so the table survives being read out or printed. */
.yes{color:var(--accent-soft)}
.no{color:rgba(255,255,255,.35)}

/* ---------- depth chart ---------- */
.depth{display:flex;align-items:flex-end;gap:2px;height:150px;margin:6px 0 14px}
.depth i{flex:1 1 0;background:rgba(255,255,255,.18);border-radius:2px 2px 0 0;min-height:3px}
.depth i.in{background:linear-gradient(180deg,var(--accent-soft),rgba(142,216,255,.35))}
.depth-axis{display:flex;justify-content:space-between;font-family:"Geist Mono",monospace;font-size:10px;color:rgba(255,255,255,.45)}

/* ---------- status / CA ---------- */
.ca-box{margin:20px 0;padding:16px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.28);max-width:440px}
.ca-box .label{margin-bottom:7px}
.ca-value{font-family:"Geist Mono",monospace;font-size:13px;color:rgba(255,255,255,.75);word-break:break-all}
.ca-copy{appearance:none;border:0;background:none;padding:0;cursor:pointer;color:#fff;font-family:"Geist Mono",monospace;font-size:13px;word-break:break-all;text-align:left}
.ca-copy:hover{color:var(--accent-soft)}
.row-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 22px;
  border-radius:999px;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.2);
  text-decoration:none;font:inherit;font-size:14px;font-weight:500;transition:background .2s var(--ease);
}
.btn-outline:hover{background:rgba(255,255,255,.14)}

/* ---------- terminal ---------- */
.term-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap);align-items:start}
@media (max-width:900px){.term-grid{grid-template-columns:1fr}}

.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px}
.field .help{font-size:12px;color:rgba(255,255,255,.66);margin-top:7px}
.input{
  width:100%;min-height:46px;padding:12px 14px;border-radius:14px;
  background:rgba(4,18,38,.34);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-family:"Geist Mono",monospace;font-size:13.5px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.input::placeholder{color:rgba(255,255,255,.34)}
.input:focus{outline:none;border-color:rgba(142,216,255,.7);background:rgba(4,18,38,.5)}
.input[aria-invalid="true"]{border-color:#FF6B6B}
.err{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:12.5px;color:#FFB4B4}
/* An author `display` beats the UA sheet's [hidden] rule, so the attribute has
   to be honoured explicitly or the error shows on an empty field. */
.err[hidden]{display:none}
/* Meme piege pour une section entiere : .bento pose display:grid, donc la
   section de resultat du launch restait visible avant qu'il y ait un resultat. */
.bento[hidden]{display:none}

.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{
  flex:1 1 auto;min-height:44px;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.78);font:inherit;font-size:13px;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.seg button:hover{background:rgba(255,255,255,.12);color:#fff}
.seg button[aria-pressed="true"]{background:rgba(142,216,255,.16);border-color:rgba(142,216,255,.6);color:#fff}
.seg small{display:block;font-family:"Geist Mono",monospace;font-size:10px;color:rgba(255,255,255,.5);margin-top:3px}

/* the hook switches */
.mods{display:grid;gap:8px}
.mod{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  text-align:left;font:inherit;color:#fff;width:100%;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.mod:hover{background:rgba(255,255,255,.1)}
.mod[aria-pressed="true"]{border-color:rgba(142,216,255,.45);background:rgba(142,216,255,.09)}
.mod-body{flex:1 1 auto;min-width:0}
.mod-body b{display:block;font-family:"Geist Mono",monospace;font-size:12.5px;letter-spacing:.1em;font-weight:500}
.mod-body span{display:block;font-size:12.5px;color:rgba(255,255,255,.74);margin-top:3px}
.mod-on{
  font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.66);white-space:nowrap;
}

/* the computed permission mask */
.mask{
  display:grid;grid-template-columns:repeat(14,1fr);gap:3px;margin:4px 0 14px;
}
.bit{
  aspect-ratio:1;border-radius:4px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font-family:"Geist Mono",monospace;font-size:9px;color:rgba(255,255,255,.4);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.bit.on{background:var(--accent-soft);border-color:transparent;color:#2B0620;font-weight:500}
.addr{
  font-family:"Geist Mono",monospace;font-size:clamp(14px,2.6vw,20px);color:#fff;
  word-break:break-all;letter-spacing:-.01em;
}
.addr em{font-style:normal;color:var(--accent-soft)}
.addr .dim{color:rgba(255,255,255,.35)}
.callbacks{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.callbacks span{
  font-family:"Geist Mono",monospace;font-size:11px;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);
}
.callbacks .none{color:rgba(255,255,255,.45);border-style:dashed}

.wallet-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wallet-chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);font-family:"Geist Mono",monospace;font-size:12px;color:#fff;
}
.wallet-chip img{width:18px;height:18px;border-radius:5px}
.btn-ghost{
  appearance:none;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);
  color:#fff;border-radius:999px;padding:10px 16px;min-height:40px;font:inherit;font-size:12.5px;
  transition:background .2s var(--ease);
}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-white[disabled],.btn-ghost[disabled]{opacity:.42;cursor:not-allowed}
.btn-white[disabled]:hover{background:#fff;transform:none}

.notice{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(255,212,38,.10);border:1px solid rgba(255,212,38,.34);
  font-size:13px;color:#fff;margin-top:16px;
}
.notice svg{flex:0 0 15px;margin-top:2px;color:var(--accent-warm)}
.notice.info{background:rgba(142,216,255,.09);border-color:rgba(142,216,255,.34)}
.notice.info svg{color:var(--accent-soft)}

/* Reveal — one tier of motion, 450ms, staggered by row.
   Scoped to bento tiles only: the terminal's panels are not in a .bento and
   must never depend on a script running to become visible. Every page also
   carries a <noscript> override, so a blocked script cannot blank the page. */
.bento>.tile{opacity:0;transform:translateY(14px)}
.bento>.tile.is-in{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
@media (prefers-reduced-motion:reduce){.bento>.tile{opacity:1;transform:none}}