/* Nexus landing v4: base styles carried over from landing-v3 for the
   sections it reuses (generators specimen, gallery, download, pricing,
   FAQ, trial modal). v4.css layers the new design on top. */
/* ---- from landing-v3 style1.css ---- */
/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* ---- from landing-v3 style2.css ---- */
/* ============================================================
   NEXUS — design tokens (mirrors design.md / globals.css)
   ============================================================ */
:root {
  /* Surfaces */
  --bg-0: #050505;  --bg-1: #0a0a0a;  --bg-2: #0f0f0f;
  --bg-3: #161616;  --bg-4: #1d1d1d;  --bg-5: #262626;

  /* Lines */
  --line-1: rgba(255,255,255,0.05);
  --line-2: rgba(255,255,255,0.08);
  --line-3: rgba(255,255,255,0.14);
  --line-4: rgba(255,255,255,0.22);

  /* Foreground */
  --fg-0: #f5f5f5;  --fg-1: #d4d4d4;  --fg-2: #8a8a8a;
  --fg-3: #595959;  --fg-4: #3a3a3a;

  /* Accent (white, always) */
  --accent: #ffffff;
  --accent-muted: #8a8a8a;
  --accent-dim: rgba(255,255,255,0.10);

  /* Generator identity */
  --gen-node: #22d3ee;   --gen-circuit: #4ade80;  --gen-dither: #ec4899;
  --gen-array: #ff6a00;  --gen-ivy: #65a30d;      --gen-typeset: #facc15;
  --gen-image: #d4d4d4;  --gen-video: #d4d4d4;    --gen-shape: #ffffff;
  --gen-map: #ffb24d;    --gen-effect: #8c5cff;

  /* Status */
  --warn: #f5a524;  --error: #f87171;  --danger: #ff4d4d;  --success: #6cff8a;

  /* Spacing (4px base) */
  --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px;
  --s-5: 12px; --s-6: 16px; --s-7: 20px; --s-8: 24px;

  /* Control sizing */
  --row-h: 22px; --ctl-h: 22px; --ctl-h-sm: 18px;

  /* the lead generator hue (tweakable) */
  --lead: var(--gen-node);
  /* hero cycle hue (driven by JS effect cycling) */
  --hero-lead: #7df9ff;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--bg-0); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
canvas { display: block; }

.tnum { font-variant-numeric: tabular-nums; }

/* hairline page frame */
.wrap { max-width: 1840px; margin: 0 auto; padding: 0 var(--s-8); }

/* uppercase micro label */
.kicker {
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-2);
  font-weight: 500;
}
.kicker .dot {
  display: inline-block; width: 5px; height: 5px;
  background: var(--lead); margin-right: 7px; vertical-align: 1px;
}

/* ============================================================
   Marketing type scale (Inter, extended for display)
   ============================================================ */
.display {
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--fg-0);
  text-wrap: balance;
  font-size: clamp(40px, 7vw, 92px);
}
.display .mute { color: var(--fg-3); }
.h2 {
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.16;
  color: var(--fg-0); font-size: clamp(28px, 4vw, 46px); text-wrap: pretty;
}
.h3 {
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
  color: var(--fg-0); font-size: clamp(20px, 2.4vw, 26px);
}
.lede {
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.5; color: var(--fg-2); max-width: 56ch;
  letter-spacing: -0.005em;
}
.body { font-size: 13px; line-height: 1.55; color: var(--fg-2); }

/* type scale tweak hooks */
[data-typescale="tight"] .display { font-size: clamp(36px, 5.4vw, 70px); }
[data-typescale="huge"]  .display { font-size: clamp(44px, 8.4vw, 116px); letter-spacing: -0.045em; }

/* ============================================================
   Buttons / controls
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 30px; padding: 0 14px;
  font-size: 12px; font-weight: 500; color: var(--fg-1);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2);
  transition: background 80ms linear, border-color 80ms linear, color 80ms linear;
  white-space: nowrap;
}
.btn:hover { background: rgba(255,255,255,0.08); border-color: var(--line-3); color: var(--fg-0); }
.btn:active { background: rgba(255,255,255,0.12); }
.btn-primary {
  background: var(--accent); color: var(--bg-0); border-color: var(--accent); font-weight: 600;
}
.btn-primary:hover { background: #fff; border-color: #fff; color: #000; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: transparent; }
.btn-lg { height: 38px; padding: 0 var(--s-7); font-size: 13px; }
.btn .arr { transition: transform 140ms cubic-bezier(0.16,1,0.3,1); }
.btn:hover .arr { transform: translateX(3px); }

/* email capture */
.capture { display: flex; border: 1px solid var(--line-2); background: rgba(255,255,255,0.02); width: min(440px, 100%); }
.capture:focus-within { border-color: var(--line-3); }
.capture input {
  flex: 1; min-width: 0; height: 38px; padding: 0 14px;
  background: transparent; border: 0; color: var(--fg-0); font-size: 13px; font-family: inherit;
}
.capture input::placeholder { color: var(--fg-3); }
.capture input:focus { outline: none; }
.capture .btn-primary { height: 38px; border: 0; }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 52px; display: flex; align-items: center;
  border-bottom: 1px solid var(--line-2);
  background: rgba(7,7,7,0.94);
}
.nav .wrap { display: flex; align-items: center; gap: var(--s-7); width: 100%; }
.brand { display: flex; align-items: center; gap: var(--s-4); color: var(--fg-0); }
.brand .logo-mark { width: 17px; height: 17px; display: block; color: var(--fg-0); flex: 0 0 auto; }
.brand .name { font-size: 14px; font-weight: 400; letter-spacing: -0.025em; color: var(--fg-0); }
.nav-links { display: flex; align-items: center; gap: var(--s-7); margin-left: var(--s-6); }
.nav-links a { font-size: 12px; color: var(--fg-2); transition: color 80ms; }
.nav-links a:hover { color: var(--fg-0); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ============================================================
   Section scaffolding
   ============================================================ */
section { position: relative; }
.section { padding: clamp(72px, 11vh, 132px) 0; border-top: 1px solid var(--line-2); }
.section-head { display: flex; flex-direction: column; gap: var(--s-5); margin-bottom: var(--s-8); max-width: 880px; }
.eyebrow-row { display: flex; align-items: center; gap: var(--s-5); }

/* reveal — BASE-HIDDEN so an element is never painted visible before it animates in.
   The previous approach gated the hide on html.rvready (added by a head script); when
   that class was not on <html> at first paint, the element painted visible, then .in
   forced it to opacity:0 and back to 1 — the on/off/on scroll flicker. Hiding in base
   CSS removes all paint-timing dependence. Fail-safes keep content visible for no-JS
   (<noscript> in <head>), reduced-motion, motion=off, and a JS-error timeout (.rvshow). */
@keyframes rvIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rv { opacity: 0; }
.rvshow .rv { opacity: 1; }
.rv.in { animation: rvIn 620ms cubic-bezier(0.16,1,0.3,1) both; }
.rv-2.in { animation-delay: 70ms; } .rv-3.in { animation-delay: 140ms; }
.rv-4.in { animation-delay: 210ms; } .rv-5.in { animation-delay: 280ms; }
[data-motion="off"] .rv { opacity: 1; }
[data-motion="off"] .rv.in { animation: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; } .rv.in { animation: none; } }

/* ============================================================
   HERO — centered: short headline + Create-generator box (cycles)
   ============================================================ */
.hero { position: relative; min-height: 100vh; overflow: hidden; border-bottom: 1px solid var(--line-2);
  padding: calc(52px + clamp(64px,12vh,140px)) 0 clamp(30px,6vh,64px);
  display: flex; flex-direction: column; }
.hero-bg { position: absolute; inset: 0; z-index: 0; background-color: var(--bg-0);
  background-image: radial-gradient(circle, #353535 1.1px, transparent 1.5px);
  background-size: 16px 16px; background-position: center; }
.hero-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(58% 40% at 50% 58%, rgba(5,5,5,0.58), transparent 78%),
    radial-gradient(155% 135% at 50% 46%, transparent 54%, rgba(5,5,5,0.32) 87%, rgba(5,5,5,0.7) 100%),
    linear-gradient(0deg, var(--bg-0) 0%, transparent 14%, transparent 85%, rgba(5,5,5,0.42) 100%); }

/* ============================================================
   ANNOUNCE bar (slim, fixed above nav)
   ============================================================ */
