/* ═══════════════════════════════════════════════════════════════════════════
   Analatica — landing
   Light editorial page with one full-bleed dark instrument panel at the top.
   Lavender is the only accent; green/red appear only where they carry data
   meaning. Rules and spacing do the structural work, not cards.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --hdr-h:78px;
  --lav:#A78BFA;
  --lav-deep:#8B6FE0;
  --lav-tint:#F3EFFE;
  --lav-line:#E4DBFB;
  --up:#16A34A;
  --dn:#E11D48;
  --bg:#F4F2F8;
  --panel:#FFFFFF;
  --ink:#241E33;
  --ink-dim:#6B6478;

  /* dark instrument */
  --d-bg:#0E0B16;
  --d-ink:#F5F2FC;
  --d-dim:#A79FBD;
  --d-faint:#6B6388;
  --d-line:rgba(167,139,250,.16);

  --shell:1140px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --disp:"Poppins",var(--sans);
  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--disp);letter-spacing:-.03em;text-wrap:balance}
:focus-visible{outline:2px solid var(--lav);outline-offset:3px;border-radius:2px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:28px}
@media (max-width:640px){.shell{padding-inline:20px}}

/* ── shared type ─────────────────────────────────────────────────────────── */
.h-xl{font-weight:700;font-size:clamp(2.1rem,min(6.4vw,9.2vh),4.9rem);line-height:.96;letter-spacing:-.045em}
.h-lg{font-weight:700;font-size:clamp(1.9rem,3.9vw,2.8rem);line-height:1.12;letter-spacing:-.03em}
.eyebrow{
  display:block;font:700 10px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--lav-deep);margin-bottom:18px;
}
.tag{
  font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--d-dim);display:inline-flex;align-items:center;gap:7px;
}
.tag.dim{color:var(--d-faint)}
.tag-live i{
  width:6px;height:6px;border-radius:50%;background:var(--up);
  box-shadow:0 0 0 3px rgba(22,163,74,.16);animation:blink 1.7s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

.link{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--disp);font-weight:600;font-size:1rem;
  color:var(--lav-deep);text-decoration:none;
  padding-bottom:3px;border-bottom:1.5px solid transparent;transition:border-color .16s;
}
.link:hover{border-bottom-color:var(--lav-deep)}
.arw{display:inline-block;transition:transform .18s var(--ease)}
.link:hover .arw,.btn:hover .arw{transform:translateX(4px)}

