/* ============================================================================
   DECKS — component system. Pure composition on top of tokens.css.
   Each block is one component that will become one React component later.
   ============================================================================ */

/* — layout — */
.page{width:min(var(--maxw),94vw);margin:auto;padding:26px 0 90px}
.section{margin-top:var(--section-gap)}
.center{text-align:center}
.lead{max-width:760px;margin-left:auto;margin-right:auto}

/* — nav — */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  height:60px;padding:0 max(24px,calc((100vw - var(--maxw))/2));
  background:rgba(5,5,6,.72);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.03em;font-size:17px}
.brand .mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#fff,#8a8a92)}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px;color:var(--mid)}
.nav-links a:hover{color:var(--hi)}

/* — eyebrow (the section's mono kicker; provenance register) — */
.eyebrow{display:inline-flex;gap:8px;align-items:center;font-family:var(--mono);font-size:12.5px;
  color:var(--mid);border:1px solid var(--glass-line);border-radius:var(--r-pill);
  padding:7px 13px;background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.eyebrow .n{color:var(--lo)}

/* — type scale — */
h1{font-size:clamp(40px,6.6vw,76px);line-height:.96;letter-spacing:var(--tr-hero);font-weight:600;max-width:14ch;
  background:linear-gradient(180deg,#ffffff,#cfd2da);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.h2{font-size:clamp(32px,4.6vw,58px);line-height:1.01;letter-spacing:var(--tr-head);font-weight:600;max-width:18ch}
.sub{color:var(--mid);font-size:clamp(17px,1.7vw,21px);line-height:1.45;max-width:60ch}
.mini{color:var(--mid);font-size:14px;line-height:1.6}
.meta{font-family:var(--mono);font-size:12px;color:var(--faint)}

/* — buttons (Bible §9: button = action) — */
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;
  border-radius:var(--r-pill);font-weight:600;font-size:15px;border:1px solid transparent;
  background:var(--accent);color:var(--on-accent);transition:transform var(--dur-spring) var(--ease-spring),background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.secondary{background:rgba(255,255,255,.05);color:var(--hi);border-color:var(--glass-line)}
.btn.secondary:hover{background:rgba(255,255,255,.09)}
.btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* — glass card (Bible §9: panel = workspace, glass = hidden information) — */
.glass{border:1px solid var(--glass-line);background:var(--glass-bg);box-shadow:var(--glass-shadow);
  border-radius:var(--r-xl);overflow:hidden}

/* — "coming" tag for honest roadmap sections — */
.roadmap{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
  color:var(--lo);border:1px dashed var(--glass-line-strong);border-radius:var(--r-pill);padding:4px 10px}
.roadmap::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lo)}

/* ============================================================================
   HERO
   ============================================================================ */
.hero{text-align:center;padding:54px 0 48px}
.hero h1{margin:22px auto 18px;max-width:15ch}
.hero .sub{margin:0 auto}

/* ============================================================================
   OPERATOR SCREEN — a real captured screen, represented (monochrome).
   This is what sits behind the wall; the scanner reveals THESE, not an
   abstract dashboard. Honesty: it's an operator's screen, captured by going
   through their funnel.
   ============================================================================ */
.op{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:11px 10px;
  background:var(--cell-bloom),var(--cell-sheen),var(--cell-base);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.op .oh{display:flex;align-items:center;justify-content:space-between}
.op .lg{font:700 10px/1 var(--sans);letter-spacing:-.02em;color:#eef0f4}
.op .bl{font:400 7.5px/1 var(--mono);color:#9aa1ad}
.op .amt{border:1px solid var(--hairline);border-radius:5px;padding:7px 8px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  font:600 13px/1 var(--mono);color:#f3f5f9;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.op .chips{display:flex;gap:4px}
.op .chips i{flex:1;text-align:center;font:400 7px/1.7 var(--mono);color:var(--lo);border:1px solid var(--hairline);border-radius:4px}
.op .chips i.s{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.10)}
.op .pay{display:flex;gap:4px;margin-top:auto}.op .pay i{flex:1;height:11px;border-radius:3px;background:rgba(255,255,255,.05);border:1px solid var(--hairline)}
.op .cta{height:20px;border-radius:6px;background:linear-gradient(180deg,#d6dae1,#a7adb9);margin-top:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 6px rgba(0,0,0,.35)}
.cell:nth-child(3) .op .cta,.cell:nth-child(5) .op .cta{width:64%}

/* ============================================================================
   SCANNER (Phase-1 signature) — locked → revealed by a moving scanline.
   Motion = the --ease-reveal "discovery" primitive. Copy is STATIVE
   (indexed/tagged/captured), never present-continuous "scanning…",
   so it never implies live capture.
   @property powers the masked reveal; reduced-motion shows the revealed state.
   ============================================================================ */
@property --scan{syntax:'<number>';inherits:true;initial-value:0}
.stage-wrap{position:relative;padding:1px;border-radius:30px;margin-top:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.05) 38%,rgba(255,255,255,.18));
  box-shadow:0 50px 150px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.05)}
.stage{position:relative;border-radius:29px;overflow:hidden;min-height:620px;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 30%),#090a0e}
/* filmic grain — kills gradient banding, reads "shot on a real device" (shared depth) */
.stage::before,.graph::before,.console::before,.gstage::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:overlay;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:170px}
/* vignette + soft cool top wash (cool = luminance only) (shared depth) */
.stage::after,.graph::after,.console::after,.gstage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 150px 24px rgba(0,0,0,.55);
  background:radial-gradient(120% 80% at 50% -8%,rgba(255,255,255,.05),transparent 42%),radial-gradient(90% 60% at 82% 12%,rgba(80,160,255,.05),transparent 40%)}
.chrome{height:44px;display:flex;align-items:center;gap:8px;padding:0 16px;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.chrome .d{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.chrome .url{margin-left:10px;font:400 12.5px/1 var(--mono);color:var(--lo);
  border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.2);border-radius:var(--r-pill);padding:6px 13px}
.product{position:absolute;inset:44px 0 0}
.screen{position:absolute;inset:0;display:grid;grid-template-columns:230px 1fr;gap:18px;padding:24px}
.sidebar{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);border-radius:var(--r-lg);
  padding:16px;display:flex;flex-direction:column;gap:11px}
.sidebar .lr{display:flex;align-items:center;gap:9px;margin-bottom:6px;font:600 13px/1 var(--sans);letter-spacing:-.03em}
.sidebar .lr i{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#fff,#8a8a92)}
.sidebar .ni{height:32px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}
.sidebar .ni.on{background:rgba(255,255,255,.11)}
.main{display:flex;flex-direction:column;gap:14px}
.main .top{display:flex;justify-content:space-between;align-items:center;gap:14px}
/* DECKS' own chrome (query, sidebar) stays SHARP — only captured screens hide behind the wall */
.main .q{flex:1;height:34px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  display:flex;align-items:center;padding:0 14px;font:400 12.5px/1 var(--mono);color:var(--lo)}
.q .qtext{display:inline-block;overflow:hidden;white-space:nowrap;max-width:30ch;vertical-align:bottom}
.q .caret{display:inline-block;width:1px;height:14px;background:var(--mid);margin-left:2px;opacity:0}
.main .pills{display:flex;gap:8px}.main .pills i{height:30px;width:74px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}

/* gridwrap holds the captured screens + reveal veil + beam + callouts, so every
   position is in GRID coordinates (--scan = 0..1 across the captured grid). */
.gridwrap{position:relative;flex:1}
/* NAME COLLISION, deliberately exempted. `.grid` is also a TAILWIND UTILITY (`display:grid`), and the app's
   components use it everywhere. Scoped to `.lv2 .grid` this rule is (0,2,0) — it beats every single-class
   utility, including `grid-cols-*`, so any real app component mounted on a landing page silently inherited
   this 3×2 screenshot lattice. Exempt `.appkit` islands (see landing-v2-extra.css) the same way the reset does. */
.grid:not(.appkit *){display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:14px;height:100%}
.cell{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--cell-shadow)}

/* THE WALL: a blur veil over the captured screens. --scan wipes it from the left,
   CUMULATIVELY (revealed screens stay sharp — knowledge persists). */
.lockveil{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:var(--r-md);background:rgba(4,4,6,.3);
  -webkit-backdrop-filter:blur(11px) saturate(.7) brightness(.5);backdrop-filter:blur(11px) saturate(.7) brightness(.5);
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--scan)*100%),rgba(0,0,0,.45) calc(var(--scan)*100% + 4%),#000 calc(var(--scan)*100% + 9%));
          mask-image:linear-gradient(90deg,transparent calc(var(--scan)*100%),rgba(0,0,0,.45) calc(var(--scan)*100% + 4%),#000 calc(var(--scan)*100% + 9%))}

/* the beam — a haloed light event parked at the reveal edge (driven by --scan) */
.scanline{position:absolute;top:-6px;bottom:-6px;width:3px;left:calc(var(--scan)*100%);z-index:5;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(200,224,255,.55) 18%,rgba(255,255,255,1) 50%,rgba(200,224,255,.55) 82%,transparent);
  box-shadow:var(--beam);transition:opacity .35s}
