/* ============================================================================
   PONSTOCK — THE PONS TERMINAL
   pons's material language, run at terminal density, with a metal layer pons
   itself does not use. Direction: working/02_research/ART_DIRECTION.md

   Palette is pons verbatim (lime #d4fc50, their green and red) so this reads as
   native to the launchpad it sits on. The chrome ramp is sampled from the pons "p"
   logo and is our elevation above them. Robinhood's Robin Neon #ccff00 is
   deliberately absent: it is their brand and wearing it would imply a partnership
   that does not exist.

   Type: JetBrains Mono Variable (OFL, tnum+zero) carries EVERY figure. Sofia Sans
   Extra Condensed Variable (OFL) is display only and never touches a number, since
   it ships no slashed zero and fails the studio's --money audit.
   ============================================================================ */

@font-face{
  font-family:"Wire Mono";
  src:url("/fonts/mono.woff2") format("woff2-variations");
  font-weight:100 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Wire Display";
  src:url("/fonts/display.woff2") format("woff2-variations");
  font-weight:1 1000; font-style:normal; font-display:swap;
}

:root{
  /* ground and elevation. Layers, never one flat plane. */
  --void:#080908;
  --s1:#101210;
  --s2:#161916;
  --s3:#1d211c;

  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.13);
  --glass:rgba(255,255,255,.055);   /* the 1px inset top highlight */

  /* pons ink */
  --ink:#f1f4ef;
  --ink-2:#a6ada2;
  --ink-3:#7b8278;   /* 4.6:1 on --void, AA for normal text */
  --ink-4:#4c5149;   /* decorative only: rules, off dots, empty cells */

  /* the accent, pons verbatim */
  --lime:#d4fc50;
  --lime-2:#a8cc3e;
  --lime-wash:rgba(212,252,80,.11);
  --lime-line:rgba(212,252,80,.30);
  --lime-glow:rgba(212,252,80,.34);

  /* chrome, sampled from the pons logo. our metal. */
  --cr-1:#687868;
  --cr-2:#A0A8A0;
  --cr-3:#E8E8E8;

  /* market semantics, pons's own values */
  --up:#30d158;
  --dn:#ff453a;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:22px;
  --rail:34px; --tape:32px; --maxw:1480px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#080908}
body{
  margin:0; background:#080908; color:var(--ink);
  font-family:"Wire Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px; line-height:1.5;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"zero" 1,"liga" 0,"calt" 0;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  height:100vh; height:100dvh; overflow:hidden;
  /* No overflow-x:hidden on a scrolling document here: the shell owns the frame and
     the stage owns the scroll, so real overflow still surfaces instead of being
     masked from both the user and any scrollWidth probe. */
}

/* Grain. Flat vector surfaces are the tell that separates a mockup from a product;
   one static SVG turbulence tile at very low opacity over everything. */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}


h1,h2,h3,p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--lime);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
::selection{background:var(--lime);color:#080908}

.num{font-variant-numeric:tabular-nums}
.dim{color:var(--ink-2)} .dimmer{color:var(--ink-3)}
.up{color:var(--up)} .dn{color:var(--dn)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-5)}

.lab{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}

/* The card. One inset top highlight is the difference between a surface and a box. */
.card{
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--line);
  border-radius:var(--r-3);
  box-shadow:inset 0 1px 0 var(--glass), 0 18px 40px -24px rgba(0,0,0,.9);
}

/* ------------------------------------------------------------------ rail --- */
.tbar{
  height:var(--rail);flex:none;
  display:flex;align-items:center;gap:var(--s-4);padding:0 var(--s-5);
  background:rgba(8,9,8,.86);border-bottom:1px solid var(--line);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;
}

/* The wordmark is the one place chrome is allowed: the ramp is sampled from the pons
   logo and IS the identity, not decoration. But `color:transparent` with a failed
   background-clip renders an INVISIBLE wordmark, which this studio has shipped before.
   Solid chrome is the base; transparency only inside the @supports that earns it. */