.announce { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 34px; display: flex; align-items: center;
  background: rgba(9,9,10,0.96); border-bottom: 1px solid var(--line-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ann-inner { display: flex; align-items: center; justify-content: center; gap: var(--s-4); width: 100%; position: relative; }
.ann-dot { width: 5px; height: 5px; background: var(--lead); flex: 0 0 auto; }
.ann-text { font-size: 11px; color: var(--fg-2); letter-spacing: -0.005em; }
.ann-text a { color: var(--fg-0); font-weight: 500; }
.ann-text a:hover { color: var(--lead); }
.ann-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: grid; place-items: center; color: var(--fg-4); font-size: 15px; line-height: 1; }
.ann-x:hover { color: var(--fg-1); }
html.no-announce .announce { display: none; }
.nav { top: 0; }

/* ============================================================
   HERO fan — procedural generator cards behind the prompt
   ============================================================ */
.hero-fan { position: absolute; inset: 0; z-index: 1; pointer-events: none; perspective: 2000px; }

/* ============================================================
   HERO cards — static, edge-anchored fan (robust at every width).
   Infinite ring carousel, positions driven by JS (setupHeroCycle):
   cards fade in at the right edge, glide through r-far, r-near,
   CENTER (peeks above the prompt box), l-near, l-far, then dissolve
   off the left edge and loop back around invisibly. No teleports.
   ============================================================ */
.hcard {
  position: absolute; top: 50%; width: clamp(280px, 21vw, 520px); aspect-ratio: 3 / 4;
  background: var(--bg-1); border: 1px solid var(--line-3);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 50px 100px -34px rgba(0,0,0,0.82), 0 16px 40px rgba(0,0,0,0.5);
  left: 50%;
  transition: transform 1700ms cubic-bezier(0.22,1,0.36,1), opacity 1700ms cubic-bezier(0.22,1,0.36,1);
  will-change: transform; backface-visibility: hidden;
  opacity: 0; pointer-events: none;
}
.hcard.no-anim { transition: none !important; }
.hc-vis { position: relative; flex: 1; overflow: hidden; background: var(--bg-0); }
.hc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-foot { flex: 0 0 auto; display: flex; align-items: center; height: 42px; padding: 0 15px; border-top: 1px solid var(--line-2); }
.hc-name { font-size: 13px; color: var(--fg-1); font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcard.flash { animation: hcFlash 760ms ease; }
@keyframes hcFlash { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-lead) 72%, transparent), 0 62px 130px -32px rgba(0,0,0,0.86); } 100% { box-shadow: 0 50px 100px -34px rgba(0,0,0,0.82), 0 16px 40px rgba(0,0,0,0.5); } }
/* card positions + opacity are set inline by JS — see setupHeroCycle */

/* ============================================================
   HERO stage / copy (centered)/* ============================================================
   HERO stage / copy (centered)
   ============================================================ */
.hero-stage { position: relative; z-index: 3; flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 var(--s-8); }
.hero-copy { max-width: min(1120px, 94vw); width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-copy h1 { font-size: clamp(34px, 5vw, 82px); margin-bottom: clamp(30px,5.5vh,64px); letter-spacing: -0.04em; line-height: 1.02; text-shadow: 0 2px 60px rgba(0,0,0,0.92); }
.hero-copy h1 span { display: block; white-space: nowrap; }
.hero-copy .gen-box { width: min(560px, 92vw); margin: 0 auto; text-align: left; }
.hero-copy .gb-field { min-height: 54px; }
.gb-note { display: none; padding-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--fg-2); }
.gb-note.show { display: block; }

/* starter-look chips */
.hero-chips { display: flex; align-items: center; justify-content: center; gap: var(--s-4); flex-wrap: wrap; margin-top: clamp(16px,2.4vh,22px); }
.hero-chips .chip-lab { font-size: 11px; color: var(--fg-4); margin-right: 2px; }
.chip { height: 28px; padding: 0 12px; font-size: 12px; color: var(--fg-2); background: rgba(255,255,255,0.03); border: 1px solid var(--line-2); font-family: inherit; cursor: pointer; transition: color 120ms, border-color 120ms, background 120ms; }
.chip:hover { color: var(--fg-0); border-color: var(--line-3); background: rgba(255,255,255,0.06); }
.chip.on { color: var(--fg-0); border-color: color-mix(in srgb, var(--hero-lead) 62%, var(--line-3)); background: color-mix(in srgb, var(--hero-lead) 8%, transparent); }

/* Runs-native-in host row (centered) */
.created-for { display: flex; align-items: center; justify-content: center; gap: var(--s-6); flex-wrap: wrap; font-size: 12px; color: var(--fg-3); margin-top: clamp(20px,3vh,30px); }
.cf-label { color: var(--fg-4); }
.created-for .cf { display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 0; padding: 4px 0; font-family: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; opacity: 0.42; filter: saturate(0.85); transition: opacity 260ms ease, filter 260ms ease; }
.created-for .cf:hover { opacity: 0.8; }
.created-for .cf.active { opacity: 1; filter: none; }
.created-for .cf .cf-name { color: var(--fg-1); }
.cf-logo { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; }
.cf-logo svg { display: block; }
.cf-nexus svg { width: 17px; height: 17px; fill: var(--fg-0); }
.cf-figma svg { width: 13.5px; height: 18px; }
.cf-adobe { width: 22px; height: 22px; border-radius: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: -0.01em; display: grid; place-items: center; }
.cf-ps { background: #001E36; color: #31A8FF; }
.cf-ai { background: #330000; color: #FF9A00; }
.cf-ae { background: #00005B; color: #9D9DFF; }

/* generate toast */
.gen-toast { position: absolute; left: 50%; bottom: clamp(16px,5vh,38px); transform: translateX(-50%) translateY(8px); z-index: 6; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(14,14,16,0.97); border: 1px solid var(--line-3); font-size: 11.5px; color: var(--fg-1); opacity: 0; pointer-events: none; transition: opacity 300ms ease, transform 300ms ease; white-space: nowrap; }
.gen-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.gen-toast .gt-dot { width: 6px; height: 6px; background: var(--success); flex: 0 0 auto; }

/* fan responsive — edge-anchored cards scale with vw; drop the outer pair, then fade the inner pair as width shrinks */
@media (min-width: 1700px) {
  .hcard { width: clamp(380px, 21vw, 560px); }
  .hero-copy .gen-box { width: min(620px, 44vw); }
}
@media (max-width: 1024px) { .hcard { width: clamp(220px, 26vw, 340px); } }
/* Phones + portrait tablets: the center-card "rise behind the
   headline" is desktop geometry — below ~820px there is no room for
   it and the card ends up underneath the text. Restack app-store
   style: the card ring becomes an in-flow strip at the TOP (under the
   nav) with the side cards peeking at the edges, the gen box sits
   right below it, and the headline reads below the box as the
   tagline. slotStyle() skips the lift math at this width, centers
   the card in the strip, and pulls the near pair in to ±0.66·W so
   they peek instead of hiding. */
@media (max-width: 820px) {
  .hero { min-height: 100svh; padding-top: calc(52px + 2.5vh); padding-bottom: 34px; }
  /* Prompt box tucks over the card bottoms (the strip's z is below the
     stage's), so the name label flips to the TOP edge of each card
     where it stays visible. */
  .hero-stage { flex: 0 0 auto; padding-top: 0; margin-top: -52px; }
  .hero-fan { position: relative; inset: auto; width: 100%; overflow: hidden; perspective: 1400px;
    height: calc(min(56vw, 250px) * 1.3334 + 12px); }
  .hcard { width: min(56vw, 250px); }
  .hcard .hc-foot { order: -1; border-top: 0; border-bottom: 1px solid var(--line-2); }
  .hero-copy .gen-box { order: 1; }
  .hero-copy h1 { order: 2; margin: 34px 0 0; font-size: clamp(28px, 7.6vw, 42px); }
  .hero-copy h1 span { white-space: normal; }
  .hero-copy .hero-chips { order: 3; }
  .hero-copy .created-for { order: 4; }
}
/* Phones: the "Use in" host row must stay ONE row — with FIVE hosts
   now (Illustrator joined) that means dropping the decorative label
   here and compressing logos, type, and gaps. */
@media (max-width: 480px) {
  .created-for { flex-wrap: nowrap; gap: 7px; white-space: nowrap; padding: 0 4px; }
  .created-for .cf { gap: 5px; font-size: 10px; }
  .cf-label { display: none; }
  .cf-logo { width: 15px; height: 15px; }
  .cf-nexus svg { width: 12px; height: 12px; }
  .cf-figma svg { width: 9.5px; height: 13px; }
  .cf-adobe { width: 15px; height: 15px; font-size: 7px; border-radius: 3px; }
}
/* The very narrowest phones: five names no longer fit, so the row goes
   icons-only, and squeeze the nav (its brand + two buttons are what
   actually overflow a 320px viewport). */
@media (max-width: 360px) {
  .created-for .cf .cf-name { display: none; }
  .created-for { gap: 12px; }
  .created-for { gap: 8px; }
  .nav .wrap { gap: 10px; }
  .nav .btn { padding: 0 10px; font-size: 11.5px; height: 32px; }
  .nav .btn .arr { display: none; }
}
@media (max-height: 780px) { .hcard { width: clamp(200px, 16vw, 320px); } }

.studio-shot { margin: 0; border: 1px solid var(--line-3); background: var(--bg-1); overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.8), 0 12px 30px rgba(0,0,0,0.4); }
.studio-shot img { display: block; width: 100%; height: auto; }

/* FAQ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); margin-top: var(--s-8); max-width: 900px; }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: clamp(16px,2.4vh,22px) 0; background: none; border: 0; font-family: inherit; font-size: clamp(15px,1.6vw,18px); font-weight: 500; color: var(--fg-1); letter-spacing: -0.015em; text-align: left; cursor: pointer; transition: color 120ms; }
.faq-q:hover, .faq-item.open .faq-q { color: var(--fg-0); }
.faq-mk { position: relative; width: 12px; height: 12px; flex: 0 0 auto; }
.faq-mk::before, .faq-mk::after { content: ""; position: absolute; background: var(--fg-2); transition: transform 260ms cubic-bezier(0.16,1,0.3,1), opacity 260ms; }
.faq-mk::before { left: 0; top: 5px; width: 12px; height: 2px; }
.faq-mk::after { left: 5px; top: 0; width: 2px; height: 12px; }
.faq-item.open .faq-mk::after { transform: rotate(90deg); opacity: 0; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height 320ms cubic-bezier(0.16,1,0.3,1); }
.faq-item.open .faq-a { max-height: 260px; }
.faq-a p { font-size: 13px; line-height: 1.6; color: var(--fg-2); padding: 0 0 clamp(16px,2.4vh,22px); max-width: 70ch; }

/* Synkit footer attribution */
.synkit-by { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-4); transition: color 140ms; }
.synkit-by:hover { color: var(--fg-2); }
.synkit-logo { height: 15px; width: auto; display: block; opacity: 0.85; transition: opacity 140ms; }
.synkit-by:hover .synkit-logo { opacity: 1; }

/* bottom logo bar */
.logo-bar { border-bottom: 1px solid var(--line-2); background: var(--bg-1); }
.lb-inner { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-6) var(--s-8); flex-wrap: wrap; }
.lb-label { font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--fg-3); white-space: nowrap; }
.lb-logos { display: flex; align-items: center; gap: 8px 0; flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.lb-logos span { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-2); transition: color 140ms; }
.lb-logos span:hover { color: var(--fg-0); }
/* hairline divider centered between adjacent logos so the row reads as a strip */
.lb-logos span + span { margin-left: clamp(13px, 2.2vw, 30px); padding-left: clamp(13px, 2.2vw, 30px); border-left: 1px solid var(--line-2); }
@media (max-width: 760px) { .lb-logos { justify-content: flex-start; } }

