/* SYN-597 — unauth landing rebuild (owner mockup test1.html = source of truth).
   Scoped under .landing so nothing leaks into the app chrome; shell chrome
   (sidebar/mobile top/footer) is hidden only for the anonymous home view.
   SYN-609 phase 3: the mockup's page-scoped token block is GONE — every rule
   reads the house tokens (tokens.css / STYLE.md v1). The two-oranges
   inconsistency resolved canonically: mockup --accent #ff7a2f -> --primary
   #ef8033. Value deltas of the migration are listed in the SYN-609 phase-3
   verdict. Fonts are the self-hosted Inter/JetBrains Mono woff2 already
   served from /static/fonts (CSP font-src 'self'); no Google Fonts. No inline
   handlers (CSP script-src 'self') — all behavior lives in /static/landing.js. */

.landing{

  position:relative; background:var(--background); color:var(--foreground);
  font-family:Inter,system-ui,sans-serif; font-size:var(--text-md); line-height:1.6;
  -webkit-font-smoothing:antialiased; min-height:100vh; overflow:clip;
}
.landing a{color:inherit;text-decoration:none}
.landing button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.landing svg.i{width:var(--icon-md);height:var(--icon-md);stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.landing .mono{font-family:var(--font-mono)}
.landing .wrap{max-width:1200px;margin:0 auto;padding:0 var(--space-6)}
.landing .accent{color:var(--primary)}

/* ---- shell chrome suppression: anonymous home only ---- */
body[data-view="home"][data-auth="out"] .sidebar,
body[data-view="home"][data-auth="out"] .mobile-top,
body[data-view="home"][data-auth="out"] .footer,
body[data-view="home"][data-auth="out"] .scrim { display:none !important; }
body[data-view="home"][data-auth="out"] .content{ max-width:none; width:100%; padding:0; }
/* owner 2026-10-15: the hidden sidebar left its 248px margin behind — a blank
   strip where the page background should fill. Zero the var for this state;
   .main-col margin-left and .sidebar width both consume it. */
body[data-view="home"][data-auth="out"]{ --sidebar-w:0px; }

/* ---------- Background ---------- */
/* SYN-614: the glow is a pre-baked raster texture now, not a CSS gradient.
   Owner capture (2026-10-15, effective DSF ~1.76: grid pitch 98.8 device px
   = 56 CSS x 1.76; Windows fractional scaling, likely 160% + browser zoom
   110% — a lattice the SYN-597 sweep's zoom-100% paths never drove) shows
   the translateZ(0) mitigation FAILED: a hard one-row horizontal step at
   device-y 30 (17 CSS) on the right half plus a hairline seam at ~88 device
   px in the glow band, on top of the checkerboard complaint. Cause class:
   paint-time rasterization of the two background-gradient layers at
   fractional DSF. Dead-by-construction fix: NO paint-time gradient remains
   in the band — landing-glow.webp carries both blobs baked (identical linear
   falloff and stops as the old radials: 600x380 at 30% 10% alpha .16,
   500x300 at 80% 30% alpha .07, both to transparent at the 70% stop) and is
   drawn as ONE image quad; a decoded bitmap has no gradient shader to seam
   at any DPR or zoom. Geometry note: blob radii now scale with the viewport
   (percentage centers preserved; at the 1280 reference width the radii are
   exactly the old 600/380 + 500/300). translateZ(0) kept: own layer. */
.landing .bg-glow{position:absolute;inset:0 0 auto 0;height:900px;pointer-events:none;z-index:0;transform:translateZ(0);
  background:url(/static/landing-glow.webp) top/100% 100% no-repeat}

/* ---------- Nav ---------- */
.landing header{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:.25s}
.landing header.scrolled{background:rgba(8,9,11,.78);backdrop-filter:blur(12px);border-color:var(--border)}
.landing .nav{display:flex;align-items:center;height:64px;gap:var(--space-8)}
.landing .brand{display:flex;align-items:center;gap:var(--space-2-5);font-weight:700;font-size:var(--text-lg);letter-spacing:-.01em}
/* dashboard fox mark (app-core FOX, same as sidebar/login): no gradient tile,
   the orange head speaks on the dark bg. owner 2026-10-15. */
.landing .logo{width:26px;height:26px;display:inline-flex;flex:none}
.landing .logo svg{width:26px;height:26px;display:block;filter:drop-shadow(0 2px 8px rgba(239,128,51,.35))}
.landing .links{display:flex;gap:var(--space-6);color:var(--muted-foreground);font-size:var(--text-base);font-weight:500}
.landing .links a:hover{color:var(--foreground)}
.landing .nav-r{margin-left:auto;display:flex;align-items:center;gap:var(--space-2-5)}
.landing .status{display:flex;align-items:center;gap:var(--space-1-5);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted-foreground);padding:var(--space-1) var(--space-2-5);border:1px solid var(--border);border-radius:var(--radius-full)}
.landing .ldot{width:var(--space-1-5);height:var(--space-1-5);border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(52,211,153,.15)}
.landing .status.err .ldot{background:var(--destructive);box-shadow:0 0 0 3px rgba(248,113,113,.15)}
.landing .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:600;font-size:var(--text-base);transition:.18s;white-space:nowrap}
.landing .btn-primary{background:var(--primary-gradient);color:var(--primary-foreground);box-shadow:0 8px 24px -8px rgba(255,122,47,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.landing .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.landing .btn-ghost{border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--foreground)}
.landing .btn-ghost:hover{background:var(--card);border-color:var(--border-strong)}
.landing .btn-lg{padding:var(--space-3) var(--space-5);font-size:var(--text-md);border-radius:var(--radius-lg)}
.landing .g{width:var(--icon-md);height:var(--icon-md);background:var(--brand-tile-foreground);border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.landing .g svg{width:12px;height:12px}

/* ---------- Hero ---------- */
/* style.css's old .hero { text-align:center } (app landing) leaks into this
   same-named section — owner 2026-10-15: hero copy is LEFT aligned. */
.landing .hero{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center;padding:72px 0 var(--space-16);position:relative;z-index:1;text-align:left}
.landing .eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1-5);border-radius:var(--radius-full);border:1px solid var(--border);background:rgba(255,255,255,.02);font-size:var(--text-sm);color:var(--muted-foreground);margin-bottom:var(--space-5)}
.landing .eyebrow b{background:var(--primary-soft);color:var(--primary-hover);font-size:var(--text-2xs);font-weight:600;padding:var(--space-0-5) var(--space-2);border-radius:var(--radius-full)}
.landing .eyebrow:hover{border-color:var(--border-strong);color:var(--foreground)}
.landing h1{font-size:clamp(40px,5.2vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:700;color:var(--foreground);margin:0}
/* the h1 gradient moved onto .fd-word (see rotator block) — the .accent span
   is a plain wrapper now; keeping background-clip:text here would double-paint
   the clip over the transformed words (desync class). */
/* rotating hero word (owner 2026-10-15): AI Agents / Demos / Proof of Concepts /
   Tests slide up inside a 1-line window. Window is 1.21em (full Inter glyph box
   asc+desc) so nothing clips; -.095em vertical margins keep the layout
   footprint at the h1's 1.02em line so the h1 rhythm doesn't shift;
   vertical-align -.16em lands the word baseline on the h1 baseline. */
.landing .fd-rot{display:inline-block;overflow:hidden;height:1.21em;margin:-.095em 0;vertical-align:-.16em}
.landing .fd-rot-track{display:block;transition:transform .55s cubic-bezier(.77,0,.18,1)}
/* gradient lives on EACH WORD, not the wrapping span: background-clip:text on
   an ancestor of a TRANSFORMED element desyncs clip vs paint (seen live: wrong
   glyphs / empty window while the DOM rects were correct). Per-word clip keeps
   word + background in one transformed box. nowrap: "Proof of Concepts" is
   wider than the h1 column — it must overflow into the grid gap, not wrap. */
.landing .fd-word{display:block;height:1.21em;line-height:1.21em;white-space:nowrap;
  background:linear-gradient(90deg,var(--primary),var(--primary-hover));-webkit-background-clip:text;background-clip:text;color:transparent}
.landing .lede{font-size:var(--text-lg);color:var(--muted-foreground);margin:var(--space-5) 0 var(--space-8);max-width:520px}
.landing .lede b{color:var(--foreground);font-weight:500}
.landing .ctas{display:flex;gap:var(--space-3);flex-wrap:wrap}
.landing .fine{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--faint-foreground);display:flex;gap:var(--space-4);flex-wrap:wrap}
.landing .fine span{display:flex;align-items:center;gap:var(--space-1-5)}
.landing .fine svg{width:14px;height:14px;color:var(--success)}
.landing .quiet-auth{margin-top:var(--space-2-5);font-size:var(--text-xs);color:var(--faint-foreground)}
.landing .quiet-auth a{color:var(--muted-foreground);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px}
.landing .quiet-auth a:hover{color:var(--foreground)}

