/*
 * labelflow.ai subpages: the journey grammar on a scrolling page.
 * Ported block by block from the approved mockup
 * (vault 10-Projects/Labelflow-2.0/mockups/Site-Subpages-Journey-Grammar-2026-09-03.html,
 * variant B, plans first, comparison table on).
 *
 * Loads AFTER assets/journey/journey.css and only carries what a subpage adds
 * or changes. Three kinds of rule live here:
 *   1. NEW primitives the journey homepage does not have (.nav.stuck, .prose,
 *      .pull, .acc, .cmp, .fgrid/.fcard/.ui, .detail/.subnav/.subchips,
 *      .stickycta, breadcrumb, prev/next, reading progress).
 *   2. The subpage TYPE TIER: a subpage carries a page title over dense content
 *      rather than a full-viewport arrival, so h1 and h2 drop about 20% from the
 *      homepage sizes. Same face, same tracking, same italic emphasis.
 *   3. Deliberate overrides of journey.css rules that were written for the
 *      homepage's own pricing block, filter pills and hero grid. Each one is
 *      marked "override:" so nobody later mistakes it for a duplicate.
 *
 * The mockup's own chrome is NOT ported: the .vp-* viewport frame, the .mocktabs
 * screen switcher, the variant A "quiet" layer, the data-order / data-cmp gates
 * and the data-motion toggle were all there to let Till compare options. Variant
 * B, plans first and the comparison table are the approved answers, so they are
 * simply how the pages are built.
 */

/* ---------- chrome heights ----------
   The mockup reserved --tabs-h for its screen switcher. The real pages have only
   the nav, so --tabs-h is zero and --chrome is the nav height. Every sticky
   offset and scroll-margin on these pages is expressed in --chrome. */
:root{--tabs-h:0px;--nav-h:64px;--chrome:64px}

/* ---------- nav: journey .nav, adapted for a scrolling subpage ----------
   override: the homepage nav floats transparent over a hero and never has
   content pass under it. A scrolling subpage does, so past 8px the bar takes a
   near-opaque aubergine ground, a blur and a hairline. */
.nav{position:fixed;top:var(--tabs-h);left:0;right:0;z-index:60;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid transparent;pointer-events:auto;transition:background var(--t2) var(--ease),border-color var(--t2) var(--ease)}
.nav.stuck{background:rgba(20,16,28,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom-color:var(--line)}
.nav .wordmark{font-family:var(--mark);font-weight:600;font-size:20px;letter-spacing:-.02em;color:var(--cream);text-decoration:none;display:inline-flex;align-items:center}
.nav .links{display:flex;gap:26px;align-items:center;font-family:var(--mark);font-size:15px;color:var(--mute)}
.nav .links a{text-decoration:none}
.nav .links a:not(.btn){color:inherit;position:relative;padding:4px 0}
.nav .links a:not(.btn):hover{color:var(--cream)}
.nav .links a[aria-current="page"]{color:var(--cream)}
.nav .links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--violet-l)}
.nav .links a.btn{font-size:14px;padding:11px 18px}
.navtoggle{font-size:11.5px;padding:0 18px}
.navmenu{inset:var(--tabs-h) 0 0;z-index:80}
.navmenu ul a[aria-current="page"]{color:var(--violet-l)}
.navmenu .mcta{padding-top:22px}

/* reading progress (new primitive, manifesto) */
.rp{position:fixed;top:calc(var(--tabs-h) + var(--nav-h) - 1px);left:0;height:2px;width:0;background:var(--violet-l);z-index:61;transition:width .1s linear}

/* ---------- page shell ---------- */
.pages{padding-top:var(--chrome)}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.sect{padding:56px 0}
.sect.tight{padding:36px 0}

/* headings, kickers, ledes: journey primitives, subpage TIER */
.k{flex-wrap:wrap}
h1{font-size:clamp(42px,5.6vw,84px);margin-top:16px}
h2{font-size:clamp(32px,3.9vw,54px);margin-top:14px}
h1 em,h2 em{color:var(--violet-l)}
.lede{line-height:1.62;max-width:56ch}
/* override: journey's .hero is the homepage arrival grid; here it is a page header */
.hero{padding:64px 0 30px;position:relative;display:block}
.hero .crumb{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hero .crumb a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.hero .crumb a:hover{color:var(--cream);border-bottom-color:var(--line-2)}
.hero .cta{display:flex;gap:10px;margin-top:26px;align-items:center;flex-wrap:wrap}
.hero .mini{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);margin-top:14px}
.kick{margin-top:18px}