.tbar .mark{
  font-family:"Wire Display","Wire Mono",sans-serif;font-weight:900;font-size:15px;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
  color:var(--cr-3);
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .tbar .mark{
    background:linear-gradient(150deg,var(--cr-3),var(--cr-2) 42%,var(--cr-1) 72%,var(--cr-3));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.tbar .sep{color:var(--ink-4)}
.tbar .grow{margin-left:auto}
.tbar b{color:var(--ink-2);font-weight:500}

.led{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink-4);
     vertical-align:1px;margin-right:7px}
.led.live{background:var(--up);box-shadow:0 0 8px var(--up);animation:pulse 2.4s ease-in-out infinite}
.led.warn{background:var(--lime);box-shadow:0 0 8px var(--lime)}
.led.err{background:var(--dn)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}

/* ------------------------------------------------------------------ tape --- */
.tape{
  height:var(--tape);flex:none;background:var(--void);border-top:1px solid var(--line);
  display:flex;align-items:center;overflow:hidden;
}

.tape .badge{
  flex:none;height:100%;display:flex;align-items:center;gap:7px;padding:0 var(--s-4);
  border-right:1px solid var(--line);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--lime);background:var(--void);
}
.tape .win{flex:1;overflow:hidden;position:relative;height:100%;
           -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
           mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.tape .run{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;
           gap:var(--s-6);white-space:nowrap;will-change:transform;
           animation:tape-run 160s linear infinite}
@keyframes tape-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.tape .q{display:inline-flex;align-items:baseline;gap:8px;font-size:11.5px}
.tape .q i{font-style:normal;color:var(--ink-3);letter-spacing:.07em}
.tape .q b{font-weight:600;color:var(--ink-2)}
.tape .q b.up{color:var(--up)} .tape .q b.dn{color:var(--dn)}

/* ------------------------------------------------------------------ boot --- */
.boot{padding:var(--s-5) 0 var(--s-4);font-size:11px;color:var(--ink-3)}
/* A grid, not a wrapping flex row. As each item gained its status note the flex
   row re-wrapped, the boot block grew, and everything below it moved: measured as
   0.258 of a 0.267 CLS. Fixed tracks make the height independent of the text. */
.boot ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2) var(--s-5)}
.boot li{display:flex;align-items:center;gap:8px;letter-spacing:.05em;
         text-transform:uppercase;font-size:10px;min-width:0;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boot li .st{color:var(--ink-4);font-size:8px}
.boot li.ok{color:var(--ink-2)} .boot li.ok .st{color:var(--up)}
.boot li.bad .st{color:var(--dn)}
.boot li .note{font-style:normal;color:var(--ink-2);text-transform:none;letter-spacing:.02em}

/* ------------------------------------------------------------------ hero --- */
.hero{padding:var(--s-6) 0 var(--s-8)}
.hero .kick{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-6);
            font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.hero .kick s{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent);
              text-decoration:none}
.stamp{color:var(--lime);border:1px solid var(--lime-line);border-radius:999px;
       padding:4px 12px;font-size:9.5px;letter-spacing:.18em;background:var(--lime-wash)}

.hero h1{
  font-family:"Wire Display","Wire Mono",system-ui,sans-serif;
  font-weight:900;text-transform:uppercase;line-height:.82;letter-spacing:-.015em;
  font-size:clamp(56px,13.5vw,210px);margin:0 0 var(--s-6);color:var(--ink);
}
.hero h1 em{
  font-style:normal;color:var(--lime);
  text-shadow:0 0 60px var(--lime-glow),0 0 120px rgba(212,252,80,.16);
}
.hero .lede{max-width:64ch;font-size:14.5px;line-height:1.7;color:var(--ink-2);margin-bottom:var(--s-7)}
.hero .lede b{color:var(--ink);font-weight:600}
.hero .lede .hl{color:var(--lime)}

/* --- the feature card: our answer to pons's chart card ---------------------- */
.feat{padding:0;overflow:hidden}
.feat .fh{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
          padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line)}
.feat .fh .grow{margin-left:auto}
.feat .body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1px;background:var(--line)}
.feat .body>div{background:var(--s1);padding:var(--s-6) var(--s-5)}