/* Terminal */
.landing .term{background:linear-gradient(180deg,var(--background),var(--inset));border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
        box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02),0 0 120px -40px rgba(255,122,47,.35)}
.landing .term-bar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2-5) var(--space-3);border-bottom:1px solid var(--border);background:rgba(255,255,255,.015)}
.landing .lights{display:flex;gap:var(--space-1-5)}
.landing .lights i{width:11px;height:11px;border-radius:50%;background:#2b3038}
.landing .lights i:nth-child(1){background:#ff5f57}.landing .lights i:nth-child(2){background:#febc2e}.landing .lights i:nth-child(3){background:#28c840}
.landing .term-title{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--faint-foreground);margin-left:var(--space-2)}
/* SYN-604 — operator↔agent chat demo: the canned MCP log ships as static
   markup in app-core.js; default view is pure chat (insets display:none) and
   the footer toggle flips .show-tools on #fd-chat to reveal them inline.
   Every number traces to the live stack: spawn_vm's real MCP signature is
   (size, image, ttl_minutes, …, vcpu/mem_mb/disk_gb) — the demo's custom
   shape 4 vCPU / 4096 MB / 10 GB bills at billing.custom_hourly(4,4096,10) =
   $0.0438613/h = $1.2184e-05/s (≈ 2.2 cents per half hour); 6.18.51+ is the
   real vmlinux.bin uname banner; 2a01:4f9:3120:1bcd::/64 is netns_mod
   .V6_PREFIX; balance $24.85 = a $25.00 top-up minus the $0.1501 closed bill
   of the frozen leftover box (68220 s × the s-tier $2.2e-06/s); running
   $0.0031 = 254 s × the fitted rate (frozen machines are excluded from the
   running estimate by design — SYN-421). The free(1) digest line uses
   `sed -n 2p` because `head -1` prints free's column header, not the Mem row. */
/* SYN-604 — operator↔agent chat demo: the canned MCP log ships as static
   markup in app-core.js; default view is pure chat (insets display:none) and
   the footer toggle flips .show-tools on #fd-chat to reveal them inline.
   Owner 2026-10-15 follow-up: restyled as a BUBBLE chat — sender name as a
   tiny mono label on its own line (right-aligned over the you-bubbles),
   rounded bubbles hugging their side (agent = neutral surface, you = accent
   tint, tail corner flattened toward the sender), and the MCP insets float
   as centered dashed "tool receipt" strips between the bubbles when
   expanded. Markup unchanged — the whole look is CSS, so app-core keeps its
   v145 pin and only landing.css bumps. */
.landing .chat-body{font-size:var(--text-sm);line-height:1.55;padding:var(--space-4) var(--space-3);height:392px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-2-5)}
.landing .cl{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--space-0-5) var(--space-2-5);max-width:100%}
.landing .cl.you{justify-content:flex-end}
.landing .cl .who{flex-basis:100%;width:100%;font-family:var(--font-mono);font-size:var(--text-2xs);line-height:1.4;letter-spacing:.05em;color:var(--faint-foreground);text-align:left}
.landing .cl.you .who{text-align:right}
.landing .cl p{margin:0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);max-width:86%;overflow-wrap:anywhere}
.landing .cl.agent p{color:var(--foreground);background:var(--card);border:1px solid var(--border);border-bottom-left-radius:var(--radius-xs);box-shadow:0 2px 8px -4px rgba(0,0,0,.5)}
.landing .cl.you p{color:#ffe9dc;background:var(--primary-soft);border:1px solid var(--primary-line);border-bottom-right-radius:var(--radius-xs);box-shadow:0 2px 8px -4px rgba(0,0,0,.5)}
.landing .mcp{display:none;font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.6;color:var(--muted-foreground);background:rgba(255,255,255,.02);border:1px dashed var(--border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);width:fit-content;max-width:96%;margin:1px auto 0}
.landing .chat.show-tools .mcp{display:block}
.landing .mline{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
.landing .chat-foot{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2-5) var(--space-4);border-top:1px solid var(--border);font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--faint-foreground)}
.landing .chat-tog{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--muted-foreground);padding:var(--space-1) var(--space-2-5);border:1px solid var(--border);border-radius:var(--radius-md);transition:.15s}
.landing .chat-tog:hover{color:var(--foreground);border-color:var(--border-strong);background:var(--card)}
.landing .chat-tog:focus-visible{outline:var(--ring-width) solid var(--primary);outline-offset:var(--ring-offset)}
.landing .chat-cap{margin:var(--space-2-5) var(--space-0-5) 0;font-size:var(--text-xs);color:var(--faint-foreground);text-align:center}
.landing .t-mcp{color:var(--success)}
@keyframes fdBlink{50%{opacity:0}}

