/* ============================================================
   Alfcode /start — "watch it take shape"
   Immersive two-pane page: conversational form on the left,
   a live device (MacBook / iPhone) on the right where a concept
   UI generates itself from the answers. Four premium mock themes,
   three layout families, seamless morphs everywhere.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #07080d;
  --bg-2: #0b0d15;
  --ink: #f2f4f9;
  --ink-dim: rgba(242, 244, 249, 0.62);
  --ink-mute: rgba(242, 244, 249, 0.38);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --gold: #e6c552;
  --blue: #5b8cf0;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --display: 'Space Grotesk', 'Inter', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html, body { height: 100%; }
body {
  font-family: var(--sans);
  background:
    radial-gradient(90% 70% at 85% 10%, rgba(91, 140, 240, 0.09), transparent 60%),
    radial-gradient(70% 60% at 10% 95%, rgba(230, 197, 82, 0.05), transparent 60%),
    var(--bg);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- home link ---------- */
.st-home {
  position: fixed; top: 22px; left: 26px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: 16px;
  color: var(--ink); text-decoration: none;
  opacity: 0.85; transition: opacity .25s;
}
.st-home:hover { opacity: 1; }
.st-home .tld { color: var(--ink-mute); font-weight: 400; }
.st-home svg { width: 16px; height: 16px; opacity: 0.6; }

/* ---------- stage ---------- */
.st-stage {
  display: grid;
  grid-template-columns: minmax(420px, 44%) 1fr;
  height: 100dvh;
}

/* ══════════ LEFT: form ══════════ */
.st-form {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 6vw, 96px);
  overflow: hidden;
}
.st-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--line);
}
.st-progress-bar {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--blue));
  transition: width .7s var(--ease);
}

.st-step {
  position: absolute;
  left: clamp(28px, 6vw, 96px); right: clamp(28px, 6vw, 96px);
  opacity: 0; transform: translateY(26px);
  pointer-events: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.st-step.is-active {
  opacity: 1; transform: none;
  pointer-events: auto;
  transition-delay: .18s;
}
.st-step.is-left { transform: translateY(-26px); }

.st-eyebrow {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 16px;
}
.st-q {
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
  margin-bottom: 14px;
}
.st-hint { color: var(--ink-dim); font-size: 15px; line-height: 1.6; margin-bottom: 28px; max-width: 44ch; }

.st-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  color: var(--ink);
  font-family: var(--sans); font-size: 17px;
  padding: 16px 18px;
  outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.st-input::placeholder { color: var(--ink-mute); }
.st-input:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 4px rgba(230, 197, 82, 0.12);
}
.st-fields { display: grid; gap: 12px; max-width: 430px; }

.st-chips { display: flex; flex-wrap: wrap; gap: 10px; max-width: 480px; }
.st-chip {
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 13px 20px;
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .25s var(--ease), box-shadow .25s;
}
.st-chip:hover { border-color: var(--gold); transform: translateY(-2px); }
.st-chip.is-on {
  border-color: var(--gold);
  background: rgba(230, 197, 82, 0.14);
  box-shadow: 0 0 0 4px rgba(230, 197, 82, 0.08);
}

.st-actions { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.st-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  color: #0a0b10;
  background: linear-gradient(120deg, #f1d268, var(--gold));
  border: none; border-radius: 999px;
  padding: 14px 26px;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s;
  box-shadow: 0 10px 26px rgba(230, 197, 82, 0.22);
}
.st-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(230, 197, 82, 0.3); }
.st-btn svg { width: 17px; height: 17px; }
.st-btn[disabled] { opacity: 0.6; pointer-events: none; }
.st-kbd { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
.st-kbd b { color: var(--ink-dim); font-weight: 500; }

.st-error { color: #ff8f8f; font-size: 14px; margin-top: 14px; }
.st-input.is-invalid { border-color: rgba(255, 143, 143, 0.75); box-shadow: 0 0 0 4px rgba(255, 143, 143, 0.1); }

.st-back {
  position: absolute; bottom: clamp(20px, 4vh, 40px); left: clamp(28px, 6vw, 96px);
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 13px;
  color: var(--ink-mute);
  transition: color .25s;
}
.st-back[hidden] { display: none; }
.st-back:hover { color: var(--ink); }
.st-back svg { width: 14px; height: 14px; }

/* ══════════ RIGHT: device stage ══════════ */
.st-device {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--line);
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 64px 64px,
    radial-gradient(70% 60% at 50% 40%, rgba(91, 140, 240, 0.07), transparent 70%),
    var(--bg-2);
  overflow: hidden;
}
.st-device::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(85% 75% at 50% 50%, transparent 55%, var(--bg-2) 100%);
}