.feat .who{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-2)}
.feat .sym{
  font-family:"Wire Display","Wire Mono",sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(40px,6vw,68px);line-height:.9;letter-spacing:-.01em;color:var(--ink);
}
.feat .nm{font-size:13px;color:var(--ink-2)}
.feat .meta{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.feat .px{display:flex;align-items:flex-end;gap:var(--s-3);margin:var(--s-5) 0 var(--s-2)}
.feat .px .v{font-size:clamp(38px,5.6vw,60px);font-weight:600;line-height:1;letter-spacing:-.025em;
             color:var(--lime);text-shadow:0 0 44px var(--lime-glow)}
.feat .px .u{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-bottom:8px}

.feat .quads{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5);margin-top:var(--s-5)}
.feat .quads .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.feat .quads .v{font-size:17px;color:var(--ink);margin-top:4px}

/* --- THE RANGE BAR. the signature. real data: low, mid, high ---------------- */
.range .ends{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-3);
             letter-spacing:.06em;margin-bottom:7px}
.range .track{
  position:relative;height:8px;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,69,58,.20),rgba(255,255,255,.05) 50%,rgba(48,209,88,.20));
  border:1px solid var(--line);
}
.range .fill{position:absolute;top:0;bottom:0;left:0;border-radius:999px;
             background:linear-gradient(90deg,transparent,var(--lime-wash))}
.range .pin{position:absolute;top:50%;width:3px;height:16px;border-radius:2px;background:var(--lime);
            transform:translate(-50%,-50%);
            box-shadow:0 0 12px var(--lime-glow),0 0 0 1.5px rgba(8,9,8,.85)}
.range.mini .track{height:5px} .range.mini .ends{font-size:9.5px;margin-bottom:4px;color:var(--ink-3)}
.range.mini .pin{width:3px;height:13px;box-shadow:0 0 9px var(--lime-glow),0 0 0 1.5px rgba(8,9,8,.9)}

/* --- route rail inside the feature card ------------------------------------ */
.rrail{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;font-size:10.5px;
       letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
       padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);background:var(--s2)}
.rrail .hop{color:var(--ink-4)}
.rrail .chip{border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;color:var(--ink-2)}
.rrail .chip.on{border-color:var(--lime-line);background:var(--lime-wash);color:var(--lime);font-weight:600}

/* ---------------------------------------------------------------- counts --- */
.counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-5)}
.counts>div{
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-4);
  box-shadow:inset 0 1px 0 var(--glass);
}
.counts .n{font-size:clamp(26px,3.8vw,40px);font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.counts>div:first-child .n{color:var(--lime);text-shadow:0 0 38px var(--lime-glow)}
.counts .k{margin-top:9px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* --------------------------------------------------------------- section --- */
.sec{padding:var(--s-8) 0}
.sec-h{display:flex;align-items:flex-end;gap:var(--s-4);margin-bottom:var(--s-5);flex-wrap:wrap}
.sec-h .no{font-size:9.5px;letter-spacing:.16em;color:var(--lime);border:1px solid var(--lime-line);
           border-radius:999px;padding:5px 11px;background:var(--lime-wash)}
.sec-h h2{
  font-family:"Wire Display","Wire Mono",system-ui,sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:-.008em;line-height:.88;
  font-size:clamp(32px,5.6vw,68px);color:var(--ink);
}
.sec-h p{font-size:13px;color:var(--ink-2);max-width:54ch;margin-left:auto;line-height:1.65}

/* ----------------------------------------------------------------- board --- */
.tools{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--s-3)}
.srch{
  position:relative;flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:var(--s-3);
  border:1px solid var(--line-2);border-radius:999px;padding:0 var(--s-4);height:38px;background:var(--s1);
}
/* The board auto-focuses this on entry, so the focus state is seen constantly.
   A full-width bright ring reads as an error state; keep it quiet. */
.srch:focus-within{border-color:rgba(212,252,80,.4);box-shadow:0 0 0 2px rgba(212,252,80,.07)}
.srch input{flex:1;min-width:0;border:0;background:none;height:100%;font-size:12.5px;letter-spacing:.03em}
.srch input::placeholder{color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px}
.srch .k{font-size:10px;color:var(--ink-3);letter-spacing:.1em}

.seg{display:flex;gap:4px;background:var(--s1);border:1px solid var(--line);border-radius:999px;padding:4px}
.seg button{
  padding:0 var(--s-4);height:30px;border-radius:999px;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);transition:color .12s,background .12s;
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--lime);color:#080908;font-weight:700}

.board{border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden;background:var(--s1);
       box-shadow:inset 0 1px 0 var(--glass),0 22px 50px -30px rgba(0,0,0,.9)}
