:root{
    --bg:#0c0c0a; --panel:#141410; --panel2:#191914; --line:#2b2b27;
    --ink:#e8e6df; --mute:#8a877d; --gold:#178f5c; --gold-dim:#0f5a3a;
    --up:#46c07a; --down:#e5484d;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --shadow:0 12px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);
    /* the text under a big headline: every section's lead is the hero's opening paragraph size (owner 2026-10-23:
       "can the fonts below the larger headlines be this size?") — change it here and they all move together */
    --subfs:21px; --sublh:1.65;   /* owner 2026-10-26: larger paragraphs everywhere but the "nothing like it" section */
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);
    -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;position:relative;}
  body::before{content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);
    width:900px;height:520px;border-radius:50%;pointer-events:none;
    background:radial-gradient(closest-side,rgba(23,143,92,.07),transparent 70%);}
  a{color:inherit;}
  .wrap{max-width:1140px;margin:0 auto;padding:0 22px;position:relative;}
  nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0;}
  .logo{font-weight:700;font-size:15px;letter-spacing:.06em;}
  .logo b{color:inherit;font-weight:inherit;}   /* one font, one colour (owner 2026-10-27, Robinhood-style wordmark) */
  .navlinks{display:flex;gap:10px;align-items:center;}
  .btn{display:inline-block;background:transparent;border:1px solid var(--line);color:var(--ink);
    padding:10px 18px;border-radius:9px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;
    cursor:pointer;text-decoration:none;transition:border-color .12s,color .12s,transform .12s,box-shadow .12s;}
  .btn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.4);}
  .btn.act{border-color:var(--gold);color:var(--gold);}
  .btn.solid{background:var(--gold);border-color:var(--gold);color:#0c0c0a;font-weight:700;box-shadow:0 6px 22px rgba(23,143,92,.22);}
  .btn.solid:hover{filter:brightness(1.08);color:#0c0c0a;}
  .btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  /* the hero and every section intro are CENTERED so wide screens compose
     symmetrically instead of hugging the left rail (owner 2026-09-07) */
  .hero{padding:66px 0 26px;text-align:center;}
  .kr{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
  h1{font-size:clamp(30px,5.2vw,54px);line-height:1.08;margin:0 0 20px;font-weight:700;letter-spacing:-.02em;text-wrap:balance;}
  h1 em,h2 em{font-style:normal;color:var(--gold);}
  .sub{font-size:15.5px;line-height:1.8;color:var(--mute);max-width:74ch;margin:0 auto 30px;}
  .sub b,.lead b{color:var(--ink);font-weight:600;}
  .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;}
  .ctanote{font-size:10.5px;color:var(--mute);letter-spacing:.04em;}
  .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line);text-align:center;}
  @media(max-width:720px){.strip{grid-template-columns:repeat(2,1fr);}}
  .strip .s b{display:block;font-size:19px;color:var(--gold);font-weight:700;}
  .strip .s span{font-size:10.5px;color:var(--mute);letter-spacing:.05em;line-height:1.5;display:block;margin-top:3px;}
  section{padding:52px 0;}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:var(--shadow);}
  h2{font-size:clamp(22px,3.4vw,34px);line-height:1.15;margin:0 0 14px;font-weight:700;letter-spacing:-.015em;text-wrap:balance;}
  h3{font-size:15px;font-weight:700;margin:0 0 8px;}
  .lead{font-size:var(--subfs);line-height:var(--sublh);color:var(--mute);max-width:64ch;margin:0 0 20px;}
  /* section intros and captions run the FULL column, left-aligned — only the hero
     and the closing CTA stay centered (owner 2026-09-08: "fill the space") */
  section>.lead{max-width:none;margin:0 0 26px;}
  section>.cap{max-width:none;margin:16px 0 0;}
  .checks{list-style:none;margin:16px 0 0;padding:0;}
  .checks li{padding:7px 0 7px 30px;position:relative;font-size:13.5px;line-height:1.6;}
  .checks li::before{content:"✓";position:absolute;left:2px;color:var(--gold);font-weight:700;}
  .checks li b{color:var(--gold);font-weight:600;}
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  @media(max-width:860px){.duo{grid-template-columns:1fr;}}
  .sample{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);
    border-radius:5px;padding:3px 8px;display:inline-block;margin-bottom:14px;}
  .cap{font-size:12px;color:var(--mute);line-height:1.75;margin:14px 2px 0;}
  .cap b{color:var(--ink);}

  /* ================= demo cockpit ================= */
  .cockpit{background:var(--panel);border:1px solid var(--gold-dim);border-radius:14px;padding:22px;
    box-shadow:0 0 90px rgba(23,143,92,.06),var(--shadow);}
  /* app-style ticker bar */
  .tkbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
  .tkleft{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .tklbl{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);}
  .tkbox{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 16px;
    font-size:16px;font-weight:700;letter-spacing:.1em;color:var(--gold);}
  .tkera{font-size:10.5px;color:var(--mute);border:1px solid var(--line);border-radius:6px;padding:5px 10px;letter-spacing:.05em;}
  .tkpx{text-align:right;}
  .tkpx b{display:block;font-size:26px;font-weight:700;letter-spacing:-.01em;}
  .tkpx span{font-size:11.5px;font-weight:700;}
  /* symmetric HUD tiles */
  .hud{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
  @media(max-width:640px){.hud{grid-template-columns:repeat(2,1fr);}}
  .hud .h{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:10px 12px;}
  .hud .h span{display:block;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:4px;}
  .hud .h b{font-weight:700;font-size:15px;white-space:nowrap;}
  #dChart{width:100%;height:290px;display:block;background:#0e0e0b;border:1px solid var(--line);border-radius:9px;}
  /* section labels inside the cockpit, app-style */
  .seclab{display:flex;justify-content:space-between;align-items:baseline;margin:16px 2px 8px;}
  .seclab b{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}
  .seclab span{font-size:9.5px;color:var(--mute);letter-spacing:.05em;}
  /* chain, app-style */
  .chain{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel2);}
  .chhd{display:grid;grid-template-columns:1fr 84px 84px 64px;gap:8px;padding:9px 14px;
    font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line);}
  .chrow{display:grid;grid-template-columns:1fr 84px 84px 64px;gap:8px;padding:10px 14px;font-size:12.5px;
    border-bottom:1px solid rgba(35,35,39,.6);cursor:pointer;background:transparent;
    border-left:2px solid transparent;transition:background .1s;}
  .chrow:last-child{border-bottom:0;}
  .chrow:hover{background:rgba(23,143,92,.05);}
  .chrow.on{background:rgba(23,143,92,.10);border-left-color:var(--gold);}
  .chrow .cn{font-weight:700;}
  .chrow.on .cn{color:var(--gold);}
  .chrow .cbid{color:var(--down);text-align:right;}
  .chrow .cask{color:var(--up);text-align:right;}
  .chrow .civ{color:var(--mute);text-align:right;}
  .chhd span:nth-child(2),.chhd span:nth-child(3),.chhd span:nth-child(4){text-align:right;}
  @media(max-width:600px){
    .chhd,.chrow{grid-template-columns:1fr 60px 60px 44px;gap:6px;padding:9px 10px;font-size:11.5px;}
    .chhd{font-size:8px;}
  }
  /* position card, app-style */
  #posWrap{display:none;}
  .poscard{display:grid;grid-template-columns:4px 1fr auto auto;gap:12px;align-items:center;
    background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:11px 14px 11px 10px;}
  .poscard .edge{width:4px;height:100%;min-height:34px;border-radius:2px;background:var(--gold);}
  .poscard .nm{font-weight:700;font-size:13px;}
  .poscard .nm span{display:block;font-weight:400;font-size:10px;color:var(--mute);margin-top:3px;}
  .poscard .mk{text-align:right;font-size:11px;color:var(--mute);}
  .poscard .mk b{display:block;color:var(--ink);font-size:13px;margin-bottom:2px;}
  .poscard .pl{text-align:right;font-weight:700;font-size:15px;}
  .poscard .pl span{display:block;font-weight:400;font-size:10px;margin-top:2px;}
  .ctl{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;}
  .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel2);}
  .qty button{background:transparent;border:0;color:var(--ink);font-family:var(--mono);font-size:15px;padding:8px 13px;cursor:pointer;}
  .qty b{min-width:34px;text-align:center;font-size:13px;}
  .btn.buy{border-color:var(--up);color:var(--up);font-weight:700;}
  .btn.sell{border-color:var(--down);color:var(--down);font-weight:700;}
  .dmsg{font-size:12px;color:var(--mute);margin-top:12px;line-height:1.7;min-height:20px;}
  .dmsg b{color:var(--gold);}
  .dmsg .up{color:var(--up);} .dmsg .dn{color:var(--down);}
  #reveal{display:none;margin-top:18px;border-top:1px solid var(--line);padding-top:18px;}
  .rvttl{font-size:17px;font-weight:700;margin-bottom:6px;}
  .rvttl b{color:var(--gold);}
  .rvsub{font-size:12px;color:var(--mute);line-height:1.7;margin-bottom:16px;max-width:70ch;}
  .wifs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  @media(max-width:760px){.wifs{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:460px){.wifs{grid-template-columns:1fr;}}
  .wif{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:14px;box-shadow:0 4px 14px rgba(0,0,0,.3);}
  .wif .k{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px;}
  .wif .v{font-size:17px;font-weight:700;}
  .wif .n{font-size:10.5px;color:var(--mute);margin-top:5px;line-height:1.6;}
  .fineprint{font-size:10px;color:var(--mute);margin-top:16px;line-height:1.7;}

  /* ================= mock app panels ================= */
  .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;}
  @media(max-width:680px){.tiles{grid-template-columns:repeat(2,1fr);}}
  .tile{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:16px;box-shadow:0 4px 14px rgba(0,0,0,.3);}
  .tile .k{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:8px;}
  .tile .v{font-size:21px;font-weight:700;line-height:1;}
  .tile .n{font-size:10px;color:var(--mute);margin-top:7px;line-height:1.5;}
  .mockduo{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  @media(max-width:760px){.mockduo{grid-template-columns:1fr;}}
  .mock{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:14px;box-shadow:0 4px 14px rgba(0,0,0,.3);}
  .mock h4{margin:0 0 10px;font-size:13px;font-weight:700;}
  .mock h4 span{font-weight:400;font-size:10px;color:var(--mute);margin-left:8px;}
  .mock canvas{width:100%;height:150px;display:block;}
  .takeaway{font-size:11.5px;color:var(--mute);margin-top:10px;line-height:1.7;}
  .takeaway b{color:var(--ink);}
  .auttl{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;margin-bottom:10px;flex-wrap:wrap;gap:6px;}
  .auttl .pl{color:var(--down);}
  .abar{display:grid;grid-template-columns:150px 1fr 74px;gap:10px;align-items:center;font-size:10.5px;color:var(--mute);margin:6px 0;}
  @media(max-width:560px){.abar{grid-template-columns:110px 1fr 66px;}}
  .abar .tr{height:14px;background:#101010;border:1px solid var(--line);border-radius:4px;position:relative;overflow:hidden;}
  .abar .fl{position:absolute;top:0;bottom:0;border-radius:3px;}
  .abar .am{text-align:right;font-weight:700;}
  .lbm{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel2);box-shadow:var(--shadow);}
  .lbmr{display:grid;grid-template-columns:34px 1fr 92px 96px 56px 62px;gap:10px;align-items:center;
    padding:10px 14px;font-size:12px;border-bottom:1px solid rgba(35,35,39,.6);}
  .lbmr:last-child{border-bottom:0;}
  .lbmr.hd{font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);}
  .lbmr .r{color:var(--mute);}
  .lbmr .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lbmr .sp{display:flex;justify-content:flex-end;}
  .lbmr .pl,.lbmr .wr,.lbmr .dd{text-align:right;}
  .lbmr .wr{color:var(--mute);}
  .lbmr .dd{color:var(--down);}
  .lbmr.me{background:rgba(217,180,58,.07);}
  .lbmr.me .nm em{font-style:normal;color:var(--gold);font-size:9px;letter-spacing:.12em;margin-left:6px;}
  @media(max-width:640px){.lbm{overflow-x:auto;}.lbmr{min-width:520px;}}
  .logo{display:inline-flex;align-items:center;gap:8px;}
  .logo .klogo{color:var(--ink);flex:none;}

  /* ================= pricing ================= */
  .billing{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:24px;}
  .billing button{background:transparent;border:0;color:var(--mute);font-family:var(--mono);font-size:12px;letter-spacing:.05em;padding:9px 16px;cursor:pointer;}
  .billing button[aria-pressed="true"]{background:var(--gold);color:#0c0c0a;font-weight:700;}
  .billing button span{color:var(--up);margin-left:6px;font-size:10.5px;}
  .billing button[aria-pressed="true"] span{color:#0c0c0a;}
  .billing button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
  /* four compact cards in one row at every width (owner 2026-10-20, "fit like TrendSpider") */
  .tiers-wrap{padding-top:12px;}
  .tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:stretch;}
  @media(max-width:560px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr));}}
  .tier{padding:18px 14px;gap:10px;}
  .tname{font-size:9px;}
  .tprice b{font-size:28px;}
  .tprice span{font-size:9.5px;margin-top:5px;}
  .twho{font-size:11px;min-height:0;line-height:1.55;}
  .tier .btn{padding:8px 8px;font-size:10.5px;letter-spacing:.02em;}
  .ribbon{left:14px;font-size:8px;padding:3px 8px;}
  .feat li{grid-template-columns:14px 1fr;gap:7px;padding:6px 0;font-size:11px;line-height:1.4;}
  .feat li::before{font-size:11px;line-height:1.4;}
  .tier .feat li.y::before{content:"✓";color:var(--up);}
  .tier .feat li.n::before{content:"✕";color:var(--down);opacity:1;}
  .tier .feat li span{margin:-3px 0 0 10px;}
  .feat li b{display:block;}
  .feat li.n b{color:var(--mute);}
  .feat li span{display:block;grid-column:2;font-size:10px;margin:-3px 0 0 10px;color:var(--mute);line-height:1.45;}
  .feat li.n span{opacity:.75;}
  .tprice s{font-size:14px;color:var(--mute);text-decoration:line-through;margin-right:6px;font-weight:400;}
  .tier .tprice b{display:inline;font-size:28px;}
  .tier .tprice small{font-size:10px;color:var(--mute);margin-left:3px;}
  .tier .tprice .save{margin-top:4px;}
  .save{font-size:10.5px;color:var(--up);font-weight:700;letter-spacing:.02em;}
  .tprice span{min-height:0;}
  .reload{font-size:10px;padding:8px 10px;line-height:1.5;}
  .fn{color:var(--mute);font-weight:400;font-size:.75em;line-height:0;margin-left:2px;opacity:.8;}
  .cap .fn{margin:0 4px 0 0;}
  .tier.max{border-color:var(--gold-dim);}
  .tier.max .tname{color:var(--gold);}
  .reload{margin-top:2px;border:1px solid var(--gold-dim);border-radius:9px;padding:10px 12px;font-size:11px;line-height:1.6;color:var(--mute);background:rgba(23,143,92,.05);}
  .reload b{color:var(--ink);font-weight:600;}
  .tier{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 24px;box-shadow:var(--shadow);
    position:relative;display:flex;flex-direction:column;gap:14px;}
  .tier.hl{border-color:var(--gold);box-shadow:0 0 90px rgba(23,143,92,.06),var(--shadow);}
  .ribbon{position:absolute;top:-11px;left:22px;background:var(--gold);color:#0c0c0a;font-size:9px;letter-spacing:.16em;
    text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:9px;}
  .tname{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);}
  .tier.hl .tname{color:var(--gold);}
  .tprice b{font-size:38px;font-weight:700;letter-spacing:-.02em;line-height:1;display:block;}
  .tprice span{display:block;font-size:10.5px;color:var(--mute);letter-spacing:.05em;margin-top:7px;min-height:14px;}
  .twho{font-size:12.5px;color:var(--mute);line-height:1.7;margin:0;min-height:42px;}
  .tier .btn{text-align:center;}
  .feat{list-style:none;margin:2px 0 0;padding:0;}
  .feat li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;padding:7px 0;font-size:12.5px;line-height:1.5;
    border-bottom:1px solid rgba(43,43,39,.6);}
  .feat li:last-child{border-bottom:0;}
  .feat li::before{font-weight:700;font-size:12px;line-height:1.5;text-align:center;}
  .feat li.y::before{content:"✓";color:var(--gold);}
  .feat li.n::before{content:"✕";color:var(--mute);opacity:.7;}
  .feat li b{font-weight:600;color:var(--ink);display:block;}
  .feat li span{display:block;grid-column:2;font-size:11px;color:var(--mute);margin-top:-4px;}
  .feat li.n b{color:var(--mute);font-weight:400;}
  .tinh{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);font-size:10.5px;color:var(--mute);letter-spacing:.04em;}
  /* ================= testimonials ================= */
  .quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  @media(max-width:560px){.quotes{grid-template-columns:1fr;}}
  .quote{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;}
  .quote .mark{font-size:24px;line-height:.6;color:var(--gold);font-weight:700;}
  .quote p{margin:0;font-size:11px;line-height:1.55;}
  .quote .who{margin-top:auto;padding-top:8px;border-top:1px dashed var(--line);font-size:9.5px;color:var(--mute);letter-spacing:.04em;}
  .quote .who b{display:block;color:var(--ink);font-weight:600;font-size:10.5px;letter-spacing:0;}
  .quote .num{color:var(--gold);font-weight:700;}
  footer{border-top:1px solid var(--line);padding:36px 0 46px;margin-top:26px;}
  .foot{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}   /* everything below the wordmark (owner 2026-10-28) */
  .legal{font-size:10px;color:var(--mute);line-height:1.8;margin-top:18px;}

  /* ================= 2026-10-20 restyle: sans reading text, sticky bar, split hero, pill buttons, floating cards (owner: "a bit like unusualwhales.com/predictions") ================= */
  :root{--sans:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;--card:linear-gradient(180deg,#151511 0%,#101010 100%);}
  body{font-family:var(--sans);}
  h1,h2,h3,h4,.lead,.sub,.cap,.ctanote,.twho,.feat li,.checks li,.quote p,.quote .who,.takeaway,.rvsub,.dmsg,.fineprint,.legal{font-family:var(--sans);}
  h1{letter-spacing:-.03em;font-weight:800;}
  h2{letter-spacing:-.02em;font-weight:800;}
  .kr,.tname,.tklbl,.tkera,.seclab b,.seclab span,.sample,.tile .k,.wif .k,.hud .h span,.chhd,.ribbon,.badge,.pill{font-family:var(--mono);}
  .cockpit,.cockpit *{font-family:var(--mono);}
  .tprice,.tprice *,.strip .s b,.stat b,.tile .v,.wif .v,.lbm,.lbm *,.mock h4,.abar,.auttl,.num,.hc,.hc *{font-family:var(--mono);}
  .btn{border-radius:999px;padding:11px 20px;font-family:var(--sans);font-weight:600;letter-spacing:0;font-size:13px;}
  .btn.solid{box-shadow:0 8px 24px rgba(23,143,92,.25);}
  .card,.tier,.quote,.cockpit{background:var(--card);}
  .card,.tier,.quote{border-radius:16px;}
  /* sticky bar */
  nav{position:sticky;top:0;z-index:50;margin:0 -22px;padding:12px 22px;background:rgba(12,12,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
  .navlinks{gap:8px;}
  .navlinks .lnk{font-family:var(--sans);font-size:13px;color:var(--mute);text-decoration:none;padding:8px 12px;border-radius:999px;transition:color .12s,background .12s;}
  .navlinks .lnk:hover{color:var(--ink);background:rgba(255,255,255,.04);}
  .navlinks .btn{padding:8px 16px;font-size:12.5px;}
  @media(max-width:720px){.navlinks .lnk{display:none;}}
  /* split hero */
  .hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;text-align:left;padding:56px 0 30px;}
  @media(max-width:900px){.hero{grid-template-columns:1fr;gap:28px;}}
  .hero h1{font-size:clamp(36px,4.8vw,60px);margin:0 0 30px;}
  .hero .sub{margin:0 0 26px;font-size:var(--subfs);line-height:var(--sublh);}
  .hero .cta{justify-content:flex-start;}
  .hero .cta .btn{padding:15px 32px;font-size:16px;}
  .hero .ctanote{font-size:12px;}
  .hero .ctanote{flex-basis:100%;}
  .pill{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-dim);border-radius:999px;padding:6px 12px;margin-bottom:22px;background:rgba(23,143,92,.06);}
  .pill i{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin-top:34px;}
  .stat b{display:block;font-size:24px;font-weight:700;letter-spacing:-.01em;}
  .stat span{display:block;font-size:12px;color:var(--mute);margin-top:4px;font-family:var(--sans);}
  /* floating cards on the right */
  .show{position:relative;display:grid;gap:14px;align-content:center;padding:10px 0;}
  .show::before{content:"";position:absolute;inset:-20px;border-radius:30px;background:radial-gradient(closest-side,rgba(23,143,92,.14),transparent 72%);pointer-events:none;}
  .hc{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);font-size:12px;}
  .hc.a{margin-right:36px;transform:rotate(-1.2deg);}
  .hc.b{margin-left:36px;transform:rotate(1deg);border-color:var(--gold-dim);}
  .hc.c{margin-right:18px;}
  @media(max-width:900px){.hc.a,.hc.b,.hc.c{margin:0;transform:none;}}
  .hc .t{display:flex;justify-content:space-between;align-items:center;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px;}
  .hc .t b{color:var(--gold);letter-spacing:.14em;}
  .hc .r{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:6px 0;border-top:1px solid rgba(43,43,39,.7);}
  .hc .r:first-of-type{border-top:0;}
  .hc .r.on{background:rgba(23,143,92,.08);margin:0 -8px;padding:6px 8px;border-radius:6px;}
  .hc .r span:nth-child(2),.hc .r span:nth-child(3){text-align:right;}
  .hc .up{color:var(--up);} .hc .dn{color:var(--down);} .hc .hid{background:var(--line);border-radius:4px;padding:0 6px;letter-spacing:.2em;}
  .hc .pl{display:grid;grid-template-columns:1fr auto;gap:6px 14px;}
  .hc .pl .net{border-top:1px solid var(--line);padding-top:6px;font-weight:700;}
  .hc .bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:8px;}
  .hc .bar i{display:block;height:100%;width:62%;background:var(--gold);}
  .showcap{font-size:10px;color:var(--faint);text-align:right;}
  /* centered section intros + feature trio */
  .center{text-align:center;}
  .center .lead{max-width:62ch;margin-left:auto;margin-right:auto;}
  .trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px;}
  @media(max-width:760px){.trio{grid-template-columns:1fr;}}
  .trio .card{padding:24px;}
  .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(23,143,92,.1);border:1px solid var(--gold-dim);color:var(--gold);font-family:var(--mono);font-weight:700;font-size:16px;margin-bottom:16px;}
  .trio h3{font-size:16px;margin-bottom:8px;}
  .trio p{margin:0;font-size:13.5px;line-height:1.7;color:var(--mute);}
  section{padding:60px 0;}

  /* ================= 2026-10-20 type + finish: Bricolage Grotesque display, Geist text, Geist Mono numbers; hairlines, gradient gold, inner highlights ================= */
  :root{
    --sans:"Geist","Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
    --disp:"Bricolage Grotesque","Geist",-apple-system,Helvetica,Arial,sans-serif;
    --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
    --card:linear-gradient(180deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.012) 100%);
    --gold-grad:linear-gradient(100deg,#2fb876 0%,#178f5c 45%,#0e6a43 100%);
  }
  body{font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;}
  /* the gold glow: a 1100 x 640 ellipse centred on the page, drifting 88px right and 40px down. Its box spans the page less the
     drift (the ellipse sits 44px right of the box's centre), so the box never passes the page's right edge — a centred 1100px
     box did on any window under ~1280px wide, and the page scrolled sideways (2026-10-23) */
  body::before{left:0;width:calc(100% - 88px);height:640px;top:-300px;transform:none;border-radius:0;background:radial-gradient(550px 320px at calc(50% + 44px) 50%,rgba(23,143,92,.10),transparent 70%) no-repeat;}
  h1,h2,h3,.quote .mark{font-family:var(--disp);}
  h1{font-weight:800;letter-spacing:-.035em;line-height:1.02;font-variation-settings:"opsz" 96;}
  h2{font-weight:700;letter-spacing:-.025em;font-variation-settings:"opsz" 60;}
  h3{font-weight:600;letter-spacing:-.01em;}
  h1 em,h2 em{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero .sub,.lead,.twho,.trio p,.quote p{font-weight:400;color:#a7a49a;}
  .sub b,.lead b{font-weight:600;}
  /* hairline cards with a top inner highlight */
  .card,.tier,.quote,.cockpit,.hc,.lbm,.mock,.tile,.wif{background:var(--card);border:1px solid var(--line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 50px rgba(0,0,0,.45);}
  .tier.hl,.hc.b,.cockpit{border-color:rgba(23,143,92,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(23,143,92,.12),0 18px 60px rgba(0,0,0,.5),0 0 80px rgba(23,143,92,.06);}
  /* buttons */
  .btn{border:1px solid var(--line2);background:rgba(255,255,255,.02);font-weight:500;letter-spacing:-.005em;}
  .btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22);color:var(--ink);}
  .btn.solid{background:var(--gold-grad);border-color:transparent;color:#0c0c0a;font-weight:600;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 28px rgba(23,143,92,.22);}
  .btn.solid:hover{filter:brightness(1.06);color:#0c0c0a;}
  .btn.buy,.btn.sell{background:transparent;}
  /* labels + numbers */
  .pill,.kr,.tname,.tklbl,.tkera,.seclab b,.seclab span,.sample,.tile .k,.wif .k,.hud .h span,.chhd,.ribbon,.hc .t{font-family:var(--mono);font-weight:500;letter-spacing:.16em;}
  .pill{border-color:rgba(23,143,92,.35);background:rgba(23,143,92,.07);}
  .stat b,.tprice b,.tprice s,.tile .v,.wif .v,.tkpx b{font-family:var(--mono);font-weight:500;letter-spacing:-.02em;}
  .tprice b{font-weight:600;}
  .save{font-family:var(--mono);font-weight:500;}
  .feat li b{font-weight:500;color:var(--ink);}
  .feat li span{color:#8f8c82;}
  .feat li{border-bottom:1px solid var(--line);}
  .logo{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;font-size:18px;text-decoration:none;color:#fff;cursor:pointer;}
  .logo b{background:none;color:inherit;font-weight:inherit;}
  .logo .klogo{color:#fff;width:24px;height:20px;stroke-width:2;}
  nav{background:rgba(12,12,10,.72);}
  .navlinks .lnk{font-weight:500;}
  .ico{background:rgba(23,143,92,.08);border-color:rgba(23,143,92,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
  .strip{border-top-color:var(--line);}
  footer{border-top-color:var(--line);}
  .checks li::before{color:var(--gold);}
  .quote .mark{font-size:30px;}

  /* ================= 2026-10-20 motion + fades (owner: "more fades and interesting aspects") ================= */
  .tape{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:26px -22px 0;padding:10px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
  .tape-in{display:flex;gap:44px;width:max-content;animation:tape 70s linear infinite;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);white-space:nowrap;}
  .tape-in span::before{content:"◆";color:var(--gold-dim);margin-right:14px;font-size:8px;vertical-align:1px;}
  .tape:hover .tape-in{animation-play-state:paused;}
  @keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  body::before{animation:drift 22s ease-in-out infinite alternate;}
  @keyframes drift{from{transform:translate(0,0)}to{transform:translate(88px,40px)}}
  main>section{position:relative;}
  main>section::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(23,143,92,.35),transparent);}
  main>section:first-of-type::before{display:none;}
  .card,.tier,.quote,.hc,.qa{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
  .card:hover,.tier:hover,.quote:hover{transform:translateY(-3px);border-color:rgba(23,143,92,.35);}
  .hero>div:first-child{animation:rise .7s ease both;}
  .hero .show{animation:rise .9s ease .15s both;}
  @keyframes rise{from{opacity:.25;transform:translateY(10px)}to{opacity:1;transform:none}}
  .hc{animation:float 7s ease-in-out infinite;}
  .hc.b{animation-delay:-2.5s;} .hc.c{animation-delay:-4.5s;}
  @keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}}
  /* scroll reveal: everything is visible by default; a script hides only what is below the fold, then fades it in */
  .rv{transition:opacity .8s ease,transform .8s ease;}
  .js .rv.pre{opacity:0;transform:translateY(18px);}
  .faq{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-top:26px;}
  @media(max-width:760px){.faq{grid-template-columns:1fr;}}
  .qa{padding:18px 0;border-top:1px solid var(--line);}
  .qa h3{font-size:15px;margin:0 0 8px;}
  .qa p{margin:0;font-size:13.5px;line-height:1.7;color:#a7a49a;}
  @media(prefers-reduced-motion:reduce){.tape-in,body::before,.hero>div,.hc{animation:none!important;}.rv,.card,.tier,.quote{transition:none!important;}.js .rv.pre{opacity:1;transform:none;}}

  .tape-in .lb{color:var(--ink);letter-spacing:.08em;}
  .tape-in .lb i{font-style:normal;color:var(--gold);margin-right:8px;}
  .tape-in .lb b{font-weight:500;color:var(--ink);}
  .tape-in .lb .up{color:var(--up);} .tape-in .lb .dn{color:var(--down);}
  .tape-in .lb .wr{color:var(--mute);margin-left:8px;}
  .tape-in .hd{color:var(--gold);font-weight:700;}

  /* feature trio: a small working panel on top of each card */
  .feat3{text-align:left;padding:18px 18px 22px;}
  .feat3 h3{font-size:17px;margin:16px 0 8px;}
  .feat3 p{font-size:13px;line-height:1.7;color:#a7a49a;margin:0 0 12px;}
  .mini{list-style:none;margin:0;padding:0;display:grid;gap:5px;}
  .mini li{font-size:12px;color:var(--mute);padding-left:16px;position:relative;line-height:1.5;}
  .mini li::before{content:"✓";position:absolute;left:0;color:var(--up);font-family:var(--mono);font-size:11px;}
  .vis{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--mono);font-size:11px;display:grid;gap:8px;align-content:space-between;min-height:132px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
  .vis svg{width:100%;height:64px;display:block;}
  .vt,.vb{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--mute);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;}
  .vt b{color:var(--gold);} .vb{border-top:1px solid var(--line);padding-top:8px;text-transform:none;letter-spacing:0;font-size:11px;}
  .vb b{color:var(--ink);} .vis .up{color:var(--up);} .vis .dn{color:var(--down);}
  .vis .hid{background:var(--line);border-radius:4px;padding:0 6px;letter-spacing:.2em;color:var(--ink);}
  .fillrow{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center;font-size:11px;color:var(--ink);}
  .fillrow i{height:6px;border-radius:3px;background:var(--line);overflow:hidden;display:block;}
  .fillrow i em{display:block;height:100%;background:var(--up);border-radius:3px;}
  .fillrow .r{color:var(--mute);font-size:10.5px;white-space:nowrap;}
  .fillrow .r b{font-weight:600;}
  .conv{display:flex;align-items:center;justify-content:center;gap:14px;font-size:15px;font-weight:600;color:var(--ink);padding:6px 0 2px;}
  .conv i{font-style:normal;color:var(--gold);}
  @media(max-width:760px){.fillrow .r{white-space:normal;}}

  #about .lead{font-size:var(--subfs);line-height:var(--sublh);max-width:70ch;}
  #about h2{font-size:clamp(26px,3.8vw,38px);}

  /* hero example replay card + confetti */
  .show.one{padding:0;}
  .hc.rp{transform:none;margin:0;animation:none;border-color:rgba(23,143,92,.5);padding:16px 18px;display:grid;gap:12px;}
  .hc.rp svg{width:100%;height:118px;display:block;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:8px;}
  .hc.rp .pos{display:grid;grid-template-columns:1.05fr 0.85fr 1.2fr;gap:10px;}
  .hc.rp .pos b{white-space:nowrap;}
  .hc.rp .pos span{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:3px;}
  .hc.rp .pos b{font-size:13px;font-weight:600;color:var(--ink);}
  .hc.rp .pos small{color:var(--mute);font-weight:400;font-size:10.5px;margin-left:4px;}
  .hc.rp .win{position:relative;display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:12px;padding:12px 14px;border-radius:10px;background:rgba(70,192,122,.07);border:1px solid rgba(70,192,122,.25);overflow:visible;}
  .hc.rp .win span{font-size:11px;color:var(--mute);}
  .hc.rp .win b{font-size:26px;font-weight:600;letter-spacing:-.02em;}
  .hc.rp .win em{font-style:normal;font-size:12px;color:var(--up);background:rgba(70,192,122,.12);border:1px solid rgba(70,192,122,.3);border-radius:999px;padding:3px 9px;}
  .hc.rp .t.foot{margin:0;font-size:9.5px;text-transform:none;letter-spacing:.02em;}
  .hc.rp .t.foot b{color:var(--mute);font-weight:400;}
  .conf{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:5;}   /* bursts over the whole hero card, clipped to it (owner 2026-10-27: bigger, cover the screen) */
  .conf i{position:absolute;left:50%;top:55%;width:9px;height:14px;border-radius:2px;background:var(--c);opacity:0;animation:pop 2s cubic-bezier(.2,.8,.3,1) var(--d) 1 both;}
  .hc.rp:hover .conf i{animation:pop 1.6s cubic-bezier(.2,.8,.3,1) var(--d) 1 both;}
  @keyframes pop{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
  @media(prefers-reduced-motion:reduce){.conf{display:none;}}

  #pricing .lead{font-size:var(--subfs);line-height:var(--sublh);max-width:72ch;}

  /* pricing cards line up row by row: centred ribbon, fixed-height header blocks so every "Get started" and every first feature sit on the same line */
  .ribbon{left:50%;transform:translateX(-50%);white-space:nowrap;}
  .tier .tname,.tier .tprice,.tier .twho{text-align:center;}
  .tier .tprice{display:block;}
  .tier .tprice>b,.tier .tprice>s,.tier .tprice>small{display:inline;vertical-align:baseline;}
  .tier .tprice .save,.tier .tprice>span{display:block;}
  .tier .tprice>b,.tier .tprice>s,.tier .tprice>small{line-height:40px;}
  .tier .tprice .save{line-height:18px;}
  .tier .tprice>span{line-height:16px;margin-top:4px;}
  .tier>.btn{display:block;}
  /* four across only when there is room; the fixed header heights (so buttons and first rows align) apply only then */
  .tiers{grid-template-columns:repeat(4,minmax(0,1fr));}
  @media(min-width:1001px){.tier .tprice{height:100px;} .tier .twho{height:88px;overflow:hidden;}}
  @media(max-width:1000px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;} .tier .tprice{min-height:0;} .tier .twho{min-height:0;}}
  @media(max-width:560px){.tiers{grid-template-columns:minmax(0,1fr);}}

  /* bigger hero replay card, played like a replay */
  .hero{grid-template-columns:0.9fr 1.35fr;gap:48px;align-items:center;}
  .hc.rp{padding:24px 26px;gap:20px;}
  .hc.rp .t{font-size:10.5px;}
  .hc.rp svg{height:400px;}
  .hc.rp .pos b{font-size:16px;}
  .hc.rp .pos span{font-size:10px;margin-bottom:5px;}
  .hc.rp .pos small{font-size:11.5px;}
  .hc.rp .win{padding:18px 20px;}
  .hc.rp .win b{font-size:38px;min-width:7.5ch;text-align:right;font-variant-numeric:tabular-nums;}
  .hc.rp .win b.dn{color:var(--down);}
  .hc.rp .win em{font-size:13px;min-width:6ch;text-align:center;}
  .hc.rp .win.red{background:rgba(229,72,77,.07);border-color:rgba(229,72,77,.3);}
  .hc.rp .win.red em{color:var(--down);background:rgba(229,72,77,.12);border-color:rgba(229,72,77,.3);}
  .rbtn{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);background:rgba(23,143,92,.08);border:1px solid rgba(23,143,92,.4);border-radius:999px;padding:5px 11px;cursor:pointer;}
  .rbtn:hover{background:rgba(23,143,92,.16);}
  .rbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  .hc.rp.anim .cd{opacity:0;transform:translateY(10px);transition:opacity .32s ease,transform .32s ease;}
  .hc.rp.anim .cd.on{opacity:1;transform:none;}
  .hc.rp .conf i{animation:none;}
  .hc.rp.boom .conf i{animation:pop 2.1s cubic-bezier(.2,.8,.3,1) var(--d) 1 both;}
  .hc.rp:hover .conf i{animation:none;}
  @media(max-width:900px){.hero{grid-template-columns:1fr;} .hc.rp svg{height:240px;}}
  @media(prefers-reduced-motion:reduce){.hc.rp.anim .cd{opacity:1;transform:none;transition:none;} .rbtn{display:none;}}

  /* the ticker is blurred while the replay plays, and sharpens with the confetti — the blind reveal */
  .hc.rp .tk{display:inline-block;transition:filter .9s ease,opacity .9s ease,color .9s ease;}
  .hc.rp.blind .tk{filter:blur(6px);opacity:.55;}
  .hc.rp svg .tk{transition:filter .9s ease,opacity .9s ease;}
  .hc.rp.blind svg .tk{filter:blur(3px);opacity:.5;}
  .hc.rp:not(.blind) .t .tk{color:var(--gold);}
  .hc.rp .pos .tk{display:inline;}
  .hc.rp .pos small{white-space:nowrap;}
  .hc.rp .pos b span{display:inline;font-size:inherit;letter-spacing:0;text-transform:none;color:inherit;margin:0;}

  /* ================= features, TradingView-features style ================= */
  .subnav{position:sticky;top:58px;z-index:40;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:10px 12px;margin:10px auto 0;width:max-content;max-width:100%;
    background:rgba(12,12,10,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:999px;}
  .subnav a{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--mute);text-decoration:none;padding:7px 13px;border-radius:999px;transition:background .12s,color .12s;}
  .subnav a:hover{color:var(--ink);background:rgba(255,255,255,.05);}
  @media(max-width:720px){.subnav{position:static;border-radius:14px;}}
  section.fsec{padding:84px 0 40px;}
  section.fsec h2{font-size:clamp(40px,5.4vw,66px);line-height:1.04;margin:0 auto 20px;max-width:18ch;}
  section.fsec .lead{font-size:var(--subfs);line-height:var(--sublh);max-width:68ch;margin:0 auto 34px;}
  .screen.big{max-width:1000px;margin:0 auto 22px;text-align:left;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 80px rgba(0,0,0,.55);}
  .sbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.06em;}
  .sbar .grow{flex:1;}
  .sbar .tkbox{color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.1em;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:8px;padding:4px 10px;}
  .sbar .tkbox.hid{color:var(--mute);filter:blur(0);letter-spacing:.2em;}
  .chip{font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line2);border-radius:999px;padding:4px 10px;color:var(--mute);}
  .chip.gold{color:var(--gold);border-color:rgba(23,143,92,.45);background:rgba(23,143,92,.08);}
  .sbody{display:grid;gap:12px;padding:14px;}
  .sbody.two{grid-template-columns:1.4fr 1fr;} .sbody.three{grid-template-columns:repeat(3,1fr);}
  @media(max-width:760px){.sbody.two,.sbody.three{grid-template-columns:1fr;}}
  .pane{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:12px;font-family:var(--mono);font-size:12px;min-height:120px;}
  .pane svg{width:100%;height:100%;min-height:200px;display:block;}
  .chainp{display:grid;align-content:start;gap:0;padding:0;overflow:hidden;}
  .ph,.pr{display:grid;grid-template-columns:1.3fr 1fr .7fr;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);}
  .ph{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);}
  .pr span:nth-child(2),.pr span:nth-child(3),.ph span:nth-child(2),.ph span:nth-child(3){text-align:right;}
  .pr.on{background:rgba(23,143,92,.08);} .pr.on span:first-child{color:var(--gold);}
  .pf{padding:10px 12px;font-size:10px;color:var(--mute);line-height:1.5;}
  .kv{display:grid;align-content:start;gap:6px;}
  .kv>span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);}
  .kv>b{font-size:20px;font-weight:600;color:var(--ink);}
  .kv>small{font-size:10.5px;color:var(--mute);line-height:1.5;}
  .kv .blur{filter:blur(6px);opacity:.6;}
  .kv .pl{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin-top:6px;}
  .kv .pl .net{border-top:1px solid var(--line);padding-top:6px;font-weight:700;}
  .kv .pl b{text-align:right;font-weight:600;}
  .trow{display:grid;grid-template-columns:90px 1fr auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:11.5px;}
  .trow:last-child{border-bottom:0;}
  .trow i{height:6px;border-radius:3px;background:var(--line);overflow:hidden;display:block;}
  .trow i em{display:block;height:100%;background:var(--up);border-radius:3px;}
  .trow span:last-child{color:var(--mute);font-size:10.5px;text-align:right;}
  .list{display:grid;align-content:start;gap:0;padding:0;}
  .ev{display:grid;grid-template-columns:96px 1.2fr 1.4fr;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:11px;color:var(--mute);align-items:center;}
  .ev:last-child{border-bottom:0;}
  .ev .d{color:var(--gold);letter-spacing:.06em;} .ev .w{color:var(--ink);font-weight:600;}
  .screen .up{color:var(--up);} .screen .dn{color:var(--down);}
  .duo.cards{max-width:1000px;margin:0 auto;text-align:left;}
  .duo.cards .card{padding:24px 24px 20px;}
  .duo.cards h3{font-size:17px;margin-bottom:10px;}
  .duo.cards .checks li{font-size:13.5px;line-height:1.65;color:var(--mute);}
  .duo.cards .checks li b{color:var(--ink);font-weight:600;}

  .boards{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1000px;margin:0 auto 10px;}
  @media(max-width:760px){.boards{grid-template-columns:1fr;}}
  .screen.big.bd{margin:0;}
  .bd .chainp{border:0;border-radius:0;background:transparent;}
  .bd .pr{font-size:12.5px;padding:11px 14px;}
  .pr.empty span:first-child{color:var(--mute);}
  #faq h2{text-align:center;}

  /* the board, styled as it is in the app (index.html .lbrow) */
  .lbwrap{max-width:1000px;margin:0 auto 10px;text-align:left;}
  .lbmode{display:inline-flex;gap:4px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:12px;}
  .lbmode button{font-family:var(--mono);font-size:11.5px;color:var(--mute);background:transparent;border:0;border-radius:7px;padding:7px 14px;cursor:pointer;letter-spacing:.02em;}
  .lbmode button.on{background:rgba(255,255,255,.1);color:var(--ink);}
  .lbmode button:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
  .lb{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 19px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 50px rgba(0,0,0,.45);overflow-x:auto;}
  .lbrow{display:grid;grid-template-columns:44px 1fr 84px 110px 88px 62px 62px 78px;gap:10px;align-items:center;padding:9px 8px;border-bottom:1px solid rgba(43,43,39,.6);font-family:var(--mono);font-size:12px;min-width:640px;}
  .lbrow:last-child{border-bottom:0;}
  .lbrow .lbrank{color:var(--mute);}
  .lbrow .lbname{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lbrow .lbpnl,.lbrow .lbavg,.lbrow .lbn,.lbrow .lbwr,.lbrow .lbdd{text-align:right;}
  .lbrow .lbn,.lbrow .lbwr{color:var(--mute);}
  .lbrow .lbdd{color:var(--down);}
  .lbrow .lbpnl.up,.lbrow .lbavg.up{color:var(--up);} .lbrow .lbpnl.dn,.lbrow .lbavg.dn{color:var(--down);}
  .lbrow.lbhd{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
  .lbrow.lbhd span{color:var(--mute)!important;font-weight:400!important;}
  .lbrow .lbperf{display:flex;align-items:center;justify-content:flex-end;color:var(--mute);}
  .lbrow .lbperf svg{display:block;}
  @media(max-width:760px){.lbrow{grid-template-columns:26px minmax(140px,1fr) 72px 84px 72px 48px 44px 56px;gap:8px;font-size:11px;padding:9px 10px;}}

  /* blind cockpit screen */
  .cockpit2 .spot{font-family:var(--mono);font-size:12px;letter-spacing:0;color:var(--ink);}
  .cockpit2 .spot b{font-size:16px;font-weight:600;margin-right:6px;}
  .cockpit2 .spot em{font-style:normal;font-size:11px;}
  .cockpit2 .tkbox.hid{letter-spacing:.1em;color:var(--gold);filter:blur(0);}
  .chip.live{color:var(--up);border-color:rgba(70,192,122,.45);display:inline-flex;align-items:center;gap:6px;} .chip.live i{width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up);animation:livepulse 1.6s ease-in-out infinite;} @keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}
  .cockpit2 .tkbox.hid .tk{display:inline-block;filter:blur(5px);opacity:.55;user-select:none;}   /* the ticker is blurred, as in the hero */
  .hud{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 14px 0;}
  @media(max-width:620px){.hud{grid-template-columns:repeat(2,1fr);}}
  .hud>div{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--mono);}
  .hud span{display:block;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:4px;}
  .hud b{font-size:15px;font-weight:600;color:var(--ink);}
  .cockpit2 .pane svg{min-height:190px;}
  .reveal2{margin:0 14px 14px;border:1px solid rgba(23,143,92,.45);background:rgba(23,143,92,.06);border-radius:10px;padding:12px 14px;display:grid;gap:4px;font-family:var(--mono);}
  .reveal2 .rvtag{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
  .reveal2 b{font-size:14px;font-weight:600;color:var(--ink);} .reveal2 b em{font-style:normal;color:var(--gold);}
  .reveal2 .rvtxt{font-family:var(--sans);font-size:12.5px;color:var(--mute);line-height:1.6;}
  /* even data panes */
  .kv.even{min-height:118px;align-content:center;text-align:center;justify-items:center;}
  .kv.even>b{font-size:22px;}
  .kv.even>small{max-width:26ch;}

  /* chart labels are HTML laid over the stretched drawing, so type is never squeezed */
  .chwrap{position:relative;}
  .chwrap svg{display:block;width:100%;}
  .chwrap .lab,.chwrap .ax{position:absolute;transform:translateY(-55%);font-family:var(--mono);pointer-events:none;white-space:nowrap;line-height:1;}
  .chwrap .lab{font-size:11px;letter-spacing:.08em;color:#178f5c;}
  .chwrap .ax{font-size:9.5px;color:#6f6c63;}
  .chwrap .dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#178f5c;border:1.5px solid #0c0c0a;transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(23,143,92,.18);}
  .hc.rp .chwrap{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
  .hc.rp .chwrap svg{height:400px;background:transparent;border:0;border-radius:0;}
  @media(max-width:900px){.hc.rp .chwrap svg{height:240px;}}
  .pane .chwrap svg{min-height:200px;height:100%;}
  .cockpit2 .pane .chwrap svg{min-height:190px;}

  .hc.rp .chwrap .end{transition:opacity .4s ease;}
  .hc.rp.anim:not(.boom) .chwrap .end{opacity:0;}

  .hc.rp .win{align-items:center;}
  .hc.rp .win>span{font-size:15px;color:var(--ink);font-family:var(--mono);}
  .hc.rp .win b{line-height:1;}

  /* the top bar stays put while the page scrolls: sticky on the header (a sticky nav inside a header its own height could never travel) */
  header{position:sticky;top:0;z-index:60;margin:0;padding:0;width:100%;background:rgba(12,12,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
  header nav,header nav.wrap{position:static;margin:0 auto;padding:12px 22px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;}
  /* hero: both columns start at the same top edge — no blank space above the badge */
  .hero{align-items:start;padding-top:40px;}
  .hero>div:first-child{padding-top:0;}
  .hero .pill{margin-top:0;}
  .show.one{padding:0;align-content:start;}

  /* live counters under the hero buttons */
  .live3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:18px;margin-top:38px;padding:22px 26px;border:1px solid var(--line);border-radius:14px;background:var(--card);position:relative;}
  .live3>div{display:grid;gap:2px;}
  .live3 b{font-family:var(--mono);font-size:32px;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;}
  .live3 span{font-family:var(--sans);font-size:14px;color:var(--mute);}
  .livedot{position:absolute;top:12px;right:14px;width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 0 3px rgba(70,192,122,.18);animation:pulse 2.2s ease-in-out infinite;}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(70,192,122,.18)}50%{box-shadow:0 0 0 7px rgba(70,192,122,.06)}}
  @media(prefers-reduced-motion:reduce){.livedot{animation:none;}}
  @media(max-width:600px){.live3{gap:14px;padding:18px 16px;} .live3 b{font-size:24px;} .live3 span{font-size:12px;}}

  /* interactive replay */
  .rpw .tfs,.rpw .steps{display:inline-flex;gap:4px;}
  .rpw .tfs button,.rpw .steps button{font-family:var(--mono);font-size:10.5px;color:var(--mute);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:7px;padding:5px 9px;cursor:pointer;letter-spacing:.04em;}
  .rpw .tfs button.on{color:var(--ink);background:rgba(255,255,255,.1);border-color:var(--line2);}
  .rpw .steps button{color:var(--gold);border-color:rgba(23,143,92,.4);}
  .rpw .steps button:hover,.rpw .tfs button:hover{background:rgba(255,255,255,.08);}
  .rpw .steps button:focus-visible,.rpw .tfs button:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
  .rpw .pane.cv{padding:0;position:relative;min-height:300px;}
  .rpw canvas{display:block;width:100%;height:300px;border-radius:9px;}
  .cvhint{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:9.5px;color:var(--mute);pointer-events:none;}
  .rpwpl{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:12px 12px;border-top:1px solid var(--line);font-family:var(--mono);}
  .rpwpl span{font-size:10px;color:var(--mute);letter-spacing:.1em;text-transform:uppercase;}
  .rpwpl b{font-size:22px;font-weight:600;} .rpwpl b.up{color:var(--up);} .rpwpl b.dn{color:var(--down);}
  .rpwpl em{font-style:normal;font-size:11px;color:var(--up);background:rgba(70,192,122,.12);border:1px solid rgba(70,192,122,.3);border-radius:999px;padding:3px 8px;}
  .rpwpl em.dn{color:var(--down);background:rgba(229,72,77,.12);border-color:rgba(229,72,77,.3);}
  @media(max-width:760px){.rpw .sbar{flex-wrap:wrap;} .rpw canvas{height:220px;} .rpw .pane.cv{min-height:220px;}}

/* leaderboard: the ten spots are always drawn; an open spot is numbered and dim */
.lbrow.lbopen span{color:var(--mute);opacity:.45;font-weight:400;}

/* ---- every section fits the page (desktop): the hero and each section take exactly one screen below the top bar;
   content that needs more room is scaled down to fit (the landing's script measures and sets the transform), content
   that needs less is centred. JS sets html.fitpg only on windows at least 900px wide and 560px tall. */
/* scroll snapping, one section per screen (owner 2026-10-26: "stick to each window"); jumps land on section tops, which are the snap points */
html.fitpg{scroll-snap-type:y mandatory;}   /* the sections carry scroll-margin-top for the sticky bar; no scroll-padding on top of it */
html.fitpg .hero,html.fitpg main>section{scroll-snap-align:start;scroll-snap-stop:always;}
html.fitpg main>section#pricing,html.fitpg main>section#f-end{scroll-snap-align:start;scroll-snap-stop:normal;}
/* no sideways clipping anywhere: the fit script never lays a block out wider than the window (a clip on the page column cut the side columns; overflow rules on html/body broke scrolling) */
html.fitpg .hero,html.fitpg main>section{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;scroll-margin-top:var(--hdr,59px);margin-top:0;}   /* no top margin: it would collapse into the previous block's negative bottom margin and open a seam */
html.fitpg .hero{display:grid;align-content:center;}
html.fitpg main>section>*{flex:0 0 auto;}
/* fit mode: tighter vertical rhythm so sections need less shrinking */
html.fitpg main>section{padding:26px 0;}
html.fitpg section.fsec{padding:30px 0 22px;}
html.fitpg h2{margin-bottom:28px;}   /* air between every headline and its paragraph (owner 2026-10-26) */
html.fitpg section>.lead{margin-bottom:16px;}
html.fitpg .duo{gap:16px;}
html.fitpg .duo .card{padding:18px 20px;}
/* fit mode pricing: the one section allowed to run past a screen (owner 2026-10-21: "make font larger and make the
   offers longer, it is okay if they don't fit"). Big heading like the other sections, four tiers across the whole window,
   larger type; each tier's rows share one set of grid rows (subgrid) so they line up without fixed heights. */
html.fitpg main>section,html.fitpg .hero{transition-property:opacity;}   /* the fit scale is set, never animated */
html.fitpg main>section.pre,html.js.fitpg main>section.rv.pre,html.fitpg .js main>section.rv.pre{transform:none;}   /* the reveal only fades here: a slide would move a section after a jump landed on it */
html.fitpg #pricing{padding:64px 0 40px;width:min(100vw - 64px,1760px);margin-left:calc((100% - min(100vw - 64px,1760px))/2);}
html.fitpg #pricing h2{font-size:clamp(34px,3.8vw,50px);line-height:1.06;margin:0 auto 26px;max-width:none;}
html.fitpg #pricing>.lead{font-size:var(--subfs);line-height:var(--sublh);max-width:64ch;margin:0 auto 30px;}
html.fitpg .tiers{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;row-gap:12px;}
html.fitpg .tier{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 15;gap:0;padding:28px 24px 26px;text-align:left;min-width:0;}   /* 4 head rows + 11 feature rows, all shared across the four tiers */   /* one column that can shrink: without it the rows size to their unwrapped text and spill out of the card */
html.fitpg .tier .tname,html.fitpg .tier .tprice,html.fitpg .tier .twho,html.fitpg .tier .btn{text-align:center;}
html.fitpg .tier>*{min-width:0;}
html.fitpg .tier .tprice,html.fitpg .tier .twho{height:auto;min-height:0;}
html.fitpg .tname{font-size:11.5px;}
html.fitpg .tier .tprice{display:block;line-height:1.1;}
html.fitpg .tier .tprice b,html.fitpg .tier .tprice s,html.fitpg .tier .tprice small{display:inline;}
html.fitpg .tier .tprice b{font-size:44px;}
html.fitpg .tier .tprice s{font-size:17px;}
html.fitpg .tier .tprice small{font-size:12px;}
html.fitpg .tier .tprice .save,html.fitpg .tier .tprice>span{display:block;margin:0;line-height:20px;font-size:12px;white-space:nowrap;}   /* saving and yearly price on their own lines in every card, so the rows line up across the four (owner 2026-10-28) */
html.fitpg .tier .tprice .save{margin-top:6px;}
html.fitpg .tier .tprice>b{display:inline-block;height:56px;line-height:56px;vertical-align:baseline;}
html.fitpg .tier .tprice>s,html.fitpg .tier .tprice>small{line-height:1;vertical-align:baseline;}   /* the price line is one fixed height whether or not a struck price sits beside it (Rookie has none) */
html.fitpg .tier .twho{font-size:14px;line-height:1.65;padding-bottom:18px;}   /* room between the description and the button */
html.fitpg .tier .btn{align-self:end;}
html.fitpg .tier .btn{padding:11px 10px;font-size:13px;}
html.fitpg .feat{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 11;row-gap:0;margin:6px 0 0;}   /* every feature row is one shared row: row 7 is the same height in every tier */
html.fitpg .feat li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;padding:9px 0;font-size:14.5px;line-height:1.5;}
html.fitpg .feat li::before{font-size:13px;line-height:1.5;}
html.fitpg .feat li b{display:block;}
html.fitpg .feat li span,html.fitpg .tier .feat li span{display:block;grid-column:2;font-size:12.5px;margin:-3px 0 0;line-height:1.5;}
html.fitpg #pricing .cap{font-size:12.5px;line-height:1.7;margin-top:14px;}
@media(max-width:1180px){html.fitpg .feat li{font-size:13.5px;} html.fitpg .feat li span{font-size:11.5px;} html.fitpg .tier{padding:22px 18px 20px;}}/* fit mode: Blind Replay and Bar Replay put the heading,lead and cards in a narrow left column and give the screen
   the rest of the width — the screen is the big thing,and the section needs little or no scaling */
html.fitpg #f-blind,html.fitpg #f-replay,html.fitpg #f-analysis,html.fitpg #f-live{display:grid;grid-template-columns:minmax(300px,0.8fr) minmax(0,1.7fr);grid-template-rows:1fr auto auto 1fr;column-gap:26px;align-content:center;align-items:start;text-align:left;}
html.fitpg #f-blind{grid-template-columns:minmax(320px,1fr) minmax(0,1.5fr);}/* more room for the words beside the Blind cockpit (owner 2026-10-23) */
html.fitpg #f-blind h2,html.fitpg #f-replay h2,html.fitpg #f-live h2{grid-column:1;grid-row:2;font-size:clamp(40px,3.4vw,64px);line-height:1.04;margin:0 0 28px;max-width:none;}html.fitpg #f-blind .lead,html.fitpg #f-replay .lead,html.fitpg #f-live .lead{grid-column:1;grid-row:3;font-size:var(--subfs);line-height:var(--sublh);margin:0;max-width:none;}html.fitpg #f-blind .screen.big,html.fitpg #f-replay .screen.big,html.fitpg #f-live .screen.big{grid-column:2;grid-row:1/span 4;max-width:none;margin:0;align-self:center;width:100%;}html.fitpg #f-blind .duo,html.fitpg #f-replay .duo,html.fitpg #f-live .duo{grid-column:1;grid-template-columns:minmax(0,1fr);gap:10px;}html.fitpg #f-blind .duo .card,html.fitpg #f-replay .duo .card,html.fitpg #f-live .duo .card{padding:14px 16px;}html.fitpg #f-blind .duo .card h3,html.fitpg #f-replay .duo .card h3,html.fitpg #f-live .duo .card h3{font-size:clamp(14.5px,1vw,17px);margin:0 0 4px;}html.fitpg #f-blind .duo.cards .checks,html.fitpg #f-replay .duo.cards .checks,html.fitpg #f-live .duo.cards .checks{margin:4px 0 0;}html.fitpg #f-blind .duo.cards .checks li,html.fitpg #f-replay .duo.cards .checks li,html.fitpg #f-live .duo.cards .checks li{font-size:clamp(13.5px,0.95vw,16px);line-height:1.55;padding:5px 0 5px 22px;}html.fitpg #f-blind .duo.cards .checks li::before,html.fitpg #f-replay .duo.cards .checks li::before,html.fitpg #f-live .duo.cards .checks li::before{left:0;}
html.fitpg .rpw canvas{height:430px;}
html.fitpg .rpw .pane.cv{min-height:0;}
/* fit mode hero: the card runs down to the bottom of the text column (flush with the counters tile); the chart takes the extra room */
html.fitpg .hero{align-items:start;}   /* badge and chart card share one top edge (owner 2026-10-22) */
html.fitpg .hero .show.one{display:flex;flex-direction:column;align-self:stretch;}
html.fitpg .hc.rp{display:flex;flex-direction:column;flex:1 1 auto;}
html.fitpg .hc.rp .chwrap{flex:1 1 auto;min-height:400px;display:flex;}
html.fitpg .hc.rp .chwrap svg{height:auto;flex:1 1 auto;min-height:0;width:100%;}

.chwrap .lab.buy{transform:translate(-50%,-50%);font-weight:600;}   /* entry label centred under its arrow */
.chwrap .arw{position:absolute;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 0 3px rgba(23,143,92,.35));}
.chwrap .arw.up{border-bottom:9px solid #178f5c;}   /* entry: arrow pointing up at the candle from below */
.chwrap .arw.dn{border-top:9px solid #178f5c;}      /* exit: arrow pointing down at the candle from above */

/* Blind cockpit: the chart fills its pane to the height of the chain beside it */
.cockpit2 .sbody.two>.pane:not(.chainp){display:flex;flex-direction:column;}
.cockpit2 .sbody.two>.pane:not(.chainp) .chwrap{flex:1 1 auto;display:flex;}
.cockpit2 .pane .chwrap svg{flex:1 1 auto;height:auto;min-height:190px;width:100%;}
/* Blind cockpit: position ticket and portfolio card stacked beside the chart, where the chain used to be; the chart fills their height (owner 2026-10-23) */
.hud.hud2{grid-template-columns:1.4fr 1fr;align-items:stretch;}
.hud.hud2.side{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;padding:0;margin:0;gap:12px;min-width:0;}
.hud.hud2.side .pv{justify-content:flex-start;gap:10px;}   /* the cards size to their content (owner 2026-10-26: stretched rows looked small and odd); the chart beside them follows their height */
.hud.hud2.side>.pv,.hud.hud2.side>.pcard{padding:14px 16px!important;}   /* a little more air than the old four-tile strip (owner 2026-10-23) */
.hud.hud2.side>.pcard{gap:10px;}
.hud .pcard.dn{border-left-color:var(--down)!important;}
/* in the narrow side column the ticket's top row wraps (P&L on its own line, right-aligned) and the four stats sit two by two */
.hud.hud2.side .pcard .pc-top{flex-wrap:wrap;row-gap:4px;}
.hud.hud2.side .pcard .pc-top .grow{display:none;}
.hud.hud2.side .pcard .pc-chg{flex:1 0 100%;text-align:right;margin-left:0;}
.hud.hud2.side .pcard .pc-stats{grid-template-columns:1fr 1fr;row-gap:10px;}
.hud.hud2.side .pcard .pc-stats>div+div{border-left:0;padding-left:0;}
.hud.hud2.side .pcard .pc-stats>div:nth-child(even){border-left:1px solid var(--line);padding-left:10px;}
.hud.hud2.side .pcard .pc-stats span{white-space:nowrap;}
.cockpit2 .sbody.two,.rpw .sbody.two{grid-template-columns:1.55fr 1fr;}
.rpw .pf.rpwfoot{padding:4px 14px 12px;}
/* the app's position line on the landing's real-time chart: [+10  210P 10/30][+$530  +15.5%][BUY][SELL] on the dotted strike line, the strike flagged on the price scale (owner 2026-10-25) */
.chwrap .posln{position:absolute;left:2.2%;transform:translateY(-50%);display:flex;gap:3px;z-index:3;pointer-events:none;font-family:var(--mono);font-size:10px;font-weight:700;line-height:16px;white-space:nowrap;}
.chwrap .posln>span{display:inline-block;height:16px;padding:0 5px;border-radius:2px;}
.chwrap .posln .pid{background:#178f5c;color:#0c0c0a;}
.chwrap .posln .ppl{background:rgba(10,10,12,.88);border:1px solid #3a3a40;line-height:14px;} .chwrap .posln .ppl.up{color:#46c07a;} .chwrap .posln .ppl.dn{color:#e5484d;}
.chwrap .posln .pbtn{background:rgba(10,10,12,.88);line-height:14px;border:1px solid;} .chwrap .posln .pbtn.buy{color:#46c07a;border-color:#46c07a;} .chwrap .posln .pbtn.sell{color:#e5484d;border-color:#e5484d;}
@media(max-width:520px){.chwrap .posln .pbtn{display:none;}}   /* a phone keeps the id and P&L chips; BUY / SELL would run into the price flag */
.chwrap .pflag{position:absolute;right:0.6%;transform:translateY(-50%);z-index:3;font-family:var(--mono);font-size:10px;font-weight:700;line-height:14px;padding:0 4px;color:#178f5c;background:#0c0c0a;border:1px solid #178f5c;border-radius:2px;pointer-events:none;}
/* chart markers: the same bent gold arrow as the 'click me' nudge, its tip on the candle; .up = words under the arrow (entries), .dn = words above (exits); .beside puts the words next to the arrow when there is no room above or below */
.mk,.hc .mk.up,.hc .mk.dn,.screen .mk.up,.screen .mk.dn{color:var(--gold);}   /* .up/.dn here mean arrow direction, not a P&L colour */
.mk{position:absolute;width:0;height:0;z-index:3;color:var(--gold);font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;pointer-events:none;line-height:1;}
.mk>svg{position:absolute;display:block;width:46px!important;height:30px!important;min-height:0!important;background:none!important;border:0!important;border-radius:0!important;}   /* the chart panes size every svg to fill; the marker's arrow keeps its own box */
.mk .t{position:absolute;white-space:nowrap;}
.mk.r svg{left:-37px;} .mk.l svg{left:-10px;}
.mk.dn svg{top:-27px;} .mk.up svg{top:-3px;}
.mk.dn.r .t{left:-33px;bottom:29px;} .mk.dn.l .t{left:20px;bottom:29px;}   /* the words start under the arrow's tail */
.mk.up.r .t{left:-33px;top:33px;}    .mk.up.l .t{left:20px;top:33px;}
.mk.up.l.beside .t{right:auto;left:38px;top:4px;} .mk.up.r.beside .t{left:auto;right:40px;top:14px;}   /* hero: no room under the entry or above the exit, so the words sit beside the arrow */
.rpw .pane.cv{overflow:hidden;}
.mk .tk{display:inline!important;}   /* inline, so the spaces around the ticker survive; the hero blurs it only while the hand is blind (.hc.rp.blind .tk) and reveals it at the end */
.hc .mk .t{display:block;}   /* the replay card's labels share the card title's .t, a flex box that dropped the spaces around the ticker ('DELL317.05') */
/* hero markers: a straight arrow from the side of the words to the candle's close; the exit marker appears with the reveal */
.mk.flat>svg{width:46px!important;height:10px!important;top:-5px;}
.mk.flat.l>svg{left:-3px;} .mk.flat.r>svg{left:-43px;}
.mk.flat.l .t{left:50px;top:-6px;right:auto;bottom:auto;} .mk.flat.r .t{right:50px;top:-6px;left:auto;bottom:auto;}
.hc.rp .mk.sell{transition:opacity .5s;} .hc.rp.blind .mk.sell{opacity:0;}
/* the Blind cockpit's hand plays itself: sessions after the entry appear one by one, the exit marker lands with the last */
.cockpit2.anim .bc{opacity:0;transition:opacity .35s ease;} .cockpit2.anim .bc.on{opacity:1;}
.cockpit2 .mk.sell{transition:opacity .4s;} .cockpit2.anim .mk.sell{opacity:0;} .cockpit2.anim.done .mk.sell{opacity:1;}
.cockpit2 .tk{transition:filter .5s,opacity .5s;} .cockpit2.done .tk{filter:none!important;opacity:1!important;}   /* the reveal: ticker and expiry un-blur when the hand ends */
/* the ticket's logo circle holds the company mark (the app's logo route); in the Blind cockpit it shows only with the reveal */
.hud .pcard .pc-logo{position:relative;overflow:hidden;}
.hud .pcard .pc-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.cockpit2 .pc-logo img{opacity:0;transition:opacity .5s;} .cockpit2.done .pc-logo img,.cockpit2:not(.anim) .pc-logo img{opacity:1;}
.chip.gold{color:var(--gold);border-color:rgba(23,143,92,.45);}
@media(prefers-reduced-motion:reduce){.cockpit2.anim .bc{opacity:1;transition:none;} .cockpit2.anim .mk.sell{opacity:1;}}
@media(max-width:760px){.hud.hud2{grid-template-columns:1fr;}}
.hud .pv{display:flex;flex-direction:column;gap:6px;padding:12px 14px!important;}
.hud .pv span,.hud .pv b,.hud .pv small,.hud .pv em{display:inline;font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit;margin:0;font-weight:inherit;font-style:normal;}
.hud .pv .pv-lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);}
.hud .pv .pv-val{display:block;font-size:34px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.1;}
.hud .pv .pv-chg{font-size:15px;font-weight:700;} .hud .pv .pv-chg.up{color:var(--up);} .hud .pv .pv-chg.dn{color:var(--down);}
.hud .pv .pv-row2{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:8px;margin-top:2px;}
.hud .pv .pv-row2 span{display:block;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:3px;}
.hud .pv .pv-row2 b{display:block;font-size:17px;font-weight:600;color:var(--ink);} .hud .pv .pv-row2 small{font-size:12px;color:var(--mute);font-weight:400;} .hud .pv .pv-row2 .r{text-align:right;}
.hud .pv .pv-row2 b span{display:inline;font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit;margin:0;}   /* the Invested figure is a value: the label rule (.pv-row2 span) had drawn it as an 8px grey label (2026-10-24) */
.hud .pv .pv-bar{display:flex;height:9px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);gap:2px;}
.hud .pv .pv-bar i{display:block;height:100%;} .hud .pv .pv-bar .a{background:var(--up);}   /* level colours below, never the brand colour */ .hud .pv .pv-bar .c{flex:1;background:rgba(255,255,255,.14);}
.hud .pv .pv-pos{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);padding:4px 0;border-bottom:1px solid var(--line);}
.hud .pv .pv-pos:last-child{border-bottom:0;}
.hud .pv .sw{width:9px;height:9px;border-radius:2px;flex:0 0 9px;} .hud .pv .sw.a{background:var(--gold);} .hud .pv .sw.c{background:rgba(255,255,255,.3);}
.hud .pv .pv-pos em{color:var(--up);font-weight:600;} .hud .pv .pv-pos b{font-weight:600;} .hud .pv .pv-pos small{color:var(--mute);font-size:10.5px;min-width:5ch;text-align:right;}
.cockpit2 .hud .pv .tk{display:inline-block;filter:blur(4px);opacity:.6;user-select:none;}
.hud .pcard{border-left:3px solid var(--up)!important;display:grid;gap:8px;padding:12px 14px!important;}
.hud .pcard span,.hud .pcard b{display:inline;font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit;margin:0;font-weight:inherit;}   /* undo the tile rules the ticket sits among */
.hud .pcard .pc-top{display:flex;align-items:center;gap:8px;font-size:12.5px;white-space:nowrap;min-width:0;}
.hud .pcard .pc-logo{width:22px;height:22px;border-radius:50%;flex:0 0 22px;background:radial-gradient(circle at 35% 35%,#3a3a34,#1a1a16);border:1px solid var(--line);}
.hud .pcard .pc-name{color:var(--ink);font-weight:600;} .hud .pcard .pc-exp{color:var(--mute);font-weight:500;} .hud .pcard .pc-k{color:var(--up);}
.cockpit2 .hud .pcard .tk{display:inline-block;filter:blur(4px);opacity:.6;user-select:none;}   /* ticker and expiry date hidden during a blind hand */
.hud .pcard .pc-lot{background:rgba(23,143,92,.14);color:var(--gold);border:1px solid rgba(23,143,92,.3);border-radius:999px;padding:2px 8px;font-size:10.5px;font-weight:600;}
.hud .pcard .pc-chg{font-weight:700;font-size:13px;margin-left:auto;} .hud .pcard .pc-chg.up{color:var(--up);} .hud .pcard .pc-chg.dn{color:var(--down);}
.hud .pcard .pc-lbl{display:flex;justify-content:space-between;align-items:baseline;}
.hud .pcard .pc-lbl span{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);} .hud .pcard .pc-lbl b{color:var(--up);font-size:12.5px;font-weight:600;}
.hud .pcard .pc-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;} .hud .pcard .pc-bar i{display:block;height:100%;background:var(--up);border-radius:999px;}
/* the bars read by level, as the app's do (index.html posExpBar): time left over 50% green, over 20% amber, under that red;
   invested share up to 50% green, up to 80% amber, over that red — the same in every theme (owner 2026-10-25) */
.hud .pc-bar i.ok,.hud .pv .pv-bar .a.ok{background:var(--up);} .hud .pc-bar i.mid,.hud .pv .pv-bar .a.mid{background:#e0b63a;} .hud .pc-bar i.low,.hud .pv .pv-bar .a.low{background:var(--down);}
.hud .pcard .pc-lbl b.ok{color:var(--up);} .hud .pcard .pc-lbl b.mid{color:#e0b63a;} .hud .pcard .pc-lbl b.low{color:var(--down);}
.hud .pcard .pc-sub{display:flex;justify-content:space-between;font-size:10px;color:var(--mute);}
.hud .pcard .pc-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);padding-top:8px;}
.hud .pcard .pc-stats>div+div{border-left:1px solid var(--line);padding-left:10px;}
.hud .pcard .pc-stats span{display:block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:3px;}
.hud .pcard .pc-stats b{display:block;font-size:14px;color:var(--ink);font-weight:600;}
.hud .pcard .pc-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.hud .pcard .pc-btns span{display:block;text-align:center;border-radius:8px;padding:8px;font-weight:700;font-size:12px;border:1px solid;letter-spacing:.06em;}
.hud .pcard .pc-buy{color:var(--up);border-color:rgba(70,192,122,.5);background:rgba(70,192,122,.08);} .hud .pcard .pc-sell{color:var(--down);border-color:rgba(229,72,77,.5);background:rgba(229,72,77,.08);}
/* Bar Replay: a nudge pointing at the controls until the first click; nudge and buttons wrap as one group */
@media(prefers-reduced-motion:reduce){.rpw .nudge .bob{animation:none;}}

/* closing call to action: its own height, generous but not a whole screen */
html.fitpg main>section#f-end{padding:96px 0 72px;min-height:0!important;}
/* Bar Replay nudge: 'click me' with an arrow bending down onto the play button; placed by script */
.screen.big.rpw{position:relative;overflow:visible;}   /* the nudge hangs above the card's top edge */
.rpw .nudge{position:absolute;z-index:3;display:block;white-space:nowrap;color:var(--gold);font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.08em;pointer-events:none;transition:opacity .3s;}
.rpw .nudge .bob{display:flex;flex-direction:column;align-items:flex-end;gap:0;animation:nudgeBob 1.4s ease-in-out infinite;}   /* the bob lives on an inner wrapper: the positioned element is measured, and a bobbing element measured mid-bob landed the arrow a few px off */
.rpw .nudge svg{display:block;margin:3px 0 0 0;width:46px;height:30px;}   /* the words sit a little higher, with air above the arrow */
.rpw .nudge.off{opacity:0;} .rpw .nudge.off .bob{animation:none;}
@keyframes nudgeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* trade analysis section: the app's Data analysis view, then one trade re-priced */
.anal .sbar.tabs{gap:6px;}
.anal .tab{font-family:var(--mono);font-size:11px;color:var(--mute);padding:6px 12px;border-radius:8px;} .anal .tab.on{color:var(--ink);background:rgba(255,255,255,.08);}
.anal .tiles7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:12px 14px 0;}
.anal .t7{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:10px 11px;font-family:var(--mono);min-width:0;}
.anal .t7.hl{border-color:rgba(23,143,92,.55);}
.anal .t7 span{display:block;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.anal .t7 b{display:block;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;} .anal .t7 b.up{color:var(--up);} .anal .t7 b.dn{color:var(--down);}
.anal .t7 small{display:block;font-size:9px;color:var(--mute);line-height:1.4;margin-top:4px;}
.anal .sbody.charts{padding-bottom:0;}
.anal .sbody.charts .pane{padding:10px 12px 8px;min-height:0;display:flex;flex-direction:column;}
.anal .sbody.charts .ph{border:0;padding:0 0 6px;font-size:12px;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:600;}
.anal .sbody.charts .chwrap{flex:1 1 auto;display:flex;} .anal .sbody.charts .chwrap svg{flex:1 1 auto;width:100%;height:140px;}
.anal .sbody.charts .chwrap .ax{left:1%;font-size:8.5px;}
.anal .trade{margin:12px 14px 14px;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--mono);}
.anal .trow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:11.5px;}
.anal .tsym{color:var(--gold);font-weight:700;font-size:13px;} .anal .tsym em{font-style:normal;color:var(--up);}
.anal .tmeta{color:var(--mute);font-size:10.5px;} .anal .tbig{font-size:18px;font-weight:700;}
.anal .tbars{display:grid;gap:7px;margin:12px 0 10px;}
.anal .tb{display:grid;grid-template-columns:150px 1fr 86px;align-items:center;gap:10px;font-size:10.5px;}
.anal .tb span{color:var(--mute);text-align:right;} .anal .tb b{text-align:right;font-weight:600;font-size:11.5px;}
.anal .tb .bar{display:block;height:14px;border-radius:3px;background:var(--up);} .anal .tb .bar.neg{background:var(--down);margin-left:0;} .anal .tb .bar.pos{margin-left:50%;transform-origin:left;max-width:50%;}
.anal .tb .bar{position:relative;} .anal .tb{position:relative;}
.anal .tb::before{content:"";position:absolute;left:160px;right:96px;top:0;bottom:0;background:rgba(255,255,255,.04);border-radius:3px;}
.anal .tpath{margin:4px 0 8px;} .anal .tpath svg{width:100%;height:110px;display:block;} .anal .tpath .ax{font-size:8.5px;} .anal .tpath .lab{font-size:9.5px;letter-spacing:.1em;}
.anal .tfoot{border-top:1px solid var(--line);padding-top:10px;font-size:10.5px;color:var(--mute);line-height:1.6;} .anal .tfoot b{color:var(--ink);font-weight:600;} .anal .tfoot b.up{color:var(--up);} .anal .tfoot b.dn{color:var(--down);} .anal .tfoot span{color:var(--gold);}
@media(max-width:900px){.anal .tiles7{grid-template-columns:repeat(4,minmax(0,1fr));} .anal .tb{grid-template-columns:110px 1fr 80px;} .anal .tb::before{left:120px;right:90px;}}
@media(max-width:560px){.anal .tiles7{grid-template-columns:repeat(2,minmax(0,1fr));}}
.anal-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.anal-tiles .card{padding:20px 20px 18px;} .anal-tiles h3{font-size:16px;margin:0 0 6px;} .anal-tiles p{margin:0;font-size:14px;line-height:1.65;color:var(--mute);}
@media(max-width:900px){.anal-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.anal-tiles{grid-template-columns:1fr;}}
/* fit mode: the Analysis section is laid out exactly like Blind and Bar Replay (rules above, shared selectors) */
html.fitpg #f-analysis h2{grid-column:1;grid-row:2;font-size:clamp(40px,3.4vw,64px);line-height:1.04;margin:0 0 28px;max-width:none;}
html.fitpg #f-analysis .lead{grid-column:1;grid-row:3;font-size:var(--subfs);line-height:var(--sublh);margin:0;max-width:none;}
html.fitpg #f-analysis .screen.big{grid-column:2;grid-row:1/span 4;max-width:none;margin:0;align-self:center;width:100%;}
html.fitpg #f-analysis .duo{grid-column:1;grid-template-columns:minmax(0,1fr);gap:10px;}
html.fitpg #f-analysis .duo .card{padding:14px 16px;}
html.fitpg #f-analysis .duo .card h3{font-size:clamp(14.5px,1vw,17px);margin:0 0 4px;}
html.fitpg #f-analysis .duo.cards .checks{margin:4px 0 0;}
html.fitpg #f-analysis .duo.cards .checks li{font-size:clamp(13.5px,0.95vw,16px);line-height:1.55;padding:5px 0 5px 22px;}
html.fitpg #f-analysis .duo.cards .checks li::before{left:0;}
html.fitpg #f-blind .card.wide{grid-column:1/-1;grid-row:4;margin:14px 0 0;max-width:none;padding:12px 16px;}
html.fitpg #f-blind .card.wide h3{font-size:clamp(14.5px,1vw,17px);margin:0 0 6px;}
html.fitpg #f-blind .card.wide .checks li{font-size:clamp(13.5px,0.95vw,16px);line-height:1.55;padding:5px 0 5px 22px;}
html.fitpg #f-blind .card.wide .checks li::before{left:0;}
html.fitpg .anal .sbody.charts .chwrap svg{height:66px;} html.fitpg .anal .trade{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;} html.fitpg .anal .tpath{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;margin:8px 0 10px;} html.fitpg .anal .tpath svg{flex:1 1 auto;height:auto;min-height:58px;} html.fitpg .anal .tbars{gap:7px;margin:10px 0 8px;} html.fitpg .anal .tiles7{padding-top:8px;gap:6px;} html.fitpg .anal .trade{margin:10px 14px 14px;padding:12px 14px;}
html.fitpg .anal .t7{padding:7px 9px;} html.fitpg .anal .t7 b{font-size:15px;} html.fitpg .anal .t7 small{margin-top:2px;line-height:1.3;}
html.fitpg .anal .sbody.charts{gap:10px;padding:10px 14px 0;} html.fitpg .anal .sbody.charts .pane{padding:8px 10px 6px;}
html.fitpg .anal .tb .bar{height:11px;} html.fitpg .anal .tfoot{padding-top:10px;line-height:1.6;} html.fitpg .anal .sbar.tabs{padding:8px 14px;}
/* Blind cockpit, the same height as its neighbours */
html.fitpg .cockpit2 .hud{padding:10px 12px 0;gap:8px;} html.fitpg .hud.side{padding:0;gap:12px;} html.fitpg .hud.side>.pv,html.fitpg .hud.side>.pcard{padding:14px 16px!important;} html.fitpg .hud.side>.pcard{gap:10px;} html.fitpg .cockpit2 .hud .pcard{gap:6px;padding:10px 12px!important;} html.fitpg .cockpit2 .hud .pv{gap:4px;padding:10px 12px!important;}
html.fitpg .cockpit2 .sbody{padding:10px 12px;gap:10px;} html.fitpg .cockpit2 .pane .chwrap svg{min-height:0;}
html.fitpg .cockpit2 .reveal2{margin:0 12px 12px;padding:8px 12px;gap:2px;} html.fitpg .cockpit2 .reveal2 .rvtxt{font-size:10.5px;line-height:1.45;}
html.fitpg .cockpit2 .sbar{padding:9px 14px;}

/* Bar Replay controls: timeframe and step buttons share one height and baseline */
.rpw .tfs,.rpw .steps{display:inline-flex;align-items:center;}
.rpw .ctl{display:contents;}   /* the group is only a wrapper: the step buttons sit in the bar like the timeframe buttons; the nudge is placed by script */
.rpw .tfs button,.rpw .steps button{height:26px;padding:0 9px;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;}
.rpw .steps button{font-size:10px;min-width:30px;}

/* hero headline fills its column: three set lines, sized so the longest ('option trading knowledge.') runs the column's full width (measured: 10.7px of line per px of font, 536px column at 1440) */
.hero h1{text-wrap:balance;font-size:clamp(34px,3.9vw,64px);line-height:1.02;}
html.fitpg .hero h1{white-space:nowrap;}

/* no visible scrollbar on the landing: the page still scrolls (wheel, trackpad, keys), the bar itself is hidden */
html.landing{scrollbar-width:none;-ms-overflow-style:none;}
html.landing::-webkit-scrollbar{width:0;height:0;display:none;}

/* Blind section: the 'nothing like it' card spans both columns */
.card.wide{display:block;max-width:1000px;margin:16px auto 0;text-align:left;}
.card.wide h3{margin:0 0 8px;} .card.wide .checks{width:100%;}
.card.wide .checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px;margin-top:10px;}
.card.wide .checks li{font-size:13.5px;line-height:1.65;color:var(--mute);} .card.wide .checks li b{color:var(--ink);font-weight:600;}
@media(max-width:760px){.card.wide .checks{grid-template-columns:1fr;}}/* fit mode: the screen stands exactly as tall as the side column beside it — the chart pane takes the difference */
html.fitpg #f-blind .screen.big,html.fitpg #f-replay .screen.big,html.fitpg #f-analysis .screen.big,html.fitpg #f-live .screen.big{align-self:center;display:flex;flex-direction:column;}   /* the screen sizes to its cards and sits centred; the slack is black margin, never a gap inside the cards */html.fitpg #f-blind .screen.big>.sbody,html.fitpg #f-replay .screen.big>.sbody,html.fitpg #f-live .screen.big>.sbody{flex:1 1 auto;min-height:0;}
html.fitpg #f-analysis .screen.big>.trade{flex:1 1 auto;}
html.fitpg .cockpit2 .sbody.two>.pane:not(.chainp){min-height:0;}
html.fitpg .rpw .pane.cv{position:relative;min-height:0;}
html.fitpg .rpw canvas{position:absolute;inset:0;width:100%;height:100%;min-height:0;}   /* out of the flow: the pane sets the height (a 430px floor, or the side column's), and the canvas can never feed its drawn size back into the layout */