/* leading-edge refraction: a cool fringe of light bending through the frosted glass just ahead of the wipe */
.scanline::before{content:"";position:absolute;top:0;bottom:0;left:2px;width:8px;
  background:linear-gradient(90deg,rgba(150,210,255,.28),rgba(150,210,255,.06) 55%,transparent);filter:blur(1px)}
.scanline::after{content:"";position:absolute;top:0;bottom:0;left:1px;width:1px;background:rgba(120,200,255,.6);filter:blur(.4px)}
/* directional wash — biased to TRAIL the edge (a wake), cool-cast, not symmetric */
.scan-glow{position:absolute;top:0;bottom:0;width:320px;left:calc(var(--scan)*100% - 240px);z-index:4;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(120,170,255,.05) 58%,rgba(180,215,255,.15) 90%,rgba(255,255,255,.06));mix-blend-mode:screen;pointer-events:none;transition:opacity .35s}
.stage.playing .scanline,.stage.playing .scan-glow{opacity:1}
.stage.rested .scanline{opacity:0}
.stage.rested .scan-glow{opacity:1;left:auto;right:-120px;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.10}50%{opacity:.17}}

/* tactic callouts — pinned to cells; .in is added by JS as the beam clears each */
.tag{position:absolute;z-index:6;font:500 12px/1 var(--mono);color:#fff;padding:8px 11px;
  border:1px solid var(--glass-line-strong);border-radius:var(--r-pill);background:rgba(10,10,13,.74);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0;transform:translateY(8px) scale(.96);transition:opacity .32s .08s,transform .32s .08s var(--ease-spring)}
.tag::after{content:"";position:absolute;left:50%;bottom:-11px;width:1px;height:0;background:linear-gradient(rgba(255,255,255,.5),transparent);transition:height .18s}
.tag::before{content:"";position:absolute;left:50%;margin-left:-2px;bottom:-14px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.6);opacity:0;transition:opacity .14s}
.tag.in{opacity:1;transform:none}
.tag.in::after{height:11px}.tag.in::before{opacity:1}