/* nav links sit left, next to the logo */
.nav .wrap { position: relative; }
.nav-links { margin-left: var(--s-7); }
@media (max-width: 1000px) { .nav-links { position: static; transform: none; } }

/* Hero prompt box (dot matrix + one input + send) */
.gen-box { width: min(620px, 100%); text-align: left; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0a0a0b, #040404); border: 1px solid var(--line-4);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hero-lead) 22%, transparent),
              0 0 80px color-mix(in srgb, var(--hero-lead) 12%, transparent),
              0 42px 110px rgba(0,0,0,0.82), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: box-shadow 400ms ease; }
.gb-matrix { padding: 13px; overflow: hidden; border-bottom: 1px solid var(--line-1); }
.gb-matrix svg { display: block; width: 100%; }
.gb-body { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.gb-chip { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 11px;
  letter-spacing: 0.02em; color: var(--fg-3); }
.gb-ico { width: 17px; height: 17px; flex: 0 0 auto; display: grid; place-items: center; font-size: 9px; font-weight: 700;
  border: 1px solid var(--hero-lead); color: var(--hero-lead);
  transition: color 300ms ease, border-color 300ms ease, background 300ms ease, opacity 240ms ease; }
.gb-ico:empty { background: var(--hero-lead); border-color: var(--hero-lead); }
/* Real generator icon (builtins) inside the chip box; letter fallback for custom looks. */
.gb-ico svg { width: 12px; height: 12px; display: block; }
.gb-chip [data-word] { color: var(--fg-1); font-weight: 500; transition: opacity 240ms ease; }
.gb-field { resize: none; width: 100%; min-height: 84px; background: transparent; border: 0; outline: none;
  color: var(--fg-0); font-family: inherit; font-size: 16px; line-height: 1.55; }
.gb-field::placeholder { color: var(--fg-3); }
.gb-generate { width: 100%; padding: 14px; border: 1px solid var(--line-3); background: transparent; color: var(--fg-3);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; font-family: inherit;
  transition: color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease; }
.gb-generate:hover { color: var(--fg-1); border-color: var(--line-4); }
.gen-box:focus-within .gb-generate, .gen-box.thinking .gb-generate { color: var(--hero-lead); border-color: var(--hero-lead);
  box-shadow: 0 0 20px color-mix(in srgb, var(--hero-lead) 16%, transparent), inset 0 0 22px color-mix(in srgb, var(--hero-lead) 6%, transparent); }
.gen-box:focus-within .gb-generate:hover, .gen-box.thinking .gb-generate:hover { background: color-mix(in srgb, var(--hero-lead) 9%, transparent); color: var(--hero-lead); }
.gen-box:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hero-lead) 42%, transparent),
  0 0 110px color-mix(in srgb, var(--hero-lead) 18%, transparent),
  0 42px 110px rgba(0,0,0,0.82), inset 0 1px 0 rgba(255,255,255,0.06); }

/* left rail: live tool card + community thumbnails */
.hero-rail { display: flex; flex-direction: column; gap: var(--s-5); }
/* (solid panel — no backdrop blur, for scroll performance) */
.glass { background: rgba(15,15,15,0.94); border: 1px solid var(--line-2);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 16px 40px rgba(0,0,0,0.55); }
.tool-card { display: flex; flex-direction: column; }
.tc-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--line-2); }
.tc-head .g-glyph { width: 14px; height: 14px; display: grid; place-items: center; font-size: 10px; font-weight: 700;
  border: 1px solid var(--line-2); color: var(--lead); }
.tc-head .tt { font-size: 11px; color: var(--fg-1); font-weight: 500; }
.tc-head .by { margin-left: auto; font-size: 9px; color: var(--fg-3); letter-spacing: 0.04em; }
.tc-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var(--line-2); background: var(--bg-0); }
.tc-thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc-knobs { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.knob { display: flex; align-items: center; gap: var(--s-4); }
.knob .kl { font-size: 10px; color: var(--fg-2); width: 78px; letter-spacing: 0.02em; }
.knob .kt { flex: 1; height: 4px; background: var(--bg-4); position: relative; overflow: hidden; }
.knob .kf { position: absolute; left: 0; top: 0; bottom: 0; background: var(--lead);
  box-shadow: 0 0 8px color-mix(in srgb, var(--lead) 55%, transparent); }
.knob.k1 .kf { width: 62%; } .knob.k2 .kf { width: 38%; } .knob.k3 .kf { width: 74%; }
@media (prefers-reduced-motion: no-preference) {
  [data-motion="full"] .knob.k1 .kf { animation: knobA 5.5s ease-in-out infinite; }
  [data-motion="full"] .knob.k2 .kf { animation: knobB 7s ease-in-out infinite; }
  [data-motion="full"] .knob.k3 .kf { animation: knobC 6.2s ease-in-out infinite; }
}
@keyframes knobA { 0%,100% { width: 62%; } 50% { width: 44%; } }
@keyframes knobB { 0%,100% { width: 38%; } 50% { width: 58%; } }
@keyframes knobC { 0%,100% { width: 74%; } 50% { width: 60%; } }

.rail-label { font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--fg-3); padding: 0 var(--s-1); }
.thumb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.th { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line-2); background: var(--bg-0);
  transition: border-color 120ms; }
.th:hover { border-color: var(--line-3); }
.th canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.th .thn { position: absolute; left: 0; right: 0; bottom: 0; font-size: 8px; letter-spacing: 0.04em;
  color: var(--fg-2); background: rgba(5,5,5,0.7); padding: 2px 4px; }

/* center: headline + floating prompt card */
.hero-card h1 { margin: var(--s-6) 0 var(--s-5); max-width: 17ch; text-shadow: 0 2px 40px rgba(0,0,0,0.5); }
.hero-card .hero-sub { max-width: 50ch; margin-bottom: var(--s-6); color: var(--fg-1); }

.prompt-card { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5); width: min(520px, 100%);
  border: 1px solid var(--line-3); background: rgba(15,15,15,0.82);
  transition: border-color 140ms, box-shadow 180ms; }