/* entrance choreography, once per section.
   The no-script floor is visible content: the hidden state is scoped to html.js,
   which the pre-paint script in every head sets. */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(16px);transition:opacity var(--t4) var(--ease),transform var(--t4) var(--out)}
html.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.06s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.22s}.rv.d4{transition-delay:.3s}
.rv.in .sat,.sat.in{opacity:1;transform:none}
.rv.in .glow{opacity:1}
/* override: the homepage stage is a 3D tilt surface; here it only positions satellites */
.stage{transform:none;transform-style:flat;transition:none}

.pill.soon{border-color:var(--line-2);color:var(--meta)}

/* ============ PRICING: plans + builder ============ */
.hd2{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.planwrap{display:flex;flex-direction:column;gap:14px;margin-top:28px}
/* override: the homepage puts plans and builder in one three-column row; the
   pricing page stacks the builder under a two-column plan pair (plans first). */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin-top:0;perspective:none;order:1}
.plan{transform-style:flat}
.plan.hi{background:linear-gradient(180deg,rgba(142,77,194,.22),rgba(142,77,194,.06)),var(--card-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(176,127,229,.4),0 60px 100px -50px rgba(0,0,0,.95)}
.plan:hover{transform:translateY(-4px)}
.plan .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta-card);margin-top:10px}
.plan .pr{margin-top:10px}
.plan .pr small{font-size:10.5px}
.plan .btn{min-height:44px}
.plan .yr{font-size:10.5px}
.build{order:2}
.build .nm{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.build .rows{margin-top:8px}
.build .row .d{font-size:10.5px}
.build .row.addon{display:block;padding:9px 0}
/* override: on the homepage .sw IS the little track. Here the whole row is the
   switch, with the track as a child, so the journey track styling is undone. */
.build .row.addon .sw{display:flex;width:100%;height:auto;flex:initial;align-items:center;justify-content:space-between;gap:14px;text-align:left;min-height:26px;background:none;border-radius:0}
.build .row.addon .sw::after{content:none}
.build .row.addon .sw .swt{font-size:13.5px;color:var(--cream)}
.build .row.addon .sw .track{width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.1);position:relative;transition:background var(--t2);flex:none}
.build .row.addon .sw .track::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--cream);transition:transform var(--t2) var(--spring)}
.build .row.addon .sw[aria-checked="true"] .track{background:var(--violet)}
.build .row.addon .sw[aria-checked="true"] .track::after{transform:translateX(14px)}
.build .row.addon .sw:hover:not(:disabled) .track{background:rgba(255,255,255,.18)}
.build .row.addon .sw[aria-checked="true"]:hover:not(:disabled) .track{background:var(--violet-l)}
.build .row.addon .sw:disabled{cursor:default}
.build .row.addon .sw:disabled .swt{color:var(--meta)}
.build .row.addon .sw:disabled .track{opacity:.4}
.build .row.addon .d{cursor:default}
.build .row.addon.off .d{color:var(--meta)}
.build .stp button{width:28px;height:28px;transition:background var(--t2)}
.build .stp button:hover:not(:disabled){background:rgba(255,255,255,.08)}
.build .stp button:disabled{opacity:.35;cursor:default}
.build .stp span{min-width:16px;text-align:center;font-variant-numeric:tabular-nums}
.build .tot{gap:14px;flex-wrap:wrap}
.build .tot .v small{font-size:10.5px}
.build .note{font-size:10.5px;margin-top:10px}
.build .betanote{margin-top:4px;color:var(--violet-l)}
.build .bcta{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}