.st-console {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  font-family: var(--mono); font-size: 12.5px;
  color: var(--ink-dim);
  background: rgba(7, 8, 13, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  max-width: 86%;
  overflow: hidden; text-overflow: ellipsis;
}
.st-console .cursor {
  display: inline-block; width: 7px; height: 13px;
  background: var(--gold);
  vertical-align: -2px; margin-left: 3px;
  animation: st-blink 1s steps(1) infinite;
}
@keyframes st-blink { 50% { opacity: 0; } }

/* ---------- MacBook: aluminum shell, glass, full-width deck ---------- */
.st-mac {
  position: relative; z-index: 2;
  width: min(78%, 880px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.st-mac.is-out { opacity: 0; transform: scale(0.92) translateY(20px); pointer-events: none; }
.st-mac-screen {
  position: relative;
  background: linear-gradient(180deg, #10131b 0%, #0a0c12 100%);
  border: 1px solid #3a3f4b;
  border-bottom-color: #23262e;
  border-radius: 16px 16px 0 0;
  padding: 18px 12px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 60px 120px -24px rgba(0, 0, 0, 0.65),
    0 24px 48px -24px rgba(0, 0, 0, 0.55);
}
/* glass reflection sweeping across the display */
.st-mac-screen::after {
  content: ''; position: absolute; inset: 18px 12px 14px; pointer-events: none;
  border-radius: 8px;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.02) 26%, transparent 42%);
  z-index: 6;
}
.st-mac-cam {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #39414f, #12141a 65%);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.05);
}
/* aluminum deck: wider than the lid, thumb scoop in the middle */
.st-mac-base {
  position: relative;
  margin: 0 -3.5%; width: 107%; height: 15px;
  background: linear-gradient(180deg, #8a8f99 0%, #565b66 8%, #3a3e48 55%, #23262d 100%);
  border-radius: 2px 2px 18px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 18px 32px -8px rgba(0, 0, 0, 0.55);
}
.st-mac-base::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 13%; height: 7px;
  background: linear-gradient(180deg, #1c1f26, #383c46);
  border-radius: 0 0 10px 10px;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.18);
}
/* soft ground shadow */
.st-mac::after {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: -26px; height: 30px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(0, 0, 0, 0.45), transparent 70%);
  filter: blur(6px);
  z-index: -1;
}

/* ---------- iPhone: titanium frame, glass, side buttons ---------- */
.st-phone {
  position: relative; z-index: 2;
  width: min(46vw, 300px);
  border-radius: 46px;
  background: #05070c;
  padding: 10px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.06),
    0 60px 110px -20px rgba(0, 0, 0, 0.7),
    0 24px 48px -20px rgba(0, 0, 0, 0.5);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
/* titanium rim */
.st-phone::before {
  content: ''; position: absolute; inset: -3px; z-index: -1;
  border-radius: 49px;
  background: linear-gradient(155deg, #6a6f79 0%, #2c2f37 18%, #191b21 38%, #40444e 62%, #14161b 82%, #565b64 100%);
}
/* glass sheen over the screen */
.st-phone > .mock::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 8;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 24%, transparent 40%);
}
.st-phone > .mock { position: relative; border-radius: 36px; }
/* side buttons */
.ph-btn {
  position: absolute; z-index: -1;
  width: 3.5px; border-radius: 2px;
  background: linear-gradient(90deg, #565b64, #23262d);
}
.ph-btn.vol-up { left: -5.5px; top: 22%; height: 7%; }
.ph-btn.vol-dn { left: -5.5px; top: 31%; height: 7%; }
.ph-btn.pwr { right: -5.5px; top: 25%; height: 11%; background: linear-gradient(270deg, #565b64, #23262d); }
.st-phone.is-out { opacity: 0; transform: scale(0.92) translateY(24px); pointer-events: none; }
.st-phone-island {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 24px; border-radius: 999px;
  background: #05070b; z-index: 6;
}
.st-phone .mock-canvas.mob { border-radius: 36px; }

/* dual mode: phone rides the mac's corner */
.st-device.duo .st-phone {
  position: absolute; right: 8%; bottom: 7%;
  width: min(21vw, 190px);
  padding: 6px; border-radius: 30px;
}
.st-device.duo .st-phone::before { inset: -2px; border-radius: 32px; }
.st-device.duo .st-phone > .mock { border-radius: 24px; }
.st-device.duo .ph-btn { width: 2.5px; }
.st-device.duo .ph-btn.vol-up, .st-device.duo .ph-btn.vol-dn { left: -4px; }
.st-device.duo .ph-btn.pwr { right: -4px; }
.st-device.duo .st-phone .st-phone-island { top: 13px; width: 54px; height: 15px; }
.st-device.duo .st-phone .mock-canvas.mob { border-radius: 24px; }

/* ============================================================
   THE MOCK — theme system
   Every mock element paints from these vars; switching data-theme
   transitions the whole concept like a repaint wave.
   ============================================================ */
.mock { --t: 0.55s; }
.mock-canvas, .mock-canvas * { transition: background-color var(--t), color var(--t), border-color var(--t), box-shadow var(--t); }

/* theme: blueprint (initial) — a deliberate "sketch mode" before a vibe is picked */
.mock[data-theme="blueprint"] {
  --m-bg: #0e1220; --m-surface: #131a2e; --m-ink: #b9c6e8; --m-ink2: #5f6f99;
  --m-accent: #5b8cf0; --m-on-accent: #071021; --m-line: rgba(122, 152, 220, 0.28);
  --m-radius: 10px; --m-btn-radius: 8px; --m-font: var(--display); --m-shadow: none;
}
.mock[data-theme="blueprint"] .mock-canvas::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(122, 152, 220, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 152, 220, 0.07) 1px, transparent 1px);
  background-size: 8cqw 8cqw;
}
/* theme: clean & minimal */
.mock[data-theme="minimal"] {
  --m-bg: #fbfbf8; --m-surface: #ffffff; --m-ink: #171a21; --m-ink2: #7d838f;
  --m-accent: #4f6df5; --m-on-accent: #ffffff; --m-line: rgba(23, 26, 33, 0.1);
  --m-radius: 12px; --m-btn-radius: 10px;
  --m-font: 'Sora', var(--sans);
  --m-shadow: 0 6px 22px rgba(23, 26, 33, 0.06);
}
/* theme: bold & dark */
.mock[data-theme="bold"] {
  --m-bg: #0a0c14; --m-surface: #121623; --m-ink: #f1f4fb; --m-ink2: #8d96ad;
  --m-accent: #6a8dff; --m-on-accent: #070a12; --m-line: rgba(255, 255, 255, 0.1);
  --m-radius: 14px; --m-btn-radius: 12px;
  --m-font: 'Archivo', var(--display);
  --m-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}
/* theme: warm & friendly */
.mock[data-theme="warm"] {
  --m-bg: #fdf7ef; --m-surface: #ffffff; --m-ink: #392f28; --m-ink2: #a08d7d;
  --m-accent: #e8863c; --m-on-accent: #fff8f2; --m-line: rgba(57, 47, 40, 0.12);
  --m-radius: 18px; --m-btn-radius: 999px;
  --m-font: 'Fraunces', var(--serif);
  --m-shadow: 0 10px 26px rgba(190, 140, 90, 0.14);
}
/* theme: premium & serious */
.mock[data-theme="premium"] {
  --m-bg: #101014; --m-surface: #17171c; --m-ink: #ece9e2; --m-ink2: #8e8a80;
  --m-accent: #d9b45b; --m-on-accent: #14120b; --m-line: rgba(236, 233, 226, 0.12);
  --m-radius: 6px; --m-btn-radius: 3px;
  --m-font: 'Playfair Display', var(--serif);
  --m-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}

/* browser chrome */
.mock-browser {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px 10px;
}
.mock-browser .dot { width: 9px; height: 9px; border-radius: 50%; }
.mock-browser .dot.r { background: #ff5f57; } .mock-browser .dot.y { background: #febc2e; } .mock-browser .dot.g { background: #28c840; }
.mock-url {
  margin-left: 12px; flex: 1; text-align: center;
  font-family: var(--mono); font-size: 10.5px;
  color: #7d879d;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  padding: 4px 10px;
  max-width: 55%;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* canvas */
.mock-canvas {
  position: relative;
  color: var(--m-ink);
  font-family: var(--m-font);
  background: var(--m-bg);
  border-radius: 8px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  container-type: size;
}
.mock-canvas.mob { aspect-ratio: 9 / 19.2; }

/* splash */
.mock-splash {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--m-bg);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.mock-splash.is-gone { opacity: 0; transform: scale(1.04); pointer-events: none; }
.mock-logo {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--m-accent); color: var(--m-on-accent);
  font-family: var(--display); font-weight: 700; font-size: 24px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--m-accent) 40%, transparent);
}
.mock-wordmark {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(18px, 3.2cqw, 30px);
  color: var(--m-ink); letter-spacing: -0.02em;
  max-width: 86%; text-align: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.mock-tagline { font-family: var(--mono); font-size: 11px; color: var(--m-ink2); }

/* ---------- generated UI primitives ----------
   Everything the generator adds is a .g element. It enters in
   blueprint state (dashed outline) then "paints" (.is-built). */
.g {
  opacity: 0; transform: translateY(10px);
  border: 1.5px dashed var(--m-line);
  background: transparent;
  border-radius: var(--m-radius);
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              background-color .5s, border-color .5s, box-shadow .5s, color .5s;
}
.g.is-in { opacity: 1; transform: none; }
.g.is-built { border-style: solid; border-color: transparent; }

.mock-app {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 3cqw 3cqw 2.6cqw;
  gap: 2cqw;
  font-family: var(--m-font);
  color: var(--m-ink);
}
.mock-app.has-side { display: grid; grid-template-columns: 21cqw minmax(0, 1fr); grid-template-rows: auto 1fr; }

/* nav bar */
.g-nav {
  display: flex; align-items: center; gap: 2.6cqw; min-width: 0;
  padding: 2.2cqw 3cqw;
  min-height: 8cqh;
}
.g-nav.is-built { background: var(--m-surface); box-shadow: var(--m-shadow); }
.g-nav .brand {
  display: flex; align-items: center; gap: 1.6cqw;
  font-family: var(--display); font-weight: 700; font-size: 3.2cqw;
  letter-spacing: -0.02em;
  white-space: nowrap; max-width: 34cqw;
}
.g-nav .brand b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-nav .brand i {
  width: 4.6cqw; height: 4.6cqw; border-radius: 30%;
  background: var(--m-accent); flex: none;
}
.g-nav .cta {
  padding: 1.4cqw 3cqw; border-radius: var(--m-btn-radius, 999px);
  background: var(--m-accent); color: var(--m-on-accent);
  font-size: 2cqw; font-weight: 600; font-family: var(--sans);
  white-space: nowrap;
}

/* hero (consumer) */
.g-hero { padding: 2.6cqw 5cqw 0; text-align: left; flex: none; }
.g-hero.is-built { background: transparent; border-color: transparent; }
.g-hero h1 {
  font-family: var(--m-font);
  font-size: 5.1cqw; line-height: 1.06; letter-spacing: -0.03em;
  max-width: 62cqw;
  overflow-wrap: anywhere;
}
.g-hero h1 em { color: var(--m-accent); font-style: normal; }
.mock[data-theme="premium"] .g-hero h1 em, .mock[data-theme="warm"] .g-hero h1 em { font-style: italic; }
.g-hero p { margin-top: 1.8cqw; font-family: var(--sans); font-size: 2.3cqw; color: var(--m-ink2); max-width: 46cqw; line-height: 1.5; }
.g-hero .sub {
  margin-top: 1.6cqw;
  font-family: var(--sans); font-size: 2.1cqw; line-height: 1.5;
  color: var(--m-ink2); max-width: 48cqw;
}
.g-hero .proof {
  margin-top: 1.4cqw;
  font-family: var(--mono); font-size: 1.5cqw; letter-spacing: 0.04em;
  color: var(--m-ink2); opacity: 0.85;
}
.g-hero .row { display: flex; gap: 2cqw; margin-top: 2.4cqw; }
.g-hero .btn {
  padding: 1.8cqw 3.6cqw; border-radius: var(--m-btn-radius, 999px);
  background: var(--m-accent); color: var(--m-on-accent);
  font-family: var(--sans); font-size: 2.1cqw; font-weight: 600;
}
.g-hero .btn.ghost { background: transparent; color: var(--m-ink); border: 1px solid var(--m-line); }

/* cards row — a composed pricing trio; flexes to fill what's left of the canvas */
.g-cards { display: flex; gap: 2.6cqw; padding: 0 5cqw; flex: 1; min-height: 8.6cqw; align-items: stretch; }
.g-card {
  position: relative;
  flex: 1; padding: 1.2cqw 1.8cqw; min-height: 7.4cqw;
  border-radius: var(--m-radius);
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1.2cqw;
  min-height: 0; overflow: hidden;
}
.g-card.is-built { background: var(--m-surface); box-shadow: var(--m-shadow); }
.g-card.hot.is-built { border: 1px solid color-mix(in srgb, var(--m-accent) 55%, transparent); }
.g-card .meta { min-width: 0; }
.g-card .plan { font-family: var(--sans); font-size: 1.3cqw; font-weight: 600; color: var(--m-ink2); text-transform: uppercase; letter-spacing: 0.08em; }
.g-card .price { font-family: var(--m-font); font-size: 2.9cqw; letter-spacing: -0.02em; color: var(--m-ink); white-space: nowrap; }
.g-card .price span { font-family: var(--sans); font-size: 1.3cqw; color: var(--m-ink2); margin-left: 0.4cqw; }
.g-card .pick {
  flex: none;
  padding: 0.9cqw 1.9cqw; border-radius: var(--m-btn-radius, 999px);
  font-family: var(--sans); font-size: 1.4cqw; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--m-accent) 18%, transparent); color: var(--m-accent);
}
.g-card.hot .pick { background: var(--m-accent); color: var(--m-on-accent); }

