/* ============================================================================
   Crown — landing page styles
   Self-contained port of the Symphony design system (colors, type, spacing,
   components) + the landing-specific rules. No product runtime required.
   ========================================================================== */

/* ── color tokens (daylight palette) ───────────────────────────────────── */
:root {
  color-scheme: light;

  --paper: #E9E4D7;
  --paper-2: #E1DCCB;

  --surface: #F4F0E5;
  --surface-2: #FBF9F2;
  --surface-3: #ECE7D8;

  --ink: #33302A;
  --ink-2: #575145;
  --ink-3: #79715F;
  --ink-soft: #A39A86;

  --line: rgba(51, 48, 42, .13);
  --line-2: rgba(51, 48, 42, .20);
  --line-soft: rgba(51, 48, 42, .08);

  --accent: #2E4A3D;
  --accent-2: #21382D;
  --accent-soft: rgba(46, 74, 61, .10);
  --on-accent: #F2F1E8;

  --gold: #9C7B3A;
  --gold-soft: rgba(156, 123, 58, .12);
  --star: #9C7B3A;

  --danger: #9C3A3A;
  --danger-soft: rgba(156, 58, 58, .10);

  --glass: rgba(251, 249, 242, .78);
  --grad: linear-gradient(135deg, #E8B98A 0%, #D9926B 45%, #B8C49A 100%);

  --avatar-bg: #C89B6E;
  --avatar-ink: #2C2620;

  --selection: rgba(154, 120, 55, .22);

  /* the real brand mark drives the agent avatar + monogram squares */
  --brand-mark: url("assets/crown-mark.png");
}

/* ── typography tokens ─────────────────────────────────────────────────── */
:root {
  --font-serif: "Spectral", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* hero / editorial body — the "Lora" reading face chosen for this doc */
  --hero-stack: "Lora", Georgia, serif;
  --hero-size: 19px;

  --text-doc-title: 36px;
  --text-h1: 28.5px;
  --text-h2: 23px;
  --text-h3: 19.5px;
  --text-prose: 18.5px;
  --lh-prose: 1.66;

  --text-panel-title: 16px;
  --text-chat: 13.5px;
  --text-take: 15px;

  --text-ui: 12.5px;
  --text-ui-lg: 13.5px;
  --text-ui-sm: 11.5px;
  --text-meta: 10.5px;

  --text-eyebrow: 10px;
  --ls-eyebrow: .14em;
  --ls-eyebrow-wide: .18em;
  --ls-tight: -.01em;
}

/* ── spacing / radii / shadows / motion ────────────────────────────────── */
:root {
  --r-xs: 6px;  --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, .2, .2, 1);
  --dur: .34s;
  --dur-mid: .18s;
  --dur-fast: .13s;

  --shadow-sm: 0 1px 2px rgba(40, 32, 20, .06), 0 1px 1px rgba(40, 32, 20, .04);
  --shadow-md: 0 4px 16px rgba(40, 32, 20, .09), 0 1px 3px rgba(40, 32, 20, .06);
  --shadow-lg: 0 18px 50px rgba(40, 32, 20, .16), 0 4px 12px rgba(40, 32, 20, .08);
}