/* ============ NEW PRIMITIVE: tier comparison table ============ */
.cmpwrap{margin-top:24px;border-radius:18px;overflow:hidden}
.cmp{width:100%;border-collapse:collapse;font-size:13.5px}
.cmp thead th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta-card);font-weight:400;padding:0 14px 12px;vertical-align:bottom}
.cmp thead th.hi{color:var(--violet-l)}
.cmp tbody th{text-align:left;font-family:var(--mark);font-weight:500;font-size:13.5px;color:var(--cream);padding:13px 14px;width:38%;vertical-align:top;border-top:1px solid var(--line)}
.cmp tbody td{padding:13px 14px;color:var(--mute);border-top:1px solid var(--line);vertical-align:top}
.cmp tr.grp th{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);font-weight:400;padding-top:22px}
.cmp tr.grp td{padding-top:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.cmp tr.grp th,.cmp tr.grp td{border-top:0}
.cmp tr.diff th,.cmp tr.diff td{background:rgba(142,77,194,.07)}
.cmp .yes{display:inline-flex;align-items:center;gap:9px;color:var(--cream)}
.cmp .yes::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet-l);flex:none}
.cmp .num{font-family:var(--mark);font-weight:500;color:var(--cream)}
.cmp .sub{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta-card);margin-top:4px}
.cmp .none{display:inline-flex;align-items:center;gap:9px;color:var(--meta)}
.cmp .none::before{content:"";width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);flex:none}
.cmpnote{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta-card);margin-top:12px}

/* ============ NEW PRIMITIVE: accordion (FAQ) ============ */
.acc{margin-top:22px;border-top:1px solid var(--line)}
.acc .it{border-bottom:1px solid var(--line)}
.acc .q{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;text-align:left;padding:17px 4px;min-height:56px;transition:background var(--t2)}
.acc .q:hover{background:rgba(255,255,255,.02)}
.acc .q .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--meta);width:22px}
.acc .q .t{font-family:var(--mark);font-weight:500;font-size:15.5px;color:var(--cream);letter-spacing:-.01em}
.acc .q .i{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center;font-size:14px;color:var(--mute);transition:transform var(--t2) var(--ease),background var(--t2),color var(--t2)}
.acc .q[aria-expanded="true"] .i{background:var(--violet);color:#fff;box-shadow:none;transform:rotate(45deg)}
.acc .q[aria-expanded="true"] .n{color:var(--violet-l)}
.acc .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t3) var(--ease)}
.acc .a.open{grid-template-rows:1fr}
.acc .a > div{overflow:hidden}
.acc .a p{padding:0 4px 20px 40px;max-width:66ch;font-size:14.5px;line-height:1.66;color:var(--mute)}
.acc .a p + p{padding-top:0;margin-top:-8px}

/* ============ NEW PRIMITIVE: long-form prose measure ============ */
.prose{max-width:62ch;font-size:16.5px;line-height:1.72;color:var(--mute)}
.prose > * + *{margin-top:20px}
.prose .lead{font-size:19.5px;line-height:1.62;color:var(--cream)}
.prose b,.prose strong{color:var(--cream);font-weight:500}
.prose h2{font-size:clamp(28px,3.2vw,44px);margin-top:56px;max-width:18ch}
.prose h3{font-family:var(--mark);font-weight:500;font-size:17.5px;color:var(--cream);letter-spacing:-.01em;margin-top:36px}
.prose a{color:var(--violet-l)}
.prose ul{margin-left:0;padding-left:0;list-style:none;display:grid;gap:10px}
.prose ul li{display:flex;gap:12px;align-items:baseline}
.prose ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet-l);flex:none;transform:translateY(-2px)}
.pull{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.8vw,50px);line-height:1.04;letter-spacing:-.025em;color:var(--cream);max-width:20ch;margin:52px 0}
.pull em{color:var(--violet-l)}
.prose .byline{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);margin-top:44px}

/* manifesto rail: the long-form column would otherwise strand half the desktop */
.mgrid{display:grid;grid-template-columns:minmax(0,62ch) minmax(0,1fr);gap:64px;align-items:start}
.mgrid > *{min-width:0}
.mrail{position:sticky;top:calc(var(--chrome) + 32px)}
.mcredit{padding:20px;border-radius:18px}
.mcredit .covers{display:flex;gap:8px;margin-top:14px}
.mcredit .covers .cov{width:56px;height:56px;border-radius:8px;flex:none}
.mcredit .n{font-family:var(--mark);font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--cream);margin-top:14px}
.mnote{font-size:13px;line-height:1.6;color:var(--mute);margin-top:18px;max-width:34ch}

