/* ===========================================================================
   Self-hosted, latin only.

   Three cuts of one family and nothing else. The condensed is the display
   face: at 5rem a normal-width grotesk either wraps to three lines or has to
   shrink, and the financial press settled on condensed headlines for exactly
   that reason. The regular carries prose, the mono carries every number on the
   page. A number never appears in the sans and a sentence never appears in the
   mono, which is the whole typographic rule here.
   =========================================================================== */
@font-face{font-family:"PlexCond";src:url(assets/fonts/IBMPlexSansCond-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"PlexCond";src:url(assets/fonts/IBMPlexSansCond-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(assets/fonts/IBMPlexSans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(assets/fonts/IBMPlexSans-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(assets/fonts/IBMPlexSans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"PlexMono";src:url(assets/fonts/IBMPlexMono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PlexMono";src:url(assets/fonts/IBMPlexMono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* A neutral near-black, not a blue one. The screenshots are drawn on black
     and a navy page behind them makes the product look like it is floating in
     someone else's colour. */
  --bg:#08090c; --bg-2:#0b0c10; --panel:#0e1015; --panel-2:#12151b;
  --line:#1a1d24; --line-2:#272b34; --line-3:#363c47;
  --ink:#eceef2; --ink-2:#98a0ad; --ink-3:#666e7b; --ink-4:#464d58;

  /* Buy, sell and point of control are the product's own. Nothing else on this
     page is allowed to be green, violet or amber, so those three keep meaning
     what they mean inside a chart. */
  --buy:#22c55e; --sell:#a855f7; --poc:#f0b90b;

  --mono:"PlexMono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Plex",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --cond:"PlexCond","Plex",-apple-system,"Segoe UI Condensed",system-ui,sans-serif;

  --maxw:1240px;
  --pad:34px;
  --r:4px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;font-feature-settings:"cv05" 1;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;height:auto;display:block}
::selection{background:rgba(34,197,94,.26)}
:focus-visible{outline:2px solid var(--buy);outline-offset:3px;border-radius:2px}

/* ---------------------------------------------------------------------------
   Layout.

   The two hairlines are the spine of the page. They sit exactly where the
   content column starts and ends and run the entire height of the document,
   the way the plot area of a chart is bounded rather than floated. Everything
   that wants to feel like a panel snaps to them, and the page reads as one
   ruled sheet instead of a stack of unrelated cards.
   --------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative}
.spine{position:fixed;inset:0;pointer-events:none;z-index:0;display:flex;justify-content:center}
.spine i{width:100%;max-width:calc(var(--maxw) - var(--pad) * 2);border-left:1px solid rgba(255,255,255,.035);border-right:1px solid rgba(255,255,255,.035)}
body>*:not(.spine){position:relative;z-index:1}
section{position:relative}
.band{padding:88px 0}
.band-sm{padding:60px 0}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--cond);font-weight:700;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:clamp(2.9rem,6.6vw,5.2rem);line-height:.93}
h2{font-size:clamp(2.05rem,4.2vw,3.25rem);line-height:1.02}
h3{font-size:1.3rem;line-height:1.15;letter-spacing:-.012em}
h4{font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.3;letter-spacing:-.01em}
p{text-wrap:pretty}
.lede{font-size:clamp(1.03rem,1.35vw,1.16rem);color:var(--ink-2);line-height:1.62;max-width:62ch}
.lede b,.lede strong{color:var(--ink);font-weight:600}
.small{font-size:.9rem;color:var(--ink-2);line-height:1.6}
.fine{font-size:.79rem;color:var(--ink-4);line-height:1.6}

/* Section headers as a ruled index entry rather than a centred title block.
   The number is doing real work: this page is an argument in seven steps and
   the reader should be able to feel where they are in it. */
.shead{display:flex;align-items:baseline;gap:16px;border-top:1px solid var(--line-2);padding-top:13px;margin-bottom:30px}
.shead .n{font-family:var(--mono);font-size:.74rem;font-weight:500;color:var(--buy)}
.shead .t{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.shead .r{margin-left:auto;font-family:var(--mono);font-size:.74rem;color:var(--ink-4)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--r);font-size:.95rem;font-weight:600;
  border:1px solid transparent;cursor:pointer;font-family:var(--sans);
  transition:background .15s,border-color .15s,color .15s;white-space:nowrap;
}
/* Solid, flat, no gradient and no glow. It is the same green the product fills
   a buy with, which is the one colour this audience already reads as "go". */
.btn-go{background:var(--buy);color:#04160b}
.btn-go:hover{background:#31d96e}
.btn-line{border-color:var(--line-2);color:var(--ink)}
.btn-line:hover{border-color:var(--line-3);background:rgba(255,255,255,.04)}
.btn-lg{padding:15px 26px;font-size:1rem}
.btn-sm{padding:9px 15px;font-size:.86rem}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(8,9,12,.72);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid transparent;transition:border-color .2s}
header.stuck{border-bottom-color:var(--line)}
/* How far through the argument you are. The page is eight numbered sections
   long and the section index in each header only tells you where you are once
   you have arrived; this tells you before. */
header::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:var(--prog,0%);background:var(--buy);opacity:.8}
.nav{display:flex;align-items:center;gap:30px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:700;font-size:1.28rem;letter-spacing:-.01em}
.brand svg{width:26px;height:26px;flex:none}
.nav-links{display:flex;gap:24px;margin-left:6px}
.nav-links a{font-family:var(--mono);font-size:.82rem;color:var(--ink-3);transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-cta .sign{font-size:.9rem;color:var(--ink-2);padding:9px 6px}
.nav-cta .sign:hover{color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding:70px 0 60px}
.hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:58px;align-items:end}
.hero h1{max-width:13ch}
.hero .lede{margin-top:26px;max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:32px}
.hero-note{margin-top:16px;font-family:var(--mono);font-size:.8rem;color:var(--ink-3);display:flex;align-items:flex-start;gap:8px;line-height:1.55}
.hero-note svg{flex:none;color:var(--buy);margin-top:5px}

/* The share columns. Two bars of identical height, one filled to what a single
   venue chart can see and one to what five books see, because the argument of
   the entire page is a ratio and a ratio wants to be a length. */
.share{border:1px solid var(--line);background:var(--panel);padding:22px 22px 18px}
.share-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px 16px;margin-bottom:20px;flex-wrap:wrap}
.share-h .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.share-h .d{font-family:var(--mono);font-size:.72rem;color:var(--ink-4)}
/* Aligned to the TOP, not the bottom. The captions under the bars are different
   lengths — "Binance alone…" wraps to two lines and "Binance, OKX, Bybit, Gate
   and Bitget…" to three — so bottom-aligning the columns pushed the shorter one
   down by the extra line, and the two bars this panel exists to compare no
   longer started or ended level with each other. A ratio read as two lengths
   only works if the lengths share a baseline. */
.share-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.share-col{display:flex;flex-direction:column;gap:9px}
.share-bar{height:206px;border:1px solid var(--line-2);background:
  repeating-linear-gradient(-45deg,transparent 0 6px,rgba(255,255,255,.026) 6px 7px);
  display:flex;flex-direction:column;justify-content:flex-end;position:relative}
/* What the bar is a fraction OF, said once, inside the empty part of it. The
   hatching alone reads as decoration; labelled, it is the rest of the market. */
.share-bar::after{
  content:attr(data-ghost);position:absolute;top:9px;left:9px;right:9px;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);line-height:1.35;
}
.share-seg{width:100%;transition:height 1.05s cubic-bezier(.16,.84,.3,1);height:0;box-shadow:0 -1px 0 var(--bg)}
.share-cap{display:flex;flex-direction:column;gap:3px}
.share-cap .v{font-family:var(--mono);font-size:1.58rem;font-weight:500;letter-spacing:-.04em;line-height:1}
.share-cap .v em{font-style:normal;font-size:.86rem;letter-spacing:0;margin-left:1px}
.share-cap .l{font-size:.79rem;color:var(--ink-3);line-height:1.35}
.share-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:9px}
.share-foot .x{font-family:var(--mono);font-size:1.05rem;color:var(--buy);font-weight:500}
.share-foot .t{font-size:.83rem;color:var(--ink-3)}

/* ---------------------------------------------------------------------------
   The tape.

   A full bleed strip of prints between the hero and the argument, coloured the
   way the product's own volume ticks are. It is the one moving thing on the
   page and it is doing a job: the whole pitch is that this product reads a
   tape, and a tape is a thing that runs. Generated once from a fixed seed, so
   it is the same strip on every load and never redraws.
   --------------------------------------------------------------------------- */
.tape{position:relative;height:66px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.tape-track{display:flex;align-items:center;height:100%;width:max-content;animation:taperun 78s linear infinite;will-change:transform}
@keyframes taperun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.tape-track i{display:block;width:2px;border-radius:1px;flex:none}
.tape::before,.tape::after{content:"";position:absolute;top:0;bottom:0;width:120px;pointer-events:none;z-index:2}
.tape::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.tape::after{right:0;background:linear-gradient(270deg,var(--bg-2),transparent)}
.tape .wrap{position:absolute;inset:0;z-index:3;display:flex;align-items:center;pointer-events:none}
/* The label needs its own plate. Sitting on the ticks it is unreadable, and a
   wide enough edge fade to clear it would swallow a third of the strip. */
.tape-label{position:relative;display:flex;align-items:center;gap:9px;background:var(--bg-2);
  font-family:var(--mono);font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.tape-label::after{content:"";position:absolute;left:100%;top:0;bottom:0;width:64px;background:linear-gradient(90deg,var(--bg-2),transparent)}
.tape-label b{color:var(--buy);font-weight:400}

/* ---------------------------------------------------------------------------
   The proof.

   One ladder that changes its mind when you press the switch, rather than two
   ladders side by side. Side by side, a reader compares two pictures. Morphing
   in place, they watch a number they were about to trade on turn into a
   different number, which is the thing the product is actually selling.
   --------------------------------------------------------------------------- */
.demo{border:1px solid var(--line-2);background:var(--panel);padding:0}
.demo-top{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:15px 20px;border-bottom:1px solid var(--line)}
.demo-tag{font-family:var(--mono);font-size:.76rem;color:var(--ink-3)}
.seg{display:flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;margin-left:auto}
.seg button{
  font-family:var(--sans);font-size:.86rem;font-weight:600;padding:9px 16px;border:0;cursor:pointer;
  background:transparent;color:var(--ink-3);transition:background .16s,color .16s;
}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:rgba(255,255,255,.07);color:var(--ink)}
.demo-body{display:grid;grid-template-columns:1fr 268px;gap:0}
.demo-plot{padding:26px 24px 22px;min-width:0}
.demo-side{border-left:1px solid var(--line);padding:26px 24px;display:flex;flex-direction:column;gap:22px}

/* The header has to carry the candle column's width too, or every label sits
   62px left of the column it names. */
.lad-head{display:flex;font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);margin-bottom:10px}
.lad-head .z{width:48px;flex:none;margin-right:14px}
.lad-head .a{width:62px;flex:none}
.lad-head .b{flex:1;text-align:center;min-width:0}
.lad-head .c{flex:1;text-align:center;min-width:0}
.lad-head .d{width:74px;min-width:0;flex:none;text-align:right}
.lad-head em,.lad-head u{font-style:normal;text-decoration:none}
.lad-head u{display:none}

.lad-wrap{display:flex;gap:14px}
.lad-candle{width:48px;flex:none}
.lad{flex:1;min-width:0}
.lad-row{display:flex;align-items:center;height:36px;position:relative}
.lad-row::before{content:"";position:absolute;left:-14px;right:0;top:50%;height:1px;background:var(--line);opacity:.5}
.lad-price{width:62px;flex:none;font-family:var(--mono);font-size:.79rem;color:var(--ink-3);position:relative}
.lad-track{flex:1;display:flex;align-items:center;min-width:0;position:relative}
.lad-track::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--line-2)}
.lad-neg,.lad-pos{flex:1;display:flex;min-width:0}
.lad-neg{justify-content:flex-end}
.lad-bar{height:20px;border-radius:1px;width:0;transition:width .78s cubic-bezier(.16,.84,.3,1),background-color .4s}
.lad-neg .lad-bar{background:var(--sell)}
.lad-pos .lad-bar{background:var(--buy)}
/* min-width:0 matters: a flex item defaults to min-width:auto, so when the key
   row's delta grows to 1.06rem the column pushes past its 74px, the track loses
   width and the centre gutter stops lining up with every other row. */
.lad-val{width:74px;min-width:0;flex:none;text-align:right;font-family:var(--mono);font-size:.82rem;color:var(--ink-2);font-variant-numeric:tabular-nums;transition:color .4s,font-size .4s}
/* The one row the whole picture is about. It is marked before the switch is
   pressed, so nobody can accuse the page of choosing the level afterwards. */
.lad-row.key{background:linear-gradient(90deg,rgba(168,85,247,.09),transparent 78%)}
.lad-row.key .lad-price{color:var(--ink);font-weight:500}
.lad-row.key .lad-price::before{content:"";position:absolute;left:-14px;top:-2px;bottom:-2px;width:2px;background:var(--sell)}
.lad-row.key .lad-val{color:var(--ink);font-weight:500}
.lad-row.hot .lad-val{font-size:1.06rem;color:var(--sell)}
/* The label only exists in the state that earned it, and it is the sentence a
   trader would say out loud when they saw this level. */
.lad-flag{
  position:absolute;left:50%;transform:translate(14px,-50%) translateY(4px);top:50%;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sell);white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .3s .45s,transform .5s .45s cubic-bezier(.16,.84,.3,1);
}
.lad-row.hot .lad-flag{opacity:1;transform:translate(14px,-50%)}