/* sidebar (business) */
.g-side {
  grid-row: 1 / 3;
  display: flex; flex-direction: column; gap: 2cqw;
  padding: 3cqw 2.4cqw;
}
.g-side.is-built { background: var(--m-surface); box-shadow: var(--m-shadow); }
.g-side .side-brand {
  display: flex; align-items: center; gap: 1.4cqw;
  padding: 0.6cqw 1.6cqw 1.8cqw;
  font-family: var(--display); font-weight: 700; font-size: 1.9cqw;
  white-space: nowrap; overflow: hidden;
}
.g-side .side-brand i { width: 2.8cqw; height: 2.8cqw; border-radius: 30%; background: var(--m-accent); flex: none; }
.g-side .side-brand b { overflow: hidden; text-overflow: ellipsis; }
.g-side .item { display: flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw 1.6cqw; border-radius: 8px; }
.g-side .item i { width: 2.4cqw; height: 2.4cqw; border-radius: 30%; background: var(--m-ink2); opacity: 0.5; flex: none; }
.g-side .item .lbl {
  font-family: var(--sans); font-size: 1.6cqw; color: var(--m-ink2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-side .item.on { background: color-mix(in srgb, var(--m-accent) 16%, transparent); }
.g-side .item.on i { background: var(--m-accent); opacity: 0.9; }
.g-side .item.on .lbl { color: var(--m-accent); font-weight: 600; }

/* stat tiles */
.g-stats { display: flex; gap: 2.6cqw; }
.g-stat { flex: 1; min-width: 0; padding: 2.6cqw; border-radius: var(--m-radius); }
.g-stat b, .g-stat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-stat.is-built { background: var(--m-surface); box-shadow: var(--m-shadow); }
.g-stat b { display: block; font-family: var(--display); font-size: 3.6cqw; letter-spacing: -0.02em; }
.g-stat span { display: block; margin-top: 0.8cqw; font-family: var(--mono); font-size: 1.5cqw; color: var(--m-ink2); text-transform: uppercase; letter-spacing: 0.08em; }
.g-stat .up { color: #34d399; font-size: 1.7cqw; font-family: var(--mono); }

/* chart */
.g-chart { padding: 2.6cqw; border-radius: var(--m-radius); flex: 1; display: flex; flex-direction: column; }
.g-chart.is-built { background: var(--m-surface); box-shadow: var(--m-shadow); }
.g-chart .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2cqw; }
.g-chart .head b { font-family: var(--sans); font-size: 1.9cqw; font-weight: 600; color: var(--m-ink); }
.g-chart .head i { font-family: var(--mono); font-style: normal; font-size: 1.3cqw; color: var(--m-ink2); }
.g-chart .bars { flex: 1; display: flex; align-items: flex-end; gap: 1.6cqw; }
.g-chart .bar {
  flex: 1; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--m-accent), color-mix(in srgb, var(--m-accent) 30%, var(--m-bg)));
  height: 0%;
  transition: height .8s var(--ease);
}