/* ---------- Metrics strip ---------- */
.landing .metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--inset);overflow:hidden;position:relative;z-index:1}
.landing .metric{padding:var(--space-5) var(--space-6);border-right:1px solid var(--border)}
.landing .metric:last-child{border-right:0}
.landing .metric b{display:block;font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:600;letter-spacing:-.02em;color:var(--foreground)}
.landing .metric b small{font-size:var(--text-md);color:var(--faint-foreground);font-weight:500;margin-left:var(--space-0-5)}
.landing .metric span{color:var(--muted-foreground);font-size:var(--text-sm)}

/* ---------- Sections ---------- */
.landing section{padding:100px 0 0;position:relative;z-index:1}
.landing .sh{max-width:640px;margin-bottom:var(--space-10)}
.landing .sh.center{margin:0 auto var(--space-10);text-align:center}
.landing .kicker{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--primary-hover);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--space-3);display:block}
.landing h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.03em;line-height:1.1;font-weight:700;color:var(--foreground);margin:0}
.landing .sh p{color:var(--muted-foreground);font-size:var(--text-lg);margin-top:var(--space-3)}

/* Steps + code */
.landing .connect{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-10);align-items:start}
.landing .steps{display:flex;flex-direction:column;gap:var(--space-1-5)}
.landing .step{display:flex;gap:var(--space-4);padding:var(--space-4);border-radius:var(--radius-lg);border:1px solid transparent;cursor:pointer;transition:.2s}
.landing .step:hover{background:var(--popover)}
.landing .step.on{background:var(--popover);border-color:var(--border)}
.landing .step .n{width:30px;height:30px;border-radius:var(--radius-md);display:grid;place-items:center;font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;
           background:var(--card);border:1px solid var(--border);color:var(--muted-foreground);flex-shrink:0}