/* fit mode on a wide stage: the board, data cards and the full-width Blind card spread with it */
html.fitpg .lbwrap{max-width:1240px;}
html.fitpg #f-data .duo.cards{max-width:1400px;}
html.fitpg #f-data .duo.cards .checks li{font-size:clamp(14px,1vw,16.5px);}
html.fitpg #f-data .lead{font-size:var(--subfs);line-height:var(--sublh);max-width:78ch;}
html.fitpg #board .lead{font-size:var(--subfs);line-height:var(--sublh);}

/* top bar: logo hard left, App hard right, larger type */
header nav,header nav.wrap{max-width:none;padding:14px 32px;}
.navlinks .lnk{font-size:15px;padding:9px 14px;}
.navlinks .btn{font-size:14px;padding:10px 20px;}
.logo{font-size:19px;}
.logo .klogo{width:26px;height:22px;}
/* hero badge: its border lines up with the ink of the headline's first letter */
.hero .pill{margin-left:4px;}
/* leaderboard spreads with the wide stage */
html.fitpg .lbwrap{max-width:none;width:100%;margin-left:0;margin-right:0;}   /* auto side margins would keep it at its natural width inside the flex column */
/* on the wide stage the board's columns share the width and the sparkline grows with its column */
html.fitpg .lbrow{grid-template-columns:52px 1.3fr 1.1fr 1fr 0.9fr 0.7fr 0.6fr 0.7fr;font-size:13.5px;padding:11px 12px;}
html.fitpg .lbperf svg{width:100%;height:30px;}
html.fitpg .lbrow.lbhd{font-size:10px;}