/* ── header ──────────────────────────────────────────────────────────────── */
.hdr{position:relative;z-index:5;background:var(--bg)}
.hdr-in{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 28px;border-bottom:1px solid var(--lav-line);
}
@media (max-width:640px){.hdr-in{padding-inline:20px}}
.wordmark{
  font-family:var(--disp);font-weight:600;font-size:1.15rem;
  color:var(--lav-deep);text-decoration:none;white-space:nowrap;
}
.hdr-nav{display:flex;align-items:center;gap:22px}
.hdr-nav a{
  font:600 11px/1 var(--mono);letter-spacing:.05em;
  color:var(--ink-dim);text-decoration:none;transition:color .15s;
}
.hdr-nav a:hover{color:var(--lav-deep)}
.hdr-acct{color:var(--lav-deep)!important}
@media (max-width:600px){
  .hdr-nav{gap:13px}
  .hdr-nav a{font-size:10px}
}
@media (max-width:420px){.hdr-nav a:not(.hdr-acct){display:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — the one inverted surface on the page. Dark ground lets the lavender
   data actually emit light, and gives "Open dashboard" the feel of a way in.
   ═══════════════════════════════════════════════════════════════════════════ */
/* The hero is sized to the viewport so the tape sits on the fold: everything the
   hero has to say is visible without scrolling, and the tape is the edge that
   tells you there is more below. */
.hero{
  position:relative;background:var(--d-bg);color:var(--d-ink);overflow:hidden;
  min-height:calc(100svh - var(--hdr-h,78px));
  display:flex;flex-direction:column;
}
/* Positioning context for the visualisation, so it can bleed to the right edge
   of the viewport rather than stopping at the shell's gutter. */
.hero-stage{position:relative;overflow:hidden;flex:1 1 auto;min-height:0;display:flex}
.hero-stage>.shell{width:100%}
@media (max-width:1000px){
  .hero{min-height:0}
  .hero-stage{display:block}
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(167,139,250,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(167,139,250,.05) 1px,transparent 1px);
  background-size:72px 72px;
  /* fades the grid out toward the bottom so the tape edge stays clean */
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
}
.hero-in{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  /* clears the absolutely-placed rail, which no longer reserves layout height */
  padding-top:calc(var(--rail-h) + 8px);padding-bottom:clamp(12px,3vh,26px);
}

/* Height of the metadata rail incl. its padding — the visualisation aligns its
   top edge to this so it begins exactly level with the headline. */
.hero{--rail-h:clamp(62px,9.5vh,86px)}
@media (max-width:640px){.hero{--rail-h:76px}}

.rail{
  position:absolute;top:clamp(18px,3.4vh,30px);left:28px;right:28px;
  display:flex;align-items:center;gap:11px;
  font:500 10px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--d-faint);
}
.rail-dot{width:6px;height:6px;border-radius:50%;background:var(--d-faint);flex:none}
.rail-dot.on{background:var(--up);box-shadow:0 0 0 3px rgba(22,163,74,.18);animation:blink 1.7s ease-in-out infinite}
.rail-end{margin-inline-start:auto;letter-spacing:.08em}
@media (max-width:680px){.rail-x{display:none}}

/* Asymmetric split: copy holds the left 52%, the visualisation occupies the
   right 48% — but as an absolutely-placed element rather than a grid cell, so it
   can start level with the headline and run off the right and bottom edges
   instead of sitting in a box beside it. */
.hero-copy{width:52%}
@media (max-width:1000px){.hero-copy{width:100%;padding-bottom:0}}

.h-xl em{font-style:normal;color:var(--lav)}
.h-xl .ln{display:block}
.lede{
  margin:clamp(12px,2.6vh,22px) 0 0;max-width:40ch;
  font-size:clamp(.92rem,1.75vh,1.02rem);line-height:1.55;color:var(--d-dim);
}
.acts{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:clamp(14px,3vh,26px)}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--lav);color:#16112A;
  font-family:var(--disp);font-weight:600;font-size:1rem;text-decoration:none;
  padding:clamp(11px,1.7vh,14px) 24px;border-radius:9px;
  box-shadow:0 8px 28px rgba(167,139,250,.28);
  transition:background-color .18s,transform .18s var(--ease),box-shadow .18s;
}
.btn:hover{background:#C4B5FD;transform:translateY(-2px);box-shadow:0 14px 38px rgba(167,139,250,.4)}
.ghost{
  font:600 11px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--d-dim);text-decoration:none;
  border-bottom:1px solid var(--d-line);padding-bottom:4px;transition:color .15s,border-color .15s;
}
.ghost:hover{color:var(--lav);border-bottom-color:var(--lav)}

.counts{display:flex;gap:clamp(22px,3vw,36px);margin:clamp(16px,3.6vh,32px) 0 0}
.counts div{margin:0}
.counts dt{
  font-family:var(--disp);font-weight:700;font-size:clamp(1.2rem,2.7vh,1.65rem);line-height:1;
  letter-spacing:-.03em;color:var(--d-ink);font-variant-numeric:tabular-nums;
}
.counts dd{
  margin:9px 0 0;font:500 9px/1.3 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--d-faint);
}
@media (max-width:480px){.counts{gap:26px}.counts dt{font-size:1.45rem}}

/* ── the visualisation ───────────────────────────────────────────────────── */
/* Starts level with the headline (--rail-h clears the metadata rail) and runs to
   the right and bottom edges of the panel. No frame, no header bar: framing it
   would make it a dashboard sitting next to a headline, which is exactly the
   thing this composition is trying not to be. */