.landing .step.on .n{background:var(--primary-soft);border-color:var(--primary-line);color:var(--primary-hover)}
.landing .step b{font-weight:600;display:block;margin-bottom:var(--space-0-5);color:var(--foreground)}
.landing .step p{color:var(--muted-foreground);font-size:var(--text-base);margin:0}
.landing .code{background:var(--inset);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.landing .tabs{display:flex;align-items:center;border-bottom:1px solid var(--border);padding:0 var(--space-2)}
.landing .tab{padding:var(--space-3) var(--space-3);font-size:var(--text-sm);font-weight:500;color:var(--faint-foreground);position:relative}
.landing .tab:hover{color:var(--foreground)}
.landing .tab.on{color:var(--foreground)}
.landing .tab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:var(--space-0-5);background:var(--primary);border-radius:var(--radius-xs)}
.landing .copy{margin-left:auto;display:flex;align-items:center;gap:var(--space-1-5);font-size:var(--text-xs);color:var(--muted-foreground);padding:var(--space-1) var(--space-2-5);border:1px solid var(--border);border-radius:var(--radius-md)}
.landing .copy:hover{color:var(--foreground);background:var(--card)}
.landing .copy svg{width:13px;height:13px}
.landing pre{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.75;padding:var(--space-5) var(--space-5);overflow:auto;color:#c9d1d9;min-height:300px;margin:0;background:transparent}
.landing pre .c{color:var(--faint-foreground)}
.landing pre .k{color:#ff9e64}
.landing pre .s{color:#a5d6a7}
.landing pre .p{color:var(--info)}
.landing .panel{display:none}.landing .panel.on{display:block}

/* Bento */
.landing .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-4)}
.landing .cell{background:var(--popover);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);position:relative;overflow:hidden;transition:border-color .2s}
.landing .cell:hover{border-color:var(--border)}
.landing .cell::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%),rgba(255,122,47,.07),transparent 60%);opacity:0;transition:.3s;pointer-events:none}
.landing .cell:hover::before{opacity:1}
.landing .c4{grid-column:span 4}.landing .c2{grid-column:span 2}.landing .c3{grid-column:span 3}
.landing .ic{width:38px;height:38px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--primary-soft);border:1px solid var(--primary-line);color:var(--primary-hover);margin-bottom:var(--space-4)}
.landing .cell h3{font-size:var(--text-lg);font-weight:600;letter-spacing:-.01em;color:var(--foreground);margin:0}
.landing .cell p{color:var(--muted-foreground);font-size:var(--text-base);margin-top:var(--space-1-5)}