/* table rows (internal/admin) */
.g-table { padding: 2.4cqw; border-radius: var(--m-radius); display: flex; flex-direction: column; gap: 1.6cqw; }
.g-table.is-built { background: var(--m-surface); box-shadow: var(--m-shadow); }
.g-row { display: flex; align-items: center; gap: 1.8cqw; padding: 1.2cqw 1.6cqw; border-radius: 8px; background: color-mix(in srgb, var(--m-ink) 4%, transparent); }
.g-row i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--m-accent); opacity: 0.75; flex: none; }
.g-row .a {
  flex: 2; min-width: 0;
  font-family: var(--sans); font-size: 1.6cqw; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-row .b {
  flex: none;
  font-family: var(--mono); font-size: 1.3cqw; color: var(--m-ink2);
  white-space: nowrap;
}
.g-row .tag { padding: 0.6cqw 1.6cqw; border-radius: 999px; background: color-mix(in srgb, var(--m-accent) 20%, transparent); color: var(--m-accent); font-family: var(--mono); font-size: 1.4cqw; }

/* kanban (internal) */
.g-board { display: flex; gap: 2.6cqw; flex: 1; }
.g-col { flex: 1; padding: 2cqw; border-radius: var(--m-radius); display: flex; flex-direction: column; gap: 1.6cqw; }
.g-col.is-built { background: var(--m-surface); box-shadow: var(--m-shadow); }
.g-col .col-head { display: flex; align-items: center; gap: 1.2cqw; margin-bottom: 0.6cqw; }
.g-col .col-head i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--m-accent); flex: none; }
.g-col .col-head b {
  font-family: var(--sans); font-size: 1.5cqw; font-weight: 600;
  color: var(--m-ink2); text-transform: uppercase; letter-spacing: 0.07em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-col .card { padding: 1.6cqw 1.8cqw; border-radius: 8px; background: color-mix(in srgb, var(--m-ink) 5%, transparent); }
.g-col .card .a {
  display: block;
  font-family: var(--sans); font-size: 1.55cqw; color: var(--m-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 0.8cqw;
}
.g-col .card .b {
  display: inline-block;
  font-family: var(--mono); font-size: 1.25cqw; color: var(--m-accent);
  background: color-mix(in srgb, var(--m-accent) 14%, transparent);
  border-radius: 999px; padding: 0.35cqw 1.2cqw;
}

/* feature widgets */
.g-float {
  position: absolute; z-index: 4;
  padding: 2cqw 2.4cqw;
  border-radius: var(--m-radius);
  font-family: var(--sans);
}
.g-float.is-built {
  background: color-mix(in srgb, var(--m-surface) 88%, var(--m-ink) 9%);
  box-shadow: var(--m-shadow), 0 0 0 1px var(--m-line);
  border-color: var(--m-line); border-style: solid;
}
.g-float .fw-head { display: flex; align-items: center; gap: 1.4cqw; font-size: 1.8cqw; font-weight: 600; }
.g-float .fw-head i { width: 3cqw; height: 3cqw; border-radius: 30%; background: color-mix(in srgb, var(--m-accent) 24%, transparent); display: grid; place-items: center; font-size: 1.7cqw; }
.g-float .fw-line { margin-top: 1.2cqw; width: 22cqw; height: 1.4cqw; border-radius: 999px; background: var(--m-ink2); opacity: 0.5; }
.g-float .fw-line.s { width: 15cqw; }
.g-float .fw-btn { margin-top: 1.6cqw; display: inline-block; padding: 1cqw 2.4cqw; border-radius: 999px; background: var(--m-accent); color: var(--m-on-accent); font-size: 1.6cqw; font-weight: 600; }

/* charts hosted inside a float have no flex height — give them one */
.g-float .g-chart { min-height: 15cqw; }
.g-float .g-chart .bars { height: 9cqw; flex: none; }
.mock-canvas.mob .g-float .g-chart { min-height: 26cqw; }
.mock-canvas.mob .g-float .g-chart .bars { height: 16cqw; flex: none; }

/* chat bubbles widget */
.g-chat .bubble { max-width: 26cqw; padding: 1.4cqw 2cqw; border-radius: 12px; font-size: 1.7cqw; line-height: 1.4; margin-top: 1.2cqw; }
.g-chat .bubble.them { background: color-mix(in srgb, var(--m-ink) 7%, transparent); color: var(--m-ink); border-bottom-left-radius: 4px; }
.g-chat .bubble.me { background: var(--m-accent); color: var(--m-on-accent); border-bottom-right-radius: 4px; margin-left: auto; }

/* AI sparkle */
.g-ai .fw-head i { background: linear-gradient(120deg, color-mix(in srgb, var(--m-accent) 40%, transparent), transparent); }
.g-ai .typing { display: inline-flex; gap: 0.6cqw; margin-top: 1.4cqw; }
.g-ai .typing i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--m-ink2); animation: st-typing 1.2s infinite; }
.g-ai .typing i:nth-child(2) { animation-delay: 0.15s; }
.g-ai .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes st-typing { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-40%); opacity: 1; } }