.caption{position:absolute;left:24px;bottom:22px;z-index:7;display:flex;gap:10px;align-items:center;
  font:400 13px/1.4 var(--mono);color:var(--lo)}
.caption b{color:var(--hi);font-weight:500}
.caption .dot{width:7px;height:7px;border-radius:50%;background:#fff}

/* the query types itself when the sequence plays; the scan is gated to start after */
.stage.playing .q .qtext{animation:type .85s steps(29) .45s both}
.stage.playing .q .caret{animation:blink .53s step-end .45s infinite}
.stage:not(.playing):not(.rested) .q .qtext{max-width:0}
@keyframes type{from{max-width:0}to{max-width:30ch}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ============================================================================
   INTELLIGENCE CONSOLE — the ownable primitive. One instrument, four zones,
   left->right = raw input -> evidence -> extraction -> insight. The master
   scanline runs once: evidence screens un-blur, copy->field rows populate as
   it clears the screen, the insight resolves at the right edge. Real data;
   the synthesized insight carries an "illustrative" flag.
   ============================================================================ */
.hero2{padding:46px 0 28px}
.hero2 .htop{text-align:center;max-width:900px;margin:0 auto 26px}
.hero2 h1{font-size:clamp(34px,4.8vw,58px);margin:18px auto 14px;max-width:18ch}
.hero2 .sub{margin:0 auto;max-width:62ch}
.console-wrap{position:relative;padding:1px;border-radius:22px;margin-top:8px;
  background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.05) 38%,rgba(255,255,255,.18));
  box-shadow:0 50px 150px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.05)}
.console{position:relative;border-radius:21px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 24%),#090a0e}
.console .chrome{height:42px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.console .chrome .d{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.console .cono{margin-left:8px;font:500 11px/1 var(--mono);color:var(--mid);letter-spacing:.12em;text-transform:uppercase}
.console .curl{margin-left:auto;font:400 11.5px/1 var(--mono);color:var(--faint)}
/* zone 1: query */
.z-query{display:flex;align-items:center;gap:13px;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.07);flex-wrap:wrap}
.z-query .ql{font:600 9.5px/1 var(--mono);color:var(--lo);text-transform:uppercase;letter-spacing:.12em}
.z-query .qtext{font:500 16px/1.2 var(--mono);color:var(--hi);overflow:hidden;white-space:nowrap}
.z-query .qar{color:var(--faint);font-family:var(--mono)}
.z-query .qc{font:500 13px/1 var(--mono);color:var(--mid);border:1px solid var(--glass-line);border-radius:var(--r-pill);padding:7px 12px;background:rgba(255,255,255,.04)}
.z-query .qcount{margin-left:auto;font:500 12px/1 var(--mono);color:var(--lo);white-space:nowrap}
/* zones 2-4 */
.z-body{position:relative;display:grid;grid-template-columns:.92fr 1.3fr 1.05fr;min-height:430px}
.z-body>div{padding:18px;border-right:1px solid rgba(255,255,255,.07);position:relative;z-index:1}
.z-body>div:last-child{border-right:0}
.zh{font:600 10px/1 var(--mono);color:var(--lo);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.zh b{color:var(--hi)}
.flag{font:500 9px/1 var(--mono);color:var(--faint);border:1px dashed var(--glass-line-strong);border-radius:var(--r-pill);padding:3px 7px;text-transform:none;letter-spacing:.02em}
/* evidence wall */
.egrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.egrid .ec{position:relative;aspect-ratio:9/15;border-radius:8px;overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--cell-shadow)}
/* extraction: one enlarged captured screen + copy->field rows */
.bigscreen{position:relative;height:228px;border-radius:11px;overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--cell-shadow)}
.bigscreen .badge{position:absolute;left:8px;bottom:8px;z-index:3;font:500 8.5px/1 var(--mono);color:var(--lo);background:rgba(6,7,10,.78);border:1px solid var(--hairline);border-radius:5px;padding:4px 7px}
.fields{margin-top:14px;display:grid;gap:7px}
.frow{display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease-spring)}
.frow.in{opacity:1;transform:none}
.frow .c{font:500 11px/1 var(--mono);color:var(--hi);background:rgba(255,255,255,.12);border-radius:4px;padding:4px 7px;white-space:nowrap}
.frow .ar{color:var(--faint);font:400 11px/1 var(--mono)}
.frow .f{font:500 11px/1 var(--mono);color:var(--mid)}.frow .f b{color:#fff;font-weight:600}
/* insight */
.icard{opacity:0;transform:translateY(12px);transition:opacity .5s .1s,transform .5s .1s var(--ease-spring)}
.icard.in{opacity:1;transform:none}
.icard .pat{font:600 16px/1.25 var(--sans);letter-spacing:-.02em;color:var(--hi)}
.icard p{margin-top:9px;font-size:13px;line-height:1.55;color:var(--mid)}
.icard .ev{margin-top:14px;display:flex;gap:5px;flex-wrap:wrap}
.icard .ev span{font:500 10px/1 var(--mono);color:var(--lo);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:4px 8px}
.icard .stat{margin-top:14px;font:500 12px/1.4 var(--mono);color:var(--lo)}.icard .stat b{color:var(--hi)}
/* reveal: evidence screens un-blur as the beam enters (veil over the evidence
   column only — DECKS chrome + structured outputs stay crisp); the beam + glow
   sweep the whole body; frows/insight populate via .in (data-at). */
.egrid-wrap{position:relative}
.egrid-wrap .lockveil{position:absolute;inset:0;z-index:2;border-radius:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--scan)*330%),rgba(0,0,0,.45) calc(var(--scan)*330% + 6%),#000 calc(var(--scan)*330% + 13%));
          mask-image:linear-gradient(90deg,transparent calc(var(--scan)*330%),rgba(0,0,0,.45) calc(var(--scan)*330% + 6%),#000 calc(var(--scan)*330% + 13%))}
.egrid .ec{opacity:0;transform:scale(.97);transition:opacity .45s,transform .45s var(--ease-spring)}
.z-body.in .egrid .ec{opacity:1;transform:none}
.bigscreen{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--ease-spring)}
.bigscreen.in{opacity:1;transform:none}
.z-body .scanline{top:0;bottom:0;height:auto;z-index:5}
.z-body .scan-glow{top:0;bottom:0;z-index:4}
.stage.playing .scanline,.console.playing .scanline,.console.playing .scan-glow{opacity:1}
.console.rested .scanline{opacity:0}.console.rested .scan-glow{opacity:1;left:auto;right:-120px;animation:breathe 4s ease-in-out infinite}
@media(max-width:920px){.z-body{grid-template-columns:1fr}.z-body>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.z-query{gap:9px}.z-query .qtext{font-size:14px}}
/* query types itself when the console plays; gates the scan */
.z-query .qtext{max-width:50ch}
.z-query .caret{display:inline-block;width:1px;height:15px;background:var(--mid);opacity:0;vertical-align:-2px}
.console:not(.playing):not(.rested) .z-query .qtext{max-width:0}
.console.playing .z-query .qtext{animation:typeq 1.05s steps(49) .4s both}
.console.playing .z-query .caret{animation:blink .53s step-end .4s infinite}
@keyframes typeq{from{max-width:0}to{max-width:50ch}}