/* the 'only here' section: the data section's form, the seats card picked out in gold */
#f-only h2{margin-bottom:34px;}   /* air between the headline and the two cards (owner 2026-10-24: "too close") */
html.fitpg #f-only h2{margin-bottom:40px;}
#f-only .duo.cards{max-width:1000px;}
html.fitpg #f-only .duo.cards{max-width:1400px;}
html.fitpg #f-only .duo.cards .checks li{font-size:clamp(14px,1vw,16.5px);}
html.fitpg #f-only .lead{font-size:var(--subfs);line-height:var(--sublh);max-width:78ch;}
#f-only .card.hl{border-color:rgba(23,143,92,.55);background:linear-gradient(180deg,rgba(23,143,92,.07),rgba(0,0,0,0) 60%),var(--card);}
#f-only .card h3{display:flex;align-items:center;gap:10px;}
#f-only .seats{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#0c0c0a;background:var(--gold);border-radius:999px;padding:4px 10px;font-weight:600;}

/* top bar: the current section's link is gold */
.navlinks .lnk.on{color:var(--gold);background:rgba(23,143,92,.08);}
/* the leaderboard line balances onto two even lines */
#board .lead.bal{text-wrap:balance;max-width:62ch;}

/* ---- outside fit mode — phones, tablets, phones on their side and short windows (fit mode is >=900 wide AND >=560 tall;
   desktop is untouched): nothing may be wider than the screen, or a phone zooms the whole page out to fit it (on a 375px
   phone the page drew at about half size, 2026-10-23). Sizes are fluid; wide tables scroll inside their own card, never the
   page; the page keeps the browser's own scroll (never an inner scroll box — that froze real iPhones twice). */
