/* ============================================================================
   PONSTONK — 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. */
/* The global :focus-visible outline is a RECTANGLE. Inside a pill-shaped field it drew a
   hard lime box that ignored the radius, and the pill's own curve then peeked out past its
   corners as a stray bracket. The container carries the focus state instead; the input keeps
   its outline only where there is no container to show it. */
.srch:focus-within{border-color:rgba(212,252,80,.45);box-shadow:0 0 0 2px rgba(212,252,80,.09)}
.srch input:focus,.srch input:focus-visible,
.paypick input:focus,.paypick input:focus-visible{outline:none}
.srch input{flex:1;min-width:0;border:0;background:none;height:100%;font-size:12.5px;letter-spacing:.03em}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.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. */
/* The title bar carries chain, block and clock alongside the stamp and the wallet
   button. Between 720 and 980 that is more than fits, and the bar's overflow:hidden
   silently CLIPPED the wallet button instead of wrapping it. Measured: the button
   ended 49px past a 768px viewport. The readouts drop before the control does. */
@media (max-width:980px){
  .tbar .r-hide,.tbar .sep{display:none}
}

@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}
  .tbar{gap:var(--s-2);padding:0 var(--s-3)}
  .tbar .mark{font-size:13px;letter-spacing:.08em}
  .tbar .stamp{padding:3px 8px;font-size:8.5px;letter-spacing:.1em}
  .wbtn{padding:0 11px;font-size:9.5px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabs{padding:0 var(--s-2)}
  .tabs button{padding:0 11px;font-size:10px;letter-spacing:.09em}
  .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}
  .tbar #railState{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:
   PONSTONK 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 --- */
.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){
.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)}}

@media (max-width:720px){
}

/* ============================================================================
   THE LAUNCHPAD
   The product surface: a form on the left, a receipt that updates as you fill it
   on the right. The receipt is the honesty device: it shows the permanent terms
   while you are still able to change them.
   ============================================================================ */

.wbtn{
  flex:none;height:24px;padding:0 var(--s-3);border-radius:999px;
  border:1px solid var(--line-2);background:var(--s2);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  transition:color .12s,border-color .12s,background .12s;
}
.wbtn:hover{color:var(--ink);border-color:var(--lime-line)}
.wbtn.on{background:var(--lime-wash);border-color:var(--lime-line);color:var(--lime)}

.lgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
       gap:var(--s-5);align-items:start}
.lform{display:grid;gap:var(--s-3);min-width:0}

.lstep{
  border:1px solid var(--line);border-radius:var(--r-3);padding:var(--s-5);
  background:linear-gradient(180deg,var(--s2),var(--s1));box-shadow:inset 0 1px 0 var(--glass);
  min-width:0;
}
.lstep legend{
  display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-2);margin-left:-2px;
  font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.01em;
}
.lstep legend i{
  font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:700;background:var(--lime);color:#080908;
}
.fhelp{font-size:12px;color:var(--ink-3);line-height:1.65;margin:var(--s-3) 0 var(--s-4);max-width:74ch}

.frow{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.f{display:block;margin-bottom:var(--s-3);min-width:0}
.f span{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
        color:var(--ink-3);margin-bottom:6px}
.f input,.f textarea{
  width:100%;background:var(--void);border:1px solid var(--line-2);border-radius:var(--r-1);
  padding:10px 12px;font-size:13px;color:var(--ink);font-family:inherit;resize:vertical;
}
.f input:focus,.f textarea:focus{outline:none;border-color:rgba(212,252,80,.45);
                                 box-shadow:0 0 0 2px rgba(212,252,80,.08)}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-4)}
.fopt{margin-top:var(--s-2)}
.fopt summary{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
              cursor:pointer;padding:6px 0}
.fopt summary:hover{color:var(--ink-2)}
.fopt[open]{padding-top:var(--s-2)}

/* payer picker */
.paypick{position:relative}
.paypick input{
  width:100%;background:var(--void);border:1px solid var(--line-2);border-radius:999px;
  padding:11px 16px;font-size:13px;color:var(--ink);font-family:inherit;
}
.paypick:focus-within input{border-color:rgba(212,252,80,.45);
                            box-shadow:0 0 0 2px rgba(212,252,80,.08)}