.brow{
  display:grid;
  grid-template-columns:74px minmax(120px,1.5fr) minmax(84px,.8fr) minmax(190px,1.25fr) minmax(70px,.6fr) 88px;
  align-items:center;border-bottom:1px solid var(--line);font-size:12.5px;
}
.brow>*{padding:0 var(--s-4);min-width:0;display:flex;align-items:center}
.brow .r{justify-content:flex-end}

.bhead{
  position:sticky;top:0;z-index:20;background:var(--s3);
  border-bottom:1px solid var(--line-2);height:34px;
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);
}
.bhead button{display:flex;align-items:center;gap:5px;width:100%;height:100%;font:inherit;
              letter-spacing:inherit;text-transform:inherit;color:inherit}
.bhead .r button{justify-content:flex-end}
.bhead button:hover{color:var(--ink)}
.bhead button[data-dir]{color:var(--lime)}

.bbody .brow{height:46px;cursor:pointer;transition:background .12s linear}
.bbody .brow:nth-child(even){background:rgba(255,255,255,.012)}
.bbody .brow:hover{background:var(--s3)}
.bbody .brow[data-on]{background:var(--lime-wash);box-shadow:inset 3px 0 0 var(--lime)}
.bbody .sym{font-weight:700;letter-spacing:.05em;color:var(--ink);font-size:13px}
.bbody .nmcell{display:flex;align-items:center;gap:8px;min-width:0}
.bbody .nm{color:var(--ink-2);font-size:11.5px;white-space:nowrap;overflow:hidden;
           text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.bbody .px{color:var(--ink);font-size:13.5px}
.bbody .muted{color:var(--ink-4)}
/* NO FEED is real text a person reads, so it takes readable ink. --ink-4 is
   decorative only (rules, off dots) and measured 2.31:1 here. */
.nofeed{font-size:9.5px;letter-spacing:.12em;color:var(--ink-3)}
.rangecell{flex-direction:column;align-items:stretch;justify-content:center;gap:0;
           padding-top:8px;padding-bottom:8px}

.tag{font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;border:1px solid var(--line-2);
     border-radius:999px;padding:2px 7px;color:var(--ink-3);flex:none}
.tag.fund{border-color:var(--lime-line);color:var(--lime-2)}
.tag.major{border-color:rgba(160,168,160,.32);color:var(--cr-2)}

.flash-up{animation:fu .6s ease-out} .flash-dn{animation:fd .6s ease-out}
@keyframes fu{from{color:var(--up)}} @keyframes fd{from{color:var(--dn)}}

.pick{
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-2);
  border-radius:999px;padding:5px 11px;color:var(--ink-3);white-space:nowrap;background:none;
  cursor:pointer;font-family:inherit;transition:color .12s,background .12s,border-color .12s;
}
.bbody .brow:hover .pick{border-color:var(--lime-line);color:var(--lime)}
.bbody .brow[data-on] .pick{background:var(--lime);border-color:var(--lime);color:#080908;font-weight:700}

.bfoot{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;padding:var(--s-4);
       font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:var(--s2)}
.empty{padding:var(--s-8) var(--s-4);text-align:center;color:var(--ink-3);font-size:12px;
       letter-spacing:.08em;text-transform:uppercase}
.bbody:empty{min-height:calc(205 * 46px)}

/* ----------------------------------------------------------------- route --- */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-3)}
.step{
  background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--line);
  border-radius:var(--r-2);padding:var(--s-5) var(--s-4);min-height:190px;
  display:flex;flex-direction:column;gap:var(--s-2);box-shadow:inset 0 1px 0 var(--glass);
}
.step .n{font-size:9px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase}
.step .t{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:.01em;line-height:1.35}
.step .d{font-size:11.5px;color:var(--ink-3);line-height:1.6}
.step .v{margin-top:auto;font-size:22px;font-weight:600;color:var(--ink-2);letter-spacing:-.015em}
.step:first-child .v,.step.term .v{color:var(--lime);text-shadow:0 0 34px var(--lime-glow)}

.terms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:var(--s-3);margin-top:var(--s-6)}
.terms-grid.flush{margin-top:0}
.terms-grid>div{background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--line);
                border-radius:var(--r-2);padding:var(--s-5);box-shadow:inset 0 1px 0 var(--glass)}