/* stat trio + timeline (manifesto) */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:36px 0}
.stats .s{padding:18px 20px;border-radius:16px}
.stats .v{font-family:var(--mark);font-weight:600;font-size:38px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--cream)}
.stats .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta-card);margin-top:8px;line-height:1.6}
.tl{display:grid;gap:0;margin:36px 0 0}
.tl .t{display:grid;grid-template-columns:130px minmax(0,1fr);gap:20px;padding:20px 0;border-top:1px solid var(--line);align-items:start}
.tl .t:last-child{border-bottom:1px solid var(--line)}
.tl .when{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-l);padding-top:3px}
.tl .h{font-family:var(--mark);font-weight:500;font-size:16px;color:var(--cream);letter-spacing:-.01em}
.tl .d{font-size:14px;color:var(--mute);margin-top:5px;line-height:1.6;max-width:58ch}

/* ============ NEW PRIMITIVE: feature hub grid + UI-as-imagery crops ============ */
/* override: journey's .filters is the analytics pill row. The hub filter row is
   a labelled band of .seg groups, so the seg styling has to win inside it. */
.filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:26px 0 0}
.filters .fl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);margin-right:2px}
.filters .seg button{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:8px 12px;border-radius:999px;box-shadow:none;background:none;transition:all var(--t2);white-space:nowrap}
.filters .seg button[aria-pressed="true"]{background:var(--cream);color:var(--aub);box-shadow:none}
.fcount{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);margin-left:auto}
.fcount b{color:var(--cream);font-weight:500}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.fcard{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;border-radius:18px;transition:transform var(--t2) var(--out),box-shadow var(--t2) var(--ease);color:inherit;text-decoration:none}
.fcard::before{left:10%;right:10%}
.fcard:hover{transform:translateY(-4px)}
.fcard .crop{position:relative;height:150px;overflow:hidden;background:rgba(0,0,0,.3);border-bottom:1px solid var(--line)}
.fcard .crop .badge{position:absolute;right:10px;top:10px;z-index:4}
.fcard .body{padding:15px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.fcard .t{font-family:var(--mark);font-weight:500;font-size:15.5px;color:var(--cream);letter-spacing:-.01em;margin:0}
.fcard .d{font-size:13px;color:var(--mute);line-height:1.5;margin:0}
.fcard .go{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);display:flex;align-items:center;gap:7px;transition:color var(--t2),gap var(--t2)}
.fcard:hover .go{color:var(--violet-l);gap:11px}
.fempty{grid-column:1/-1;padding:56px 24px;text-align:center;border-radius:18px;border:1px dashed var(--line-2)}
.fempty b{display:block;font-family:var(--serif);font-size:30px;letter-spacing:-.02em;color:var(--cream)}
/* the direct child only: the sentence carries an inline span for the filter word */
.fempty > span{display:block;font-size:14px;color:var(--mute);margin-top:8px;max-width:44ch;margin-left:auto;margin-right:auto}
.fempty .btn{margin-top:18px}