/* ============================================================================
   GALLERY (the REAL product) — a wall of real captured screenshots + search.
   The blur->reveal is the actual Free->PRO mechanic (Free = blurred previews,
   PRO = full resolution), driven by the same scan primitive.
   ============================================================================ */
.gstage{position:relative;border-radius:21px;overflow:hidden;isolation:isolate;background:#090a0e}
.gsearch{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.gsearch svg{width:17px;height:17px;flex:0 0 auto;opacity:.65}
.gsearch .qtext{font:500 15px/1 var(--mono);color:var(--hi);overflow:hidden;white-space:nowrap;max-width:40ch}
.gsearch .caret{display:inline-block;width:1px;height:14px;background:var(--mid);opacity:0;vertical-align:-2px}
.gsearch .gcount{margin-left:auto;font:500 12px/1 var(--mono);color:var(--lo);white-space:nowrap}
.gstage:not(.playing):not(.rested) .gsearch .qtext{max-width:0}
.gstage.playing .gsearch .qtext{animation:typeg .8s steps(29) .35s both}
.gstage.playing .gsearch .caret{animation:blink .53s step-end .35s infinite}
@keyframes typeg{from{max-width:0}to{max-width:40ch}}
.wall-wrap{position:relative}
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:14px}
.wall figure{position:relative;margin:0;border-radius:9px;overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--cell-shadow);aspect-ratio:9/16;background:#0c0e13}
.wall img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.wall figure figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 8px 6px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82) 55%);font:500 8.5px/1.3 var(--mono);color:#e7ebf1;
  opacity:0;transform:translateY(5px);transition:.2s}
.wall figure:hover figcaption{opacity:1;transform:none}
.wall figure .fresh{position:absolute;top:6px;right:6px;z-index:2;font:600 7.5px/1 var(--mono);color:#fff;background:rgba(8,9,13,.7);border:1px solid var(--glass-line-strong);border-radius:var(--r-pill);padding:3px 6px}
/* Free->PRO veil */
/* Locked = a FROSTED real screenshot (detail withheld, colour+luminance kept),
   never a blackout. brightness stays high so it reads "paywalled", not "loading". */
.wall-wrap .lockveil{position:absolute;inset:0;z-index:3;border-radius:0;
  background:rgba(8,9,14,.10);
  -webkit-backdrop-filter:blur(15px) saturate(1.06) brightness(.84) contrast(.98);
          backdrop-filter:blur(15px) saturate(1.06) brightness(.84) contrast(.98);
  -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--scan)*100%),rgba(0,0,0,.5) calc(var(--scan)*100% + 5%),#000 calc(var(--scan)*100% + 11%));
          mask-image:linear-gradient(90deg,transparent calc(var(--scan)*100%),rgba(0,0,0,.5) calc(var(--scan)*100% + 5%),#000 calc(var(--scan)*100% + 11%))}
.gstage.playing .scanline,.gstage.playing .scan-glow{opacity:1}
.gstage.rested .scanline{opacity:0}.gstage.rested .scan-glow{opacity:1;left:auto;right:-120px;animation:breathe 4s ease-in-out infinite}
.gcap{position:absolute;left:18px;bottom:14px;z-index:5;display:flex;align-items:center;gap:9px;font:400 12.5px/1.4 var(--mono);color:var(--lo);
  background:linear-gradient(180deg,transparent,rgba(9,10,14,.9));padding-right:10px}
.gcap .dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:0 0 auto}
.gcap b{color:var(--hi);font-weight:500}
/* app chrome around the wall — the landing hero IS the real app grid */
.appbody{display:grid;grid-template-columns:208px 1fr}
.appside{border-right:1px solid rgba(255,255,255,.07);padding:16px 14px;display:flex;flex-direction:column;gap:5px;background:rgba(255,255,255,.012)}
.appside .lr{display:flex;align-items:center;gap:9px;margin-bottom:12px;font:600 14px/1 var(--sans);letter-spacing:-.03em}
.appside .lr i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#fff,#c4c8d2)}
.appside .lr i svg{width:14px;height:14px}
.appside .ni{display:flex;align-items:center;gap:9px;height:34px;padding:0 11px;border-radius:9px;font:500 12.5px/1 var(--sans);color:var(--mid)}
.appside .ni.on{background:rgba(255,255,255,.09);color:var(--hi)}
.appside .ni .ic{width:14px;height:14px;border-radius:4px;border:1.4px solid currentColor;opacity:.7}
.appside .sec{margin-top:14px;font:600 9px/1 var(--mono);color:var(--faint);text-transform:uppercase;letter-spacing:.12em;padding:0 11px}
.appmain{display:flex;flex-direction:column;min-width:0}
.appmain .gsearch{border-bottom:1px solid rgba(255,255,255,.07)}
.achips{display:flex;gap:8px;padding:12px 16px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.06)}
.achip{font:500 11.5px/1 var(--mono);color:var(--mid);border:1px solid var(--glass-line);border-radius:var(--r-pill);padding:7px 11px;background:rgba(255,255,255,.03)}
.achip.on{background:#fff;color:var(--on-accent);border-color:#fff;font-weight:600}
.appmain .wall-wrap{flex:1}
.appmain .wall{grid-template-columns:repeat(4,1fr)}
.appmain .wall figure{aspect-ratio:9/17}
.appfoot{display:flex;align-items:center;gap:9px;padding:11px 16px;border-top:1px solid rgba(255,255,255,.07);font:400 12px/1.3 var(--mono);color:var(--lo)}
.appfoot .dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:0 0 auto}
.appfoot b{color:var(--hi);font-weight:500}
@media(max-width:920px){.wall{grid-template-columns:repeat(3,1fr)}.appbody{grid-template-columns:1fr}.appside{display:none}.appmain .wall{grid-template-columns:repeat(3,1fr)}}