.viz{
  position:absolute;
  top:var(--rail-h,86px);right:0;bottom:0;
  width:48%;
  pointer-events:auto;
}
#chart{width:100%;height:100%;cursor:crosshair}
.viz-tag{
  position:absolute;bottom:14px;
  font:500 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  pointer-events:none;
}
.viz-raw{left:4%;color:var(--d-faint)}
.viz-res{right:28px;color:var(--lav)}
.viz-read[hidden]{display:none}
.viz-read{
  position:absolute;top:10px;left:16px;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:8px 11px;border-radius:7px;
  background:rgba(14,11,22,.9);border:1px solid var(--d-line);
  pointer-events:none;
}
.viz-read b{font:700 14px/1 var(--mono);color:var(--lav);font-variant-numeric:tabular-nums}
.viz-read span{font:500 9px/1 var(--mono);letter-spacing:.1em;color:var(--d-faint);text-transform:uppercase}

/* Stacked: the visualisation drops below the copy and spans the full width,
   still bleeding off the right edge. */
@media (max-width:1000px){
  .viz{
    position:relative;top:auto;right:auto;bottom:auto;
    width:calc(100% + 28px);height:300px;margin:34px -28px 0 0;
  }
  .viz-raw{left:2%}
  .viz-res{right:36px}
}
@media (max-width:640px){
  .viz{width:calc(100% + 20px);height:250px;margin-right:-20px}
}