/* ── reset / base ──────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection); }
button { font-family: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }

@keyframes symBlink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes symSpin { to { transform: rotate(360deg); } }
@keyframes pcSpin { to { transform: rotate(360deg); } }
@keyframes chorusFloaty { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; border: none; background: var(--accent); color: var(--on-accent); border-radius: 11px; padding: 12px 16px; font-family: var(--font-sans); font-size: var(--text-ui-lg); font-weight: 600; cursor: pointer; text-decoration: none; transition: background var(--dur-fast); }
.btn-primary:hover { background: var(--accent-2); }

/* ── sidebar rows ──────────────────────────────────────────────────────── */
.sb-newdoc { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: 9px; padding: 8px 11px; font-family: var(--font-sans); font-size: var(--text-ui); font-weight: 600; color: var(--ink); cursor: pointer; box-shadow: 0 1px 2px rgba(60, 50, 35, .05); transition: all .15s; }
.sb-newdoc .kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-soft); }
.sb-doc { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 25px; border-radius: 7px; font-family: var(--font-sans); font-size: var(--text-ui); color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.sb-doc.active { background: rgba(51, 48, 42, .08); color: var(--ink); font-weight: 600; }
.sb-doc svg { flex-shrink: 0; color: var(--ink-soft); }
.sb-doc.active svg { color: var(--gold); }
.sb-proj { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; font-family: var(--font-sans); font-size: var(--text-ui); font-weight: 600; color: var(--ink-3); cursor: pointer; white-space: nowrap; }

/* ── chat messages ─────────────────────────────────────────────────────── */
.at-msg { font-size: var(--text-chat); line-height: 1.62; }
.at-msg.user { background: var(--surface); border: 1px solid var(--line); border-radius: 16px 16px 6px 16px; padding: 11px 14px; box-shadow: var(--shadow-sm); color: var(--ink); }
.at-msg.atelier { color: var(--ink-2); }
.at-msg.atelier .who { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 8px; }
.at-msg.atelier .who i { width: 22px; height: 22px; border-radius: 7px; background: var(--brand-mark, var(--grad)); background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); display: inline-grid; place-items: center; }
.at-msg.atelier .who b { font-family: var(--font-serif); font-size: 14px; font-weight: 500; color: var(--ink); }

.sym-typing { display: inline-flex; align-items: center; gap: 4px; }
.sym-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); display: inline-block; animation: symBlink 1.2s infinite ease-in-out both; }
.sym-typing i:nth-child(2) { animation-delay: .18s; }
.sym-typing i:nth-child(3) { animation-delay: .36s; }

.cp-sbcomposer { border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--surface-2); transition: border-color .15s; }

/* ── live variation block + glass cycle pill ───────────────────────────── */
.vblock { border-radius: 8px; transition: background .25s, box-shadow .25s; }
.vblock.live { background: var(--gold-soft); box-shadow: 0 0 0 8px var(--gold-soft); }
.vblock.media-live { border-radius: 14px; }

/* ── scroll-cycled takes: each block holds two takes that crossfade as the
   doc scrolls past, so the page demonstrates the swarm giving many variations.
   JS (.cyc-group / .cyc-stage) drives the opacity, counter, and active ring. */