/* Lifecycle viz */
.landing .life{margin-top:var(--space-6);position:relative}
.landing .track{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.landing .track::before{content:"";position:absolute;left:12px;right:12px;top:11px;height:var(--space-0-5);background:linear-gradient(90deg,var(--primary),var(--success) 40%,var(--warning) 75%,var(--border))}
.landing .node{position:relative;padding-right:var(--space-2-5)}
.landing .node i{display:block;width:24px;height:24px;border-radius:50%;background:var(--inset);border:2px solid var(--c,var(--primary));position:relative;z-index:1;
          box-shadow:0 0 0 4px var(--popover)}
.landing .node i::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--c,var(--primary))}
.landing .node b{display:block;font-size:var(--text-sm);margin-top:var(--space-3);font-weight:600;color:var(--foreground)}
.landing .node span{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--faint-foreground)}
.landing .fork{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2-5);margin-top:var(--space-5)}
.landing .fork div{border:1px dashed var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-3);font-size:var(--text-sm);color:var(--muted-foreground)}
.landing .fork div b{color:var(--foreground);display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);margin-bottom:var(--space-0-5)}
.landing .fork .x{width:var(--space-2);height:8px;border-radius:var(--radius-xs);background:var(--destructive)}
.landing .fork .f{width:var(--space-2);height:8px;border-radius:var(--radius-xs);background:var(--info)}

.landing .mini-term{margin-top:var(--space-5);background:var(--inset);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-3);font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.8;color:var(--muted-foreground)}
.landing .mini-term .t-mcp{color:var(--success)}
.landing .chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.landing .chip{font-family:var(--font-mono);font-size:var(--text-2xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);border:1px solid var(--border);color:var(--muted-foreground);background:var(--inset)}
.landing .ipv6{margin-top:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--info);background:var(--info-soft);border:1px solid var(--info-line);border-radius:var(--radius-md);padding:var(--space-2-5) var(--space-3)}
.landing .desk{margin-top:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--inset)}
.landing .desk-bar{height:22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--space-1);padding:0 var(--space-2)}
.landing .desk-bar i{width:var(--space-1-5);height:var(--space-1-5);border-radius:50%;background:var(--border)}
.landing .desk-bar span{margin-left:auto;display:flex;align-items:center;gap:var(--space-1);font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--destructive)}
.landing .desk-bar span::before{content:"";width:var(--space-1-5);height:6px;border-radius:50%;background:var(--destructive);animation:fdBlink 1.2s steps(1) infinite}
.landing .desk-body{height:92px;background:linear-gradient(135deg,#2c1a3b,#4a2134 50%,#8b3a1e);position:relative}
.landing .desk-body::after{content:"";position:absolute;left:14px;top:14px;width:42%;height:60%;border-radius:var(--radius-xs);background:rgba(10,12,15,.85);border:1px solid rgba(255,255,255,.08)}

/* Compare */
.landing .compare{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--inset)}
.landing .compare table{width:100%;border-collapse:collapse;font-size:var(--text-base)}
.landing .compare th,.landing .compare td{padding:var(--space-4) var(--space-5);text-align:left;border-bottom:1px solid var(--border)}
.landing .compare tr:last-child td{border-bottom:0}
.landing .compare th{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint-foreground);background:var(--popover)}
.landing .compare th.us{color:var(--primary-hover);background:rgba(255,122,47,.08)}
.landing .compare td:first-child{color:var(--muted-foreground)}
.landing .compare td.us{background:rgba(255,122,47,.04);color:var(--foreground);font-weight:500}
.landing .y{color:var(--success)}
.landing .no{color:var(--faint-foreground)}