.prompt-card:focus-within {
  border-color: color-mix(in srgb, var(--lead) 60%, var(--line-3));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lead) 32%, transparent),
              0 0 34px color-mix(in srgb, var(--lead) 14%, transparent), 0 16px 40px rgba(0,0,0,0.6); }
.pc-input { width: 100%; min-height: 56px; resize: none; background: transparent; border: 0; outline: none;
  color: var(--fg-0); font-family: inherit; font-size: 14px; line-height: 1.5; letter-spacing: -0.005em; }
.pc-input::placeholder { color: var(--fg-3); }
.pc-foot { display: flex; align-items: center; gap: var(--s-4); }
.pc-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.03); color: var(--fg-2); transition: border-color 120ms, color 120ms; }
.pc-icon:hover { border-color: var(--line-3); color: var(--fg-0); }
.pc-hint { font-size: 10px; color: var(--fg-3); letter-spacing: 0.02em; }
.pc-send { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; font-size: 15px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line-3); color: var(--fg-1);
  transition: background 120ms, color 120ms, box-shadow 160ms, border-color 120ms; }
.prompt-card:focus-within .pc-send, .pc-send.ready {
  background: var(--lead); border-color: var(--lead); color: var(--bg-0);
  box-shadow: 0 0 18px color-mix(in srgb, var(--lead) 50%, transparent); }
.pc-note { font-size: 11px; color: var(--fg-3); min-height: 14px; }
.pc-note.on { color: color-mix(in srgb, var(--lead) 70%, var(--fg-1)); }

.hero-cta-row { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-6); flex-wrap: wrap; }
.hero-cta-row .meta { display: flex; align-items: center; gap: var(--s-5); color: var(--fg-3); font-size: 11px; }
.hero-cta-row .meta .sep { width: 1px; height: 11px; background: var(--line-3); }

/* scroll cue */
.scroll-cue { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-3); }
.scroll-cue .ln { width: 1px; height: 22px; background: linear-gradient(var(--line-4), transparent); }

/* ============================================================
   Host strip (clean static band)
   ============================================================ */
.hosts-strip { border-bottom: 1px solid var(--line-2); background: var(--bg-1); }
.hs-inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); padding: var(--s-6) var(--s-8); flex-wrap: wrap; }
.hs-label { font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--fg-3); white-space: nowrap; }
.hs-list { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; flex: 1; }
.hs-host { font-size: clamp(14px, 1.5vw, 17px); color: var(--fg-1); font-weight: 500; letter-spacing: -0.015em; }
.hs-dot { width: 3px; height: 3px; background: var(--line-4); flex: 0 0 auto; }
.hs-out { font-size: 11px; color: var(--fg-3); white-space: nowrap; letter-spacing: 0.02em; }
@media (max-width: 720px) { .hs-out { display: none; } }

/* ============================================================
   Product window (recreated Nexus UI)
   ============================================================ */
.window {
  border: 1px solid var(--line-3);
  background: var(--bg-1);
  box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
}
.win-bar {
  display: flex; align-items: center; gap: var(--s-4);
  height: 30px; padding: 0 var(--s-4);
  border-bottom: 1px solid var(--line-2); background: var(--bg-2);
}
.win-dots { display: flex; gap: 6px; }
.win-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-5); display: block; }
.win-title { font-size: 11px; color: var(--fg-3); letter-spacing: 0.02em; }
.win-title b { color: var(--fg-1); font-weight: 500; }
.win-actions { margin-left: auto; display: flex; gap: var(--s-3); }
.win-actions .ctl { width: var(--ctl-h-sm); height: var(--ctl-h-sm); border: 1px solid var(--line-2); background: rgba(255,255,255,0.03); }

/* nexus app layout */
.nx { display: grid; grid-template-columns: 188px 1fr 208px; height: clamp(380px, 52vh, 520px); }
.nx-col { display: flex; flex-direction: column; min-width: 0; }
.nx-left { border-right: 1px solid var(--line-2); background: var(--bg-1); }
.nx-right { border-left: 1px solid var(--line-2); background: var(--bg-1); }
.nx-canvas { position: relative; background: var(--bg-0); overflow: hidden; }
.nx-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nx-canvas .grid-dots { position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px; opacity: 0.5; }

.panel-h { display: flex; align-items: center; height: var(--row-h); padding: 0 var(--s-4);
  font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--fg-3);
  border-bottom: 1px solid var(--line-2); }
.panel-h .add { margin-left: auto; color: var(--fg-2); font-size: 13px; line-height: 1; }

/* layer rows */
.layer { display: flex; align-items: center; gap: var(--s-4); height: var(--row-h); padding: 0 var(--s-4);
  font-size: 11px; color: var(--fg-1); border-bottom: 1px solid var(--line-1); }
.layer .g { width: 13px; text-align: center; font-weight: 700; font-size: 10px; }
.layer .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-1); }
.layer .dot { width: 6px; height: 6px; border-radius: 50%; }
.layer.sel { background: var(--accent); color: var(--bg-0); }
.layer.sel .nm { color: var(--bg-0); }
.layer:hover:not(.sel) { background: var(--bg-3); }

/* inspector controls */
.insp { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.field { display: flex; align-items: center; justify-content: space-between; height: var(--row-h); }
.field .lab { font-size: 11px; color: var(--fg-2); }
.field .val { font-size: 11px; color: var(--fg-1); padding: 0 var(--s-3); border: 1px solid transparent; }
.field:hover .val { border-color: var(--line-2); background: rgba(255,255,255,0.03); }
.srow { display: flex; align-items: center; gap: var(--s-4); height: var(--row-h); }
.srow .lab { font-size: 11px; color: var(--fg-2); width: 54px; }
.track { flex: 1; height: 2px; background: var(--line-2); position: relative; }
.track .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fg-0); }
.track.gen .fill { background: var(--lead); }
.track .thumb { position: absolute; top: 50%; width: 9px; height: 9px; background: #fff; transform: translate(-50%,-50%); }

/* timeline */
.nx-time { grid-column: 1 / -1; height: 76px; border-top: 1px solid var(--line-2); background: var(--bg-1);
  display: grid; grid-template-columns: 188px 1fr; }
.nx-time .tnames { border-right: 1px solid var(--line-2); }
.nx-time .ttrack { position: relative; overflow: hidden; }
.tn { height: 24px; display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); font-size: 10px; color: var(--fg-2); border-bottom: 1px solid var(--line-1); }
.trk { height: 24px; border-bottom: 1px solid var(--line-1); position: relative; }
.kf { position: absolute; top: 50%; width: 8px; height: 8px; transform: translate(-50%,-50%) rotate(45deg); }
.playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--accent); z-index: 2; }
.ruler { height: 16px; border-bottom: 1px solid var(--line-2); position: relative; background: var(--bg-2);
  background-image: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 48px); }

/* dock under canvas */
.nx-dock { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3;
  display: flex; gap: var(--s-2); padding: var(--s-2);
  background: rgba(20,20,20,0.96); border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 16px 32px rgba(0,0,0,0.6); }
.nx-dock .tool { width: 24px; height: 24px; display: grid; place-items: center; font-size: 11px; color: var(--fg-2);
  background: rgba(255,255,255,0.04); }
.nx-dock .tool.on { background: var(--accent); color: var(--bg-0); }
.nx-badge { position: absolute; left: 12px; top: 12px; z-index: 3; font-size: 10px; letter-spacing: 0.06em;
  color: var(--fg-2); background: rgba(5,5,5,0.82); border: 1px solid var(--line-2); padding: 3px 7px; }
.nx-badge b { color: var(--lead); font-weight: 600; }

@media (max-width: 760px) {
  .nx { grid-template-columns: 1fr; height: auto; }
  .nx-left, .nx-right { display: none; }
  .nx-canvas { height: 280px; }
  .nx-time { grid-template-columns: 1fr; }
  .nx-time .tnames { display: none; }
}

/* ============================================================
   Portability — host tab switcher over real app screenshots
   (ported from the pre-launch page, restyled to v3 tokens)
   ============================================================ */
.apptabs { display: flex; gap: 6px; margin: var(--s-8) 0 var(--s-7); flex-wrap: wrap; }
.apptabs button { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 18px;
  font-size: 13.5px; font-weight: 500; color: var(--fg-2); background: transparent;
  border: 1px solid var(--line-2); font-family: inherit; cursor: pointer;
  transition: color 140ms, border-color 140ms, background 140ms; }