.cyc-label { font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.cyc-stage { position: relative; border-radius: 14px; box-shadow: 0 0 0 0 var(--gold-soft); transition: box-shadow .3s var(--ease); }
.cyc-stage.cycling { box-shadow: 0 0 0 7px var(--gold-soft); }
.cyc-stage > .take { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
.cyc-stage > .take.active { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .cyc-stage > .take { transition: none; } }

/* design-block landing-page thumbnails: each take is a real, self-contained
   landing page rendered in an isolated iframe (so its CSS never collides), shown
   inside a browser chrome. The iframe is authored at a fixed 488px design width
   and uniformly scaled to the block via transform (JS sets --dz-scale), so it
   stays pixel-crisp and never reflows awkwardly at small sizes. */
.dz-shell { height: 100%; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.dz-chrome { height: 17px; flex: 0 0 auto; background: #26241F; display: flex; align-items: center; gap: 4px; padding: 0 9px; }
.dz-chrome i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.dz-chrome .u { margin-left: 8px; height: 8px; width: 150px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.dz-frame-wrap { flex: 1; min-height: 0; position: relative; overflow: hidden; background: var(--surface-2); }
/* Each mockup renders at its own intrinsic viewport (--dz-w/--dz-h) then scales to the frame. Most
   are authored for the default 488px; a full-page design (e.g. the phosphor hero) sets a wider
   desktop viewport so its real two-column composition shows scaled down, rather than tripping its
   mobile breakpoint and cropping. The intrinsic aspect should track the frame's so it fills cleanly. */
.dz-frame { position: absolute; top: 0; left: 0; width: var(--dz-w, 488px); height: var(--dz-h, 300px); border: 0; transform-origin: top left; transform: scale(var(--dz-scale, 1)); pointer-events: none; }

/* mobile in-flow cycle pill (the .gbar's absolute hang clips inside the phone scroll) */
.m-pill { display: inline-flex; align-items: center; gap: 3px; background: rgba(251, 249, 242, .92); border: 1px solid var(--line); border-radius: 999px; padding: 3px 7px; box-shadow: var(--shadow-sm); }
.m-pill svg { width: 12px; height: 12px; }
.m-pill svg[data-nav] { cursor: pointer; border-radius: 50%; padding: 1px; transition: background .12s; }
.m-pill svg[data-nav]:hover { background: rgba(51, 48, 42, .08); }
.m-pill .g-count { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-soft); padding: 0 1px; }
.m-pill .m-sep { width: 1px; height: 11px; background: var(--line-2); }

/* the cycle pill floats over the takes (incl. scrubbing images), so it follows the glass
   recipe below: a dense translucent fill, NOT a backdrop-filter (which recomputes per frame
   against the changing content behind it and flickers). */
.gbar { position: absolute; top: 0; right: -18px; transform: translateY(-88%); display: inline-flex; align-items: center; gap: 1px; background: rgba(251, 249, 242, .9); border: 1px solid rgba(255, 255, 255, .72); border-radius: var(--r-pill); padding: 3px; box-shadow: 0 5px 20px rgba(40, 36, 28, .13), inset 0 1px 0 rgba(255, 255, 255, .55); z-index: 40; white-space: nowrap; }
.gbar button { border: none; background: transparent; width: 26px; height: 26px; border-radius: 50%; color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; flex-shrink: 0; }
.gbar button:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.gbar button svg { width: 13px; height: 13px; }
.gbar .g-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft); letter-spacing: .04em; padding: 0 6px; }
.gbar .g-sep { width: 1px; height: 15px; background: rgba(51, 48, 42, .12); margin: 0 2px; flex-shrink: 0; }
.gbar .g-keep.on { color: var(--gold); }

/* ── ambient drift card (brand variation motif) ────────────────────────── */
.drift { position: absolute; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; width: 250px; font-family: var(--font-serif); font-size: 13px; line-height: 1.55; color: var(--ink-3); box-shadow: 0 4px 18px rgba(40, 36, 28, .07); opacity: .55; animation: chorusFloaty 9s ease-in-out infinite; pointer-events: none; user-select: none; z-index: 1; }
.drift .dtag { font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .drift { animation: none; } html { scroll-behavior: auto; } }

/* ── landing-specific ──────────────────────────────────────────────────── */
.hero-title { font-family: var(--font-serif); font-weight: 600; line-height: .99; letter-spacing: -.025em; font-size: clamp(52px, 8vw, 96px); margin: 0; text-wrap: balance; }
.sec-h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.02em; line-height: 1.04; margin: 0; text-wrap: balance; }

.docscroll::-webkit-scrollbar { width: 8px; }
.docscroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
.docscroll::-webkit-scrollbar-track { background: transparent; }

/* desktop pin-and-scrub: a tall track holds a sticky, vertically-centered frame.
   JS sets the track height and scrubs the inner doc as the page scrolls. */
.studio-track { position: relative; }
/* height is the frame's own height (auto); JS sets `top` so it pins centered.
   Before pinning it sits in normal flow, snug under the hero like the original. */
.studio-sticky { position: sticky; top: 0; }

.studio-mobile { display: none; }

/* ── Thesis section ───────────────────────────────────────────────────────
   The presentation is a live choice: the landing Tweaks widget sets
   data-variant on .thesis-sec. The COPY never changes between variants, only
   the layout/size/treatment. Base = "statement" (the original full-bleed look). */
.thesis-sec { background: var(--ink); color: var(--surface-2); }
.thesis-inner { max-width: 880px; margin: 0 auto; padding: 160px 40px; min-height: 72vh; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.thesis-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 30px; }
.thesis-lead { font-family: var(--font-serif); font-weight: 600; font-size: clamp(29px, 4vw, 40px); letter-spacing: -.015em; line-height: 1.16; color: #FBF9F2; margin: 0 0 24px; text-wrap: balance; }
.thesis-sub { font-family: var(--font-serif); font-size: clamp(15px, 1.9vw, 18px); line-height: 1.5; letter-spacing: -.01em; max-width: 760px; margin: 0 auto 26px; color: #F4F0E5; }
.thesis-sub em { font-style: italic; color: var(--gold); }
/* Each sentence on its own line so the two parallel clauses stack and the contrast reads. On
   desktop they never wrap mid-sentence (split keeps its narrow column, so it may wrap there). */
.thesis-sub .ts-line { display: block; }
@media (min-width: 761px) { .thesis-sec:not([data-variant="split"]) .thesis-sub .ts-line { white-space: nowrap; } }

/* compact — same centered statement, far less height + smaller type */
.thesis-sec[data-variant="compact"] .thesis-inner { padding: 84px 40px; min-height: 0; }
.thesis-sec[data-variant="compact"] .thesis-kicker { margin-bottom: 18px; }
.thesis-sec[data-variant="compact"] .thesis-lead { font-size: clamp(24px, 3vw, 31px); margin-bottom: 16px; }
.thesis-sec[data-variant="compact"] .thesis-sub { font-size: clamp(15px, 2vw, 18px); margin-bottom: 0; }

/* split — kicker + lead on the left, the supporting line on the right (desktop) */
.thesis-sec[data-variant="split"] .thesis-inner { max-width: 1080px; padding: 112px 40px; min-height: 0; text-align: left; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.thesis-sec[data-variant="split"] .thesis-kicker { grid-column: 1; grid-row: 1; margin-bottom: 14px; align-self: end; }
.thesis-sec[data-variant="split"] .thesis-lead { grid-column: 1; grid-row: 2; margin: 0; font-size: clamp(26px, 3.2vw, 36px); }
.thesis-sec[data-variant="split"] .thesis-sub { grid-column: 2; grid-row: 1 / span 2; margin: 0; max-width: none; align-self: center; }
@media (max-width: 760px) {
  .thesis-sec[data-variant="split"] .thesis-inner { grid-template-columns: 1fr; gap: 18px; }
  .thesis-sec[data-variant="split"] .thesis-kicker,
  .thesis-sec[data-variant="split"] .thesis-lead,
  .thesis-sec[data-variant="split"] .thesis-sub { grid-column: 1; grid-row: auto; }
}

/* quote — the lead as a pull-quote with a gold rule. Left-aligned text in a centered column, so
   it reads as a centered block. The kicker/lead/sub share one left edge (29px in from the rule). */
.thesis-sec[data-variant="quote"] .thesis-inner { padding: 120px 40px; min-height: 0; text-align: left; max-width: 680px; }
.thesis-sec[data-variant="quote"] .thesis-kicker { padding-left: 29px; }
.thesis-sec[data-variant="quote"] .thesis-lead { border-left: 3px solid var(--gold); padding-left: 26px; font-size: clamp(25px, 3.2vw, 34px); margin-bottom: 20px; }
.thesis-sec[data-variant="quote"] .thesis-sub { padding-left: 29px; margin-left: 0; max-width: none; }

/* minimal — small, left-aligned, quiet */
.thesis-sec[data-variant="minimal"] .thesis-inner { padding: 80px 40px; min-height: 0; text-align: left; max-width: 760px; }
.thesis-sec[data-variant="minimal"] .thesis-kicker { margin-bottom: 14px; }
.thesis-sec[data-variant="minimal"] .thesis-lead { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 14px; }
.thesis-sec[data-variant="minimal"] .thesis-sub { font-size: clamp(15px, 1.9vw, 18px); margin: 0; max-width: 560px; }

/* ── Landing Tweaks widget (preview-only: localhost or ?tweak) ─────────────── */
#lp-tweaks { position: fixed; right: 16px; bottom: 16px; z-index: 9999; width: 232px; display: none;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 13px; box-shadow: var(--shadow-lg);
  font-family: var(--font-sans); padding: 12px 13px 13px; }
#lp-tweaks.on { display: block; }
#lp-tweaks .lp-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 10px; }
#lp-tweaks .lp-h span { margin-left: auto; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
#lp-tweaks .lp-grouplabel { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 2px 0 7px; }
#lp-tweaks .lp-opts { display: flex; flex-wrap: wrap; gap: 6px; }
#lp-tweaks .lp-opt { border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: .15s; }
#lp-tweaks .lp-opt:hover { border-color: var(--ink-soft); }
#lp-tweaks .lp-opt.sel { background: var(--ink); color: #F4F0E5; border-color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════════════
   GLASS THEME — make the marketing site uniquely Crown (CRO-9)
   The page is skinned by a single data-theme on .lp-page. The theme only REMAPS
   the existing design tokens (palette + a small glass token set), so the whole
   composition (nav, hero, studio, engine, closing) recolors coherently from one
   place rather than per-component overrides. Inspired by the app's "Mist" glass
   ground: soft, frosted, legible. Savannah picked DAYBREAK, so it is now baked in
   as the single shipped theme (the Mist/Atelier alternatives that were compared in
   the preview Tweaks widget have been collapsed away now that the choice is made).
   ════════════════════════════════════════════════════════════════════════════ */

/* glass token defaults (used if a theme omits one) */
.lp-page {
  --mesh-base: var(--paper);
  --mesh-1: rgba(156, 123, 58, .14);
  --mesh-2: rgba(46, 74, 61, .10);
  --mesh-3: rgba(216, 146, 107, .12);
  --glass-panel: rgba(251, 249, 242, .72);
  --glass-window: rgba(251, 249, 242, .90);
  --glass-nav: rgba(251, 249, 242, .8);
  --glass-border: rgba(255, 255, 255, .60);
  --glass-blur: 14px;
  --glass-shadow: 0 10px 30px rgba(40, 36, 28, .10);
  --section-glass: rgba(251, 249, 242, .30);
}

/* ── DAYBREAK — airy sunrise: peach + sky + lavender, bright and light (CHOSEN) ── */
.lp-page[data-theme="daybreak"] {
  --paper: #E9EFF7; --paper-2: #DFE8F4;
  --surface: #F1F6FC; --surface-2: #FCFDFF; --surface-3: #E6EEF8;
  --ink: #29303C; --ink-2: #454D5C; --ink-3: #69717F; --ink-soft: #98A1B1;
  --line: rgba(41, 48, 60, .11); --line-2: rgba(41, 48, 60, .17); --line-soft: rgba(41, 48, 60, .06);
  --accent: #2E5A50; --accent-2: #214239; --accent-soft: rgba(46, 90, 80, .10);
  --gold: #B0843E; --gold-soft: rgba(176, 132, 62, .14);
  --mesh-base: #E9EFF7;
  --mesh-1: rgba(255, 209, 170, .34);
  --mesh-2: rgba(170, 200, 245, .34);
  --mesh-3: rgba(214, 198, 240, .28);
  --glass-panel: rgba(255, 255, 255, .68);
  --glass-window: rgba(255, 255, 255, .92);
  --glass-nav: rgba(255, 255, 255, .76);
  --glass-border: rgba(255, 255, 255, .78);
  --glass-blur: 18px;
  --glass-shadow: 0 12px 36px rgba(60, 80, 120, .13);
  --section-glass: rgba(255, 255, 255, .24);
}

/* ── ambient ground: a soft, fixed gradient mesh behind everything ─────────── */
.lp-page { position: relative; background: transparent; }
.lp-ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 48% at 14% 6%, var(--mesh-1), transparent 60%),
    radial-gradient(54% 44% at 88% 12%, var(--mesh-2), transparent 62%),
    radial-gradient(72% 62% at 52% 102%, var(--mesh-3), transparent 66%),
    var(--mesh-base);
  transition: background .4s var(--ease);
}
/* lift all real content above the fixed mesh (the ambient layer itself stays at 0) */
.lp-page > *:not(.lp-ambient) { position: relative; z-index: 1; }

/* ── the glass recipe: translucent tint, NEVER backdrop-filter ──────────────────
   Every frosted surface below (nav, engine cards, drift motif, hero chip) is JUST a
   dense translucent fill over the soft ambient mesh. We deliberately do NOT use
   backdrop-filter on any of them. backdrop-filter forces the browser to re-sample and
   re-blur the layers behind the element on EVERY frame; with a position:fixed mesh
   behind the page and the studio doc scrubbing on scroll, that recompute runs
   constantly and shows up as the section/image flashing CRO-9 introduced. The mesh is
   already soft and low-contrast, so a translucent tint reads as glass without the cost.
   This mirrors the app's known-good glass shell (app/globals.css, guarded by
   glass-perf.test.ts). If you reach for backdrop-filter here, you are reintroducing the
   flicker. ── */

/* ── frosted nav: only the surface is restyled (glass fill + frosted edge). The
   ORIGINAL spacing is left untouched on purpose: no added margin/padding, so the
   nav and everything below it sit exactly where the well-tuned base layout puts
   them. This is a component-style change, not a layout change. ── */
.lp-page .nav {
  background: var(--glass-nav);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
}

/* ── glass cards: engine bento + drift motif read as frosted panes over the mesh ── */
.lp-page #engine, .lp-page #closing { background: var(--section-glass) !important; }
.lp-page .engine-grid > div {
  background: var(--glass-panel) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}
.lp-page .drift {
  background: var(--glass-panel);
  border: 1px solid var(--glass-border);
}
/* hero eyebrow + "powered by" chips pick up the frosted edge too */
.lp-page .hero-head > div:first-child { background: var(--glass-panel); border-color: var(--glass-border) !important; }

/* ── the product window: a dense glass so the demo stays crisp and legible.
   No backdrop-filter here on purpose: its inner doc scrubs on scroll, and a
   per-frame blur over scrolling content is exactly the recompute we avoid. A
   high-opacity translucent fill keeps a faint glass edge without the cost. ── */
.lp-page .studio-desktop, .lp-page .mob-frame { background: var(--glass-window) !important; }

@media (max-width: 1080px) { .drift { display: none !important; } }
@media (max-width: 860px) {
  .nav { padding: 18px 20px !important; }
  .nav-links { display: none !important; }
  .signin { display: none !important; }
  .hero-head { padding: 32px 22px 26px !important; }
  .hero-head .hero-title { font-size: clamp(38px, 11vw, 52px) !important; }
  .hero-sub { font-size: 16.5px !important; margin-bottom: 24px !important; }
  .hero-cta { flex-direction: column !important; gap: 6px !important; }
  .hero-cta .btn-primary { width: 100% !important; }
  .studio-sec { padding: 0 16px 20px !important; }
  .studio-track { display: none !important; }
  .studio-mobile { display: block !important; }
  /* Mobile studio = pin-and-scrub (mirrors desktop): the phone frame is a NORMAL fixed size and
     stays pinned while the single page scroll scrubs its doc through it, so you reveal more options
     by scrolling rather than the mockup ballooning to show everything at once. JS sets the track
     height and the sticky top; the frame height here keeps it phone-sized. */
  .studio-mob-sticky { position: sticky; }
  .mob-frame { height: min(78vh, 600px); }
  .thesis-sec > div { padding: 60px 24px !important; }
  .engine-sec > div { padding: 56px 20px !important; }
  .engine-grid { grid-template-columns: 1fr !important; grid-template-rows: none !important; }
  .engine-grid > div { grid-column: auto !important; grid-row: auto !important; min-height: 0 !important; }
  .closing-inner { padding: 90px 24px 70px !important; min-height: 0 !important; }
  .closing-inner .sec-h2 { font-size: clamp(40px, 12vw, 56px) !important; }
  .closing-inner .btn-primary { width: 100% !important; }
  .footer-row { padding: 22px 22px !important; }
}