/* Pricing calc */
.landing .pricing{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.landing .calc,.landing .price-card{background:var(--popover);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6)}
.landing .field{margin-bottom:var(--space-6)}
.landing .field-top{display:flex;justify-content:space-between;font-size:var(--text-base);margin-bottom:var(--space-3)}
.landing .field-top span{color:var(--muted-foreground)}
.landing .field-top b{font-family:var(--font-mono);font-weight:500;color:var(--foreground)}
.landing .sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.landing .size{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-2-5);text-align:center;transition:.15s}
.landing .size b{display:block;font-family:var(--font-mono);font-size:var(--text-base);color:var(--foreground)}
.landing .size span{font-size:var(--text-2xs);color:var(--faint-foreground)}
.landing .size:hover{border-color:var(--border-strong)}
.landing .size.on{border-color:var(--primary);background:var(--primary-soft)}
.landing .size.on b{color:var(--primary-hover)}
.landing input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--radius-full);outline:0;
  background:linear-gradient(90deg,var(--primary) var(--p,25%),var(--border) var(--p,25%))}
.landing input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--icon-md);height:var(--icon-md);border-radius:50%;background:#fff;border:3px solid var(--primary);cursor:pointer;box-shadow:0 0 0 4px rgba(255,122,47,.2)}
.landing input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--primary);cursor:pointer}
.landing .total{display:flex;align-items:baseline;justify-content:space-between;padding-top:var(--space-5);border-top:1px solid var(--border)}
.landing .total span{color:var(--muted-foreground)}
.landing .total b{font-family:var(--font-mono);font-size:34px;font-weight:600;letter-spacing:-.02em;color:var(--foreground)}
.landing .calc .note{font-size:var(--text-xs);color:var(--faint-foreground);margin-top:var(--space-2)}
.landing .price-card ul{list-style:none;margin:var(--space-4) 0 var(--space-6);display:grid;gap:var(--space-3);padding:0}
.landing .price-card li{display:flex;gap:var(--space-2-5);color:var(--muted-foreground);font-size:var(--text-base)}
.landing .price-card li svg{color:var(--success);width:17px;height:17px;margin-top:var(--space-0-5)}
.landing .price-card .big{font-size:var(--text-4xl);font-weight:700;letter-spacing:-.03em;font-family:var(--font-mono);color:var(--foreground)}
.landing .price-card .big small{font-size:var(--text-md);color:var(--faint-foreground);font-family:Inter;font-weight:500}

/* FAQ */
.landing .faq{max-width:780px;margin:0 auto}
.landing details{border-bottom:1px solid var(--border)}
.landing summary{list-style:none;cursor:pointer;padding:var(--space-5) var(--space-1);font-weight:600;font-size:var(--text-md);display:flex;justify-content:space-between;align-items:center;color:var(--foreground)}
.landing summary::-webkit-details-marker{display:none}
.landing summary::after{content:"+";font-family:var(--font-mono);color:var(--faint-foreground);font-size:var(--text-xl);transition:.2s}
.landing details[open] summary::after{transform:rotate(45deg);color:var(--primary-hover)}
.landing details p{color:var(--muted-foreground);padding:0 var(--space-1) var(--space-5);max-width:680px;margin:0}
.landing details code{font-family:var(--font-mono);font-size:var(--text-sm);background:var(--card);border:1px solid var(--border);padding:1px var(--space-1-5);border-radius:var(--radius-xs);color:var(--foreground)}

/* CTA */
.landing .cta{margin-top:110px;border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-16) var(--space-8);text-align:center;position:relative;overflow:hidden;
       background:radial-gradient(500px 240px at 50% 0%,rgba(255,122,47,.18),transparent 70%),var(--inset)}