/* UI-as-imagery crops: tiny fragments of the operator app, not screenshots */
.ui{position:absolute;inset:0;padding:14px 16px;font-family:var(--mark);transform:scale(1);transform-origin:top left}
.ui .r{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--line)}
.ui .r:last-child{border-bottom:0}
.ui .dot{width:9px;height:9px;border-radius:50%;background:var(--violet-l);flex:none}
.ui .dot.o{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.ui .dot.a{background:var(--acid)}
.ui .dot.w{background:var(--warn)}
.ui .tx{font-size:12px;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui .mt{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta-card);white-space:nowrap}
.ui .kk{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta-card);margin-bottom:8px}
.ui .wallmini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ui .wallmini .c{aspect-ratio:1;border-radius:5px;background-size:cover;background-position:center;background-color:rgba(255,255,255,.05)}
.ui .bubble{border-radius:12px 12px 12px 4px;background:rgba(255,255,255,.06);padding:8px 11px;font-size:11.5px;color:var(--cream);line-height:1.45;max-width:88%}
.ui .bubble.r{border-radius:12px 12px 4px 12px;background:rgba(142,77,194,.22);margin-left:auto}
.ui .wave{display:flex;align-items:flex-end;gap:2px;height:44px}
.ui .wave i{flex:1;background:var(--violet-l);opacity:.75;border-radius:1px}
.ui .big{font-family:var(--mark);font-weight:600;font-size:32px;letter-spacing:-.03em;color:var(--cream);line-height:1}
.ui .chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.ui .chips span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:4px 7px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2)}
.ui .fade{position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(180deg,transparent,var(--card))}
.ui .ringmini{width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--violet-l) 0 78%,rgba(255,255,255,.08) 78% 100%);display:grid;place-items:center}
.ui .ringmini::after{content:"78%";width:38px;height:38px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-family:var(--mono);font-size:9px;color:var(--cream)}
.ui .phone{width:74px;height:100px;border-radius:10px 10px 0 0;box-shadow:inset 0 0 0 1px var(--line-2);padding:6px;background:rgba(0,0,0,.3)}
.ui .phone .c{width:100%;aspect-ratio:1;border-radius:5px;background-size:cover;background-position:center}
.ui .phone .b{height:7px;border-radius:3px;background:rgba(255,255,255,.14);margin-top:5px}
.ui .split{display:flex;gap:12px;align-items:center}

/* ============ NEW PRIMITIVE: feature detail layout + sub-nav scrollspy ============ */
.detail{display:grid;grid-template-columns:216px minmax(0,1fr);gap:56px;align-items:start}
.subnav{position:sticky;top:calc(var(--chrome) + 22px);max-height:calc(100vh - var(--chrome) - 46px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.subnav .lb{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);margin-bottom:10px}
.subnav ol,.subnav ul{list-style:none;padding:0;margin:0}
.subnav a{display:block;padding:8px 0 8px 14px;border-left:1px solid var(--line);font-size:13px;line-height:1.35;color:var(--meta);text-decoration:none;transition:color var(--t2),border-color var(--t2)}
.subnav a:hover{color:var(--cream)}
.subnav a[aria-current="true"]{color:var(--cream);border-left-color:var(--violet-l)}
.subnav .grp2{margin-top:28px}
.subnav .all a{padding:7px 0 7px 14px;font-size:12.5px}
.subnav .all a[aria-current="page"]{color:var(--violet-l);border-left-color:var(--violet-l)}
.subnav .back{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);text-decoration:none;border-left:0;padding-left:0}
.subnav .back:hover{color:var(--cream)}
.subchips{display:none}
.dsec{scroll-margin-top:calc(var(--chrome) + 18px);padding-bottom:8px}
.dsec + .dsec{margin-top:52px}
.dsec h2{margin-top:0;font-size:clamp(26px,2.9vw,40px);max-width:20ch}
.dsec .lede{margin-top:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.tool{padding:16px 18px;border-radius:16px}
.tool .h{font-family:var(--mark);font-weight:500;font-size:14.5px;color:var(--cream);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tool .h .c{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--violet-l);padding:3px 7px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(176,127,229,.4)}
.tool p{font-size:13px;color:var(--mute);margin-top:8px;line-height:1.55}
.guard{padding:16px 18px;border-radius:16px}
.guard .h{font-family:var(--mark);font-weight:500;font-size:14.5px;color:var(--cream)}
.guard p{font-size:13px;color:var(--mute);margin-top:7px;line-height:1.55}
.asks{margin-top:22px;padding:18px 20px;border-radius:18px}
.asks .tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.asks .tabs button{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:8px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);transition:all var(--t2)}
.asks .tabs button[aria-pressed="true"]{background:var(--violet);color:#fff;box-shadow:none}
.asks .thread{display:grid;gap:10px;min-height:172px;align-content:start}
.asks .msg{max-width:82%;padding:11px 14px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.05);font-size:13.5px;line-height:1.55;color:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.asks .msg.you{border-radius:14px 14px 4px 14px;background:rgba(142,77,194,.2);margin-left:auto;box-shadow:none}
.asks .msg .src{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta-card);margin-bottom:6px}
.asks .msg ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px;font-size:12.5px;color:var(--mute)}
.asks .msg ul li{display:flex;gap:9px;align-items:center}
.asks .msg ul li i{width:6px;height:6px;border-radius:50%;background:var(--violet-l);flex:none;font-style:normal}
.asks .foot{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta-card);margin-top:12px}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:52px;padding-top:24px;border-top:1px solid var(--line)}
.prevnext a{padding:16px 18px;border-radius:14px;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);transition:background var(--t2)}
.prevnext a:hover{background:rgba(255,255,255,.04)}
.prevnext .l{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.prevnext .t{font-family:var(--mark);font-weight:500;font-size:15px;color:var(--cream);margin-top:6px}
.prevnext .nx{text-align:right}

/* closing CTA band */
.endcta{margin-top:36px;padding:44px;border-radius:22px;display:grid;grid-template-columns:minmax(0,1.1fr) auto;gap:32px;align-items:center}
.endcta h2{margin-top:8px;font-size:clamp(30px,3.4vw,48px)}
.endcta .acts{display:flex;gap:10px;flex-wrap:wrap;flex-direction:column;align-items:stretch;min-width:270px}
.endcta .acts .inp{min-width:0}
.endcta .acts .btn{justify-content:center;align-self:stretch;min-height:44px}
.startnote{line-height:1.6}
.startnote.ok{color:var(--violet-l)}

/* setup call block */
.setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}
.setup .steps3{display:grid;gap:10px}
.setup .steps3 div{padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px var(--line)}
.setup .steps3 h4{font-family:var(--mark);font-weight:500;font-size:14.5px;color:var(--cream);margin-top:6px}
.setup .steps3 p{font-size:13px;color:var(--mute);margin-top:4px;line-height:1.55}