@media(max-width:899px),(max-height:559px){
  :root{--gut:clamp(14px,4.5vw,22px);}   /* the page's side margin: 14px on a 320px phone, the desktop 22px from ~490px */
  .wrap{padding-left:var(--gut);padding-right:var(--gut);}
  header nav,header nav.wrap{padding:10px var(--gut);}
  /* the gold glow at the top: the same ellipse in a page-wide box (a narrow screen has no room for the 88px sideways drift — a
     centred 1100px box reached 737px on a 375px phone); here it drifts only up and down */
  body::before{width:100%;background:radial-gradient(550px 320px at 50% 50%,rgba(23,143,92,.10),transparent 70%) no-repeat;animation-name:drift-y;}
  /* a plain 1fr column never shrinks below its content (the hero replay card had widened the page to 522px) */
  .show.one,.hc.rp{grid-template-columns:minmax(0,1fr);}
  .show::before{left:calc(-1 * min(20px,var(--gut)));right:calc(-1 * min(20px,var(--gut)));}   /* the card's glow ends at the screen edge */
  .show.one{overflow-x:clip;overflow-clip-margin:var(--gut);}   /* the win's confetti flies ~160px sideways: cut at the screen edge, never past it (up stays free) */
  /* the replay card's title wraps whole: 'Day 40 / 40' never splits, it drops under the title at the right */
  .hc.rp>.t{flex-wrap:wrap;row-gap:4px;}
  .hc.rp>.t>b{white-space:nowrap;margin-left:auto;}
  /* everything a thumb presses is at least 44px tall */
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .tier>.btn{display:flex;}
  .navlinks .lnk,a.logo{min-height:44px;display:inline-flex;align-items:center;}   /* the wordmark is a link home since c1c259e */
  .lbmode button{min-height:44px;}
  .rpw .tfs button,.rpw .steps button{height:44px;min-width:44px;font-size:12px;}
  /* trade-analysis path: the first and last day labels sit inside the chart instead of hanging off its edges */
  .anal .tpath .ax:nth-child(1 of .ax[style*="top:96%"]){transform:translate(0,-50%)!important;}
  .anal .tpath .ax:nth-last-child(1 of .ax[style*="top:96%"]){transform:translate(-100%,-50%)!important;}
}
/* a wide phone on its side (>=900 wide, short) keeps the two-column hero: the headline follows its column (0.4 of the row) */
@media(min-width:900px) and (max-height:559px){.hero h1{font-size:clamp(22px,calc((100vw - 2 * var(--gut) - 48px) * .4 / 11),56px);}}
@keyframes drift-y{from{transform:translateY(0)}to{transform:translateY(40px)}}
@media(max-width:899px){
  .hero{grid-template-columns:minmax(0,1fr);}
  /* the headline's three set lines stay three: the longest ('option trading knowledge.') is 10.7 times the type size, so the
     size follows the column; a phone on its side also caps it by the screen's height */
  .hero h1{font-size:clamp(22px,min(calc((100vw - 2 * var(--gut)) / 11),12vh),56px);}
  .hero .sub{max-width:62ch;}   /* a readable line on a tablet or a phone on its side */
  section.fsec h2{font-size:clamp(30px,calc(4.8vw + 14px),46px);}
  /* the top bar's section links (15px since the larger type) need ~890px beside the logo and App — narrower, they ran off
     the right edge (721-790px) or broke onto two lines; here the bar is the logo and App, as on phones */
  .navlinks .lnk{display:none;}
  /* the closing and pricing headlines are section headlines too; a headline's gold second line balances on its own lines
     ('No ticker. No date. / No hindsight.', never a lone last word) */
  #pricing h2,#f-end h2{font-size:clamp(30px,calc(4.8vw + 14px),48px);line-height:1.06;}
  section h2 br+em,#h-pricing em{display:block;text-wrap:balance;}
  /* analysis tiles: Net P&L takes two columns, so seven tiles fill the grid with no lone tile */
  .anal .t7.hl{grid-column:span 2;}
  /* the board on a tablet: the name column keeps room for a full handle, the money columns share the rest */
  .lbrow{grid-template-columns:30px minmax(120px,1.4fr) 76px minmax(92px,1fr) minmax(78px,.9fr) 52px 48px 62px;}
  .lbrow .lbperf svg{max-width:100%;height:auto;}
}
@media(max-width:760px){
  /* the Blind and Bar Replay screens stack, as every .sbody.two already does here (their 1.55fr / 1fr rule had kept them side by side) */
  .cockpit2 .sbody.two,.rpw .sbody.two{grid-template-columns:minmax(0,1fr);}
  .screen .sbar{flex-wrap:wrap;}
  /* Bar Replay bar: ticker, clock and the step buttons on the top line (so the nudge hangs above the card, as on desktop),
     the timeframes a full row under them */
  .rpw .sbar{row-gap:10px;column-gap:10px;}
  .rpw #rpwWhen{flex:1 1 0;min-width:0;}   /* the clock takes what is left beside the ticker and the buttons, wrapping if it must */
  .rpw .sbar>.grow{display:none;}
  .rpw .tfs{order:1;flex:1 1 100%;max-width:440px;}
  .rpw .tfs button{flex:1 1 0;}
  /* on a phone the Blind and Bar Replay screens go from the chart straight to the position card: the portfolio-value card
     is left out (owner 2026-10-24: "remove this area on mobile only") */
  .hud.hud2.side>.pv{display:none;}/* ...and Blind,Bar Replay and Analysis end with their screen: the two bullet cards under each are left out on a phone
     (owner 2026-10-24: "remove from mobile"); the 'only here' section,which is its cards,keeps them */
  #f-blind .duo.cards,#f-replay .duo.cards,#f-analysis .duo.cards,#f-live .duo.cards{display:none;}
  /* the board still swipes sideways, without a visible scrollbar under it (owner 2026-10-24) */
  .lbwrap .lb{scrollbar-width:none;}
  .lbwrap .lb::-webkit-scrollbar{display:none;}
}
/* short wording for a phone: .on-phone shows only there, .off-phone everywhere else (owner 2026-10-24: "if you have to
   shorten some words do it") */