.terms-grid dt{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.terms-grid dd{margin:0;font-size:15px;color:var(--ink)}
.terms-grid dd small{display:block;margin-top:8px;font-size:11.5px;color:var(--ink-3);line-height:1.6}

/* ------------------------------------------------------------------ desk --- */
.desk{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s-3)}
.desk>div{background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--line);
          border-radius:var(--r-3);padding:var(--s-6);box-shadow:inset 0 1px 0 var(--glass)}
.desk .stat{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
            padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.desk .stat:last-child{border-bottom:0}
.desk .stat .k{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.desk .stat .v{font-size:16px;color:var(--ink)}
.desk .stat .v.zero{color:var(--ink-3)}
.lab.pad-b{margin-bottom:var(--s-5)}
.desk-copy{font-size:13px;line-height:1.7;color:var(--ink-2);margin-bottom:var(--s-5)}
.pre{border:1px solid var(--lime-line);border-radius:var(--r-2);background:var(--lime-wash);
     padding:var(--s-5);font-size:12px;line-height:1.7;color:var(--ink-2)}
.pre b{color:var(--lime);font-weight:700;display:block;margin-bottom:7px;font-size:10px;
       letter-spacing:.16em;text-transform:uppercase}

/* ---------------------------------------------------------------- ledger --- */
.ledger{border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden;background:var(--s1);
        box-shadow:inset 0 1px 0 var(--glass)}
.lrow{display:grid;grid-template-columns:160px 1fr 110px 120px 140px;border-bottom:1px solid var(--line);font-size:12px}
.lrow:last-child{border-bottom:0}
.lrow>*{padding:var(--s-4);display:flex;align-items:center}
.lrow .r{justify-content:flex-end}
.lhead{background:var(--s3);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2)}

/* ------------------------------------------------------------------ foot --- */
.foot{padding:var(--s-8) 0;font-size:11.5px;color:var(--ink-3);line-height:1.8;
      border-top:1px solid var(--line);margin-top:var(--s-6)}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--s-6);margin-bottom:var(--s-6)}
.foot h3{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);
         margin-bottom:var(--s-3);font-weight:700}
.foot li{margin-bottom:6px}
.foot .legal{border-top:1px solid var(--line);padding-top:var(--s-5);max-width:96ch;color:var(--ink-2);
             font-size:11px;line-height:1.7}
.foot .legal strong{color:var(--ink-3);font-weight:700}