.apptabs button:hover { color: var(--fg-0); border-color: var(--line-3); }
.apptabs button.on { color: var(--fg-0); border-color: var(--line-4); background: rgba(255,255,255,0.04); }
.apptabs button .b { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.apptabs button .b svg { width: 100%; height: 100%; display: block; }
#portability [data-app] { display: none; }
#portability [data-app].on { display: block; animation: appfade 300ms ease; }
@keyframes appfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.appwin { border: 1px solid var(--line-3); background: var(--bg-1); overflow: hidden;
  box-shadow: 0 50px 100px -34px rgba(0,0,0,.82), 0 16px 40px rgba(0,0,0,.5); }
.appwin img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  .apptabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .apptabs button { width: 100%; height: 38px; padding: 0 8px; font-size: 12.5px; justify-content: center; }
}

/* ============================================================
   Create with AI — copy left, source→generated proof + draft
   panel right (ported from the pre-launch page, v3 tokens)
   ============================================================ */
.create-grid { display: grid; grid-template-columns: minmax(280px, 470px) 1fr; gap: clamp(28px, 3vw, 56px); align-items: center; }
.create-copy { display: flex; flex-direction: column; gap: var(--s-8); }
.create-copy .section-head { margin-bottom: 0; }
/* Sized so the headline reads as exactly two lines ("Describe a generator."
   / "Reprompt until it's right.") inside the left rail. */
/* Desktop: undersized on purpose so the heading breaks as exactly two
   lines beside the visual. Phones stack the section, so the heading
   goes back to the standard .h2 scale to match its siblings. */