.paypick input::placeholder{color:var(--ink-4)}
.payresults{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:var(--s3);border:1px solid var(--line-2);border-radius:var(--r-2);
  overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,0,.95);
}
.pr{display:grid;grid-template-columns:74px 1fr auto;gap:var(--s-3);align-items:center;
    width:100%;padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
.pr:last-child{border-bottom:0}
.pr:hover{background:var(--lime-wash)}
.pr .s{font-weight:700;color:var(--ink);letter-spacing:.04em;font-size:12.5px}
.pr .n{color:var(--ink-2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr .k{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pr-none{padding:14px;font-size:12px;color:var(--ink-3)}

.paysel{margin-top:var(--s-4)}
.pay-empty{font-size:12px;color:var(--ink-4);border:1px dashed var(--line-2);
           border-radius:var(--r-2);padding:var(--s-5);text-align:center}
.pay-card{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
          border:1px solid var(--lime-line);background:var(--lime-wash);
          border-radius:var(--r-2);padding:var(--s-4) var(--s-5)}
.pc-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-sym{font-family:"Wire Display","Wire Mono",sans-serif;font-weight:900;font-size:30px;
        line-height:1;letter-spacing:-.01em;color:var(--ink);text-transform:uppercase}
.pc-nm{font-size:12.5px;color:var(--ink-2)}
.pc-meta{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pc-r{margin-left:auto;text-align:right}
.pc-px{display:block;font-size:24px;font-weight:600;color:var(--lime);letter-spacing:-.02em}
.pc-u{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pc-x{flex:none;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
      border:1px solid var(--line-2);border-radius:999px;padding:6px 12px}
.pc-x:hover{color:var(--ink);border-color:var(--ink-3)}

/* preflight */
.preflight{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
           border-radius:var(--r-2);overflow:hidden}
.preflight li{display:grid;grid-template-columns:22px 1fr auto;gap:var(--s-3);align-items:center;
              background:var(--s1);padding:11px var(--s-4);font-size:12.5px;color:var(--ink-2)}
.preflight i{font-style:normal;font-size:9px;color:var(--ink-4);text-align:center}
.preflight li.ok i{color:var(--up)} .preflight li.ok{color:var(--ink)}
.preflight li.bad i{color:var(--dn)}
.preflight em{font-style:normal;font-size:11px;color:var(--ink-3);text-align:right}
.preflight li.bad em{color:var(--dn)}

/* receipt */
.receipt{position:sticky;top:0;padding:var(--s-5);display:grid;gap:var(--s-4)}
.rhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.rready{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.rtok{display:flex;align-items:center;gap:var(--s-3)}
.rlogo{width:44px;height:44px;border-radius:12px;background:var(--s3);border:1px solid var(--line-2);
       background-size:cover;background-position:center;flex:none}
.rlogo.has{border-color:var(--lime-line)}
.rid b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.rid i{font-style:normal;font-size:11.5px;color:var(--ink-3);letter-spacing:.06em}
.rlist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
       border-radius:var(--r-2);overflow:hidden}
.rlist>div{display:flex;justify-content:space-between;gap:var(--s-3);align-items:baseline;
           background:var(--s1);padding:9px var(--s-4)}
.rlist dt{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.rlist dd{margin:0;font-size:12.5px;color:var(--ink);text-align:right}
.rlist dd.warn{color:var(--lime)}
.cta{
  width:100%;height:46px;border-radius:999px;background:var(--lime);color:#080908;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:opacity .12s,transform .06s;
}
.cta:hover:not(:disabled){opacity:.9}
.cta:active:not(:disabled){transform:translateY(1px)}
.cta:disabled{background:var(--s3);color:var(--ink-4);cursor:not-allowed}
.rnote{font-size:11px;line-height:1.6;color:var(--ink-3)}
.rnote.bad{color:var(--dn)}

/* explore */
.explore{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s-3)}
/* an empty state inside a grid lands in the FIRST CELL and reads as broken copy;
   it has to span every column it is standing in for. */
.explore .empty{grid-column:1 / -1;padding:var(--s-6) var(--s-4)}
.ecard{display:block;border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-4);
       background:linear-gradient(180deg,var(--s2),var(--s1));box-shadow:inset 0 1px 0 var(--glass);
       text-decoration:none;transition:border-color .12s}
.ecard:hover{border-color:var(--lime-line);text-decoration:none}
.e-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
.e-h b{font-size:15px;color:var(--ink)}
.e-pays{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.e-n{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.e-s{display:flex;gap:var(--s-5);margin-top:var(--s-3)}
.e-s dt{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.e-s dd{margin:0;font-size:13px;color:var(--ink)}
.expmkt{margin-top:var(--s-4);display:grid;gap:var(--s-5)}

/* the pitch, now on the how-it-works screen */
.pitch{margin-bottom:var(--s-7)}
.pitch 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(40px,6vw,86px);margin:0 0 var(--s-4);color:var(--ink)}
.pitch h1 em{font-style:normal;color:var(--lime);
             text-shadow:0 0 60px var(--lime-glow),0 0 120px rgba(212,252,80,.16)}
.pitch .lede{max-width:66ch;font-size:13.5px;line-height:1.7;color:var(--ink-2);margin-bottom:var(--s-5)}
.pitch .lede b{color:var(--ink);font-weight:600}
.pitch .lede .hl{color:var(--lime)}
.deskled{margin:var(--s-6) 0 var(--s-3)}

@media (max-width:1080px){
  .lgrid{grid-template-columns:1fr}
  .receipt{position:static}
}
@media (max-width:720px){
  .frow{grid-template-columns:1fr}
  .pc-r{margin-left:0;text-align:left;width:100%}
  .preflight li{grid-template-columns:20px 1fr;row-gap:2px}
  .preflight em{grid-column:2;text-align:left}
}