/* add-on cards on pricing */
.addons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.addon2{padding:16px 18px;border-radius:16px;display:flex;flex-direction:column;gap:8px}
.addon2 .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.addon2 .n{font-family:var(--mark);font-weight:500;font-size:14.5px;color:var(--cream)}
.addon2 .p{font-family:var(--serif);font-size:26px;letter-spacing:-.02em;color:var(--cream)}
.addon2 .p small{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta-card)}
.addon2 .d{font-size:12.5px;color:var(--mute);line-height:1.5;margin:0}
.addon2 .st{margin-top:-2px}

/* footer: the journey one-line mono grammar, with the subpage bottom spacing.
   Deviation from the mockup: it wrote .footer{padding:24px 0 40px} after .wrap,
   which cancelled the wrapper's side padding and ran the footer to the viewport
   edge. The compound selector keeps both. */
.footer.wrap{padding:24px 32px 40px}

/* per-page atmosphere, one wash per subpage */
.wash.w2{background:radial-gradient(1100px 700px at 25% 8%,rgba(142,77,194,.17),transparent 60%),radial-gradient(700px 600px at 90% 70%,rgba(176,127,229,.09),transparent 55%)}
.wash.w3{background:radial-gradient(1000px 700px at 78% 12%,rgba(176,127,229,.15),transparent 60%)}
.wash.w4{background:radial-gradient(1200px 800px at 50% 4%,rgba(142,77,194,.2),transparent 62%),radial-gradient(700px 500px at 15% 80%,rgba(142,77,194,.08),transparent 55%)}

/* mobile sticky CTA: thumb reach */
.stickycta{display:none}