/* ---- cinematic gallery: real-chrome + per-cell unlock + anchored tactic tags (R1) ---- */
/* sidebar reads as working nav: icons, a result count, a real active state — not checkboxes */
.appside .ni{position:relative}
.appside .ni svg{width:15px;height:15px;flex:0 0 auto;opacity:.62}
.appside .ni.on svg{opacity:1}
.appside .ni.on{box-shadow:inset 2px 0 0 #fff}
.appside .ni .ct{margin-left:auto;font:500 10.5px/1 var(--mono);color:var(--faint)}
.appside .ni.on .ct{color:var(--mid)}
.appside .ni .chev{margin-left:auto;width:5px;height:5px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(-45deg);opacity:.45}

/* search row earns its "operated" look: results + sort + account/plan */
.gsearch{position:relative}
.gsearch .gcount{margin-left:auto}
.gsearch .gsort{font:500 11.5px/1 var(--mono);color:var(--lo);white-space:nowrap;padding-left:14px;border-left:1px solid var(--hairline)}
.gsearch .gsort::after{content:"";display:inline-block;margin-left:6px;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid currentColor;vertical-align:middle;opacity:.7}
.gsearch .gacct{display:flex;align-items:center;gap:6px;font:600 10px/1 var(--mono);color:var(--hi);letter-spacing:.08em;padding:5px 9px 5px 6px;border:1px solid var(--glass-line-strong);border-radius:var(--r-pill);background:rgba(255,255,255,.04)}
.gsearch .gacct{padding:4px 8px 4px 5px;gap:7px}
.gsearch .gacct i{display:flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;
  background:linear-gradient(135deg,#e8edf6,#9aa2b4);color:#0b0d12;font:700 8px/1 var(--mono);letter-spacing:.02em;font-style:normal;flex:0 0 auto}
.gsearch .gacct .chev{width:5px;height:5px;border-right:1.4px solid var(--lo);border-bottom:1.4px solid var(--lo);transform:rotate(45deg) translateY(-1px);opacity:.7}
.gsearch .qx{position:relative;width:11px;height:11px;flex:0 0 auto;opacity:.45}
.gsearch .qx::before,.gsearch .qx::after{content:"";position:absolute;left:0;top:5px;width:11px;height:1.4px;background:var(--mid)}
.gsearch .qx::before{transform:rotate(45deg)}.gsearch .qx::after{transform:rotate(-45deg)}

/* per-cell Free lock badge — clears as the beam unlocks each cell (= the real Free->PRO unlock) */
.wall figure .lock{position:absolute;top:7px;left:7px;z-index:4;display:flex;align-items:center;gap:4px;
  font:700 7.5px/1 var(--mono);letter-spacing:.12em;color:#fff;padding:3px 6px 3px 5px;border-radius:var(--r-pill);
  background:rgba(6,7,11,.62);border:1px solid var(--glass-line-strong);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:opacity .45s var(--ease-focus),transform .45s var(--ease-focus)}
.wall figure .lock svg{width:8px;height:8px;display:block}
.wall figure.unlk .lock{opacity:0;transform:scale(.85)}
.wall figure.lit{animation:cellpop .55s var(--ease-reveal) both}
@keyframes cellpop{0%{box-shadow:var(--cell-shadow)}28%{box-shadow:0 0 0 1.5px rgba(170,208,255,.55),0 0 24px rgba(120,170,255,.28),var(--cell-shadow)}100%{box-shadow:var(--cell-shadow)}}

/* crop the identical baked phone status strip (kills the 8x clone tell + the "882d"
   battery glitch + double-chrome stacking). Badges/caption are outside the img. */
.appmain .wall figure{overflow:hidden}
.appmain .wall figure img{object-position:center 27%}

/* persistent operator label as a compact pill pinned bottom-left (off the content) */
.appmain .wall figure figcaption{opacity:1;transform:none;left:7px;right:auto;bottom:7px;width:auto;
  background:rgba(7,8,12,.74);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border:1px solid var(--glass-line-strong);border-radius:var(--r-pill);
  font:500 9px/1 var(--mono);color:var(--mid);padding:5px 8px;letter-spacing:0}

/* tactic tag now sits in the gutter above its phone and drops a leader to an in-screen anchor */
.tag{white-space:nowrap}
.appmain .tag::after,.appmain .tag::before{display:none}
/* the leader + target-highlight ring are positioned by JS at each tag's data-anchor */
.thl{position:absolute;z-index:5;border:1.5px solid rgba(185,218,255,.92);border-radius:6px;
  box-shadow:0 0 16px rgba(120,170,255,.5);opacity:0;pointer-events:none;transform:scale(1.12);
  transition:opacity .32s var(--ease-focus),transform .42s var(--ease-spring)}
.thl.on{opacity:1;transform:scale(1)}
.tlead{position:absolute;z-index:5;width:1px;background:linear-gradient(rgba(190,220,255,.7),rgba(190,220,255,.15));
  opacity:0;transition:opacity .3s .05s;pointer-events:none}
.tlead.on{opacity:1}

/* ============================================================================
   METRICS — honest counts over the real corpus (cross-sectional, not "live").
   ============================================================================ */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.metric{padding:26px;border-radius:var(--r-lg);border:1px solid var(--glass-line);background:rgba(255,255,255,.035)}
.metric b{font-size:clamp(30px,3.8vw,52px);letter-spacing:-.05em;display:block;line-height:1}
.metric span{display:block;margin-top:9px;color:var(--mid);font-size:14px}
.freshline{margin-top:20px;font-family:var(--mono);font-size:13px;color:var(--lo)}

/* ============================================================================
   KNOWLEDGE GRAPH — one captured screen becomes connected, searchable facts.
   Honest: every node is a real corpus dimension/count. Edges + nodes share ONE
   coordinate system (SVG preserveAspectRatio=none + matching % on nodes), so
   lines always track nodes at any width. Teaching motion: core → edges draw →
   nodes land → insight card (play-once on scroll via [data-reveal]).
   ============================================================================ */
.graph{position:relative;height:560px;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 30%),#090a0e}
.graph svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.graph .edge{stroke:rgba(255,255,255,.22);stroke-width:1;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s .45s var(--ease-reveal)}
.graph.in .edge{stroke-dashoffset:0}
.gnode{position:absolute;z-index:2;transform:translate(-50%,-50%) scale(.92);
  font:500 13px/1 var(--mono);color:var(--mid);white-space:nowrap;
  border:1px solid var(--glass-line);background:rgba(12,13,17,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:var(--r-pill);padding:9px 13px;box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0;transition:opacity .5s,transform .5s var(--ease-spring)}
.gnode b{color:var(--hi);font-weight:600}
.gcore{z-index:3;font:600 15px/1 var(--sans);letter-spacing:-.02em;color:var(--on-accent);
  background:linear-gradient(180deg,#fff,#d9dce2);border-color:#fff;padding:13px 19px;transition-delay:.25s;
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 40px rgba(255,255,255,.12)}
.graph.in .gnode{opacity:1;transform:translate(-50%,-50%) scale(1)}
.gcard{position:absolute;right:22px;bottom:22px;z-index:4;width:300px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--glass-line);background:rgba(8,9,13,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  opacity:0;transform:translateY(14px);transition:opacity .55s 1.15s,transform .55s 1.15s var(--ease-spring)}
.graph.in .gcard{opacity:1;transform:none}
.gcard .k{font:500 11px/1 var(--mono);color:var(--lo);text-transform:uppercase;letter-spacing:.07em}
.gcard .thumb{position:relative;overflow:hidden;height:92px;border-radius:var(--r-md);margin:11px 0 12px;border:1px solid var(--hairline);
  background:var(--cell-bloom),var(--cell-sheen),var(--cell-base);box-shadow:var(--cell-shadow)}
.gcard b{font-size:15px;letter-spacing:-.02em;color:var(--hi)}
.gcard p{margin-top:6px;color:var(--mid);font-size:12.5px;line-height:1.5}
.gcard .chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:11px}
.gcard .chips span{font:500 10px/1 var(--mono);color:var(--lo);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:4px 8px}

/* ============================================================================
   COPY SEARCH — every screen is OCR'd, so you search the ACTUAL TEXT operators
   use (CTA wording, bonus terms, KYC microcopy), not just tags. The matched
   phrase is highlighted in each result. Reveal motion: cards stagger in.
   ============================================================================ */
.ocr{margin-top:34px}
.ocrbar{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:13px;height:58px;padding:0 9px 0 20px;
  border-radius:var(--r-pill);border:1px solid var(--glass-line-strong);background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 24px 70px rgba(0,0,0,.45)}
.ocrbar svg{width:18px;height:18px;flex:0 0 auto;opacity:.7}
.ocrbar .qt{flex:1;font:500 17px/1 var(--mono);color:var(--hi);white-space:nowrap;overflow:hidden}
.ocrbar .count{font:500 12px/1 var(--mono);color:var(--lo);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:8px 13px;white-space:nowrap}
.ocrgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.ocard{border:1px solid var(--glass-line);border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.025);box-shadow:0 12px 30px rgba(0,0,0,.35);
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease-spring),transform .5s var(--ease-spring)}
.ocr.in .ocard{opacity:1;transform:none}
.ocr.in .ocard:nth-child(2){transition-delay:.08s}.ocr.in .ocard:nth-child(3){transition-delay:.16s}.ocr.in .ocard:nth-child(4){transition-delay:.24s}
.ocard .shot{position:relative;height:148px;border-bottom:1px solid var(--hairline);overflow:hidden}
.ocard .snip{padding:12px 13px 14px;font:400 12px/1.55 var(--mono);color:var(--mid)}
.ocard .snip mark{background:rgba(255,255,255,.16);color:var(--hi);border-radius:3px;padding:1px 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ocard .src{display:block;margin-top:9px;font-size:10.5px;color:var(--lo)}

/* ====== 04 EXPLORER ====== */
.exp{margin-top:34px;padding:22px}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.fchip{font:500 13px/1 var(--mono);color:var(--mid);border:1px solid var(--glass-line);border-radius:var(--r-pill);padding:9px 14px;background:rgba(255,255,255,.03);transition:.2s}
.fchip.on{background:#fff;color:var(--on-accent);border-color:#fff;font-weight:600}
.ecards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ecard{border:1px solid var(--glass-line);border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.025);box-shadow:0 12px 30px rgba(0,0,0,.3);transition:transform .25s var(--ease-spring),background .25s}
.ecard:hover{transform:translateY(-6px);background:rgba(255,255,255,.05)}
.ecard .shot{position:relative;height:148px;border-bottom:1px solid var(--hairline);overflow:hidden}
.ecard .meta{padding:11px 13px}
.ecard .meta b{display:block;font-size:13.5px;letter-spacing:-.01em;color:var(--hi)}
.ecard .meta span{display:block;margin-top:3px;font:400 11px/1 var(--mono);color:var(--lo)}

/* ====== 05 COMPARE ====== */
.compare{display:grid;grid-template-columns:1fr 60px 1fr;gap:18px;align-items:stretch;margin-top:34px}
.cmp{padding:26px}
.cmp .k{font:500 11px/1 var(--mono);color:var(--lo);text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px}
.stack{display:grid;gap:10px}
.stack div{height:46px;border-radius:var(--r-md);border:1px solid var(--glass-line);background:rgba(255,255,255,.03);display:flex;align-items:center;padding:0 15px;font:400 13.5px/1 var(--sans);color:var(--mid)}
.cmparrow{display:grid;place-items:center;font-size:24px;color:var(--lo)}
.cmp .searchres{height:54px;border-radius:var(--r-pill);background:#fff;color:var(--on-accent);display:flex;align-items:center;padding:0 20px;font:600 15px/1 var(--mono)}
.cmp .res{margin-top:16px;padding:18px;border-radius:var(--r-lg);border:1px solid var(--glass-line);background:rgba(255,255,255,.04)}
.cmp .res b{font-size:15px;color:var(--hi)}.cmp .res p{margin-top:7px;color:var(--mid);font-size:13px;line-height:1.5}

/* ====== 06 PREVALENCE (honest cross-sectional counts) ====== */
.prev{margin:30px auto 0;max-width:760px;display:grid;gap:16px}
.prow{display:grid;grid-template-columns:158px 1fr 58px;gap:16px;align-items:center}
.prow .lbl{font:500 14px/1 var(--sans);color:var(--hi)}
.prow .pbar{height:10px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);overflow:hidden}
.prow .pbar i{display:block;height:100%;width:0;border-radius:var(--r-pill);background:linear-gradient(90deg,#9aa0aa,#fff);transition:width 1.1s var(--ease-reveal)}
.prev.in .prow .pbar i{width:var(--w)}
.prow .pct{font:500 13px/1 var(--mono);color:var(--lo);text-align:right}
.prevnote{max-width:760px;margin:16px auto 0;font:400 12px/1.5 var(--mono);color:var(--faint);text-align:center}

/* ====== 07 COLLECTIONS ====== */
.colls{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.coll{position:relative;height:230px;border-radius:var(--r-xl);overflow:hidden;padding:20px;border:1px solid var(--glass-line);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:var(--glass-shadow)}
.coll b{position:relative;z-index:1;font-size:19px;letter-spacing:-.02em;color:var(--hi)}
.coll span{position:absolute;left:20px;bottom:18px;z-index:1;font:400 12.5px/1 var(--mono);color:var(--lo)}
.coll::before{content:"";position:absolute;left:20px;right:-26px;top:62px;height:124px;border-radius:var(--r-lg);background:var(--cell-bloom),var(--cell-sheen),var(--cell-base);border:1px solid var(--hairline);box-shadow:24px 24px 0 rgba(255,255,255,.04),48px 48px 0 rgba(255,255,255,.02)}

/* ====== ROADMAP (Coming) — honest, dimmed previews of the vision ====== */
.rmhead{display:flex;align-items:center;gap:12px;justify-content:center}
.coming{margin-top:34px;position:relative;border-radius:var(--r-xl);overflow:hidden;padding:30px}
.coming .veil{position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(135deg,rgba(5,5,6,.5) 0 11px,rgba(8,8,10,.5) 11px 22px);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
.coming .inner{position:relative;z-index:0;opacity:.55}
.tl{display:flex;flex-direction:column;gap:12px}
.tl .bt{font:600 14px/1 var(--sans);color:var(--hi)}
.slider{height:4px;border-radius:var(--r-pill);background:linear-gradient(90deg,#fff 70%,rgba(255,255,255,.14) 70%);position:relative;margin:8px 4px}
.slider .knob{position:absolute;left:70%;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 24px rgba(255,255,255,.5)}
.years{display:flex;justify-content:space-between;font:400 12px/1 var(--mono);color:var(--lo)}
.evo{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.evo .ev{height:150px;border-radius:var(--r-lg);border:1px solid var(--hairline);background:var(--cell-base);padding:12px;display:flex;align-items:flex-end;font:500 12px/1 var(--mono);color:var(--mid)}
.asst{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px}
.asst .prompt{grid-column:1/-1;height:56px;border-radius:var(--r-pill);background:#fff;color:var(--on-accent);display:flex;align-items:center;padding:0 22px;font:600 15px/1 var(--sans)}
.think{border-radius:var(--r-lg);border:1px solid var(--glass-line);background:rgba(255,255,255,.03);padding:20px}
.think b{font:500 12px/1 var(--mono);color:var(--lo);text-transform:uppercase;letter-spacing:.06em}
.think .bar{height:10px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);margin:13px 0}
.think .bar:nth-of-type(2){width:82%}.think .bar:nth-of-type(3){width:64%}
.srcs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.srcs .sc{height:150px;border-radius:var(--r-lg);border:1px solid var(--hairline);overflow:hidden;position:relative}

/* ====== PRICING ====== */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;align-items:stretch}
.ptier{padding:26px;border-radius:var(--r-xl);border:1px solid var(--glass-line);background:rgba(255,255,255,.03);display:flex;flex-direction:column}
.ptier.feat{border-color:var(--glass-line-strong);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:var(--glass-shadow)}
.ptier .pn{font:600 13px/1 var(--mono);color:var(--mid);text-transform:uppercase;letter-spacing:.06em}
.ptier .pp{font-size:40px;letter-spacing:-.04em;margin:14px 0 4px;color:var(--hi)}.ptier .pp small{font-size:14px;color:var(--lo);letter-spacing:0;font-weight:400}
.ptier .pd{color:var(--mid);font-size:13.5px;line-height:1.5;min-height:40px}
.ptier ul{list-style:none;margin:18px 0 22px;display:grid;gap:10px}
.ptier li{font-size:13.5px;color:var(--mid);padding-left:22px;position:relative}
.ptier li::before{content:"";position:absolute;left:1px;top:5px;width:11px;height:6px;border-left:1.5px solid var(--hi);border-bottom:1.5px solid var(--hi);transform:rotate(-45deg)}
.ptier .btn{margin-top:auto}

/* ====== FINAL CTA + FOOTER ====== */
.final{margin-top:var(--section-gap);text-align:center;padding:58px 30px;border-radius:var(--r-xl);position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(255,255,255,.12),transparent 46%);pointer-events:none}
.final>*{position:relative}
.foot{margin-top:80px;padding:34px 0;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;font:400 13px/1.6 var(--mono);color:var(--faint)}
.foot a{color:var(--lo)}.foot a:hover{color:var(--hi)}
.foot .fl{display:flex;gap:22px;flex-wrap:wrap}

/* ====== real screenshots in downstream cards (replaced the fake .op wireframes) ====== */
.ocard .shot img,.ecard .shot img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.gcard .thumb img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.ocrgrid{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto}
.coll.real::before{display:none}
.coll.real img{position:absolute;left:20px;top:54px;width:calc(100% - 40px);height:120px;object-fit:cover;object-position:center 8%;border-radius:var(--r-md);border:1px solid var(--hairline);z-index:0}
.coll.real span{background:rgba(7,8,12,.72);padding:5px 10px;border-radius:var(--r-pill);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cmp .reslist{margin-top:14px;display:grid;gap:9px}
.cmp .reslist span{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:var(--r-md);border:1px solid var(--hairline);background:rgba(255,255,255,.025);font:500 13px/1 var(--mono);color:var(--mid)}
.cmp .reslist b{color:var(--hi);font-weight:600}

/* ====== ON THE ROADMAP strip (honest, de-fabricated) ====== */
.roadstrip{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:920px;margin:30px auto 0}
.rmitem{padding:24px;border:1px solid var(--glass-line);border-radius:var(--r-lg);background:rgba(255,255,255,.025)}
.rmitem b{font-size:16px;letter-spacing:-.01em;color:var(--hi)}
.rmitem p{margin-top:8px;color:var(--mid);font-size:13.5px;line-height:1.55}

@media(max-width:860px){
  .ecards,.srcs,.ocrgrid{grid-template-columns:1fr 1fr}.compare{grid-template-columns:1fr}.cmparrow{transform:rotate(90deg)}
  .colls,.pricing,.evo,.roadstrip{grid-template-columns:1fr}.asst{grid-template-columns:1fr}.prow{grid-template-columns:120px 1fr 50px}
}

/* reduced-motion: skip the sequence but still TEACH — render the full
   revealed + tagged + queried end-state as a finished composition. */
@media(prefers-reduced-motion:reduce){
  .stage{--scan:1}
  .lockveil,.scanline{display:none}
  .scan-glow{opacity:.12;left:auto;right:-120px;animation:none}
  .tag{opacity:1;transform:none}.tag::after{height:11px}.tag::before{opacity:1}
  .q .qtext{max-width:30ch!important}.q .caret{display:none}
  .graph .edge{stroke-dashoffset:0}.gnode{opacity:1;transform:translate(-50%,-50%)}.gcard{opacity:1;transform:none}
  .ocard{opacity:1;transform:none}.prev .prow .pbar i{width:var(--w)}
}
@media(max-width:860px){
  .nav-links{display:none}
  .screen{grid-template-columns:1fr;padding:16px}.sidebar{display:none}
  .grid:not(.appkit *){grid-template-columns:1fr 1fr}.stage{min-height:480px}
  .metrics{grid-template-columns:1fr 1fr}.tag{display:none}
}