.readout{display:flex;flex-direction:column;gap:5px}
.readout .k{font-family:var(--mono);font-size:.69rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4)}
.readout .v{font-family:var(--mono);font-size:1.72rem;font-weight:500;letter-spacing:-.035em;line-height:1.05;transition:color .4s}
.readout .s{font-size:.79rem;color:var(--ink-3);line-height:1.4}
.demo-foot{border-top:1px solid var(--line);padding:18px 24px;display:flex;gap:14px;align-items:flex-start}
.demo-foot .m{font-family:var(--mono);font-size:.78rem;color:var(--ink-4);flex:none;padding-top:2px}
.demo-foot p{font-size:.95rem;color:var(--ink-2);max-width:82ch}
.demo-foot p b{color:var(--ink);font-weight:600}
.verdict{margin-top:34px;font-family:var(--cond);font-weight:700;font-size:clamp(1.5rem,3vw,2.35rem);line-height:1.06;letter-spacing:-.018em;max-width:22ch}

/* ---------- data table ---------- */
.tablewrap{border:1px solid var(--line);overflow-x:auto;background:var(--panel)}
table{width:100%;border-collapse:collapse;min-width:680px}
th,td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--line);font-size:.93rem}
th{font-family:var(--mono);font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);font-weight:500}
tbody tr:last-child td{border-bottom:none}
tr.tot td{background:rgba(34,197,94,.055);font-weight:600}
tr.tot .venue{color:var(--ink)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.venue{display:flex;align-items:center;gap:11px;font-weight:500}
.swatch{width:3px;height:15px;flex:none}
.bar{height:6px;background:rgba(255,255,255,.05);overflow:hidden;min-width:120px}
.bar span{display:block;height:100%}

/* ---------- numbered method list ---------- */
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:56px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
.step .i{font-family:var(--mono);font-size:.8rem;color:var(--ink-4);padding-top:3px}
.step h4{margin-bottom:7px}
.step p{font-size:.95rem;color:var(--ink-2);max-width:76ch}

/* ---------- primer ---------- */
.primer{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:start}
.primer img{width:100%}
.keys{border-top:1px solid var(--line)}
.key{display:flex;gap:15px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.key .sw{width:15px;height:15px;flex:none;margin-top:4px;border-radius:2px}
.key .sw.b{background:var(--buy)}
.key .sw.s{background:var(--sell)}
.key .sw.o{border:2px solid var(--poc);background:transparent}
.key .sw.g{border:2px solid var(--buy);background:transparent}
.key .sw.d{background:linear-gradient(90deg,var(--sell),#2a2e36 52%,var(--buy))}
.key b{font-weight:600;display:block;margin-bottom:3px;font-size:.97rem;color:var(--ink)}
.key p{font-size:.9rem;color:var(--ink-2);line-height:1.55}

/* ---------------------------------------------------------------------------
   Feature showcase.

   Kept from the previous page because the mechanic works: five real captures,
   one at a time, switched by a strip of labels. What went is the glow. Each
   feature still carries the colour it is actually drawn in, but it now shows
   up as a 2px rule under the active label and a tint on its icon, not as a
   coloured wash behind the whole section.
   --------------------------------------------------------------------------- */
.sc-rail{display:flex;align-items:stretch;border:1px solid var(--line);border-bottom:0;background:var(--panel)}
.sc-tabs{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex:1}
.sc-tabs::-webkit-scrollbar{display:none}
.sc-tab{
  flex:1 0 auto;min-width:140px;padding:15px 16px 13px;border:0;background:none;cursor:pointer;font:inherit;
  display:flex;align-items:center;gap:11px;text-align:left;position:relative;transition:background .16s;
  border-right:1px solid var(--line);
}
.sc-tab:last-child{border-right:0}
.sc-tab:hover{background:rgba(255,255,255,.03)}
.sc-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:rgb(var(--fx));opacity:0;transition:opacity .2s}
.sc-ico{width:26px;height:26px;flex:none;color:var(--ink-4);transition:color .22s}
.sc-ico svg{width:26px;height:26px}
.sc-label{font-size:.89rem;font-weight:600;color:var(--ink-3);letter-spacing:-.01em;transition:color .2s;line-height:1.2}
.sc-tab[aria-selected="true"]{background:rgba(255,255,255,.045)}
.sc-tab[aria-selected="true"]::after{opacity:1}
.sc-tab[aria-selected="true"] .sc-ico{color:rgb(var(--fx))}
.sc-tab[aria-selected="true"] .sc-label{color:var(--ink)}

.sc-frame{border:1px solid var(--line);background:#000;position:relative}
.frame-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.frame-bar .tag{font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.frame-bar .live{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.71rem;color:var(--ink-4)}
.frame-bar .live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--buy);animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.sc-shot{display:none}
.sc-shot.on{display:block;animation:scfade .42s cubic-bezier(.2,.7,.3,1)}
.sc-shot img{width:100%;display:block}
@keyframes scfade{from{opacity:0}to{opacity:1}}
.sc-cap{display:grid;grid-template-columns:230px 1fr;gap:26px;border:1px solid var(--line);border-top:0;padding:22px 24px;min-height:112px;align-items:start}
.sc-cap h4{font-family:var(--cond);font-weight:700;font-size:1.3rem;letter-spacing:-.012em}
.sc-cap p{font-size:.94rem;color:var(--ink-2)}

/* ---------- compact feature list ---------- */
.rest{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.rest>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 24px 26px}
.rest h4{margin-bottom:8px}
.rest p{font-size:.9rem;color:var(--ink-2)}

/* ---------- who it is for ---------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line)}
.fit>div{padding:28px 30px}
.fit>div+div{border-left:1px solid var(--line);background:rgba(255,255,255,.012)}
.fit ul{list-style:none;display:grid;gap:12px;margin-top:16px}
.fit li{display:flex;gap:11px;font-size:.94rem;color:var(--ink-2)}
.fit li i{flex:none;font-style:normal;font-family:var(--mono);font-size:.9rem;line-height:1.5}
.fit .yes i{color:var(--buy)}
.fit .no i{color:var(--ink-4)}
.fit h4{font-family:var(--cond);font-weight:700;font-size:1.24rem}

/* ---------- pricing ---------- */
.prices{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);max-width:900px}
.price{padding:32px 32px 34px;display:flex;flex-direction:column}
.price+.price{border-left:1px solid var(--line);background:rgba(34,197,94,.028)}
.price .pn{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.price .amt{display:flex;align-items:baseline;gap:7px;margin:14px 0 4px}
.price .amt .n{font-family:var(--cond);font-size:3.4rem;font-weight:700;letter-spacing:-.03em;line-height:.9}
.price .amt .per{color:var(--ink-3);font-size:.88rem}
.price .sub{font-size:.9rem;color:var(--ink-2);margin-bottom:20px}
.tagline{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.79rem;padding:7px 11px;border:1px solid var(--line-2);color:var(--ink-2);align-self:flex-start;border-radius:var(--r)}
.tagline.on{border-color:rgba(34,197,94,.4);color:var(--buy);background:rgba(34,197,94,.06)}
.price ul{list-style:none;display:grid;gap:11px;margin:22px 0 28px}
.price li{display:flex;gap:11px;font-size:.92rem;color:var(--ink-2)}
.price li svg{flex:none;width:16px;height:16px;margin-top:4px;color:var(--buy)}
.price li.off{color:var(--ink-4)}
.price li.off svg{color:var(--ink-4)}
.price .btn{width:100%;margin-top:auto}

/* ---------- faq ---------- */
/* Scoped to .faq on purpose: these were bare element selectors and they reached
   into the method fold, which is also a details, and stamped a "+" on it. */
.faq{border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:19px 2px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;font-weight:600;font-size:1rem;transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--buy)}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--ink-4);font-size:1.2rem;font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2px 21px;color:var(--ink-2);font-size:.94rem;max-width:74ch}

/* ---------- finale ---------- */
.finale{border:1px solid var(--line-2);padding:64px 44px;background:var(--panel);display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.finale h2{max-width:16ch}
.stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-2);border-left:1px solid var(--line-2)}
.stats>div{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:16px 18px}
.stats .v{font-family:var(--mono);font-size:1.5rem;font-weight:500;letter-spacing:-.04em;line-height:1.1}
.stats .k{font-size:.76rem;color:var(--ink-3);margin-top:5px;line-height:1.4}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:44px 0 56px;color:var(--ink-3);font-size:.86rem;margin-top:36px}
.foot{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.foot a{color:var(--ink-3)}
.foot a:hover{color:var(--ink)}
.foot .right{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap;font-family:var(--mono);font-size:.8rem}
.disclaimer{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:.775rem;color:var(--ink-4);max-width:96ch;line-height:1.68}

/* ---------- reveal ----------
   Gated on the .js class, which the inline script in <head> sets. Hiding these
   in plain CSS means anything that does not run the script gets a page of
   headings above eleven thousand pixels of nothing: no-JS readers, a crawler
   that gave up, a script error on some browser we have not tried. */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .primer{grid-template-columns:1fr;gap:36px}
  .finale{grid-template-columns:1fr;gap:36px;padding:48px 32px}
  .rest{grid-template-columns:repeat(2,1fr)}
}
/* The hero holds its two columns well below the width the rest of the page
   gives up at: the headline is condensed and the share panel is only two bars,
   so both still fit, and stacking them early wastes the whole right half of a
   laptop screen on nothing. */
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:40px;align-items:start}
  .share{max-width:600px}
  .nav-links{display:none}
}
@media (max-width:900px){
  .demo-body{grid-template-columns:1fr}
  /* The readout stops being a sidebar and becomes a strip under the ladder.
     Three stacked blocks here would push the switch a whole screen away from
     the numbers it changes, which is the one thing this panel must not do. */
  .demo-side{border-left:0;border-top:1px solid var(--line);flex-direction:row;gap:18px}
  .demo-side>*{flex:1 1 0;min-width:0}
  .readout .v{font-size:1.34rem}
  .readout .s{font-size:.74rem}
  .sc-cap{grid-template-columns:1fr;gap:10px;min-height:0}
}
@media (max-width:700px){
  /* "Net sold" wraps to two lines in a 92px half-track and lands on top of the
     first row of bars. The flag has nowhere to go at all. */
  .lad-head{font-size:.62rem;letter-spacing:.05em}
  .lad-head em{display:none}
  .lad-head u{display:inline}
  .lad-flag{display:none}
  .share-h{flex-direction:column;gap:4px}
  /* The instrument line is the useful half of this bar; the status dot wraps
     under it and collides at this width, and it was never the point. */
  .frame-bar .live{display:none}
}
@media (max-width:760px){
  /* A footprint squeezed into 340px is a smear, and a smear does not make the
     argument the picture exists to make. Keep it readable and let it scroll. */
  .sc-shot{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sc-shot img{min-width:720px}
  .fit,.prices{grid-template-columns:1fr}
  .fit>div+div,.price+.price{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:640px){
  :root{--pad:20px}
  .band{padding:64px 0}
  .hero{padding:48px 0 56px}
  .spine{display:none}
  .nav-cta .sign{display:none}
  .lad-price{width:52px;font-size:.72rem}
  .lad-val{width:58px;font-size:.76rem}
  .lad-candle{width:34px}
  .demo-plot{padding:20px 16px}
  .demo-side{padding:20px 16px}
  .step{grid-template-columns:1fr;gap:8px}
  .finale{padding:36px 22px}
  .stats{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}