.landing .cta h2{font-size:clamp(30px,4vw,46px)}
.landing .cta p{color:var(--muted-foreground);margin:var(--space-3) auto 30px;max-width:480px;font-size:var(--text-lg)}
.landing .cta .ctas{justify-content:center}
.landing .cta .cmd{margin-top:var(--space-6);display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--muted-foreground);
            border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-2-5) var(--space-2) var(--space-3);background:var(--inset)}
.landing .cta .cmd b{color:var(--primary-hover);font-weight:500}

/* Footer */
.landing footer{margin-top:90px;border-top:1px solid var(--border);padding:var(--space-12) 0 36px;position:relative;z-index:1}
.landing .foot{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:var(--space-8)}
.landing .foot p{color:var(--faint-foreground);font-size:var(--text-sm);margin-top:var(--space-3);max-width:280px}
.landing .foot h4{font-size:var(--text-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--faint-foreground);margin-bottom:var(--space-3);font-weight:600}
.landing .foot ul{list-style:none;display:grid;gap:var(--space-2);font-size:var(--text-base);color:var(--muted-foreground);padding:0;margin:0}
.landing .foot ul a:hover{color:var(--foreground)}
.landing .legal{display:flex;justify-content:space-between;margin-top:44px;padding-top:var(--space-5);border-top:1px solid var(--border);font-size:var(--text-xs);color:var(--faint-foreground)}
.landing .legal .mono{display:flex;align-items:center;gap:var(--space-2)}

/* Reveal */
.landing .rv{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.landing .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .landing .rv{opacity:1;transform:none;transition:none}
  .landing .fd-rot-track{transition:none}
}

@media (max-width:1000px){
  .landing .hero,.landing .connect,.landing .pricing{grid-template-columns:1fr}
  .landing .metrics{grid-template-columns:repeat(2,1fr)}
  .landing .metric:nth-child(2){border-right:0}
  .landing .metric:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .landing .c4,.landing .c2,.landing .c3{grid-column:span 6}
  .landing .links,.landing .status{display:none}
  .landing .foot{grid-template-columns:1fr 1fr}
  .landing section{padding-top:72px}
}
@media (max-width:480px){
  .landing .wrap{padding:0 var(--space-4)}
  .landing .hero{padding-top:var(--space-12);gap:var(--space-8)}
  .landing h1{font-size:clamp(34px,9vw,40px)}
  .landing .fd-rot{font-size:.9em}  /* widest rotator word must fit 390px; scaling the
                                       rot root keeps window/blocks/steps consistent */
  .landing .sizes{grid-template-columns:repeat(2,1fr)}
  .landing .calc,.landing .price-card{padding:var(--space-5)}
  .landing .cta{padding:44px var(--space-5)}
  .landing .chat-body{height:330px}
}

/* ============ SYN-607: auth overlay (landing-invoked sign-in) ============
   #/login stays the canonical page (owner decision 2026-10-15); this
   dialog is the landing-invoked shell around the SAME card — chrome only,
   the card keeps its .login-panel styling (style.css SYN-601 section,
   incl. the ≤480px 44px hit-area rules). Native showModal() owns the a11y
   hard parts (focus trap, inert background, ESC cancel); style.css
   body:has(dialog.modal[open]) locks the scroll; app-core.js swaps the
   scrollbar width into body padding so the hero behind never shifts. */
.auth-overlay {
  /* strip the generic .modal chrome — the card IS the dialog box */
  padding: 0; border: 0; background: transparent; box-shadow: none;
}
.auth-overlay::backdrop { background: var(--overlay); backdrop-filter: blur(var(--overlay-blur)); }
@media (max-width:768px){
  /* ≤768px (SYN-608 rework#3): the overlay IS today's mobile page for the
     whole phone-sheet band — full-viewport app background with the card at
     the page's width; 44px hit areas come from the global .sso-icon media
     rule; no separate mobile modal design. Was ≤480px only: at 481-768 the
     OPEN sheet kept the stripped chrome's transparent box over the dimmed
     backdrop (landing showing through) — reads as broken stacking. The
     closed state stays owned by style.css dialog.modal:not([open]). */
  .auth-overlay {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    border-radius: 0; background: var(--background); padding: var(--sp-7) var(--sp-5);
  }
  .auth-overlay::backdrop { display: none; }
}