@media(min-width:601px){.on-phone{display:none!important;}}
@media(max-width:600px){.off-phone{display:none!important;}}
@media(max-width:600px){
  .screen .sbody{padding:clamp(8px,2.4vw,14px);}
  /* analysis on a phone: Net P&L across the top, then drawdown, commissions, calls and puts in pairs (win rate and
     expectancy are left out, the tile notes are the short ones); the trade below reads in lines, not a squeeze — the
     contract with its P&L, a short fill line, each bar under its label and value, and the round-trip numbers as a grid */
  .anal .tiles7{grid-template-columns:repeat(2,minmax(0,1fr));}
  .anal .t7.hl{grid-column:1/-1;}
  .anal .trow .tmeta{order:1;flex-basis:100%;}
  .anal .trow>.grow{flex:1;}   /* the trade's P&L holds the right edge of the contract line */
  .anal .tbars{gap:12px;}
  .anal .tb{grid-template-columns:minmax(0,1fr) auto;row-gap:5px;column-gap:10px;font-size:11px;}
  .anal .tb>span{grid-row:1;grid-column:1;text-align:left;}
  .anal .tb>b{grid-row:1;grid-column:2;}
  .anal .tb>.bar{grid-row:2;grid-column:1/-1;height:8px;}
  .anal .tb::before{left:0;right:0;top:auto;bottom:0;height:8px;}
  .anal .tstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;border-top:1px solid var(--line);padding-top:12px;}
  .anal .tstats span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:3px;}
  .anal .tstats b{font-size:14px;font-weight:600;color:var(--ink);} .anal .tstats b.up{color:var(--up);} .anal .tstats b.dn{color:var(--down);}
  /* the two charts sit in the tiles' grid: the same edges, the same 8px gaps, the same small grey label on top */
  .anal .sbody.charts{padding:8px 14px 0;gap:8px;}
  .anal .sbody.charts .pane{padding:10px 11px 8px;}
  .anal .sbody.charts .ph{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:400;}
  .anal .trade{margin-top:8px;}
  /* the product screens' small print is at least 10px on a phone (labels were 8-9px) */
  .hud .pv .pv-lbl,.hud .pv .pv-row2 span,.hud .pcard .pc-lbl span,.hud .pcard .pc-stats span,.reveal2 .rvtag,.anal .t7 span,.anal .t7 small{font-size:10px;}
  .lbrow.lbhd{font-size:9.5px;}
  .rpw #rpwWhen{text-wrap:balance;}   /* '2026-05-19 · / 19:00 UTC', never a lone 'UTC' */
  .anal .sbody.charts .chwrap svg{min-height:0;height:150px;}   /* the two analysis charts were ~230px each on a phone */
  /* hero replay card: the cost on its own line with the P&L and % under it, the P&L sized to the card; the position on its
     own line with entry and exit under it, each stock price under its option price; the chart's labels sized to the chart */
  .hc.rp .win{grid-template-columns:minmax(0,1fr) auto;container-type:inline-size;}
  .hc.rp .win>span{grid-column:1/-1;}
  .hc.rp .win b{font-size:clamp(20px,calc((100cqi - 96px) / 5.5),38px);text-align:left;min-width:0;}   /* the P&L sits under 'Cost', left-aligned (right-aligned in its wide column it left a hole on the left) */
  .hc.rp .win em{justify-self:end;}   /* the % pill holds the right edge, so the count-up never pushes it */
  .hc.rp .chwrap{container-type:inline-size;}
  .hc.rp .mk .t{font-size:clamp(8px,calc((96cqi - 56px) / 21),10.5px);}   /* the longest label is 20.5 times the type size */
  /* the position as one ticket read top to bottom (owner 2026-10-24: "my eyes go all over the place"): the contract, then
     entry and exit as rows — label and price on one line, the stock price under the label — the prices right-aligned in one
     column so 6.90 sits over 118.00; boxed like the P&L above it; the footnote steps back */
  .hc.rp .pos{display:block;padding:2px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);}
  .hc.rp .pos>div{padding:11px 0;}
  .hc.rp .pos>div+div{border-top:1px solid var(--line);}
  .hc.rp .pos>div:first-child>span{display:none;}
  .hc.rp .pos>div:not(:first-child){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline;}
  .hc.rp .pos>div:not(:first-child)>span{margin:0;}
  .hc.rp .pos>div:not(:first-child)>b{display:contents;font-size:18px;}
  .hc.rp .pos small{display:block;grid-column:1;margin:4px 0 0;}
  .hc.rp>.t.foot{font-size:10px;line-height:1.6;color:#6f6c63;}   /* the chart axes' grey */
  /* the board: rank, name, sparkline and P&L in view at once on any phone (name and sparkline sized to the screen), the
     other columns slide in sideways inside the card */
  .lb{padding:4px 8px;--lbsp:clamp(40px,calc(100vw - 280px),64px);--lbname:clamp(88px,calc(100vw - 2 * var(--gut) - 156px - var(--lbsp)),160px);}
  .lbrow{grid-template-columns:22px minmax(var(--lbname),1fr) var(--lbsp) 78px 64px 44px 40px 50px;gap:6px;font-size:10px;width:max-content;min-width:100%;}
  /* trade-analysis path: every other day label in between gives way */
  .anal .tpath .ax:nth-child(2n of .ax[style*="top:96%"]){display:none;}
}
@media(max-width:560px){
  /* pricing on a phone: the four tiers side by side in one row that swipes sideways inside its own band (the owner's call of
     2026-10-20, 8ca3b1b), each card snapping into place with the next one peeking in at the edge; as in fit mode the tiers
     share their rows, so a feature sits at the same height on every card */
  .tiers-wrap{overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:12px var(--gut) 16px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);overscroll-behavior-x:contain;}
  .tiers{grid-template-columns:repeat(4,min(calc(100vw - 2 * var(--gut) - 44px),340px));gap:0 12px;}
  .tier{scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 15;row-gap:14px;}
  .tier>*{min-width:0;}
  .feat{display:grid;grid-template-rows:subgrid;grid-row:span 11;row-gap:0;}
  /* the dots under the row say it is a carousel: one per plan, the one in view lit gold and wider; tap one to go there */
  .tdots{display:flex;justify-content:center;margin:-14px 0 -4px;}   /* above the row, seen with the peeking card (the cards run ~1,000px tall) */
  .tiers-wrap{scrollbar-width:none;} .tiers-wrap::-webkit-scrollbar{display:none;}   /* the dots, not a scrollbar, say it moves */
  .tdots button{width:40px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .tdots button::before{content:"";width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.22);transition:width .2s ease,background .2s ease;}
  .tdots button.on::before{width:22px;background:var(--gold);}
  .tdots button:focus-visible{outline:2px solid var(--gold);outline-offset:-8px;border-radius:999px;}
}
@media(min-width:561px){.tdots{display:none;}}   /* only the phone's swipe row has dots */
@media(max-width:420px){
  .hc.rp{padding:18px 16px;gap:16px;}
  .hc.rp .win{padding:14px;}
}
html.fitpg #f-blind .lead,html.fitpg #f-replay .lead,html.fitpg #f-live .lead{font-size:clamp(21px,1.55vw,24px);line-height:1.65;}   /* the cards went (owner 2026-10-26): the paragraph carries their points, a size up */
main>section>h2{margin-bottom:28px;}   /* air between the headline and its paragraph (owner 2026-10-26) */
#f-end h2{font-size:clamp(34px,4.2vw,56px);line-height:1.06;}   /* the closing headline sized with the others (owner 2026-10-26: "for all") */