.create-copy .h2 { font-size: clamp(23px, 2.2vw, 36px); }
@media (max-width: 820px) {
  .create-copy .h2 { font-size: clamp(28px, 4vw, 46px); }
}
.create-visual { display: flex; gap: clamp(20px, 2.5vw, 40px); align-items: center; justify-content: flex-end; flex-wrap: wrap;
  /* The demo's accent follows the shown render: Edge Ascii green
     (sampled from the PNG). Scoped here so the generated card's
     border/glow, the draft panel head, the active icon, the send
     button and Save all pick it up together. */
  --accent: #63ff00; }
.fam-col { display: flex; flex-direction: column; gap: var(--s-6); }
.famc { border: 1px solid var(--line-3); background: var(--bg-1); padding: 18px 20px; }
.famc .f-name { font-size: 13.5px; font-weight: 500; color: var(--fg-0); margin-bottom: 5px; display: flex; align-items: center; gap: 9px; }
.famc .f-name .sw { width: 8px; height: 8px; flex-shrink: 0; }
.famc .f-desc { font-size: 12.5px; line-height: 1.55; color: var(--fg-2); }
.example { position: relative; perspective: 1500px; width: min(440px, 100%); height: 600px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ex-card { position: absolute; width: min(330px, 82%); border: 1px solid var(--line-3); background: var(--bg-0); overflow: hidden; transform-style: preserve-3d; transition: transform 650ms cubic-bezier(0.22,1,0.36,1); }
.ex-card img { display: block; width: 100%; height: 470px; object-fit: cover; }
.ex-card .ex-tag { position: absolute; top: 10px; left: 10px; font-size: 10px; padding: 4px 8px; background: rgba(5,5,5,0.7); color: var(--fg-2); backdrop-filter: blur(6px); letter-spacing: 0.04em; }
.ex-card.orig { transform: rotateY(18deg) rotateX(2deg) translate3d(84px, 26px, -60px); opacity: 0.9; border-color: var(--line-4); }
.ex-card.made { transform: rotateY(18deg) rotateX(2deg) translate3d(-46px, -20px, 36px); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), -18px 26px 60px rgba(0,0,0,0.6), 0 0 44px rgba(255,255,255,0.08); }
.ex-card.made .ex-tag { background: var(--accent); color: #0a0a0a; }
/* Hover: the cards fan apart. Same rotateY + translateZ as the resting
   pose — ONLY x/y move — so the perspective projection can't pop; it
   glides. (The old hover changed the angle and depth, which snapped.) */
.example:hover .ex-card.orig { transform: rotateY(18deg) rotateX(2deg) translate3d(122px, 30px, -60px); }
.example:hover .ex-card.made { transform: rotateY(18deg) rotateX(2deg) translate3d(-78px, -24px, 36px); }
.ex-strip { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--fg-4); letter-spacing: 0.04em; }

/* Drag-wipe before/after (touch surfaces). Both layers are identical
   full-bleed boxes; the wipe is pure clip-path on the top (source)
   layer, so neither image ever rescales while dragging. pan-y keeps
   page scrolling alive when the gesture is vertical. */
.wipe { display: none; position: relative; width: 100%; aspect-ratio: 2 / 3; max-height: 560px;
  border: 1px solid var(--line-4); background: var(--bg-1); overflow: hidden;
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.wipe .wipe-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.wipe-top { position: absolute; inset: 0; clip-path: inset(0 45% 0 0); }
.wipe-bar { position: absolute; top: 0; bottom: 0; left: 55%; width: 2px; margin-left: -1px;
  background: rgba(255,255,255,0.9); box-shadow: 0 0 14px rgba(0,0,0,0.55); }
.wipe-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 30px; display: grid; place-items: center;
  background: #0e0e10; border: 1px solid var(--line-4); color: var(--fg-1); }
.wipe-tag { position: absolute; top: 10px; font-size: 10.5px; letter-spacing: 0.05em;
  padding: 4px 8px; background: rgba(9,9,10,0.82); border: 1px solid var(--line-3); color: var(--fg-2); pointer-events: none; }
.wipe-tag.wt-l { left: 10px; }
.wipe-tag.wt-r { right: 10px; color: #63ff00; border-color: rgba(99,255,0,0.45); }
@media (max-width: 820px) {
  .example { display: none; }
  .wipe { display: block; }
}
.draft { width: min(420px, 100%); border: 1px solid var(--line-3); background: var(--bg-1); padding: 18px 20px; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 20px 70px rgba(0,0,0,0.6), 0 0 70px rgba(255,255,255,0.07); }
.draft .d-head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.draft .d-head .sp { color: var(--accent); display: inline-flex; }
.draft .d-head .dname { font-size: 14px; font-weight: 600; color: var(--fg-0); border-bottom: 1px dashed rgba(255,255,255,0.22); padding-bottom: 2px; text-shadow: 0 0 8px rgba(255,255,255,0.4); }
.draft .d-section { margin-bottom: 14px; }
.draft .d-label { font-size: 10px; letter-spacing: 0.05em; color: var(--fg-3); margin-bottom: 8px; text-transform: uppercase; }
.draft .d-accent { display: flex; gap: 8px; align-items: center; }
.draft .sw-row { display: flex; gap: 4px; }
.draft .sw { width: 18px; height: 18px; border: 1px solid rgba(255,255,255,0.18); cursor: pointer; padding: 0; flex-shrink: 0; }
.draft .sw.on { border-color: var(--fg-0); box-shadow: 0 0 0 1px var(--bg-1), 0 0 0 2px var(--fg-0); }
.draft .hex { flex: 1; min-width: 0; height: 28px; border: 1px solid var(--line-3); background: var(--bg-0); display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 11.5px; color: var(--fg-1); }
.draft .hex i { width: 12px; height: 12px; flex-shrink: 0; }
.draft .d-icons { display: flex; gap: 4px; flex-wrap: wrap; }
.draft .ic { width: 28px; height: 24px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.02); color: var(--fg-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.draft .ic.on { border-color: var(--accent); background: rgba(255,255,255,0.08); color: var(--fg-0); }
.draft .d-refine { display: flex; align-items: flex-end; gap: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.16); padding: 7px 7px 7px 10px; }
.draft .d-refine .field { flex: 1; min-width: 0; color: var(--fg-2); font-size: 11.5px; line-height: 1.5; }
.draft .d-refine .send { flex-shrink: 0; width: 22px; height: 22px; border: 1px solid var(--accent); background: var(--accent); color: #0a0a0a; display: flex; align-items: center; justify-content: center; }
.draft .d-hint { font-size: 10px; color: var(--fg-3); margin-top: 8px; }
.draft .d-actions { display: flex; gap: 8px; margin-top: 16px; }
.draft .d-save { flex: 1; height: 36px; background: rgba(255,255,255,0.10); color: var(--fg-0); border: 1px solid var(--accent); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; font-family: inherit; text-shadow: 0 0 6px rgba(255,255,255,0.55); cursor: pointer; }
.draft .d-cancel { height: 36px; padding: 0 18px; background: transparent; color: var(--fg-2); border: 1px solid var(--line-3); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; font-family: inherit; cursor: pointer; }
@media (max-width: 1280px) {
  /* minmax(0,1fr), not bare 1fr: a 1fr track's implicit min is the
     content's min width, and the card image would hold the column at
     ~314px and overflow narrow phones. */
  .create-grid { grid-template-columns: minmax(0, 1fr); }
  .create-visual { justify-content: center; }
}

/* ============================================================
   Generators grid
   ============================================================ */
.gens { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); margin-top: var(--s-8); }
/* 5 tiles never leave a hole: below 900px go 2-up with the last tile
   spanning the full final row (a 3-col layout strands an empty cell). */
@media (max-width: 900px) {
  .gens { grid-template-columns: repeat(2, 1fr); }
  .gens .gen:nth-child(5) { grid-column: 1 / -1; }
  .gens .gen:nth-child(5) .gen-vis { aspect-ratio: 2 / 0.72; }
}
.gen { background: var(--bg-1); display: flex; flex-direction: column; cursor: default; transition: background 120ms; }
.gen:hover { background: var(--bg-2); }
.gen-vis { aspect-ratio: 1 / 0.82; position: relative; background: var(--bg-0); overflow: hidden; border-bottom: 1px solid var(--line-2); }
.gen-vis canvas { position:absolute; inset:0; width:100%; height:100%; }
.gen-meta { padding: var(--s-5); display: flex; flex-direction: column; gap: 3px; }
.gen-meta .g-top { display: flex; align-items: center; gap: var(--s-3); }
.gen-meta .g-glyph { width: 18px; height: 18px; display:grid; place-items:center; border:1px solid var(--line-2); }
.gen-meta .g-glyph svg { width: 13px; height: 13px; display: block; }
.gen-meta .g-name { font-size: 12px; color: var(--fg-0); font-weight: 500; }
.gen-meta .g-id { margin-left: auto; font-size: 9px; color: var(--fg-4); letter-spacing: 0.06em; }
.gen-meta .g-desc { font-size: 11px; color: var(--fg-3); }

/* ============================================================
   Pillars
   ============================================================ */
/* ============================================================
   Pricing — a 1:1 transcription of the in-app pricing modal
   (src/components/billing/pricing-plans.tsx) in its signed-out,
   NON-trial state: four plans since Starter (2026-08-16), Pro
   featured + "Best value", Free is a ghost. The free-trial pitch is
   deliberately absent from the landing (founder call 2026-07-26) —
   the trial lives in-app only. Every size/color below is copied from
   that component's inline styles — edit it THERE first, then mirror.
   ============================================================ */
.pricing-box { border: 1px solid var(--line-3); background: var(--bg-0); margin-top: var(--s-8); }
.pricing-box .p-head { padding: 22px 30px; }
.ptoggle { display: inline-flex; border: 1px solid var(--line-3); }
.ptoggle button { font-size: 12.5px; padding: 8px 16px; background: transparent; color: var(--fg-2); border: 0; cursor: pointer; display: flex; align-items: center; gap: 8px; font-family: inherit; }
.ptoggle button:first-child { border-right: 1px solid var(--line-3); }
.ptoggle button.on { background: #fff; color: #000; }
.ptoggle .chip { font-size: 10.5px; line-height: 1; padding: 3px 6px; display: inline-flex; align-items: center; background: rgba(139,240,251,0.10); color: #8bf0fb; border: 1px solid rgba(139,240,251,0.45); }
.ptoggle button.on .chip { background: rgba(0,0,0,0.12); color: #03181b; border-color: transparent; }
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); }
.price { padding: 26px 22px; display: flex; flex-direction: column; position: relative; border-right: 1px solid var(--line-2); background: var(--bg-0); }
.price:last-child { border-right: 0; }
.price.featured { background: linear-gradient(180deg, rgba(139,240,251,0.10), rgba(139,240,251,0) 44%), var(--bg-1); box-shadow: inset 0 2px 0 #8bf0fb; }
.price .pl-top { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.price .pl-name { font-size: 15px; font-weight: 600; color: var(--fg-0); letter-spacing: -0.01em; }
.price .pl-tag { font-size: 10px; letter-spacing: 0.02em; padding: 3px 8px; flex-shrink: 0; background: #8bf0fb; color: #03181b; font-weight: 500; }
.price .pl-desc { font-size: 12.5px; color: var(--fg-2); line-height: 1.45; margin: 0 0 22px; height: 18px; overflow: hidden; }
.price .pl-price { display: flex; align-items: baseline; gap: 8px; min-height: 44px; }
.price .pl-amount { font-size: 42px; font-weight: 600; color: var(--fg-0); line-height: 1; display: inline-flex; align-items: baseline; }
.pricing-box:not(.annual) .amount-a { display: none; }
.pricing-box.annual .amount-m { display: none; }
.price .pl-period { font-size: 13px; color: var(--fg-2); }
.price .pl-note { font-size: 11.5px; min-height: 16px; margin-top: 8px; display: flex; align-items: center; gap: 7px; }
.price .pl-note .strike { color: var(--fg-4); text-decoration: line-through; }
.price .pl-note .then { color: var(--fg-3); }
.price .pl-note .save { color: #8bf0fb; }
.pricing-box:not(.annual) .note-a { display: none; }
.pricing-box.annual .note-m { display: none; }
.pricing-box:not(.annual) .period-a { display: none; }
.pricing-box.annual .period-m { display: none; }
.price .pl-credits { margin: 22px 0; padding: 13px 14px; background: var(--bg-2); border: 1px solid var(--line-2); display: flex; align-items: baseline; gap: 7px; }
.price.featured .pl-credits { background: rgba(139,240,251,0.10); border-color: rgba(139,240,251,0.45); }
.price .pl-credits .cn { font-size: 18px; font-weight: 600; color: var(--fg-0); letter-spacing: -0.01em; }
.price.featured .pl-credits .cn { color: #8bf0fb; }
.price .pl-credits .cl { font-size: 12.5px; color: var(--fg-2); }
.price .pl-credits.none { background: transparent; border: 1px dashed var(--line-2); }
.price .pl-credits.none .cn { font-weight: 400; color: var(--fg-3); letter-spacing: 0; }
.price ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.price li { font-size: 13px; color: var(--fg-1); line-height: 1.4; display: flex; gap: 10px; align-items: flex-start; }
.price li .ck { width: 13px; height: 13px; margin-top: 1px; flex-shrink: 0; color: #8bf0fb; }
.price li .ck svg { display: block; }
.pcta { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; width: 100%; border: 1px solid var(--line-3); background: transparent; color: var(--fg-0); cursor: pointer; transition: background 120ms, border-color 120ms; }
.pcta:hover { background: rgba(255,255,255,0.06); border-color: var(--line-4); }
.pcta.primary { background: #8bf0fb; color: #03181b; border-color: #8bf0fb; font-weight: 600; }
.pcta.primary:hover { background: #a8f5fd; border-color: #a8f5fd; }
.pcta.ghost { color: var(--fg-3); border-color: var(--line-2); cursor: default; pointer-events: none; }
.pcta.ghost:hover { background: transparent; border-color: var(--line-2); }

/* ============================================================
   Download — offer on the left (Pro-card treatment), apps as a
   hairline list on the right. Mirrors .create-grid's two columns.
   ============================================================ */
.dl-layout { display: grid; grid-template-columns: minmax(300px, 470px) 1fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.dl-copy .section-head { margin-bottom: var(--s-8); }
.dl-offer { position: relative; padding: 26px 26px 24px;
  background: radial-gradient(120% 100% at 0% 0%, rgba(139,240,251,0.13), rgba(139,240,251,0) 62%), var(--bg-1);
  box-shadow: inset 0 2px 0 #8bf0fb; }
.dl-offer-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.dl-badge { font-size: 10px; letter-spacing: 0.02em; padding: 3px 8px; background: #8bf0fb; color: #03181b; font-weight: 600; }
.dl-offer-k { font-size: 12.5px; color: var(--fg-1); }
.dl-offer-big { font-size: clamp(30px, 3.2vw, 42px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--fg-0); }
.dl-offer-big .cy { color: #8bf0fb; }
.dl-offer-then { font-size: 13px; color: var(--fg-2); margin-top: 8px; }
.dl-offer .dl-cta { width: auto; display: inline-flex; gap: 8px; padding: 0 22px; margin-top: 22px; }
.dl-offer .dl-cta .arr { transition: transform 140ms cubic-bezier(0.16,1,0.3,1); }
.dl-offer .dl-cta:hover .arr { transform: translateX(3px); }

.dl-row:last-of-type { border-bottom: 1px solid var(--line-2); }
.dl-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 20px 4px; border-top: 1px solid var(--line-2); transition: background 120ms linear; }
.dl-row:hover { background: rgba(255,255,255,0.018); }
.dl-ic { width: 36px; height: 36px; display: block; }
.dl-ic svg { width: 100%; height: 100%; display: block; }
.dl-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dl-nm { font-size: 16px; font-weight: 600; color: var(--fg-0); letter-spacing: -0.01em; }
.dl-ds { font-size: 12.5px; color: var(--fg-2); }
.dl-acts { display: flex; gap: 8px; }
.dl-link { height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 14px;
  font-size: 12.5px; font-weight: 500; color: var(--fg-1); border: 1px solid var(--line-2); white-space: nowrap;
  transition: background 80ms linear, border-color 80ms linear, color 80ms linear; }
.dl-link:hover { color: var(--fg-0); border-color: var(--line-4); background: rgba(255,255,255,0.05); }
.dl-link svg { width: 12px; height: 12px; fill: currentColor; flex: 0 0 auto; }
.dl-link .dl-arr { width: 13px; height: 13px; fill: none; color: var(--fg-3); transition: color 80ms linear, transform 140ms cubic-bezier(0.16,1,0.3,1); }
.dl-link:hover .dl-arr { color: #8bf0fb; transform: translateY(1px); }
@media (max-width: 1000px) {
  .dl-layout { grid-template-columns: minmax(0, 1fr); }
  .dl-copy .section-head { margin-bottom: var(--s-7); }
}
@media (max-width: 560px) {
  .dl-row { grid-template-columns: 32px minmax(0, 1fr); row-gap: 14px; padding: 18px 0; }
  .dl-ic { width: 32px; height: 32px; }
  .dl-acts { grid-column: 1 / -1; }
  .dl-acts .dl-link { flex: 1; justify-content: center; }
  .dl-offer { padding: 22px 20px 20px; }
  .dl-offer .dl-cta { width: 100%; justify-content: center; }
}
.price .pl-disclosure { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--fg-3); text-align: center; min-height: 33px; }
.pricing-legal { border-top: 1px solid var(--line-2); padding: 14px 30px 20px; text-align: center; font-size: 11.5px; color: var(--fg-3); line-height: 1.5; }
.pricing-legal a { color: var(--fg-2); text-decoration: underline; }
@media (max-width: 1180px) {
  /* Four cards squeeze below ~1180: fall to a 2×2 with hairlines on
     both axes (odd column keeps its right border, row gap gets a
     bottom border). */
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .price { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .price:nth-child(odd) { border-right: 1px solid var(--line-2); }
  .price:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 980px) {
  .price-grid { grid-template-columns: 1fr; }
  .price, .price:nth-child(odd) { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .price:last-child { border-bottom: 0; }
}
/* The mobile plan switcher row — hidden on desktop where the grid
   shows all four cards side by side. */
.plan-tabs { display: none; }

/* Phones: four stacked cards read as one very long wall. Instead a
   segmented Free / Starter / Creator / Pro switcher (same SegButton
   language as the Monthly/Annual toggle) shows ONE plan card at a
   time, Creator first. Verticals tightened; no plan content dropped. */
@media (max-width: 700px) {
  .pricing-box .p-head { padding: 16px 18px; }
  .plan-tabs { display: flex; margin: 16px 18px; border: 1px solid var(--line-3); }
  .plan-tabs button { flex: 1; font-size: 12.5px; padding: 9px 0; background: transparent;
    color: var(--fg-2); border: 0; cursor: pointer; font-family: inherit; }
  .plan-tabs button + button { border-left: 1px solid var(--line-3); }
  .plan-tabs button.on { background: #fff; color: #000; font-weight: 500; }
  .price-grid { display: block; }
  .price { display: none; border-right: 0; border-bottom: 0; }
  .price.active { display: flex; flex-direction: column; }
  .price { padding: 20px 18px; }
  .price .pl-desc { margin-bottom: 12px; height: auto; }
  .price .pl-price { min-height: 0; }
  .price .pl-credits { margin: 14px 0; padding: 10px 12px; }
  .price ul { gap: 8px; margin-bottom: 16px; }
  .price li { font-size: 12.5px; }
  .price .pl-disclosure { min-height: 0; }
  .pricing-legal { padding: 12px 18px 16px; }
}

/* ============================================================
   Signature drops
   ============================================================ */
.drops { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-top: var(--s-8); }
@media (max-width: 980px) { .drops { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .drops { grid-template-columns: 1fr; } }
.drop { border: 1px solid var(--line-2); background: var(--bg-1); }
.drop-vis { aspect-ratio: 1; position: relative; background: var(--bg-0); overflow: hidden; }
.drop-vis canvas { position:absolute; inset:0; width:100%; height:100%; }
.drop-meta { display: flex; align-items: center; gap: var(--s-4); height: 30px; padding: 0 var(--s-4); border-top: 1px solid var(--line-2); }
.drop-meta .id { font-size: 10px; letter-spacing: 0.05em; color: var(--fg-1); }
.drop-meta .fmt { margin-left: auto; font-size: 9px; color: var(--fg-3); border: 1px solid var(--line-2); padding: 1px 5px; }

/* ============================================================
   CTA
   ============================================================ */
.cta { position: relative; overflow: hidden; text-align: center; padding: clamp(96px, 16vh, 180px) 0; border-top: 1px solid var(--line-2); }
.cta-bg { position: absolute; inset: 0; z-index: 0; }
.cta-bg canvas { width: 100%; height: 100%; }
.cta-bg::after { content:""; position:absolute; inset:0; background: radial-gradient(80% 80% at 50% 50%, transparent 20%, var(--bg-0) 80%); }
.cta-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s-7); }
.cta .capture { margin: 0 auto; }
.proof-strip { display: flex; align-items: center; gap: var(--s-7); flex-wrap: wrap; justify-content: center; font-size: 11px; color: var(--fg-3); }
.proof-strip b { color: var(--fg-0); font-weight: 600; font-size: 13px; }
.proof-strip .pi { display: flex; flex-direction: column; gap: 2px; align-items: center; }

/* ============================================================
   Footer
   ============================================================ */
.footer { border-top: 1px solid var(--line-2); padding: var(--s-8) 0 var(--s-7); }
.footer .row { display: flex; align-items: flex-start; gap: var(--s-8); flex-wrap: wrap; }
.footer .fcol { display: flex; flex-direction: column; gap: var(--s-4); }
.footer .fcol .ft { font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--fg-3); margin-bottom: var(--s-2); }
.footer .fcol a { font-size: 12px; color: var(--fg-2); }
.footer .fcol a:hover { color: var(--fg-0); }
.footer .fend { margin-left: auto; text-align: right; }
.footer .legal { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line-2); font-size: 11px; color: var(--fg-4); flex-wrap: wrap; }
.footer .legal .legal-left { display: inline-flex; align-items: center; gap: var(--s-5); }
.footer .legal a { color: var(--fg-4); }
.footer .legal a:hover { color: var(--fg-1); }
/* Newsletter box (footer). Same 30px control height as .btn. */
.footer .nl { max-width: 300px; }
.footer .nl-row { display: flex; }
.footer .nl-in {
  flex: 1; min-width: 0; height: 30px; padding: 0 10px;
  font: inherit; font-size: 12px; color: var(--fg-1);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-2); border-right: 0;
  border-radius: 0; outline: none;
}
.footer .nl-in::placeholder { color: var(--fg-4); }
.footer .nl-in:focus { border-color: var(--line-3); }
.footer .nl-note { font-size: 11px; line-height: 1.5; color: var(--fg-4); margin-top: var(--s-3); }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ============================================================
   Tweaks panel
   ============================================================ */
#tweaks { position: fixed; right: 16px; bottom: 16px; z-index: 100; width: 248px; display: none;
  background: rgba(16,16,16,0.97);
  border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 16px 32px rgba(0,0,0,0.6); }
#tweaks.open { display: block; }
#tweaks .tw-bar { display:flex; align-items:center; height: var(--row-h); padding: 0 var(--s-4); border-bottom: 1px solid var(--line-2); }
#tweaks .tw-bar .t { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
#tweaks .tw-bar .x { margin-left:auto; color: var(--fg-3); font-size: 14px; line-height:1; }
#tweaks .tw-bar .x:hover { color: var(--fg-0); }
#tweaks .tw-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-6); }
.tw-group { display: flex; flex-direction: column; gap: var(--s-4); }
.tw-group > .lab { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line-2); }
.seg button { height: 24px; font-size: 11px; color: var(--fg-2); border-left: 1px solid var(--line-2); background: transparent; }
.seg button:first-child { border-left: 0; }
.seg button.on { background: var(--accent); color: var(--bg-0); }
.tw-sw { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.tw-sw button { width: 22px; height: 22px; border: 1px solid var(--line-2); position: relative; }
.tw-sw button.on { box-shadow: inset 0 0 0 2px var(--bg-1), 0 0 0 1px var(--accent); border-color: var(--accent); }

/* ---- from landing-v3 style4.css ---- */
/* Community gallery rail — two marquees of REAL preview images pulled
   live from the same RPCs the hub's Featured / Community shelves use,
   so the wall grows on its own every time a filter is curated. Cards
   are plain images; nothing here executes anyone's filter code. */
#gallery { overflow: hidden; }
.gal { margin-top: var(--s-8); display: flex; flex-direction: column; gap: 14px; }
.gal-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* Two identical sets side by side; the card's own margin-right (NOT a
   flex gap) carries the spacing, so one set is an exact multiple of
   card+margin and translating -50% lands set two precisely where set
   one began. A gap would leave half a gap of drift at the seam. */
.gal-track { display: flex; width: max-content; animation: galSlide linear infinite; }
.gal-set { display: flex; }
.gal-row-b .gal-track { animation-direction: reverse; }
@keyframes galSlide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.gal:hover .gal-track { animation-play-state: paused; }
/* Off-screen the rails stop entirely — no compositing work for a
   section nobody is looking at. */
.gal:not(.is-live) .gal-track { animation-play-state: paused; }

.gcard {
  flex: 0 0 auto; width: 300px; margin-right: 14px;
  border: 1px solid var(--line-2); background: var(--bg-1);
  text-decoration: none; color: inherit; display: block;
  transition: border-color 140ms ease;
}
.gcard:hover { border-color: var(--line-4); }
.gc-img { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--bg-2); }
.gc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gc-foot {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 8px 10px; border-top: 1px solid var(--line-1);
}
.gc-dot { flex: 0 0 auto; width: 6px; height: 6px; background: var(--fg-3); }
.gc-name {
  font-size: 12px; font-weight: 500; color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gc-fam { margin-left: auto; font-size: 11px; color: var(--fg-3); white-space: nowrap; }

.gal-foot {
  margin-top: var(--s-8); display: flex; align-items: center;
  gap: var(--s-7); flex-wrap: wrap;
}
.gal-count { font-size: 12px; color: var(--fg-2); }

@media (max-width: 760px) {
  .gcard { width: 224px; margin-right: 10px; }
  .gal { gap: 10px; }
}
/* No motion: the rails hold still and become swipeable instead. */
@media (prefers-reduced-motion: reduce) {
  .gal-track { animation: none; }
  .gal-row { overflow-x: auto; scrollbar-width: none; }
  .gal-row::-webkit-scrollbar { display: none; }
  .gal-set + .gal-set { display: none; }
}
[data-motion="off"] .gal-track { animation: none; }

/* ---- from landing-v3 style5.css ---- */
.trialbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  background: #000; border-top: 1px solid #1d3134;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
.trialbar .tb-l1 { font-size: 13.5px; font-weight: 600; color: #f2f2f2; }
.trialbar .tb-l2 { font-size: 11.5px; font-weight: 500; color: #8bf0fb; margin-top: 2px; }
.trialbar .tb-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  background: #8bf0fb; color: #000; font-size: 12.5px; font-weight: 700;
  padding: 11px 14px; font-family: inherit; border: 0; cursor: pointer; }
.trialbar .tb-go:disabled { opacity: 0.65; cursor: default; }
@media (max-width: 820px) {
  .trialbar { display: flex; }
  body { padding-bottom: 76px; }
}

.tmodal { position: fixed; inset: 0; z-index: 90; display: none; flex-direction: column; height: 100vh;
  height: 100dvh; background: #000; overflow: hidden; }
.tmodal.open { display: flex; }
.tm-reel { position: relative; flex: 1 1 auto; min-height: 180px;
  min-height: clamp(180px, 32dvh, 300px); background: #0a0a0a; overflow: hidden; }
.tm-reel video, .tm-reel img.tm-slide { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; }
.tm-fade { position: absolute; inset: 0; pointer-events: none;
  z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 51.5%, rgba(0,0,0,0.88) 100%); }
.tm-x { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 38px; height: 38px;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.22);
  z-index: 3; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tm-bars { position: absolute; left: 16px; right: 16px; bottom: 12px; display: grid;
  z-index: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.tm-bar { min-width: 0; background: transparent; border: 0; padding: 0; text-align: left; font-family: inherit; cursor: pointer; }
.tm-bar .tm-track { position: relative; display: block; width: 100%; height: 4px; background: #8f8f8f; }
.tm-bar .tm-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: #fff; }
.tm-bar .tm-lb { min-height: 2.4em; margin-top: 8px; font-size: 11px; line-height: 1.2;
  font-weight: 600; color: #8f8f8f; white-space: normal; }
.tm-bar.on .tm-lb { color: #fff; }

.tm-panel { flex: 0 1 auto; min-height: 0; max-height: calc(100vh - 180px);
  max-height: calc(100dvh - clamp(180px, 32dvh, 300px)); overflow-y: auto;
  overscroll-behavior: contain; padding: 20px 18px calc(26px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #000000 45%, #1d737f 100%); }
.tm-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600;
  color: #f0e14a; letter-spacing: 0.01em; }
.tmodal.paid .tm-eyebrow, .tmodal.portal .tm-eyebrow { color: #8bf0fb; }
.tm-h1 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: #f2f2f2; margin-top: 8px; }
.tm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.tmodal.portal .tm-cards { display: none; }
.tm-card { border: 1px solid transparent; padding: 14px; min-height: 115px; display: flex;
  flex-direction: column; text-align: left; font-family: inherit; color: #fff; cursor: pointer;
  background: linear-gradient(#122527, #122527) padding-box, linear-gradient(180deg, #528e91, #000000) border-box; }
.tm-card.sel { background: linear-gradient(#2e4f53, #2e4f53) padding-box, linear-gradient(180deg, #528e91, #000000) border-box; }
.tm-chead { display: flex; align-items: center; justify-content: space-between; }
.tm-cname { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: #fff; }
.tm-badge { background: #8bf0fb; color: #000; font-size: 11px; font-weight: 600; padding: 2px 5px; }
.tm-tick { width: 20px; height: 20px; background: #0a0606; border: 1px solid #346368;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tm-card.sel .tm-tick { border-color: #8bf0fb; }
.tm-tick .tm-in { width: 14px; height: 14px; background: #8bf0fb; display: none;
  align-items: center; justify-content: center; }
.tm-card.sel .tm-tick .tm-in { display: inline-flex; }
.tm-prow { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.tm-ghost { font-size: 20px; font-weight: 500; color: #7ba4a6; }
.tm-free { font-size: 26px; font-weight: 500; line-height: 32px; color: #fff; }
.tm-note { margin-top: 6px; font-size: 10px; line-height: 14px; font-weight: 600; color: #7ba4a6; white-space: pre-line; }

.tm-cta { display: flex; margin-top: 18px; height: 48px; border: 1px solid #fff; }
.tmodal.code .tm-cta { border-color: #8bf0fb; }
.tmodal.eligibility .tm-cta, .tmodal.confirm .tm-cta, .tmodal.ready .tm-cta { border-color: #8bf0fb; }
.tm-cta input { flex: 1; min-width: 0; background: #000; border: 0; outline: none; color: #fff;
  font-size: 16px; font-family: inherit; padding: 0 14px; }
.tmodal.eligibility .tm-cta input, .tmodal.confirm .tm-cta input, .tmodal.ready .tm-cta input { display: none; }
.tm-cta input::placeholder { color: #6a7677; }
.tm-cta button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 9px; border: 0;
  font-family: inherit; font-size: 15px; font-weight: 700; padding: 0 18px;
  background: #fff; color: #000; cursor: pointer; }
.tmodal.code .tm-cta button, .tmodal.eligibility .tm-cta button, .tmodal.confirm .tm-cta button, .tmodal.ready .tm-cta button { background: #8bf0fb; }
.tmodal.eligibility .tm-cta button, .tmodal.confirm .tm-cta button, .tmodal.ready .tm-cta button { flex: 1; justify-content: center; }
.tm-cta button:disabled { opacity: 0.65; cursor: default; }
.tm-status { margin-top: 10px; min-height: 16px; font-size: 11.5px; line-height: 1.5; color: #7ba4a6; }
.tm-status.err { color: rgba(255,120,120,0.95); }
.tm-links { display: none; justify-content: space-between; margin-top: 8px; }
.tmodal.code .tm-links, .tmodal.eligibility .tm-links, .tmodal.confirm .tm-links, .tmodal.ready .tm-links { display: flex; }
.tmodal.eligibility #tmResend, .tmodal.confirm #tmResend, .tmodal.ready #tmResend { display: none; }
.tm-links button { background: transparent; border: 0; padding: 0; font-family: inherit;
  font-size: 11.5px; color: #6a7677; cursor: pointer; }
.tm-links button:disabled, .tm-card:disabled, .tm-bar:disabled { opacity: 0.55; cursor: default; }
.tm-x:focus-visible, .tm-bar:focus-visible, .tm-card:focus-visible, .tm-cta input:focus-visible,
.tm-cta button:focus-visible, .tm-links button:focus-visible, .trialbar .tb-go:focus-visible {
  outline: 2px solid #8bf0fb; outline-offset: 2px; }
.tm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .tm-fill { transition: none !important; }
}