/* mobile mock layout */
.mock-canvas.mob .mock-app { padding: 12cqw 5cqw 4cqw; gap: 3.5cqw; }
.mock-canvas.mob .g-hero h1 { font-size: 7.6cqw; max-width: 100%; }
.mock-canvas.mob .g-hero { padding: 2cqw 1cqw 0; }
.mock-canvas.mob .g-hero .sub { font-size: 3.4cqw; max-width: 100%; }
.mock-canvas.mob .g-hero .proof { font-size: 2.6cqw; }
.mock-canvas.mob .g-hero .btn { font-size: 3.2cqw; padding: 2.8cqw 5.4cqw; }
.mock-canvas.mob .g-cards { flex-direction: column; padding: 0; gap: 2.6cqw; }
.mock-canvas.mob .g-card { padding: 2.6cqw 4cqw; }
.mock-canvas.mob .g-card .plan { font-size: 2.6cqw; }
.mock-canvas.mob .g-card .price { font-size: 5cqw; }
.mock-canvas.mob .g-card .price span { font-size: 2.6cqw; }
.mock-canvas.mob .g-card .pick { font-size: 2.9cqw; padding: 1.6cqw 4.2cqw; }
.mock-canvas.mob .g-stats { flex-wrap: wrap; }
.mock-canvas.mob .g-stat { min-width: 40%; }
.mock-canvas.mob .g-stat b { font-size: 6cqw; }
.mock-canvas.mob .g-stat span { font-size: 2.6cqw; }
.mock-canvas.mob .g-nav { min-height: 6cqh; padding: 3cqw 4cqw; }
.mock-canvas.mob .g-nav .brand { font-size: 4.6cqw; max-width: 55cqw; }
.mock-canvas.mob .g-nav .brand i { width: 6.4cqw; height: 6.4cqw; }
.mock-canvas.mob .g-nav .links { display: none; }
.mock-canvas.mob .g-nav .cta { font-size: 3cqw; padding: 2cqw 4cqw; }
.mock-canvas.mob .g-chart .bars { min-height: 20cqw; }
.mock-canvas.mob .g-chart .head span { width: 26cqw; height: 2.6cqw; }
.mock-canvas.mob .g-chart .head i { width: 12cqw; height: 2.6cqw; }
.mock-canvas.mob .g-row i { width: 4.2cqw; height: 4.2cqw; }
.mock-canvas.mob .g-row .a { font-size: 3cqw; }
.mock-canvas.mob .g-row .b { font-size: 2.4cqw; }
.mock-canvas.mob .g-row .tag { font-size: 2.6cqw; padding: 1cqw 2.6cqw; }
.mock-canvas.mob .g-chart .head b { font-size: 3.4cqw; }
.mock-canvas.mob .g-chart .head i { font-size: 2.4cqw; }
.mock-canvas.mob .g-float .fw-head { font-size: 3.4cqw; }
.mock-canvas.mob .g-float .fw-head i { width: 5.4cqw; height: 5.4cqw; font-size: 3cqw; }
.mock-canvas.mob .g-float .fw-line { width: 38cqw; height: 2.4cqw; }
.mock-canvas.mob .g-float .fw-line.s { width: 26cqw; }
.mock-canvas.mob .g-float .fw-btn { font-size: 3cqw; padding: 1.8cqw 4cqw; }
.mock-canvas.mob .g-chat .bubble { max-width: 56cqw; font-size: 3.2cqw; padding: 2.4cqw 3.4cqw; }
.mock-canvas.mob .g-side { display: none; }
.mock-canvas.mob .mock-app.has-side { display: flex; }