.ns-box{padding:40px 24px;background:#080908;color:#f1f4ef}
.ns-text{color:#d4fc50;font-size:13px;background:#080908}

/* ------------------------------------------------------------ responsive --- */
/* Column visibility and grid track count change TOGETHER at every breakpoint.
   Hiding a cell without dropping its track leaves an empty column and silently
   misaligns the whole board, which is the one thing a terminal cannot do. */
@media (max-width:1180px){
  /* 5 visible: sym name mid range pick */
  .brow{grid-template-columns:70px minmax(100px,1.4fr) minmax(80px,.8fr) minmax(150px,1.1fr) 84px}
  .brow .c-spread{display:none}
  .flow{grid-template-columns:repeat(2,1fr)}
  .desk{grid-template-columns:1fr}
  .feat .body{grid-template-columns:1fr}
}
@media (max-width:820px){
  .boot ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 4 visible: sym name mid pick */
  .brow{grid-template-columns:66px minmax(0,1fr) minmax(78px,.9fr) 80px}
  .brow .c-range{display:none}
  .counts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  body{font-size:12.5px}
  .wrap{padding:0 var(--s-4)}
  .flow{grid-template-columns:1fr}
  .lrow{grid-template-columns:1fr minmax(96px,auto)}
  .lrow .c-hold,.lrow .c-proof{display:none}
  .sec-h p{margin-left:0}
  .tbar .r-hide,.tbar .sep{display:none}
  .hero .kick s{display:none}
  .hero .kick{justify-content:space-between;gap:var(--s-2)}
  .bbody .nm .dimmer{display:none}
  .feat .quads{gap:var(--s-4)}
  .feat .quads .v{font-size:15px}
  .sec{padding:var(--s-7) 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
                       transition-duration:.001ms!important}
  .tape .run{animation:none;transform:none}
  .led.live{animation:none}
}

/* The range bar's position rides on a --pos custom property set through CSSOM,
   because a style="" attribute inside an innerHTML string is blocked by our
   `style-src 'self'` CSP. Default 0% so a row without a quote draws nothing odd. */
.range .fill{width:var(--pos,0%)}
.range .pin{left:var(--pos,0%)}

/* ============================================================================
   THE TERMINAL SHELL
   A fixed frame with an internally scrolling screen area. This is the concept:
   PONSTOCK is an instrument you operate, not a page you scroll. Title bar,
   function-key tabs, one screen at a time, a live tape, and a command line.
   ============================================================================ */

.shell{
  height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  opacity:0; transition:opacity .5s ease;
}
.shell.up{opacity:1}

/* ---------------------------------------------------------------- boot --- */
.bootscreen{
  position:fixed;inset:0;z-index:200;background:var(--void);
  display:grid;place-items:center;padding:var(--s-5);
  transition:opacity .5s ease;
}
.bootscreen.out{opacity:0;pointer-events:none}
.bootbox{width:min(460px,100%)}
.bootmark{
  font-family:"Wire Display","Wire Mono",sans-serif;font-weight:900;font-size:clamp(38px,9vw,60px);
  letter-spacing:.06em;text-transform:uppercase;line-height:1;color:var(--cr-3);
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .bootmark{
    background:linear-gradient(150deg,var(--cr-3),var(--cr-2) 42%,var(--cr-1) 72%,var(--cr-3));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.bootsub{margin-top:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.bootscreen ol{margin:var(--s-6) 0 var(--s-5);display:grid;gap:9px}
.bootscreen li{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.05em;
               text-transform:uppercase;color:var(--ink-3)}
.bootscreen li .st{color:var(--ink-4);font-size:8px}
.bootscreen li.ok{color:var(--ink-2)} .bootscreen li.ok .st{color:var(--up)}
.bootscreen li.bad .st{color:var(--dn)}
.bootscreen li .note{font-style:normal;color:var(--ink-3);text-transform:none;letter-spacing:.02em;
                     margin-left:auto;font-size:10.5px}
.bootbar{height:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
.bootbar i{display:block;height:100%;width:100%;background:var(--lime);box-shadow:0 0 10px var(--lime-glow);
           transform:scaleX(0);transform-origin:left;
           transition:transform .45s cubic-bezier(.3,.6,.2,1)}
.boothint{margin-top:var(--s-4);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* ---------------------------------------------------------------- tabs --- */
/* At 360 the six screens do not fit, so the strip scrolls. A fade on the trailing
   edge is the affordance that says so; without it TERMS is simply invisible. */
.tabs{
  flex:none;display:flex;gap:2px;padding:0 var(--s-4);
  background:var(--s1);border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent);
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  position:relative;display:flex;align-items:center;gap:8px;flex:none;scroll-snap-align:start;
  height:38px;padding:0 var(--s-4);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:2px solid transparent;transition:color .12s;
}
.tabs button i{font-style:normal;font-size:9px;letter-spacing:.06em;color:var(--ink-4);
               border:1px solid var(--line-2);border-radius:4px;padding:2px 4px}
.tabs button:hover{color:var(--ink-2)}
.tabs button[aria-selected="true"]{color:var(--lime);border-bottom-color:var(--lime)}
.tabs button[aria-selected="true"] i{color:var(--lime);border-color:var(--lime-line)}

/* --------------------------------------------------------------- stage --- */
.stage{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.screen{padding:var(--s-5) var(--s-5) var(--s-8);max-width:var(--maxw);margin:0 auto}
.screen[hidden]{display:none}

.scrhead{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  padding-bottom:var(--s-4);margin-bottom:var(--s-5);border-bottom:1px solid var(--line);
}
.scrhead .code{
  font-size:9.5px;letter-spacing:.16em;color:var(--lime);border:1px solid var(--lime-line);
  border-radius:999px;padding:5px 11px;background:var(--lime-wash);
}
.scrhead .ttl{
  font-family:"Wire Display","Wire Mono",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(22px,3.4vw,34px);letter-spacing:-.005em;line-height:1;color:var(--ink);
}
.scrhead .grow{margin-left:auto}
.scrhead .hint{font-size:11px;color:var(--ink-3);max-width:52ch}

/* ---------------------------------------------------------------- home --- */
.homegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:var(--s-6);align-items:start}
.homelead h1{
  font-family:"Wire Display","Wire Mono",system-ui,sans-serif;
  font-weight:900;text-transform:uppercase;line-height:.82;letter-spacing:-.015em;
  font-size:clamp(44px,6.4vw,94px);margin:0 0 var(--s-4);color:var(--ink);
}
.homelead h1 em{font-style:normal;color:var(--lime);
                text-shadow:0 0 60px var(--lime-glow),0 0 120px rgba(212,252,80,.16)}
.homelead .lede{max-width:60ch;font-size:13.5px;line-height:1.7;color:var(--ink-2);margin-bottom:var(--s-5)}
.homelead .lede b{color:var(--ink);font-weight:600}
.homelead .lede .hl{color:var(--lime)}
.counts{margin-top:0}
.feat .body{grid-template-columns:1fr}

/* ------------------------------------------------------------- command --- */
.cmdbar{
  flex:none;display:flex;align-items:center;gap:var(--s-4);
  height:44px;padding:0 var(--s-5);
  background:var(--s1);border-top:1px solid var(--line);
}
.cmdin{display:flex;align-items:center;gap:var(--s-3);flex:1;min-width:0;height:100%}
.cmdin .prompt{font-size:10px;letter-spacing:.18em;color:var(--lime);flex:none}
.cmdin input{
  flex:1;min-width:0;height:100%;border:0;background:none;
  font-size:13px;letter-spacing:.04em;color:var(--ink);
}
.cmdin input::placeholder{color:var(--ink-4);letter-spacing:.03em}
.cmdin .caret{display:none}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.cmdout{font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);text-align:right;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.cmdout.err{color:var(--dn)} .cmdout.ok{color:var(--lime)}

/* --------------------------------------------------------------- terms --- */
.legalwrap{margin-top:var(--s-6);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s-6)}
.legal{font-size:11.5px;line-height:1.75;color:var(--ink-2);max-width:92ch}
.legal strong{color:var(--ink);font-weight:700}
.srcs{display:flex;flex-direction:column;gap:9px;font-size:12px}
.srcs .lab{margin-bottom:4px}

/* the board fills its screen and scrolls with the stage */
.bfoot{border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-3) var(--r-3)}
.board{border-radius:var(--r-3) var(--r-3) 0 0}

@media (max-width:980px){
  .homegrid{grid-template-columns:1fr}
  .legalwrap{grid-template-columns:1fr}
}
@media (max-width:720px){
  .screen{padding:var(--s-4) var(--s-4) var(--s-7)}
  .tabs button{padding:0 var(--s-3);font-size:10px}
  .tabs button i{display:none}
  .cmdbar{height:40px;padding:0 var(--s-4);gap:var(--s-3)}
  .cmdout{display:none}
  .scrhead .hint{display:none}
  .bootscreen li .note{margin-left:0}
}

/* ---- movers: live, and clickable to change the payer ------------------------ */
.movers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);margin-top:var(--s-5)}
.movlist{margin-top:var(--s-3);display:grid;gap:1px}
.movlist button{
  width:100%;display:grid;grid-template-columns:56px 1fr 62px;align-items:center;gap:var(--s-3);
  padding:7px var(--s-3);border-radius:var(--r-1);text-align:left;
  font-size:12px;color:var(--ink-2);transition:background .12s,color .12s;
}
.movlist button:hover{background:var(--s2);color:var(--ink)}
.movlist .s{font-weight:700;color:var(--ink);letter-spacing:.04em}
.movlist .n{text-align:right;font-variant-numeric:tabular-nums}
.movlist .b{position:relative;height:4px;border-radius:999px;
            background:linear-gradient(90deg,rgba(255,69,58,.22),rgba(48,209,88,.22))}
.movlist .b i{position:absolute;top:50%;left:var(--pos,0%);width:3px;height:10px;border-radius:2px;
              background:var(--lime);transform:translate(-50%,-50%);
              box-shadow:0 0 8px var(--lime-glow),0 0 0 1.5px rgba(8,9,8,.9)}
@media (max-width:720px){.movers{grid-template-columns:1fr;gap:var(--s-4)}}