/* ── tape ────────────────────────────────────────────────────────────────── */
.tape{position:relative;display:flex;align-items:stretch;border-top:1px solid var(--d-line)}
.tape-chip{
  display:flex;align-items:center;padding-inline:28px;flex:none;
  border-inline-end:1px solid var(--d-line);
  font:700 9px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--d-faint);
}
@media (max-width:640px){.tape-chip{padding-inline:20px}}
.tape-view{flex:1;min-width:0;overflow:hidden;padding:14px 0}
.tape-run{display:flex;gap:30px;width:max-content;animation:tape 64s linear infinite}
.tape:hover .tape-run{animation-play-state:paused}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.t-item{display:inline-flex;align-items:baseline;gap:8px;font:500 11px/1 var(--mono);white-space:nowrap}
.t-sym{color:var(--d-dim);letter-spacing:.05em}
.t-chg{font-weight:700;font-variant-numeric:tabular-nums}
.t-up{color:#4ADE80}.t-dn{color:#FB7185}.t-fl{color:var(--d-faint)}

/* ═══════════════════════════════════════════════════════════════════════════
   THE TRANSFORMATION — the page's one scroll-scrubbed moment.
   A tall section with a sticky stage: scrolling drives a wall of raw quotes
   collapsing into a legible chart. It is the product thesis, under the
   visitor's own hand rather than asserted in a sentence.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Light ground on purpose: the hero and its tape are the dark surface, and the
   page turns here. Continuing dark past the tape made this read as more of the
   hero rather than as the next thing. */
.morph{position:relative;height:320vh;background:var(--bg);color:var(--ink)}
.morph-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.morph-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:52px;align-items:center;width:100%}
@media (max-width:900px){
  .morph{height:280vh}
  .morph-in{grid-template-columns:1fr;gap:26px}
}
.morph-copy .eyebrow{color:var(--lav-deep)}
.morph .h-lg{display:grid;gap:2px}
.morph .h-lg span{display:block;transition:color .45s var(--ease),opacity .45s var(--ease)}
.m-a{color:#B3ACC2}
.m-b{color:var(--ink)}
.morph.lit .m-a{color:#B3ACC2;opacity:.4}
.morph.lit .m-b{color:var(--lav-deep)}
.morph-lede{margin:18px 0 0;color:var(--ink-dim);font-size:1rem;line-height:1.6;max-width:38ch}
.morph-steps{display:flex;gap:20px;margin-top:26px;flex-wrap:wrap}
.ms{
  display:inline-flex;align-items:center;gap:8px;
  font:500 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#A79FB5;
  transition:color .3s;
}
.ms i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;transition:opacity .3s,transform .3s var(--ease)}
.ms.on{color:var(--lav-deep)}
.ms.on i{opacity:1;transform:scale(1.35)}
.morph-stage{position:relative;height:min(58vh,440px)}
@media (max-width:900px){.morph-stage{height:min(42vh,320px)}}
#morph-cv{width:100%;height:100%}
.morph-bar{width:190px;max-width:60%;height:2px;margin-top:26px;border-radius:2px;background:var(--lav-line);overflow:hidden}
.morph-bar span{display:block;height:100%;width:0;border-radius:2px;background:var(--lav-deep);transition:width .12s linear}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */
.sec{padding:104px 0;border-top:1px solid var(--lav-line)}
.sec:first-of-type{border-top:none}
/* Follows the scrubbed section. It still has to read as a new page, but a rule
   there was a hard purple break — so the change is carried by the surface
   instead: the top ~150px blends out of the previous ground into white, and
   everything below sits on a plainly different surface. A step you can see, but
   no edge you can point at. */
/* 01 is its own full-bleed band, the same device 02 uses: edge to edge, square
   corners, no shadow. A radius and a lift turned it into a card floating on the
   page; a rule turned it into a hard line. A change of ground across the full
   width is what actually reads as a different section. */
.morph + .sec{
  border-top:none;
  padding-top:104px;
  background:var(--panel);
}
@media (max-width:700px){.morph + .sec{padding-top:72px}}
/* Inside a white section the lens needs its own ground back, or the framed
   figure disappears into the page. */
.morph + .sec .lens{background:var(--bg)}
.morph + .sec .lens-bar{background:var(--panel)}
@media (max-width:700px){.sec{padding:64px 0}}
.sec-head{max-width:62ch}
.sec-lede{margin:16px 0 22px;font-size:1.02rem;line-height:1.62;color:var(--ink-dim)}

/* ── 01 lens ─────────────────────────────────────────────────────────────── */
.lens{margin:44px 0 0;border:1px solid var(--lav-line);border-radius:12px;background:var(--panel);overflow:hidden}
.lens-bar{
  display:flex;align-items:center;gap:18px;
  padding:13px 18px;border-bottom:1px solid var(--lav-line);background:#FCFBFE;
}
.lens-bar .tag{color:var(--ink-dim)}
.lens-bar .tag.dim{color:#9C95AB}
.lens-bar-end{margin-inline-start:auto}
@media (max-width:560px){.lens-bar-end{display:none}}
.lens-stage{position:relative;height:clamp(300px,44vw,440px)}
#lens{width:100%;height:100%;cursor:crosshair}
.lens-hint{
  position:absolute;left:18px;right:18px;bottom:15px;
  font:500 10px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:#9C95AB;pointer-events:none;transition:opacity .3s;
}
.lens-stage.live .lens-hint{opacity:0}
.d-touch{display:none}
@media (hover:none){.d-hover{display:none}.d-touch{display:inline}}
@media (max-width:560px){.lens-hint{font-size:9px;letter-spacing:.05em}}

/* Focus readout — turns the lens from a pretty effect into a usable instrument. */
.lens-card{
  position:absolute;top:16px;inset-inline-start:18px;
  display:flex;flex-direction:column;gap:5px;
  padding:12px 15px;border-radius:9px;
  background:rgba(255,255,255,.94);border:1px solid var(--lav-line);
  box-shadow:0 10px 30px rgba(36,30,51,.1);
  pointer-events:none;max-width:min(300px,62%);
}
.lens-card-sym{font:700 15px/1 var(--mono);color:var(--ink);letter-spacing:.04em}
.lens-card-name{
  font-size:.78rem;line-height:1.35;color:var(--ink-dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lens-card-chg{font:700 11px/1 var(--mono);font-variant-numeric:tabular-nums}

/* What the dashboard actually contains — a plain index on hairlines, so it
   reads as a contents page rather than a feature grid. */
.incl{
  list-style:none;margin:34px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 44px;
  border-top:1px solid var(--lav-line);
}
@media (max-width:760px){.incl{grid-template-columns:1fr;gap:0}}
.incl li{
  display:flex;flex-direction:column;gap:5px;
  padding:14px 0;border-bottom:1px solid var(--lav-line);
}
.incl b{font:700 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.incl span{font-size:.87rem;line-height:1.5;color:var(--ink-dim)}

/* ── 02 built ────────────────────────────────────────────────────────────── */
.band{background:var(--lav-tint)}

/* Heading and its lede share a row, so the section opens with a statement
   rather than dropping straight into numbers. */
.built-top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:20px 56px;align-items:end;
}
@media (max-width:860px){.built-top{grid-template-columns:1fr;align-items:start}}
.built-lede{margin:0;font-size:1rem;line-height:1.62;color:var(--ink-dim);max-width:46ch}

/* The architecture: four stages on one rule, each carrying its own real detail.
   This replaces a pipeline strip and a separate seven-item capability list —
   every capability belonged to a stage, so the stages carry the information as
   structure instead of repeating it as bullets. */
.arch{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0 34px;
  margin:52px 0 0;padding-top:30px;
  border-top:1px solid var(--lav-line);
  position:relative;
}
@media (max-width:900px){.arch{grid-template-columns:repeat(2,1fr);gap:36px 34px}}
@media (max-width:560px){.arch{grid-template-columns:1fr;gap:30px}}

.arch-col{position:relative;padding-right:22px}
/* Node on the rule above each stage, with the connector running to the next. */
.arch-col::before{
  content:"";position:absolute;top:-35px;left:0;
  width:9px;height:9px;border-radius:50%;
  background:var(--lav-tint);border:1.5px solid var(--lav-deep);
}
.arch-col::after{
  content:"";position:absolute;top:-31.5px;left:13px;right:8px;height:1.5px;
  background:linear-gradient(to right,var(--lav-deep),rgba(139,111,224,.25));
}
.arch-col:last-child::after{display:none}
@media (max-width:900px){
  .arch-col:nth-child(2n)::after{display:none}
}
@media (max-width:560px){.arch-col::after{display:none}}

.arch-i{
  display:block;font:700 9px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--lav-deep);
}
.arch-col>b{
  display:block;margin-top:12px;
  font-family:var(--disp);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink);
}
.arch-col ul{list-style:none;margin:14px 0 0;padding:0}
.arch-col li{
  position:relative;padding-left:15px;margin-bottom:9px;
  font-size:.85rem;line-height:1.5;color:var(--ink-dim);
}
.arch-col li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:5px;height:1.5px;background:var(--lav);
}

/* Evidence rail: the measured figures and the stack, closing the section. */
.built-foot{
  margin-top:56px;padding-top:30px;border-top:1px solid var(--lav-line);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:28px 56px;align-items:start;
}
@media (max-width:860px){.built-foot{grid-template-columns:1fr}}
.stats{display:flex;gap:44px;margin:0}
@media (max-width:520px){.stats{gap:26px;flex-wrap:wrap}}
.stats div{margin:0}
.stats b{
  display:block;font-family:var(--disp);font-weight:700;
  font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.stats>div>span{
  display:block;margin-top:9px;max-width:16ch;
  font:500 9px/1.4 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);
}
.stack{
  margin:0;font:500 11px/1.8 var(--mono);letter-spacing:.04em;
  color:var(--ink-dim);word-break:break-word;
}

/* ── 03 modes ────────────────────────────────────────────────────────────── */
/* Standard on the left, Terminal on the right, same ticker, same values — the
   pairing is the argument, so it's built as two literal mock instrument panels
   rather than a feature-card grid or a comparison table. Terminal's mock reuses
   the app's own dark/mono/sharp-corner/corner-bracket language exactly; Standard
   reuses the app's own light/rounded language exactly — this is what the two
   modes actually look like, not an illustration of them. */
.modes-vis{
  margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:22px;
}
@media (max-width:760px){.modes-vis{grid-template-columns:1fr;gap:16px}}
.modes-panel{display:flex;flex-direction:column;gap:12px}
.modes-label{
  font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
}
.modes-terminal .modes-label{color:var(--d-dim)}

.modes-mock{border-radius:12px;padding:20px 22px;position:relative}
.modes-mock-std{
  background:var(--panel);border:1px solid var(--lav-line);
  box-shadow:0 10px 30px rgba(36,30,51,.06);
}
.mm-std-name{font-family:var(--disp);font-weight:600;font-size:1.02rem;color:var(--ink)}
.mm-std-name b{font-weight:600;color:var(--ink-dim);font-size:.85rem;margin-left:5px}
.mm-std-price{
  margin-top:8px;font-family:var(--disp);font-weight:700;font-size:1.7rem;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.mm-std-chip{
  display:inline-block;margin-top:12px;padding:5px 12px;border-radius:7px;
  background:var(--lav-tint);color:var(--lav-deep);
  font:600 12px/1 var(--sans);
}
.mm-std-note{margin-top:14px;font-size:.85rem;line-height:1.55;color:var(--ink-dim)}

/* Sharp corners, dark ground, monospace — and the same corner-bracket HUD
   flourish Terminal Mode uses on every real card in the app. */
.modes-mock-term{
  background:var(--d-bg);border-radius:2px;font-family:var(--mono);color:var(--d-ink);
  border:1px solid var(--d-line);
}
.modes-mock-term::before,.modes-mock-term::after{
  content:"";position:absolute;width:9px;height:9px;pointer-events:none;border-color:var(--lav);opacity:.7;
}
.modes-mock-term::before{top:-1px;left:-1px;border-top:1.5px solid var(--lav);border-left:1.5px solid var(--lav)}
.modes-mock-term::after{bottom:-1px;right:-1px;border-bottom:1.5px solid var(--lav);border-right:1.5px solid var(--lav)}
.mm-term-head{font-size:11px;letter-spacing:.06em;color:var(--d-dim)}
.mm-term-grid{
  margin-top:14px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;
  background:var(--d-line);border:1px solid var(--d-line);
}
.mm-term-grid>div{background:var(--d-bg);padding:9px 10px}
.mm-term-grid span{display:block;font-size:9px;letter-spacing:.05em;color:var(--d-faint)}
.mm-term-grid b{display:block;margin-top:3px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--d-ink)}
.mm-dn{color:#FB7185!important}
@media (max-width:420px){.mm-term-grid{grid-template-columns:1fr 1fr}}

/* Two plain columns on a shared rule, same device as .incl — an index, not a
   feature grid, so Standard and Terminal read as equally substantial. */
.modes-cols{
  margin-top:52px;padding-top:30px;border-top:1px solid var(--lav-line);
  display:grid;grid-template-columns:1fr 1fr;gap:8px 56px;
}
@media (max-width:760px){.modes-cols{grid-template-columns:1fr;gap:34px}}
.modes-col-h{
  display:block;font-family:var(--disp);font-weight:600;font-size:1rem;color:var(--ink);margin-bottom:14px;
}
.modes-col ul{list-style:none;margin:0;padding:0}
.modes-col li{
  position:relative;padding:10px 0 10px 16px;
  border-bottom:1px solid var(--lav-line);
  font-size:.87rem;line-height:1.5;color:var(--ink-dim);
}
.modes-col li::before{
  content:"";position:absolute;left:0;top:1.05em;width:5px;height:1.5px;background:var(--lav);
}

.modes-equal{
  margin:40px 0 0;font-family:var(--disp);font-weight:600;font-size:1.05rem;
  letter-spacing:-.01em;color:var(--ink);max-width:56ch;
}

/* ── 04 aref ─────────────────────────────────────────────────────────────── */
.aref{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;margin-top:4px}
@media (max-width:880px){.aref{grid-template-columns:1fr;gap:38px}}
.h-lg em{font-style:normal;color:var(--lav-deep)}
.aref-def{margin:14px 0 0;font-size:.95rem;color:var(--ink-dim)}
.aref-def .ar{font-size:1.15rem;color:var(--ink)}
.aref-def .tr{font-family:var(--mono);font-size:.82rem}
.aref-tag{margin:26px 0 0;font-family:var(--disp);font-weight:600;font-size:1.3rem;color:var(--ink)}
.aref-body{margin:12px 0 0;font-size:1rem;line-height:1.65;color:var(--ink-dim);max-width:52ch}
.caps{margin-top:30px;display:flex;flex-direction:column;gap:18px}
.cap{display:flex;gap:14px;align-items:flex-start}
.cap i{width:7px;height:7px;border-radius:50%;background:var(--lav);margin-top:7px;flex:none}
.cap b{display:block;font-size:.95rem;color:var(--ink)}
.cap p{margin:4px 0 0;font-size:.87rem;line-height:1.55;color:var(--ink-dim)}
.aref-vis{position:relative}
#aref-vid{width:100%;border-radius:14px;background:var(--lav-tint);box-shadow:0 24px 56px rgba(36,30,51,.14)}
.aref-quote{
  margin:-46px 0 0 auto;position:relative;width:min(88%,380px);
  background:var(--panel);border:1px solid var(--lav-line);border-radius:12px;
  padding:20px 22px;box-shadow:0 18px 44px rgba(36,30,51,.12);
}
.qm{position:absolute;top:6px;left:14px;font-family:var(--disp);font-size:2.6rem;color:var(--lav-line);line-height:1}
.q-lead{margin:0;font-family:var(--disp);font-weight:600;font-size:1rem;position:relative}
.q-body{margin:8px 0 0;font-size:.87rem;line-height:1.6;color:var(--ink-dim);position:relative}
.aref-cta{margin-top:72px;padding-top:40px;border-top:1px solid var(--lav-line);max-width:62ch}
.aref-cta h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,2.8vw,2rem);letter-spacing:-.03em}
.aref-cta p{margin:12px 0 20px;font-size:1rem;line-height:1.6;color:var(--ink-dim)}
.fine{margin:24px 0 0!important;font-size:.78rem!important;line-height:1.55;color:#9C95AB!important}

/* ── footer ──────────────────────────────────────────────────────────────── */
.ftr{padding:48px 0 60px;border-top:1px solid var(--lav-line);text-align:center}
.ftr-word{
  font-family:var(--disp);font-weight:600;font-size:1.15rem;
  color:var(--lav-deep);text-decoration:none;
}
.ftr p{margin:10px 0 0;font-size:.85rem}
.ftr a[data-app-link]{color:var(--ink-dim);text-decoration:none}
.ftr a[data-app-link]:hover{color:var(--lav-deep)}

/* ── odometer ────────────────────────────────────────────────────────────── */
/* Digits ride in fixed-width columns that spin to their value. The whole thing
   is one line tall with the strip clipped, so it never disturbs layout. */
/* Declared with !important because these live inside containers that legitimately
   style their own descendants (stat labels, hero counters); the odometer's
   internals must not inherit those. */
.odo{display:inline-flex!important;align-items:flex-start;line-height:1}
.odo .od-cell{
  display:block!important;height:1em;overflow:hidden;
  font-size:inherit!important;margin:0!important;letter-spacing:inherit!important;
}
.odo .od-strip{
  display:block!important;transform:translateY(0);
  font-size:inherit!important;margin:0!important;
  transition:transform 1.6s cubic-bezier(.18,.9,.24,1);
}
.odo .od-strip>span{
  display:block!important;height:1em;line-height:1;
  font-size:inherit!important;margin:0!important;letter-spacing:inherit!important;
  text-transform:none!important;color:inherit!important;
  font-variant-numeric:tabular-nums;
}
.odo .od-fix{
  display:block!important;height:1em;line-height:1;
  font-size:inherit!important;margin:0!important;letter-spacing:inherit!important;
  text-transform:none!important;color:inherit!important;
}
@media (prefers-reduced-motion:reduce){.od-strip{transition:none}}

/* ── entrance choreography ───────────────────────────────────────────────── */
/* Defaults to visible: if the script never runs, the page is simply a finished
   page rather than a blank one. JS opts elements in before observing them. */
.armed [data-ln],.armed.reveal>*{opacity:0;transform:translateY(20px)}
.armed [data-ln]{transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--ln,0)*90ms + 120ms)}
.armed.reveal>*{transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.hero.in [data-ln],.reveal.in>*{opacity:1;transform:none}

/* The headline gets a masked rise rather than a fade — each line clipped by its
   own box and pushed up from beneath it, which reads as typeset rather than
   animated. Applied per-line so the two clauses land in sequence. */
.h-xl .ln{overflow:hidden;padding-bottom:.04em}
.h-xl .ln>span{display:block}
.hero.armed .h-xl .ln>span{
  transform:translateY(105%);
  transition:transform .95s var(--ease);
  transition-delay:calc(var(--ln,0)*110ms + 90ms);
}
.hero.in .h-xl .ln>span{transform:none}
.hero.armed .h-xl .ln{opacity:1;transform:none}   /* the line box itself never fades */
@media (prefers-reduced-motion:reduce){
  .armed [data-ln],.armed.reveal>*{opacity:1!important;transform:none!important;transition:none}
  .tape-run{animation:none}
  .pipe li::after{animation:none;opacity:0}
  .tag-live i,.rail-dot.on{animation:none}
  .btn:hover{transform:none}
}

/* ── Aref's launcher ─────────────────────────────────────────────────────── */
/* Present on every section, including over the dark hero, so the palette here
   is self-contained rather than inherited from whatever it happens to sit on. */
.aref-dock{position:fixed;right:26px;bottom:26px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
@media (max-width:560px){.aref-dock{right:16px;bottom:16px}}

.aref-fab{
  position:relative;width:62px;height:62px;padding:0;flex:none;
  border-radius:50%;border:2px solid var(--lav);background:var(--lav-tint);
  cursor:pointer;overflow:visible;
  box-shadow:0 10px 30px rgba(36,30,51,.28);
  transition:transform .2s var(--ease),box-shadow .2s;
}
.aref-fab img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.aref-fab:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(139,111,224,.42)}
.aref-fab-dot{
  position:absolute;right:1px;bottom:1px;width:13px;height:13px;border-radius:50%;
  background:var(--up);border:2.5px solid var(--bg);
}

.aref-pop{
  width:min(300px,calc(100vw - 44px));
  background:var(--panel);border:1px solid var(--lav-line);border-radius:14px;
  padding:18px 18px 16px;position:relative;
  box-shadow:0 22px 54px rgba(36,30,51,.22);
  animation:popIn .26s var(--ease);
}
.aref-pop[hidden]{display:none}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.aref-pop{animation:none}.aref-fab:hover{transform:none}}
.aref-pop img{border-radius:50%;margin-bottom:10px}
.aref-pop-lead{margin:0;font-family:var(--disp);font-weight:600;font-size:1.02rem;color:var(--ink)}
.aref-pop-body{margin:7px 0 14px;font-size:.85rem;line-height:1.55;color:var(--ink-dim)}
.aref-pop-cta{
  display:inline-flex;align-items:center;gap:7px;
  font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--lav-deep);text-decoration:none;
  padding-bottom:3px;border-bottom:1.5px solid transparent;transition:border-color .16s;
}
.aref-pop-cta:hover{border-bottom-color:var(--lav-deep)}
.aref-pop-cta:hover .arw{transform:translateX(4px)}
.aref-pop-x{
  position:absolute;top:8px;right:10px;
  background:none;border:0;cursor:pointer;line-height:1;
  font-size:19px;color:#B3ACC2;padding:4px;
}
.aref-pop-x:hover{color:var(--ink)}