/* ============ responsive ============ */
@media (max-width:1180px){
  .detail{grid-template-columns:minmax(0,1fr);gap:26px}
  .detail > *{min-width:0}
  .subnav{position:static;max-height:none;overflow:visible;display:none}
  .subchips{display:flex;gap:6px;overflow-x:auto;padding:10px 0;position:sticky;top:var(--chrome);z-index:38;background:linear-gradient(180deg,var(--aub) 60%,rgba(20,16,28,0));scrollbar-width:none}
  .subchips::-webkit-scrollbar{display:none}
  .subchips a{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:0 13px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);white-space:nowrap;text-decoration:none;transition:all var(--t2)}
  .subchips a[aria-current="true"]{background:var(--cream);color:var(--aub);box-shadow:none}
  .mgrid{grid-template-columns:minmax(0,1fr);gap:32px}
  .mrail{position:static}
  .mcredit .covers .cov{width:64px;height:64px}
  .addons{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .endcta{grid-template-columns:1fr;gap:24px}
  .setup{grid-template-columns:1fr;gap:26px}
}
@media (max-width:1024px){
  :root{--nav-h:56px;--chrome:56px}
  .wrap{padding:0 20px}
  .nav{padding:0 18px;background:rgba(20,16,28,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom-color:var(--line)}
  .nav .links a:not(.btn){display:none}
  .nav .links a.btn{display:inline-flex;font-size:12.5px;padding:9px 13px}
  .nav .links{gap:8px}
  .navtoggle{padding:0 14px;font-size:11px}
  .nav .wordmark{font-size:19px}
  .hero{padding:40px 0 22px}
  .sect{padding:40px 0}
  .plans{grid-template-columns:1fr;gap:12px}
  .grid2{grid-template-columns:1fr}
  .prevnext{grid-template-columns:1fr}
  .prevnext .nx{text-align:left}
  .stats{grid-template-columns:1fr;gap:10px}
  .tl .t{grid-template-columns:1fr;gap:6px}
  .endcta{padding:28px}
  /* the subpages have no .mbar, so the cookie bar clears the sticky CTA instead */
  .cookiebar{bottom:76px}
  .stickycta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:65;align-items:center;gap:12px;padding:10px 16px;background:rgba(20,16,28,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line-2)}
  .stickycta .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);line-height:1.5}
  .stickycta .l b{display:block;font-family:var(--mark);font-weight:500;font-size:17px;letter-spacing:-.01em;color:var(--cream);text-transform:none}
  .stickycta .btn{margin-left:auto;min-height:44px}
  .footer.wrap{padding:24px 20px 84px}
}
@media (max-width:760px){
  .addons{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  /* the comparison table becomes a designed stack, not a scrolling table */
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{display:none}
  .cmp tbody tr{padding:16px 0;border-top:1px solid var(--line)}
  .cmp tbody tr.grp{padding:26px 0 0;border-top:0}
  .cmp tbody th{padding:0 0 10px;width:auto;border-top:0;font-size:15px}
  .cmp tbody td{padding:0 0 8px;border-top:0;display:flex;gap:12px;align-items:baseline}
  .cmp tbody td::before{content:attr(data-l);font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);min-width:52px;flex:none}
  .cmp tr.grp th{padding-bottom:2px}
  .cmp tr.grp td{display:block;padding:0 0 4px;border-top:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:none;color:var(--meta-card);line-height:1.5}
  .cmp tr.grp td::before{content:none}
  .cmp tr.diff th,.cmp tr.diff td{background:transparent}
  .cmp tr.diff th{color:var(--violet-l)}
  .cmpwrap{border-radius:0}
  .hd2{align-items:flex-start}
  .build .row{flex-wrap:wrap}
  .prose{font-size:16px}
  .pull{font-size:clamp(26px,7vw,34px);max-width:none}
}

/* touch targets (Experience Standards floor) */
@media (pointer:coarse){
  .acc .q,.asks .tabs button,.subchips a,.filters .seg button{min-height:44px}
  .hero .crumb a{display:inline-flex;align-items:center;min-height:44px}
  /* deviation from the mockup: it made .subnav a inline-flex, which collapses the
     rail into a run of inline links on a coarse-pointer screen wide enough to
     still show it. Block-level flex gives the same 44px without breaking the rail.
     The mockup also sized .prose a to 44px; an inline-flex link inside a paragraph
     stops wrapping mid-sentence, and inline text links are exempt from the target
     floor, so prose links are left as text. */
  .subnav a{display:flex;align-items:center;min-height:44px}
  .footer .links2{gap:2px 12px}
}

@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none}
  .rp{transition:none}
}