/* tab bar (mobile) */
.g-tabbar {
  margin-top: auto;
  display: flex; justify-content: space-around; align-items: center;
  padding: 2.6cqw 2cqw calc(2.6cqw + 6px);
  border-radius: 999px;
}
.g-tabbar.is-built { background: var(--m-surface); box-shadow: var(--m-shadow); }
.g-tabbar i { width: 5cqw; height: 5cqw; border-radius: 30%; background: var(--m-ink2); opacity: 0.5; }
.g-tabbar i.on { background: var(--m-accent); opacity: 1; }

/* ============================================================
   Native mobile feature components — on the phone, features sit
   IN the app: list rows, an inline chart, a booking card, a chat
   FAB above the tab bar, an AI composer docked onto it, and a
   push-style toast under the island. No floating chips.
   ============================================================ */
.g-mrow {
  display: flex; align-items: center; gap: 2.6cqw;
  padding: 2.8cqw 3.4cqw; border-radius: var(--m-radius);
  flex: none;
}
.g-mrow.is-built { background: var(--m-surface); box-shadow: var(--m-shadow); }
.g-mrow > i {
  width: 7cqw; height: 7cqw; border-radius: 30%;
  background: color-mix(in srgb, var(--m-accent) 18%, transparent);
  display: grid; place-items: center; font-size: 3.4cqw; font-style: normal; flex: none;
}
.g-mrow .mtxt { flex: 1; min-width: 0; }
.g-mrow .mtxt b {
  display: block; font-family: var(--sans); font-size: 3.1cqw; font-weight: 600;
  color: var(--m-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-mrow .mtxt span {
  display: block; font-family: var(--sans); font-size: 2.4cqw; color: var(--m-ink2);
  margin-top: 0.4cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-mrow .mbtn {
  flex: none; font-family: var(--sans); font-size: 2.7cqw; font-weight: 600;
  padding: 1.8cqw 4cqw; border-radius: var(--m-btn-radius, 999px);
  background: var(--m-accent); color: var(--m-on-accent);
}
.g-mrow .mbtn.ghost { background: color-mix(in srgb, var(--m-accent) 16%, transparent); color: var(--m-accent); }

.g-mchart { padding: 3cqw 3.4cqw; border-radius: var(--m-radius); flex: none; }
.g-mchart.is-built { background: var(--m-surface); box-shadow: var(--m-shadow); }
.g-mchart .g-chart { padding: 0; background: transparent; box-shadow: none; border: none; border-radius: 0; }
.g-mchart .g-chart .bars { height: 15cqw; flex: none; min-height: 0; }

.g-mbook { padding: 3cqw 3.4cqw; border-radius: var(--m-radius); flex: none; }
.g-mbook.is-built { background: var(--m-surface); box-shadow: var(--m-shadow); }
.g-mbook > b {
  display: block; font-family: var(--sans); font-size: 3.1cqw; font-weight: 600;
  color: var(--m-ink); margin-bottom: 2cqw;
}
.g-mbook .times { display: flex; gap: 2cqw; }
.g-mbook .times span {
  flex: 1; text-align: center;
  font-family: var(--mono); font-size: 2.4cqw; color: var(--m-ink2);
  border: 1px solid var(--m-line); border-radius: 8px; padding: 1.8cqw 0;
  white-space: nowrap;
}
.g-mbook .times span.on { background: var(--m-accent); color: var(--m-on-accent); border-color: transparent; font-weight: 600; }

.g-mfab {
  position: absolute; right: 5cqw; bottom: 18cqw; z-index: 6;
  width: 11cqw; height: 11cqw; border-radius: 50%;
  display: grid; place-items: center; font-size: 4.6cqw;
}
.g-mfab.is-built {
  background: var(--m-accent);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--m-accent) 45%, transparent);
  border-color: transparent;
}
.g-mfab i { font-style: normal; }
.g-mfab em {
  position: absolute; top: 0.4cqw; right: 0.4cqw;
  width: 2.8cqw; height: 2.8cqw; border-radius: 50%;
  background: #ff5c5c; border: 0.5cqw solid var(--m-bg);
}

.g-mask {
  display: flex; align-items: center; gap: 2.4cqw;
  padding: 2.6cqw 3.4cqw; border-radius: 999px; flex: none;
}
.g-mask.is-built { background: var(--m-surface); box-shadow: var(--m-shadow); border: 1px solid var(--m-line); }
.g-mask i { font-style: normal; color: var(--m-accent); font-size: 3.2cqw; flex: none; }
.g-mask span {
  flex: 1; font-family: var(--sans); font-size: 2.8cqw; color: var(--m-ink2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-mask b {
  flex: none; width: 6.4cqw; height: 6.4cqw; border-radius: 50%;
  background: var(--m-accent); color: var(--m-on-accent);
  display: grid; place-items: center; font-size: 3cqw;
}

.g-mtoast {
  position: absolute; top: 9cqw; left: 3.4cqw; right: 3.4cqw; z-index: 7;
  display: flex; align-items: center; gap: 2.4cqw;
  padding: 2.6cqw 3.2cqw; border-radius: 4cqw;
}
.g-mtoast.is-built {
  background: color-mix(in srgb, var(--m-surface) 92%, var(--m-ink) 6%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--m-line);
  backdrop-filter: blur(6px);
}
.g-mtoast i { font-style: normal; font-size: 3.6cqw; flex: none; }
.g-mtoast .mtxt { flex: 1; min-width: 0; }
.g-mtoast .mtxt b { display: block; font-family: var(--sans); font-size: 2.7cqw; font-weight: 600; color: var(--m-ink); }
.g-mtoast .mtxt span {
  display: block; font-family: var(--sans); font-size: 2.4cqw; color: var(--m-ink2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-mtoast em { font-style: normal; font-family: var(--mono); font-size: 2.2cqw; color: var(--m-ink2); flex: none; }

/* roadmap strip (timeline) — floats along the canvas bottom */
.g-roadwrap {
  position: absolute; z-index: 3;
  left: 14cqw; right: 14cqw; bottom: 2cqh;
}
.mock-canvas.mob .g-roadwrap { left: 6cqw; right: 6cqw; bottom: 12cqh; }
.g-road { display: flex; align-items: center; gap: 1.6cqw; padding: 1.8cqw 2.4cqw; border-radius: 999px; font-family: var(--mono); font-size: 1.6cqw; color: var(--m-ink2); }
.g-road.is-built { background: var(--m-surface); box-shadow: var(--m-shadow); }
.g-road i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--m-accent); flex: none; }
.g-road .lane { flex: 1; height: 0.8cqw; border-radius: 999px; background: color-mix(in srgb, var(--m-accent) 30%, transparent); position: relative; overflow: hidden; }
.g-road .lane::after { content: ''; position: absolute; inset: 0; width: 45%; background: var(--m-accent); border-radius: inherit; }
.mock-canvas.mob .g-road { font-size: 3cqw; padding: 2.6cqw 3.6cqw; }
.mock-canvas.mob .g-road i { width: 2.6cqw; height: 2.6cqw; }

/* ============================================================
   Premium finish: icon sizing, real nav links, kicker badge,
   avatar-stack proof, plan notes — and a distinct layout DNA per
   theme so each vibe reads as a different real product.
   ============================================================ */
.ic { display: block; width: 100%; height: 100%; }
.g-nav .links a {
  font-family: var(--sans); font-size: 1.7cqw; font-weight: 500;
  color: var(--m-ink2); cursor: default;
}
.g-nav .links { display: flex; gap: 3cqw; margin-left: auto; align-items: center; }
.g-nav .nav-search {
  display: inline-flex; align-items: center; gap: 1.2cqw;
  font-family: var(--sans); font-size: 1.6cqw; color: var(--m-ink2);
  border: 1px solid var(--m-line); border-radius: 999px;
  padding: 1.1cqw 2.4cqw;
}
.g-nav .nav-search .ic { width: 1.8cqw; height: 1.8cqw; }
.g-nav .avatar, .g-nav .nav-ic {
  width: 4.4cqw; height: 4.4cqw; border-radius: 50%; flex: none;
  display: grid; place-items: center;
}
.g-nav .avatar {
  background: linear-gradient(135deg, color-mix(in srgb, var(--m-accent) 75%, #fff 10%), color-mix(in srgb, var(--m-accent) 45%, var(--m-bg)));
  color: var(--m-on-accent);
  font-family: var(--sans); font-size: 1.8cqw; font-weight: 700;
}
.g-nav .nav-ic { border: 1px solid var(--m-line); color: var(--m-ink2); }
.g-nav .nav-ic .ic { width: 2cqw; height: 2cqw; }
.g-nav.mob .avatar { width: 7cqw; height: 7cqw; font-size: 3cqw; margin-left: 0; }
.g-nav.mob .nav-ic { width: 7cqw; height: 7cqw; margin-left: auto; }
.g-nav.mob .nav-ic .ic { width: 3.4cqw; height: 3.4cqw; }

.g-hero .kicker {
  display: inline-flex; align-items: center; gap: 1.2cqw;
  font-family: var(--sans); font-size: 1.5cqw; font-weight: 600;
  color: var(--m-accent);
  background: color-mix(in srgb, var(--m-accent) 12%, transparent);
  border-radius: 999px;
  padding: 1cqw 2.2cqw;
  margin-bottom: 2cqw;
}
.g-hero .kicker .ic { width: 1.7cqw; height: 1.7cqw; }
.g-hero .kicker { margin-bottom: 1.6cqw; }
.mock-canvas.mob .g-hero .kicker { font-size: 2.7cqw; padding: 1.6cqw 3.4cqw; }
.mock-canvas.mob .g-hero .kicker .ic { width: 3cqw; height: 3cqw; }

.g-hero .proof {
  display: flex; align-items: center; gap: 1.6cqw;
  margin-top: 1.8cqw;
  font-family: var(--sans); font-size: 1.7cqw; color: var(--m-ink2);
}
.g-hero .proof b { color: var(--m-ink); font-weight: 600; }
.g-hero .avs { display: inline-flex; }
.g-hero .avs i {
  width: 3.4cqw; height: 3.4cqw; border-radius: 50%;
  border: 0.45cqw solid var(--m-bg);
  margin-right: -1.2cqw;
}
.g-hero .avs i:nth-child(1) { background: linear-gradient(135deg, #f0b429, #e8863c); }
.g-hero .avs i:nth-child(2) { background: linear-gradient(135deg, #5b8cf0, #7c5cff); }
.g-hero .avs i:nth-child(3) { background: linear-gradient(135deg, #34d399, #0ea5a0); }
.mock-canvas.mob .g-hero .proof { font-size: 3cqw; }
.mock-canvas.mob .g-hero .avs i { width: 5.6cqw; height: 5.6cqw; }

.g-card .note { display: none; }
.mock-canvas.mob .g-card .note { display: block; font-family: var(--sans); font-size: 2.5cqw; color: var(--m-ink2); margin-top: 0.5cqw; }

/* icon slots inherit accent tint */
.g-float .fw-head i .ic, .g-mrow > i .ic { width: 58%; height: 58%; color: var(--m-accent); }
.g-mask i { width: 5cqw; height: 5cqw; flex: none; display: grid; place-items: center; }
.g-mask i .ic { color: var(--m-accent); }
.g-mask b .ic { width: 58%; height: 58%; }
.g-mtoast i { width: 5.6cqw; height: 5.6cqw; flex: none; display: grid; place-items: center; color: var(--m-accent); }
.g-mfab i { width: 46%; height: 46%; display: grid; place-items: center; color: var(--m-on-accent); font-style: normal; }

/* chart: baseline grid for realism */
.g-chart .bars {
  background:
    linear-gradient(var(--m-line) 1px, transparent 1px) 0 0 / 100% 25%;
  background-position: 0 -1px;
}

/* ---------- theme DNA ---------- */
/* minimal — centered, airy, geometric */
.mock[data-theme="minimal"] .g-hero { text-align: center; }
.mock[data-theme="minimal"] .g-hero h1 { max-width: none; }
.mock[data-theme="minimal"] .g-hero .sub { margin-inline: auto; }
.mock[data-theme="minimal"] .g-hero .row, .mock[data-theme="minimal"] .g-hero .proof { justify-content: center; }
.mock[data-theme="minimal"] .g-hero .kicker { background: transparent; border: 1px solid var(--m-line); color: var(--m-ink2); }

/* bold — heavy type, gradient accent, uppercase energy */
.mock[data-theme="bold"] .g-hero h1 { font-weight: 800; letter-spacing: -0.02em; }
.mock[data-theme="bold"] .g-hero h1 em {
  background: linear-gradient(100deg, var(--m-accent), #b49aff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mock[data-theme="bold"] .g-hero .kicker { text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.3cqw; }
.mock[data-theme="bold"] .g-nav .brand { text-transform: uppercase; letter-spacing: 0.04em; }

/* warm — soft, rounded, sunlit blob behind the hero */
.mock[data-theme="warm"] .g-hero h1, .mock[data-theme="premium"] .g-hero h1 { font-size: 4.8cqw; }
.mock[data-theme="warm"] .mock-canvas::before,
.mock[data-theme="warm"].mock .mock-canvas::before {
  content: ''; position: absolute; pointer-events: none; z-index: 0;
  top: -12%; right: -8%; width: 55%; height: 65%;
  background: radial-gradient(closest-side, rgba(232, 134, 60, 0.16), transparent);
}
.mock[data-theme="warm"] .g-hero h1 { font-weight: 600; }
.mock[data-theme="warm"] .g-hero h1 em { font-style: italic; }

/* premium — editorial: hairlines, tracked caps, sharp corners */
.mock[data-theme="premium"] .g-hero { border-top: 1px solid var(--m-line); padding-top: 2.4cqw; }
.mock[data-theme="premium"] .g-hero .kicker {
  background: transparent; border: none; padding: 0;
  color: var(--m-accent);
  font-family: var(--sans); font-size: 1.3cqw; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em;
}
.mock[data-theme="premium"] .g-hero h1 { font-weight: 500; }
.mock[data-theme="premium"] .g-hero h1 em { font-style: italic; }
.mock[data-theme="premium"] .g-nav .brand { font-family: 'Playfair Display', var(--serif); font-weight: 600; letter-spacing: 0.02em; }
.mock[data-theme="premium"] .g-card .plan { letter-spacing: 0.14em; }

/* confetti burst at the end */
.st-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.st-confetti i {
  position: absolute; top: -4%;
  width: 8px; height: 13px; border-radius: 2px;
  animation: st-fall 2.8s ease-in forwards;
}
@keyframes st-fall {
  to { transform: translateY(115vh) rotate(660deg); opacity: 0; }
}

/* ============================================================
   Awwwards dressing: film grain, ghost numerals, step rail,
   serif italic accents, floating devices, live chip.
   ============================================================ */
::selection { background: rgba(230, 197, 82, 0.35); color: #fff; }

/* film grain over everything, very quiet */
body::after {
  content: ''; position: fixed; inset: -50%; pointer-events: none; z-index: 90;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: st-grain 9s steps(6) infinite;
}
@keyframes st-grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 2%); }
  40% { transform: translate(2%, -1%); }
  60% { transform: translate(-1%, -2%); }
  80% { transform: translate(1%, 1%); }
}

/* serif italic accent inside every question */
.st-q em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0;
}

/* huge ghost numeral behind each step */
.st-step::before {
  content: attr(data-num);
  position: absolute;
  top: -0.62em; right: -8px;
  font-family: var(--display);
  font-size: clamp(120px, 15vw, 210px);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(242, 244, 249, 0.07);
  pointer-events: none;
  z-index: -1;
}
.st-step[data-step="done"]::before { content: none; }

/* vertical step rail */
.st-rail {
  position: absolute; left: clamp(12px, 1.8vw, 28px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
  z-index: 5;
}
.st-rail span {
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--line-2);
  transition: background .4s, height .4s var(--ease);
}
.st-rail span.on { background: var(--gold); }
.st-rail span.on:last-of-type { height: 5px; }

/* devices breathe */
@keyframes st-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.st-mac:not(.is-out), .st-device:not(.duo) .st-phone:not(.is-out) { animation: st-float 7s ease-in-out infinite; }
.st-device.duo .st-phone:not(.is-out) { animation: st-float 7s ease-in-out 0.8s infinite; }

/* live chip on the stage */
.st-live {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.st-live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #34d399;
  animation: sc-live 2.4s infinite;
}
@keyframes sc-live {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); }
  70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .st-mac, .st-phone, .st-device.duo .st-phone { animation: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  body { overflow: auto; }
  .st-stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(380px, 52dvh); height: auto; min-height: 100dvh; }
  .st-form { order: 2; min-height: 52dvh; padding-top: 18px; padding-bottom: 56px; }
  .st-step { position: absolute; top: 10px; bottom: 46px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
  .st-device { order: 1; border-left: none; border-bottom: 1px solid var(--line); min-height: 52dvh; }
  .st-mac { width: min(92%, 620px); }
  .st-phone { width: min(52vw, 240px); }
  .st-device.duo .st-phone { right: 4%; bottom: 5%; width: min(24vw, 130px); }
  .st-console { top: 52px; left: 12px; right: 12px; transform: none; max-width: none; font-size: 11px; text-align: center; }
  .st-home { top: 14px; left: 16px; }
  .st-rail { display: none; }
  .st-step::before { content: none; }
  .st-live { display: none; }
  .st-device { padding-top: 88px; }
  .st-back { bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-step, .g, .mock-splash, .st-mac, .st-phone { transition: none !important; }
  .g-chart .bar { transition: none; }
  .st-confetti { display: none; }
}