/* ============ TWEAKABLE: VIBE ============ */
  /* Cosmic is default (already in tokens.css) */
  body[data-vibe="editorial"] {
    --bg-0: #f3efe6;
    --bg-1: #ebe5d6;
    --bg-2: #ddd5c2;
    --ink-0: #181612;
    --ink-1: #3a3631;
    --ink-2: #6b6558;
    --ink-3: #8f8979;
    --ink-4: #b3ad9c;
    --glass-1: rgba(24,22,18,0.04);
    --glass-2: rgba(24,22,18,0.07);
    --glass-3: rgba(24,22,18,0.11);
    --stroke-1: rgba(24,22,18,0.10);
    --stroke-2: rgba(24,22,18,0.18);
    --stroke-bright: rgba(24,22,18,0.30);
    --blue: oklch(0.42 0.12 256);
    --blue-bright: oklch(0.48 0.16 250);
    --violet: oklch(0.46 0.16 295);
    --cyan: oklch(0.55 0.14 205);
    --grad-primary: linear-gradient(135deg, #181612 0%, #44352b 60%, #6b4f3a 100%);
    --grad-soft: linear-gradient(135deg, rgba(24,22,18,0.08), rgba(68,53,43,0.08));
    --shadow-glow-blue: 0 0 0 1px rgba(24,22,18,0.4), 0 14px 60px -14px rgba(24,22,18,0.4);
  }
  body[data-vibe="editorial"] .page-bg {
    background:
      radial-gradient(1100px 700px at 18% -8%, rgba(220, 184, 130, 0.4), transparent 60%),
      radial-gradient(900px 700px at 92% 8%, rgba(160, 80, 60, 0.15), transparent 60%),
      linear-gradient(180deg, #f5f1e7 0%, #ece6d6 100%);
  }
  body[data-vibe="editorial"] .page-bg::before { background-image:
      linear-gradient(rgba(24,22,18,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(24,22,18,0.04) 1px, transparent 1px); }
  body[data-vibe="editorial"] .page-bg::after { opacity: 0; }
  body[data-vibe="editorial"] .text-grad {
    background: linear-gradient(180deg, #181612 0%, #5a4a3a 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  body[data-vibe="editorial"] .text-grad-blue {
    background: linear-gradient(135deg, #6b4f3a, #181612 50%, #443429);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  body[data-vibe="editorial"] .h-display,
  body[data-vibe="editorial"] .h-1 {
    font-family: 'Fraunces', 'Times New Roman', Georgia, serif;
    font-weight: 500;
    letter-spacing: -0.045em;
  }
  body[data-vibe="editorial"] .h-display em,
  body[data-vibe="editorial"] em { font-style: italic; font-family: 'Fraunces', Georgia, serif; }
  body[data-vibe="editorial"] .btn-primary { color: #f3efe6; }

  body[data-vibe="solar"] {
    --bg-0: #160807;
    --bg-1: #1f0a08;
    --bg-2: #2a0e0a;
    --ink-0: #fff6ec;
    --ink-1: #f3d9b5;
    --ink-2: #c79a72;
    --ink-3: #8a6849;
    --ink-4: #553f2a;
    --glass-1: rgba(255,200,140,0.04);
    --glass-2: rgba(255,200,140,0.08);
    --glass-3: rgba(255,200,140,0.13);
    --stroke-1: rgba(255,180,100,0.12);
    --stroke-2: rgba(255,180,100,0.22);
    --stroke-bright: rgba(255,180,100,0.36);
    --blue: oklch(0.78 0.18 50);
    --blue-bright: oklch(0.82 0.18 65);
    --violet: oklch(0.62 0.22 25);
    --cyan: oklch(0.86 0.16 85);
    --grad-primary: linear-gradient(135deg, oklch(0.7 0.21 32) 0%, oklch(0.78 0.19 55) 50%, oklch(0.86 0.16 85) 100%);
    --grad-soft: linear-gradient(135deg, oklch(0.7 0.21 32 / 0.2), oklch(0.86 0.16 85 / 0.18));
    --shadow-glow-blue: 0 0 0 1px oklch(0.78 0.18 55 / 0.4), 0 14px 60px -10px oklch(0.7 0.21 32 / 0.6);
  }
  body[data-vibe="solar"] .page-bg {
    background:
      radial-gradient(1300px 850px at 20% -10%, oklch(0.7 0.21 35 / 0.55), transparent 60%),
      radial-gradient(900px 700px at 95% 5%, oklch(0.85 0.17 75 / 0.4), transparent 60%),
      radial-gradient(900px 600px at 50% 110%, oklch(0.55 0.2 20 / 0.5), transparent 60%),
      linear-gradient(180deg, #1a0706 0%, #0a0302 100%);
  }
  body[data-vibe="solar"] .text-grad-blue {
    background: linear-gradient(135deg, oklch(0.92 0.14 88), oklch(0.78 0.2 55) 50%, oklch(0.65 0.22 28));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* ============ TWEAKABLE: DENSITY ============ */
  body[data-density="airy"] section { padding: 152px 0; }
  body[data-density="airy"] section.compact { padding: 96px 0; }
  body[data-density="airy"] .container { padding: 0 64px; }
  body[data-density="airy"] .h-display { font-size: clamp(56px, 7.5vw, 104px); }
  body[data-density="airy"] .hero { padding-top: 56px; }

  body[data-density="compact"] section { padding: 72px 0; }
  body[data-density="compact"] section.compact { padding: 48px 0; }
  body[data-density="compact"] .container { padding: 0 32px; }
  body[data-density="compact"] .h-display { font-size: clamp(40px, 5.2vw, 68px); }
  body[data-density="compact"] .h-1 { font-size: clamp(30px, 3.4vw, 46px); }
  body[data-density="compact"] .h-2 { font-size: clamp(24px, 2.2vw, 32px); }
  body[data-density="compact"] .hero-sub { font-size: 15px; }

  /* ============ TWEAKABLE: SURFACE ============ */
  body[data-surface="flat"] .glass,
  body[data-surface="flat"] .preview-card,
  body[data-surface="flat"] .feat-card,
  body[data-surface="flat"] .mega-panel,
  body[data-surface="flat"] .fspot-card,
  body[data-surface="flat"] .fstat,
  body[data-surface="flat"] .tool-cell:hover {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-1) !important;
    box-shadow: none !important;
  }
  body[data-surface="flat"] .page-bg::after { opacity: 0; }
  body[data-surface="flat"] [class*="orb"] { opacity: 0.15; filter: blur(40px); }
  body[data-surface="flat"] .btn-primary { box-shadow: none; }

  body[data-surface="etched"] .glass,
  body[data-surface="etched"] .preview-card,
  body[data-surface="etched"] .feat-card,
  body[data-surface="etched"] .fspot-card,
  body[data-surface="etched"] .fstat,
  body[data-surface="etched"] .mega-panel {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 40%, rgba(0,0,0,0.15)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.15) inset,
      0 -1px 0 rgba(0,0,0,0.4) inset,
      0 2px 0 rgba(0,0,0,0.3),
      0 24px 60px -20px rgba(0,0,0,0.8) !important;
    border-color: rgba(255,255,255,0.06) !important;
  }
  body[data-surface="etched"] .btn-primary {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.35) inset,
      0 -1px 0 rgba(0,0,0,0.4) inset,
      0 4px 0 rgba(0,0,0,0.4),
      0 12px 32px -8px oklch(0.7 0.19 256 / 0.6);
  }
  body[data-surface="etched"][data-vibe="editorial"] .glass,
  body[data-surface="etched"][data-vibe="editorial"] .preview-card,
  body[data-surface="etched"][data-vibe="editorial"] .feat-card,
  body[data-surface="etched"][data-vibe="editorial"] .fspot-card,
  body[data-surface="etched"][data-vibe="editorial"] .fstat {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.1) 40%, rgba(24,22,18,0.08)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.8) inset,
      0 -1px 0 rgba(24,22,18,0.15) inset,
      0 2px 0 rgba(24,22,18,0.1),
      0 16px 40px -12px rgba(24,22,18,0.25) !important;
  }

  /* ============ Layout primitives ============ */
  .container { max-width: 1720px; margin: 0 auto; padding: 0 48px; position: relative; z-index: 1; }
  .container-narrow { max-width: 1320px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
  section { position: relative; z-index: 1; padding: 112px 0; }
  section.compact { padding: 72px 0; }

  /* ============ NAV ============ */
  .nav-wrap { position: sticky; top: 14px; z-index: 50; padding: 0 24px; }
  .nav { display: flex; align-items: center; justify-content: space-between;
    max-width: 1820px; margin: 0 auto; padding: 10px 14px 10px 22px;
    background: rgba(10, 14, 31, 0.65); border: 1px solid var(--stroke-1);
    backdrop-filter: blur(28px) saturate(160%); border-radius: var(--r-pill);
    box-shadow: 0 12px 40px -16px rgba(0,0,0,0.6);
  }

  /* ============ MEGA MENU — v2 ============ */
  .nav { position: relative; }
  .has-mega { position: static; }
  .mega-trigger { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
  .mega-trigger .chev { width: 12px; height: 12px; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
  .has-mega.open .mega-trigger { background: var(--glass-3); color: var(--ink-0); }
  .has-mega.open .mega-trigger .chev { transform: rotate(180deg); }
  .mega-panel {
    position: absolute; top: calc(100% + 14px); left: 0; right: 0;
    background:
      radial-gradient(80% 60% at 12% 0%, oklch(0.55 0.21 256 / 0.22), transparent 60%),
      radial-gradient(70% 60% at 92% 100%, oklch(0.66 0.21 295 / 0.18), transparent 65%),
      linear-gradient(180deg, rgba(14,18,40,0.96), rgba(8,11,24,0.97));
    border: 1px solid var(--stroke-2); border-radius: 22px;
    box-shadow:
      0 60px 140px -30px rgba(0,0,0,0.85),
      0 0 0 1px rgba(255,255,255,0.04),
      inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(40px) saturate(180%);
    padding: 0; display: none; z-index: 60; overflow: hidden;
    opacity: 0; transform: translateY(-8px);
    transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .has-mega.open .mega-panel { display: block; opacity: 1; transform: translateY(0); }
  .mega-panel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 32px 32px; mask-image: radial-gradient(60% 70% at 50% 30%, black, transparent 80%);
  }
  .mega-arrow {
    position: absolute; top: -7px; width: 14px; height: 14px;
    background: rgba(14,18,40,0.96); border-top: 1px solid var(--stroke-2); border-left: 1px solid var(--stroke-2);
    transform: rotate(45deg); border-top-left-radius: 4px;
  }
  .mega-bar {
    display: flex; align-items: center; gap: 14px; padding: 14px 22px;
    border-bottom: 1px solid var(--stroke-1); position: relative; z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
  }
  .mega-bar .crumb { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; }
  .mega-bar .crumb b { color: var(--ink-0); font-weight: 500; }
  .mega-bar .search {
    flex: 1; max-width: 320px; margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; background: rgba(0,0,0,0.4); border: 1px solid var(--stroke-1); border-radius: 999px;
    font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2);
  }
  .mega-bar .search input { background: transparent; border: 0; outline: 0; color: var(--ink-0); flex: 1; font-family: var(--f-sans); font-size: 12.5px; min-width: 0; }
  .mega-bar .search kbd { font-family: var(--f-mono); font-size: 10px; padding: 2px 7px; background: var(--glass-2); border: 1px solid var(--stroke-2); border-radius: 5px; color: var(--ink-2); }
  .mega-status {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    background: oklch(0.78 0.17 158 / 0.12); border: 1px solid oklch(0.78 0.17 158 / 0.32);
    border-radius: 999px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--success);
  }
  .mega-status .d { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px currentColor; animation: pulse-glow 1.6s ease-in-out infinite; }
  .mega-grid {
    display: grid; grid-template-columns: 1.05fr 2fr; gap: 28px;
    padding: 26px; position: relative; z-index: 2;
  }
  .mega-panel.tools-panel { /* keep existing layout */ }

  /* ============ FEATURES MEGA — five-column grid + showcase ============ */
  .features-panel { padding: 0; }
  .features-grid {
    display: grid; grid-template-columns: 0.85fr 0.85fr 0.85fr 0.85fr 1fr;
    gap: 0; padding: 0; position: relative; z-index: 2;
  }
  .fcol {
    padding: 24px 22px; border-right: 1px solid var(--stroke-1);
    display: flex; flex-direction: column; gap: 4px;
  }
  .fcol:last-child { border-right: 0; padding-left: 28px; padding-right: 28px; background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent); }
  .fcol-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase;
  }
  .fcol-head .cidx {
    width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
    font-size: 10px; font-weight: 700;
    background: var(--glass-2); border: 1px solid var(--stroke-2); color: var(--ink-0);
  }
  .fcol-head .cidx.gen { background: var(--grad-primary); border-color: transparent; color: white; }
  .fcol-head .cidx.des { background: linear-gradient(135deg, var(--violet), var(--magenta)); border-color: transparent; color: white; }
  .fcol-head .cidx.opt { background: linear-gradient(135deg, var(--cyan), var(--blue-bright)); border-color: transparent; color: white; }
  .fcol-head .cidx.dep { background: linear-gradient(135deg, var(--success), var(--cyan)); border-color: transparent; color: #04130b; }
  .fcol-head .ct { font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); margin-left: auto; padding: 2px 7px; border: 1px solid var(--stroke-2); border-radius: 999px; }

  .frow {
    position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: flex-start;
    padding: 10px 10px 10px 8px; margin: 0 -10px; border-radius: 10px; cursor: pointer;
    transition: background .2s, transform .2s;
  }
  /* [2026-05-12] The Generate column rows are now <a href> elements wired to
     /app/?preset=<slug>. Strip default anchor styling so they look identical
     to the original non-anchor rows. */
  a.frow { text-decoration: none; color: inherit; }
  a.frow:hover, a.frow:focus, a.frow:visited { text-decoration: none; color: inherit; }
  .frow:hover { background: var(--glass-2); transform: translateX(2px); }
  .frow .fic {
    width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
    background: rgba(255,255,255,0.04); border: 1px solid var(--stroke-1); color: var(--ink-1);
    transition: color .2s, border-color .2s, background .2s;
  }
  .frow:hover .fic { color: var(--ink-0); border-color: var(--stroke-bright); background: rgba(255,255,255,0.07); }
  .frow.acc-gen .fic { color: var(--blue-bright); }
  .frow.acc-des .fic { color: oklch(0.78 0.16 295); }
  .frow.acc-opt .fic { color: var(--cyan); }
  .frow.acc-dep .fic { color: var(--success); }
  .frow.acc-amb .fic { color: var(--warning); }
  .frow .fcontent { min-width: 0; }
  .frow .fname { font-size: 13px; font-weight: 500; color: var(--ink-0); letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; line-height: 1.2; }
  .frow .fdesc { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
  .frow .ftag {
    font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.06em; padding: 1px 5px; border-radius: 4px;
    background: oklch(0.66 0.21 295 / 0.18); color: oklch(0.85 0.13 295); border: 1px solid oklch(0.66 0.21 295 / 0.3);
  }
  .frow .ftag.new { background: oklch(0.78 0.17 158 / 0.18); color: var(--success); border-color: oklch(0.78 0.17 158 / 0.3); }
  .frow .ftag.beta { background: oklch(0.82 0.16 80 / 0.16); color: var(--warning); border-color: oklch(0.82 0.16 80 / 0.3); }
  .frow .ftag.soon { background: oklch(0.72 0.13 230 / 0.15); color: oklch(0.85 0.13 230); border-color: oklch(0.72 0.13 230 / 0.32); }
  .frow .ftag.pro { background: var(--grad-primary); color: white; border: 0; }
  .frow .farr { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) translateX(-4px); opacity: 0; color: var(--ink-2); transition: all .2s; }
  .frow:hover .farr { opacity: 1; transform: translateY(-50%) translateX(0); }

  /* Spotlight column on right */
  .fspot {
    display: flex; flex-direction: column; gap: 14px; height: 100%;
  }
  .fspot-card {
    position: relative; padding: 16px; border-radius: 14px; overflow: hidden;
    background:
      radial-gradient(120% 100% at 100% 0%, oklch(0.55 0.21 256 / 0.45), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid oklch(0.7 0.19 256 / 0.4);
    cursor: pointer;
  }
  .fspot-card .fkick { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--cyan); margin-bottom: 8px; display: inline-flex; align-items: center; gap: 6px; }
  .fspot-card .fkick::before { content: ""; width: 14px; height: 1px; background: var(--cyan); }
  .fspot-card .fhead { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink-0); }
  .fspot-card .fdesc2 { font-size: 12.5px; color: var(--ink-1); line-height: 1.5; margin-top: 6px; }
  .fspot-card .vid {
    margin-top: 14px; aspect-ratio: 16/9; background: rgba(0,0,0,0.5); border-radius: 8px; position: relative; overflow: hidden;
    border: 1px solid var(--stroke-2);
    background-image:
      linear-gradient(135deg, oklch(0.18 0.04 270), oklch(0.1 0.04 270)),
      radial-gradient(60% 80% at 30% 30%, oklch(0.55 0.21 256 / 0.4), transparent 60%);
  }
  .fspot-card .vid::before {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.95);
    display: grid; place-items: center;
  }
  .fspot-card .vid::after {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-30%, -50%);
    border-left: 9px solid #0a0e1f; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  }
  .fspot-card .vid .runtime {
    position: absolute; bottom: 8px; right: 8px; padding: 3px 7px; background: rgba(0,0,0,0.7); border-radius: 4px;
    font-family: var(--f-mono); font-size: 9.5px; color: white; letter-spacing: 0.06em;
  }
  .fspot-card .vid .scan {
    position: absolute; left: 0; right: 0; top: 0; height: 28%;
    background: linear-gradient(180deg, oklch(0.78 0.13 205 / 0.6), transparent);
    animation: scan-y 2.4s linear infinite;
  }
  .fspot-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .fstat {
    padding: 12px; border-radius: 10px; background: var(--glass-2); border: 1px solid var(--stroke-1);
  }
  .fstat .v { font-family: var(--f-mono); font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink-0); line-height: 1; }
  .fstat .v small { font-size: 12px; opacity: 0.6; margin-left: 2px; }
  .fstat .l { font-size: 10.5px; color: var(--ink-2); margin-top: 6px; letter-spacing: 0.04em; }
  .fstat.gd .v { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .fmore {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: 10px;
    font-size: 12.5px; color: var(--ink-0); cursor: pointer; transition: border-color .2s;
  }
  .fmore:hover { border-color: var(--stroke-bright); }
  .fmore .arr { color: var(--ink-2); }

  /* Footer rail */
  .mega-foot-rail {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 24px; border-top: 1px solid var(--stroke-1); position: relative; z-index: 2;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.25));
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-2);
  }
  .mega-foot-rail .row { display: inline-flex; align-items: center; gap: 18px; }
  .mega-foot-rail .row .it { display: inline-flex; align-items: center; gap: 6px; }
  .mega-foot-rail .row .it kbd { font-size: 10px; padding: 2px 7px; background: var(--glass-2); border: 1px solid var(--stroke-2); border-radius: 5px; color: var(--ink-1); font-family: inherit; }
  .mega-foot-rail .lk { color: var(--blue-bright); text-decoration: none; }
  .mega-foot-rail .lk:hover { color: var(--ink-0); }
  .mega-featured { display: flex; flex-direction: column; gap: 12px; padding-right: 28px; border-right: 1px solid var(--stroke-1); }
  .mega-eyebrow { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
  .feat-card {
    position: relative; padding: 18px; border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    border: 1px solid var(--stroke-1); overflow: hidden;
    display: flex; flex-direction: column; gap: 6px; cursor: pointer;
    transition: border-color .2s;
  }
  .feat-card:hover { border-color: var(--stroke-bright); }
  .feat-card.big { padding: 22px; min-height: 178px; background: radial-gradient(120% 100% at 100% 0%, oklch(0.7 0.19 256 / 0.28), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); border-color: oklch(0.7 0.19 256 / 0.35); }
  .feat-card .ribbon { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--cyan); }
  .feat-card .ttl { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
  .feat-card .desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
  .feat-card .arrow { position: absolute; top: 16px; right: 16px; color: var(--ink-2); }
  .feat-card.big .arrow { color: var(--ink-0); }
  .feat-card .preview-orb {
    position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, oklch(0.78 0.13 205), oklch(0.66 0.21 295)); filter: blur(20px); opacity: 0.4; pointer-events: none;
  }
  .mega-tools-wrap { display: flex; flex-direction: column; gap: 14px; }
  .mega-tabs { display: flex; gap: 4px; padding: 4px; background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: 12px; align-self: flex-start; }
  .mega-tab { padding: 6px 12px; font-size: 12px; color: var(--ink-2); cursor: pointer; border-radius: 8px; font-family: var(--f-sans); }
  .mega-tab.on { background: var(--glass-3); color: var(--ink-0); }
  .mega-tab .num { font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); margin-left: 6px; }
  .tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .tool-cell {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px;
    border-radius: 12px; border: 1px solid transparent; cursor: pointer;
    transition: background .2s, border-color .2s;
  }
  .tool-cell:hover { background: var(--glass-2); border-color: var(--stroke-1); }
  .tool-cell .tc-ic {
    width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0;
    background: var(--glass-2); border: 1px solid var(--stroke-2); color: var(--cyan);
  }
  .tool-cell .tc-ic.violet { color: oklch(0.78 0.16 295); }
  .tool-cell .tc-ic.cyan { color: var(--cyan); }
  .tool-cell .tc-ic.green { color: var(--success); }
  .tool-cell .tc-ic.amber { color: var(--warning); }
  .tool-cell .tc-ic.blue { color: var(--blue-bright); }
  .tool-cell .tc-info .n { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; }
  .tool-cell .tc-info .n .tag {
    font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.06em; padding: 1px 5px; border-radius: 4px;
    background: oklch(0.78 0.17 158 / 0.18); color: var(--success); border: 1px solid oklch(0.78 0.17 158 / 0.3);
  }
  .tool-cell .tc-info .n .tag.new { background: oklch(0.66 0.21 295 / 0.18); color: oklch(0.85 0.13 295); border-color: oklch(0.66 0.21 295 / 0.3); }
  .tool-cell .tc-info .n .tag.beta { background: oklch(0.82 0.16 80 / 0.16); color: var(--warning); border-color: oklch(0.82 0.16 80 / 0.3); }
  .tool-cell .tc-info .n .tag.soon { background: oklch(0.72 0.13 230 / 0.15); color: oklch(0.85 0.13 230); border-color: oklch(0.72 0.13 230 / 0.32); }
  .tool-cell .tc-info .d { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
  .mega-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--stroke-1); font-size: 12.5px; color: var(--ink-2);
  }
  .mega-foot a { color: var(--blue-bright); text-decoration: none; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -0.02em; }
  .brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--grad-primary); position: relative;
    box-shadow: 0 6px 20px -6px oklch(0.7 0.19 256 / 0.7); display: grid; place-items: center; }
  .brand-mark::after { content: "M"; color: white; font-family: var(--f-sans); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; opacity: 0.95; }
  .brand small { color: var(--ink-2); font-weight: 400; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; }
  .nav-links { display: flex; gap: 4px; }
  .nav-links a { color: var(--ink-1); text-decoration: none; font-size: 14px; padding: 8px 14px; border-radius: var(--r-pill); transition: all .2s; }
  .nav-links a:hover { color: var(--ink-0); background: var(--glass-2); }
  .nav-cta { display: flex; align-items: center; gap: 8px; }

  /* [2026-05-18] Footer cross-link strip — IDENTICAL DOM/structure as
   * mh-custom for cross-section brand consistency. */
  .ft-cross {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 14px 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--stroke-1);
    margin-bottom: 32px;
    font-family: var(--f-sans);
    font-size: 13px;
  }
  .ft-cross__label {
    font-family: var(--f-mono);
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-2);
    margin-right: 8px;
  }
  .ft-cross__lnk {
    color: var(--ink-1);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    transition: background .15s, color .15s;
  }
  .ft-cross__lnk:hover { background: var(--glass-2); color: var(--ink-0); }
  .ft-cross__lnk.is-current { background: oklch(0.85 0.13 205 / 0.15); color: var(--cyan); font-weight: 600; border: 1px solid oklch(0.85 0.13 205 / 0.3); }
  @media (max-width: 640px) { .ft-cross { gap: 8px 12px; padding: 14px 0; } .ft-cross__label { display: block; flex: 0 0 100%; margin-bottom: 4px; } }

  /* [2026-05-18] wp_nav_menu()-driven simple links between mega-menus.
   * items_wrap strips the <ul> but each <li> still has default list-item
   * display + bullet. We use display:contents so the <li> is transparent
   * in layout and the inner <a> sits inline like a hand-coded link, AND
   * we set list-style:none with !important to defeat any later cascade. */
  .nav-links li.menu-item,
  .nav .nav-links li {
    list-style: none !important;
    list-style-type: none !important;
    display: contents !important;
  }
  .nav-links li.menu-item::marker { content: "" !important; display: none !important; }

  /* ============ HERO ============ */
  .hero { padding: 80px 0 80px; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
  .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px;
    background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: var(--r-pill); font-size: 12.5px; color: var(--ink-1); margin-bottom: 28px; }
  .hero-eyebrow .pill { background: var(--grad-primary); padding: 3px 10px; border-radius: var(--r-pill); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; font-weight: 600; }
  .hero h1 { margin-bottom: 22px; }
  .hero-sub { font-size: 19px; line-height: 1.55; color: var(--ink-1); max-width: 540px; margin-bottom: 32px; font-weight: 400; }
  .hero-ctas { display: flex; gap: 12px; align-items: center; margin-bottom: 28px; }

  .prompt-input { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px;
    background: rgba(8, 12, 26, 0.7); border: 1px solid var(--stroke-2); border-radius: var(--r-pill);
    box-shadow: 0 14px 50px -16px oklch(0.6 0.21 280 / 0.55), 0 0 0 6px oklch(0.7 0.19 256 / 0.06);
    backdrop-filter: blur(20px); }
  .prompt-input .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px currentColor; flex-shrink: 0; animation: pulse-glow 2s ease-in-out infinite; }
  .prompt-input input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--ink-0); font-family: var(--f-sans); font-size: 14.5px; padding: 8px 4px; }
  .prompt-input input::placeholder { color: var(--ink-2); }
  .prompt-input .send { width: 38px; height: 38px; border-radius: 50%; background: var(--grad-primary); border: 0; cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-glow-blue); }
  .prompt-suggest { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
  .prompt-suggest .s { font-size: 12px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--glass-2); border: 1px solid var(--stroke-1); color: var(--ink-1); cursor: pointer; }
  .prompt-suggest .s:hover { color: var(--ink-0); border-color: var(--stroke-bright); }

  /* Hero preview mock */
  .hero-stage { position: relative; aspect-ratio: 4 / 3.2; }
  .preview-card { position: absolute; inset: 0; border-radius: var(--r-xl);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid var(--stroke-2); padding: 14px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px oklch(0.7 0.19 256 / 0.1);
    backdrop-filter: blur(24px); overflow: hidden;
  }
  .preview-chrome { display: flex; align-items: center; gap: 8px; padding: 6px 4px 14px; }
  .preview-chrome .dots { display: flex; gap: 6px; }
  .preview-chrome .dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.16); }
  .preview-chrome .url { flex: 1; height: 28px; border-radius: var(--r-pill); background: rgba(0,0,0,0.3); border: 1px solid var(--stroke-1);
    display: flex; align-items: center; padding: 0 14px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); }
  .preview-chrome .url::before { content: "🔒"; margin-right: 8px; opacity: 0.5; font-size: 9px; }
  .preview-body { border-radius: var(--r-md); background: linear-gradient(180deg, #0E1430, #060818); overflow: hidden; height: calc(100% - 50px); position: relative; }
  .pb-hero { padding: 22px 22px 14px; }
  .pb-nav { display: flex; gap: 14px; align-items: center; margin-bottom: 26px; }
  .pb-nav .logo { width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, oklch(0.78 0.16 168), oklch(0.65 0.18 196)); }
  .pb-nav .l { height: 6px; width: 38px; background: rgba(255,255,255,0.18); border-radius: 4px; }
  .pb-nav .l.sm { width: 28px; }
  .pb-nav .btn-mini { margin-left: auto; padding: 5px 10px; background: linear-gradient(135deg, oklch(0.78 0.16 168), oklch(0.65 0.18 196)); border-radius: 999px; font-size: 9px; color: white; font-weight: 600; }
  .pb-h { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: white; margin-bottom: 10px; }
  .pb-h em { background: linear-gradient(135deg, oklch(0.78 0.16 168), oklch(0.78 0.13 205)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
  .pb-sub { font-size: 11px; color: rgba(255,255,255,0.55); line-height: 1.5; margin-bottom: 14px; max-width: 75%; }
  .pb-cta { display: inline-flex; gap: 8px; }
  .pb-cta .b { padding: 7px 12px; background: white; color: #0a1020; border-radius: 999px; font-size: 10px; font-weight: 600; }
  .pb-cta .b.alt { background: rgba(255,255,255,0.1); color: white; }
  .pb-img { margin-top: 18px; height: 110px; border-radius: 12px;
    background:
      radial-gradient(60% 80% at 70% 30%, oklch(0.78 0.16 168 / 0.5), transparent 60%),
      radial-gradient(60% 80% at 20% 80%, oklch(0.6 0.18 196 / 0.6), transparent 60%),
      linear-gradient(135deg, #1a2340, #0d1228);
    border: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden;
  }
  .pb-img::after { content: "PRODUCT IMAGE"; position: absolute; bottom: 8px; left: 12px; font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.15em; color: rgba(255,255,255,0.35); }
  .pb-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 14px 22px 0; }
  .pb-tile { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 10px; height: 56px; }
  .pb-tile .t { width: 24px; height: 4px; background: rgba(255,255,255,0.4); border-radius: 2px; margin-bottom: 6px; }
  .pb-tile .l1 { width: 100%; height: 3px; background: rgba(255,255,255,0.12); border-radius: 2px; margin-bottom: 4px; }
  .pb-tile .l2 { width: 70%; height: 3px; background: rgba(255,255,255,0.12); border-radius: 2px; }

  /* Floating badges around preview */
  .badge {
    position: absolute; display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: var(--r-pill);
    background: rgba(8, 12, 26, 0.78); border: 1px solid var(--stroke-2);
    backdrop-filter: blur(20px); box-shadow: 0 12px 30px -8px rgba(0,0,0,0.6), 0 0 0 1px var(--stroke-1);
    font-size: 12px; font-weight: 500; color: var(--ink-0);
    animation: float-slow 5s ease-in-out infinite;
  }
  .badge .ico { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
  .badge.b-seo { top: -14px; left: -28px; }
  .badge.b-seo .ico { background: oklch(0.78 0.17 158 / 0.25); color: var(--success); }
  .badge.b-schema { top: 28%; right: -42px; animation-delay: 0.7s; }
  .badge.b-schema .ico { background: oklch(0.66 0.21 295 / 0.25); color: var(--violet); }
  .badge.b-ai { bottom: 32%; left: -54px; animation-delay: 1.4s; }
  .badge.b-ai .ico { background: oklch(0.85 0.13 205 / 0.25); color: var(--cyan); }
  .badge.b-mob { bottom: -14px; right: -22px; animation-delay: 2.1s; }
  .badge.b-mob .ico { background: oklch(0.68 0.19 256 / 0.25); color: var(--blue-bright); }

  /* Neural orbs decor */
  .orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }

  /* ============ TRUST BAR ============ */
  .trust { padding: 56px 0 40px; }
  .trust-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 28px 32px;
    background: var(--glass-1); border: 1px solid var(--stroke-1); border-radius: var(--r-xl); }
  .trust-logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: center; }
  .logo-mark { display: flex; align-items: center; gap: 8px; opacity: 0.7; transition: opacity .2s; padding: 8px 0; }
  .logo-mark:hover { opacity: 1; }
  .logo-mark .lm { width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.12); }
  .logo-mark .lt { font-family: var(--f-sans); font-weight: 700; font-size: 13px; color: var(--ink-1); letter-spacing: -0.02em; }
  .trust-stats { display: flex; gap: 8px; justify-content: flex-end; }
  .trust-stat { padding: 14px 22px; border-left: 1px solid var(--stroke-1); }
  .trust-stat:first-child { border-left: 0; }
  .trust-stat .v { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
  .trust-stat .v em { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
  .trust-stat .l { font-size: 11px; color: var(--ink-2); font-family: var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; }

  /* ============ Section Headers ============ */
  .sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-bottom: 56px; }
  .sec-head.left { align-items: flex-start; text-align: left; }
  .sec-head .lead { color: var(--ink-1); font-size: 17px; max-width: 620px; line-height: 1.55; }

  /* ============ HOW IT WORKS ============ */
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
  .step { padding: 26px 24px 28px; background: var(--glass-1); border: 1px solid var(--stroke-1); border-radius: var(--r-lg); position: relative; overflow: hidden; min-height: 270px; display: flex; flex-direction: column; }
  .step::before { content: ""; position: absolute; inset: 0; background: var(--grad-soft); opacity: 0; transition: opacity .3s; }
  .step:hover::before { opacity: 1; }
  .step > * { position: relative; z-index: 1; }
  .step-num { font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); letter-spacing: 0.1em; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
  .step-num::before { content: ""; width: 24px; height: 1px; background: var(--stroke-2); }
  .step-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--glass-3); border: 1px solid var(--stroke-2); display: grid; place-items: center; margin-bottom: 18px; color: var(--cyan); }
  .step h3 { font-size: 18px; margin-bottom: 8px; letter-spacing: -0.02em; }
  .step p { font-size: 14px; color: var(--ink-1); line-height: 1.5; margin: 0; }
  .step-vis { margin-top: auto; padding-top: 16px; height: 64px; }

  /* Step mini-visuals */
  .vis-prompt { background: rgba(0,0,0,0.3); border: 1px solid var(--stroke-1); border-radius: 10px; padding: 8px 10px; font-family: var(--f-mono); font-size: 10px; color: var(--ink-2); height: 100%; }
  .vis-prompt .blink { display: inline-block; width: 6px; height: 11px; background: var(--cyan); vertical-align: middle; margin-left: 2px; animation: pulse-glow 1s steps(2) infinite; }
  .vis-grid { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr; gap: 4px; height: 100%; }
  .vis-grid div { background: rgba(255,255,255,0.06); border-radius: 4px; }
  .vis-grid div:nth-child(1) { grid-row: span 2; background: linear-gradient(135deg, oklch(0.7 0.19 256 / 0.4), oklch(0.66 0.21 295 / 0.4)); }
  .vis-pal { display: flex; gap: 4px; height: 100%; align-items: center; }
  .vis-pal span { flex: 1; height: 32px; border-radius: 6px; }
  .vis-deploy { display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; font-family: var(--f-mono); font-size: 10px; color: var(--success); border: 1px dashed oklch(0.78 0.17 158 / 0.5); border-radius: 8px; }

  /* ============ FEATURE BENTO ============ */
  .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 220px; gap: 16px; }
  .b-card { padding: 24px; background: var(--glass-1); border: 1px solid var(--stroke-1); border-radius: var(--r-lg); position: relative; overflow: hidden; display: flex; flex-direction: column; }
  .b-card .b-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .b-card .b-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--glass-3); border: 1px solid var(--stroke-2); display: grid; place-items: center; }
  .b-card h3 { font-size: 16px; }
  .b-card p { color: var(--ink-1); font-size: 13.5px; line-height: 1.5; margin: 0; }
  .b-art { margin-top: auto; }

  .b-1 { grid-column: span 3; grid-row: span 2; }
  .b-2 { grid-column: span 3; }
  .b-3 { grid-column: span 2; }
  .b-4 { grid-column: span 1; }
  .b-5 { grid-column: span 3; }
  .b-6 { grid-column: span 3; }

  /* Big AI layout viz */
  .ai-graph { position: relative; height: 240px; margin-top: 16px; }

  /* Framework pills */
  .fw-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .fw { padding: 7px 14px; border-radius: var(--r-pill); background: var(--glass-2); border: 1px solid var(--stroke-1); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-1); display: inline-flex; gap: 8px; align-items: center; }
  .fw .d { width: 6px; height: 6px; border-radius: 50%; }

  /* ============ LIVE GENERATION ============ */
  .live-gen { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 36px; padding: 36px;
    background: var(--glass-1); border: 1px solid var(--stroke-1); border-radius: var(--r-xl); align-items: stretch; }
  .gen-prompt { display: flex; flex-direction: column; gap: 14px; }
  .gen-prompt .ph { font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); letter-spacing: 0.08em; text-transform: uppercase; }
  .gen-prompt .ta { background: rgba(0,0,0,0.4); border: 1px solid var(--stroke-2); border-radius: var(--r-md); padding: 14px 16px; font-size: 14px; line-height: 1.55; min-height: 100px; color: var(--ink-0); position: relative; }
  .gen-prompt .ta .typed { color: var(--ink-0); }
  .gen-prompt .ta .cursor { display: inline-block; width: 8px; height: 16px; background: var(--cyan); vertical-align: -2px; animation: pulse-glow 1s steps(2) infinite; box-shadow: 0 0 10px var(--cyan); }
  .gen-tl { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
  .tl-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: var(--r-md); font-size: 13px; }
  .tl-row .num { width: 22px; height: 22px; border-radius: 50%; background: var(--glass-3); display: grid; place-items: center; font-family: var(--f-mono); font-size: 10px; color: var(--ink-2); border: 1px solid var(--stroke-2); }
  .tl-row.done .num { background: oklch(0.78 0.17 158 / 0.2); color: var(--success); border-color: oklch(0.78 0.17 158 / 0.4); }
  .tl-row.active .num { background: oklch(0.68 0.19 256 / 0.25); color: var(--blue-bright); border-color: oklch(0.68 0.19 256 / 0.5); animation: pulse-glow 1.4s ease-in-out infinite; }
  .tl-row .label { flex: 1; color: var(--ink-1); }
  .tl-row.done .label { color: var(--ink-0); }
  .tl-row .time { font-family: var(--f-mono); font-size: 10px; color: var(--ink-2); }

  .gen-preview { background: linear-gradient(180deg, #0d1330, #060818); border-radius: var(--r-lg); border: 1px solid var(--stroke-2); padding: 16px; min-height: 460px; position: relative; overflow: hidden; }
  .gp-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .gp-toolbar .lights { display: flex; gap: 5px; }
  .gp-toolbar .lights span { width: 9px; height: 9px; border-radius: 50%; }
  .gp-toolbar .lights span:nth-child(1) { background: oklch(0.7 0.19 22); }
  .gp-toolbar .lights span:nth-child(2) { background: oklch(0.82 0.16 80); }
  .gp-toolbar .lights span:nth-child(3) { background: oklch(0.78 0.17 158); }
  .gp-toolbar .pdomain { flex: 1; font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); padding: 5px 12px; background: rgba(0,0,0,0.3); border-radius: 999px; border: 1px solid var(--stroke-1); }
  .gp-vp { display: flex; gap: 4px; }
  .gp-vp span { padding: 4px 8px; font-family: var(--f-mono); font-size: 10px; border-radius: 6px; background: rgba(255,255,255,0.05); color: var(--ink-2); }
  .gp-vp span.on { background: var(--glass-3); color: var(--ink-0); }

  .gp-canvas { background: linear-gradient(180deg, #11173a, #0a0f25); border-radius: 12px; padding: 22px; height: 380px; overflow: hidden; position: relative; }
  .gp-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
  .gp-nav .l { width: 30px; height: 8px; border-radius: 5px; background: rgba(255,255,255,0.18); }
  .gp-nav .l.lg { width: 80px; }
  .gp-nav .b { margin-left: auto; padding: 6px 12px; background: linear-gradient(135deg, oklch(0.7 0.19 256), oklch(0.66 0.21 295)); border-radius: 999px; font-size: 10px; font-weight: 600; color: white; }
  .gp-h { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 12px; max-width: 80%; }
  .gp-h em { background: linear-gradient(135deg, oklch(0.78 0.13 205), oklch(0.68 0.19 256)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
  .gp-sub { color: var(--ink-1); font-size: 12.5px; line-height: 1.5; max-width: 70%; margin-bottom: 16px; }
  .gp-pcta { display: inline-flex; gap: 8px; }
  .gp-pcta .b { padding: 7px 14px; background: white; color: #0a1020; border-radius: 999px; font-size: 11px; font-weight: 600; }
  .gp-pcta .b.alt { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); }
  .gp-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 22px; }
  .gp-cards .c { padding: 12px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); height: 90px; }
  .gp-cards .c .head { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
  .gp-cards .c .head .ic { width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, oklch(0.78 0.13 205 / 0.4), oklch(0.66 0.21 295 / 0.4)); }
  .gp-cards .c .head .t { width: 36px; height: 5px; background: rgba(255,255,255,0.4); border-radius: 3px; }
  .gp-cards .c .l1 { width: 100%; height: 3px; background: rgba(255,255,255,0.16); border-radius: 2px; margin-bottom: 4px; }
  .gp-cards .c .l2 { width: 80%; height: 3px; background: rgba(255,255,255,0.12); border-radius: 2px; margin-bottom: 4px; }
  .gp-cards .c .l3 { width: 50%; height: 3px; background: rgba(255,255,255,0.1); border-radius: 2px; }

  /* generation scan line */
  .scan { position: absolute; left: 0; right: 0; height: 80px; pointer-events: none;
    background: linear-gradient(180deg, transparent, oklch(0.78 0.13 205 / 0.18), transparent);
    animation: scan-move 3.5s ease-in-out infinite; mix-blend-mode: screen;
  }
  @keyframes scan-move { 0% { top: -80px; } 100% { top: 100%; } }

  /* ============ BENEFITS ============ */
  .benefits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .benefit { padding: 28px 22px; background: var(--glass-1); border: 1px solid var(--stroke-1); border-radius: var(--r-lg); }
  .benefit .v { font-size: 34px; font-weight: 700; letter-spacing: -0.035em; margin-bottom: 8px; }
  .benefit .v em { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
  .benefit h3 { font-size: 14px; margin-bottom: 6px; }
  .benefit p { font-size: 12.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }

  /* ============ COMPARE ============ */
  .compare { background: var(--glass-1); border: 1px solid var(--stroke-1); border-radius: var(--r-xl); overflow: hidden; }
  .compare table { width: 100%; border-collapse: collapse; }
  .compare th, .compare td { padding: 18px 24px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--stroke-1); vertical-align: middle; }
  .compare th { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; background: rgba(255,255,255,0.02); }
  .compare th.metric { color: var(--ink-1); }
  .compare th.ours { color: var(--blue-bright); position: relative; }
  .compare th.ours::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad-primary); }
  .compare td:first-child { color: var(--ink-1); font-weight: 500; }
  .compare td.ours { color: var(--ink-0); font-weight: 500; background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.06), oklch(0.66 0.21 295 / 0.04)); }
  .compare td.trad { color: var(--ink-2); }
  .compare tr:last-child td { border-bottom: 0; }
  .ck-y { display: inline-flex; align-items: center; gap: 8px; }
  .ck-y::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: oklch(0.78 0.17 158 / 0.2); border: 1px solid oklch(0.78 0.17 158 / 0.5); display: inline-block; background-image: radial-gradient(circle, var(--success) 0, var(--success) 3px, transparent 4px); }
  .ck-n { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
  .ck-n::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,0.04); border: 1px solid var(--stroke-1); display: inline-block; }

  /* ============ TESTIMONIALS ============ */
  .testi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .t-card { padding: 28px; background: var(--glass-1); border: 1px solid var(--stroke-1); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 18px; }
  .t-rate { display: flex; gap: 2px; color: var(--warning); font-size: 14px; }
  .t-quote { font-size: 17px; line-height: 1.5; letter-spacing: -0.015em; color: var(--ink-0); flex: 1; }
  .t-author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--stroke-1); }
  .t-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--violet)); display: grid; place-items: center; font-weight: 600; color: white; font-size: 14px; }
  .t-meta .n { font-size: 14px; font-weight: 500; }
  .t-meta .r { font-size: 12px; color: var(--ink-2); }
  .t-outcome { display: inline-flex; gap: 6px; padding: 6px 10px; background: oklch(0.78 0.17 158 / 0.12); border: 1px solid oklch(0.78 0.17 158 / 0.3); border-radius: var(--r-pill); font-family: var(--f-mono); font-size: 11px; color: var(--success); align-self: flex-start; }

  /* ============ PRICING ============ */
  .pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
  /* [2026-05-17 V1 audit] Responsive ladder for the pricing grid. The
     fixed 4-column layout above broke below ~1100 px (cards collapsed
     to ~200 px wide, the $99 line overlapped the description on iPad
     portrait). Two media queries restore a usable layout on tablet and
     phone without changing any of the card internals. */
  @media (max-width: 1100px) {
    .pricing { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  }
  @media (max-width: 640px) {
    .pricing { grid-template-columns: 1fr; gap: 12px; }
  }
  .price { padding: 30px 26px; background: var(--glass-1); border: 1px solid var(--stroke-1); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
  .price.featured { background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.12), oklch(0.66 0.21 295 / 0.06)); border: 1px solid oklch(0.7 0.19 256 / 0.4); box-shadow: 0 24px 60px -20px oklch(0.7 0.19 256 / 0.3); }
  .price-badge { position: absolute; top: 14px; right: 14px; padding: 4px 10px; background: var(--grad-primary); border-radius: 999px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; color: white; font-weight: 600; }
  .price h3 { font-size: 16px; }
  .price .desc { font-size: 13px; color: var(--ink-2); }
  .price .amt { display: flex; align-items: baseline; gap: 4px; margin: 4px 0 4px; }
  .price .amt .v { font-size: 44px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
  .price .amt .u { font-size: 14px; color: var(--ink-2); }
  .price ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .price li { font-size: 13.5px; color: var(--ink-1); display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
  .price li::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--glass-3); border: 1px solid var(--stroke-2); background-image: radial-gradient(circle, var(--cyan) 0 2.5px, transparent 3px); }
  .price .btn { width: 100%; justify-content: center; }

  /* ============ FAQ ============ */
  .faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: flex-start; }
  .faq-list { display: flex; flex-direction: column; gap: 4px; }
  .faq-item { padding: 22px 4px; border-bottom: 1px solid var(--stroke-1); cursor: pointer; }
  .faq-item:last-child { border-bottom: 0; }
  .faq-q { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 500; color: var(--ink-0); gap: 16px; }
  .faq-q .plus { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--stroke-2); display: grid; place-items: center; color: var(--ink-1); flex-shrink: 0; transition: all .25s; }
  .faq-item.open .plus { background: var(--grad-primary); border-color: transparent; color: white; transform: rotate(45deg); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s, padding .3s; color: var(--ink-1); font-size: 14.5px; line-height: 1.55; }
  .faq-item.open .faq-a { max-height: 200px; padding-top: 12px; }

  /* ============ FINAL CTA ============ */
  .final-cta { padding: 80px 56px; text-align: center; border-radius: var(--r-xl); position: relative; overflow: hidden;
    background:
      radial-gradient(800px 400px at 20% 20%, oklch(0.7 0.19 256 / 0.5), transparent 60%),
      radial-gradient(700px 350px at 90% 80%, oklch(0.66 0.21 295 / 0.5), transparent 60%),
      linear-gradient(180deg, #0a1230, #050818);
    border: 1px solid var(--stroke-2);
  }
  .final-cta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, black, transparent 70%); }
  .final-cta > * { position: relative; z-index: 1; }
  .final-cta .h-1 { margin-bottom: 18px; }
  .final-cta p { font-size: 18px; color: var(--ink-1); max-width: 560px; margin: 0 auto 32px; }

  /* ============ FOOTER ============ */
  footer { padding: 64px 0 40px; border-top: 1px solid var(--stroke-1); margin-top: 40px; }
  .ft-grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--stroke-1); }
  .ft-brand p { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; max-width: 260px; margin: 14px 0 18px; }
  .ft-soc { display: flex; gap: 8px; }
  .ft-soc a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--glass-2); border: 1px solid var(--stroke-1); color: var(--ink-1); }
  .ft-col h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px; font-weight: 500; }
  .ft-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .ft-col a { color: var(--ink-1); text-decoration: none; font-size: 14px; }
  .ft-col a:hover { color: var(--ink-0); }
  .ft-bot { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-size: 13px; color: var(--ink-2); }
  .ft-bot .legal { display: flex; gap: 20px; }
  .ft-bot a { color: var(--ink-2); text-decoration: none; }

  /* SVG icon helper */
  .ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .ic-lg { width: 20px; height: 20px; }

  /* ============ TEMPLATES — coverflow carousel ============ */
  .tpl-section { padding-top: 56px; }
  .tpl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 36px; }
  .tpl-head .l { max-width: 640px; }
  .tpl-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px; background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: var(--r-pill); }
  .tpl-filter { padding: 8px 14px; font-size: 12.5px; color: var(--ink-1); border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .2s; }
  .tpl-filter:hover { color: var(--ink-0); }
  .tpl-filter.on { background: var(--grad-primary); color: white; box-shadow: 0 6px 20px -6px oklch(0.7 0.19 256 / 0.5); }
  .tpl-filter .c { font-family: var(--f-mono); font-size: 10px; opacity: 0.6; }

  .coverflow {
    position: relative; height: 560px; overflow: hidden; margin: 0 -16px;
    border-radius: var(--r-xl);
    perspective: 1400px;
  }
  .coverflow-track {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    transform-style: preserve-3d;
  }
  .cf-slide {
    position: absolute; width: 540px; height: 400px;
    border-radius: var(--r-lg); overflow: hidden;
    border: 1px solid var(--stroke-2);
    background: linear-gradient(180deg, #0f1430, #060818);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.7);
    transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s, filter .6s;
    cursor: pointer;
    transform-style: preserve-3d;
  }
  .cf-img {
    height: 100%; width: 100%; position: relative;
    background-size: cover; background-position: center;
  }
  .cf-img::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(4,6,14,0.95) 100%);
  }
  .cf-img .ph-tag {
    position: absolute; top: 14px; left: 14px; padding: 5px 10px;
    background: rgba(8,11,24,0.7); border: 1px solid var(--stroke-2); border-radius: 999px;
    font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-1);
    backdrop-filter: blur(10px);
  }
  .cf-img .ph-meta {
    position: absolute; bottom: 18px; left: 18px; right: 18px; z-index: 2;
  }
  .cf-img .ph-meta .name { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 4px; }
  .cf-img .ph-meta .desc { font-size: 13px; color: var(--ink-1); line-height: 1.45; max-width: 80%; }
  .cf-img .ph-meta .tags { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
  .cf-img .ph-meta .tags span { padding: 3px 9px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.04em; background: rgba(255,255,255,0.08); border: 1px solid var(--stroke-1); border-radius: 999px; color: var(--ink-1); }
  .cf-img .open-btn {
    position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
    border-radius: 50%; background: var(--grad-primary); display: grid; place-items: center;
    box-shadow: var(--shadow-glow-blue); z-index: 2;
  }

  /* Placeholder fills with editorial vibes */
  .ph-fill {
    width: 100%; height: 100%; position: relative;
    display: grid; grid-template-rows: auto 1fr; gap: 14px; padding: 20px;
  }
  .ph-fill .ph-nav { display: flex; align-items: center; gap: 14px; }
  .ph-fill .ph-nav .lg { width: 26px; height: 26px; border-radius: 7px; }
  .ph-fill .ph-nav .b { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.2); }
  .ph-fill .ph-nav .b.s { width: 36px; }
  .ph-fill .ph-nav .b.m { width: 50px; }
  .ph-fill .ph-nav .cta { margin-left: auto; padding: 6px 12px; font-size: 10px; font-weight: 600; border-radius: 999px; }
  .ph-fill .ph-stage {
    border-radius: 10px; padding: 20px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;
  }
  .ph-fill .ph-stage .hh { font-size: 36px; line-height: 1; font-weight: 700; letter-spacing: -0.035em; max-width: 80%; }
  .ph-fill .ph-stage .ss { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.65); max-width: 70%; line-height: 1.5; }
  .ph-fill .ph-stage .pcta { margin-top: 16px; display: flex; gap: 8px; }
  .ph-fill .ph-stage .pcta span { padding: 7px 12px; font-size: 11px; font-weight: 600; border-radius: 999px; }

  /* Theme variants for placeholders */
  .ph-arch { background: #0c1130; color: white; }
  .ph-arch .ph-nav .lg { background: linear-gradient(135deg, oklch(0.78 0.16 168), oklch(0.65 0.18 196)); }
  .ph-arch .ph-nav .cta { background: white; color: #0a1020; }
  .ph-arch .ph-stage { background: radial-gradient(70% 80% at 80% 20%, oklch(0.78 0.16 168 / 0.45), transparent 60%), radial-gradient(60% 80% at 20% 80%, oklch(0.6 0.18 196 / 0.55), transparent 60%), linear-gradient(135deg, #182040, #0a1130); border: 1px solid rgba(255,255,255,0.05); }
  .ph-arch .ph-stage .hh em { background: linear-gradient(135deg, oklch(0.78 0.16 168), oklch(0.78 0.13 205)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
  .ph-arch .ph-stage .pcta span:first-child { background: white; color: #0a1020; }
  .ph-arch .ph-stage .pcta span:last-child { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.18); }

  .ph-bakery { background: #2a1a0d; color: #f5e8d8; }
  .ph-bakery .ph-nav .lg { background: linear-gradient(135deg, #e8b88c, #c47a4a); }
  .ph-bakery .ph-nav .b { background: rgba(245,232,216,0.3); }
  .ph-bakery .ph-nav .cta { background: #f5e8d8; color: #2a1a0d; }
  .ph-bakery .ph-stage { background: radial-gradient(80% 90% at 30% 30%, rgba(232,184,140,0.35), transparent 60%), linear-gradient(135deg, #3d2614, #1a0e06); border: 1px solid rgba(245,232,216,0.08); }
  .ph-bakery .ph-stage .hh { font-family: serif; }
  .ph-bakery .ph-stage .hh em { color: #e8b88c; font-style: italic; }
  .ph-bakery .ph-stage .pcta span:first-child { background: #f5e8d8; color: #2a1a0d; }
  .ph-bakery .ph-stage .pcta span:last-child { background: rgba(245,232,216,0.1); color: #f5e8d8; border: 1px solid rgba(245,232,216,0.2); }

  .ph-saas { background: #050a18; color: white; }
  .ph-saas .ph-nav .lg { background: linear-gradient(135deg, oklch(0.7 0.19 256), oklch(0.66 0.21 295)); }
  .ph-saas .ph-nav .cta { background: linear-gradient(135deg, oklch(0.7 0.19 256), oklch(0.66 0.21 295)); color: white; }
  .ph-saas .ph-stage {
    background:
      radial-gradient(60% 70% at 20% 30%, oklch(0.55 0.21 256 / 0.55), transparent 60%),
      radial-gradient(70% 70% at 80% 70%, oklch(0.55 0.21 295 / 0.5), transparent 60%),
      linear-gradient(135deg, #0a1230, #050818);
    border: 1px solid oklch(0.7 0.19 256 / 0.2);
  }
  .ph-saas .ph-stage::before {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, black, transparent 75%);
  }
  .ph-saas .ph-stage .hh em { background: linear-gradient(135deg, oklch(0.85 0.13 205), oklch(0.66 0.21 295)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
  .ph-saas .ph-stage .pcta span:first-child { background: linear-gradient(135deg, oklch(0.7 0.19 256), oklch(0.66 0.21 295)); color: white; }
  .ph-saas .ph-stage .pcta span:last-child { background: rgba(255,255,255,0.08); color: white; border: 1px solid rgba(255,255,255,0.16); }

  .ph-shop { background: #f3efe9; color: #1a1410; }
  .ph-shop .ph-nav .lg { background: #1a1410; border-radius: 50%; }
  .ph-shop .ph-nav .b { background: rgba(26,20,16,0.25); }
  .ph-shop .ph-nav .cta { background: #1a1410; color: #f3efe9; }
  .ph-shop .ph-stage { background: linear-gradient(135deg, #ffffff, #e6dfd4); border: 1px solid rgba(0,0,0,0.06); }
  .ph-shop .ph-stage .hh { font-weight: 800; letter-spacing: -0.045em; }
  .ph-shop .ph-stage .hh em { font-style: normal; -webkit-text-stroke: 2px #1a1410; -webkit-text-fill-color: transparent; }
  .ph-shop .ph-stage .ss { color: rgba(26,20,16,0.65); }
  .ph-shop .ph-stage .pcta span:first-child { background: #1a1410; color: #f3efe9; }
  .ph-shop .ph-stage .pcta span:last-child { background: transparent; color: #1a1410; border: 1px solid #1a1410; }

  .ph-edit { background: #fafaf7; color: #18181b; }
  .ph-edit .ph-nav .lg { background: #18181b; }
  .ph-edit .ph-nav .b { background: rgba(24,24,27,0.25); }
  .ph-edit .ph-nav .cta { background: #18181b; color: #fafaf7; }
  .ph-edit .ph-stage { background: #fafaf7; border: 1px solid rgba(0,0,0,0.06); }
  .ph-edit .ph-stage .hh { font-family: serif; font-weight: 500; }
  .ph-edit .ph-stage .hh em { font-style: italic; color: oklch(0.55 0.21 22); }
  .ph-edit .ph-stage .ss { color: rgba(24,24,27,0.6); }
  .ph-edit .ph-stage .pcta span:first-child { background: oklch(0.55 0.21 22); color: white; }
  .ph-edit .ph-stage .pcta span:last-child { background: transparent; color: #18181b; border: 1px solid rgba(24,24,27,0.3); }

  .ph-resto { background: #0a0a0a; color: #f5e9d2; }
  .ph-resto .ph-nav .lg { background: linear-gradient(135deg, #d4a574, #b8804a); border-radius: 50%; }
  .ph-resto .ph-nav .b { background: rgba(245,233,210,0.3); }
  .ph-resto .ph-nav .cta { background: #d4a574; color: #0a0a0a; }
  .ph-resto .ph-stage {
    background:
      radial-gradient(80% 80% at 70% 30%, rgba(212,165,116,0.35), transparent 60%),
      linear-gradient(135deg, #1a1207, #050402);
    border: 1px solid rgba(245,233,210,0.08);
  }
  .ph-resto .ph-stage .hh { font-family: serif; font-weight: 500; }
  .ph-resto .ph-stage .hh em { font-style: italic; color: #d4a574; }
  .ph-resto .ph-stage .ss { color: rgba(245,233,210,0.6); }
  .ph-resto .ph-stage .pcta span:first-child { background: #d4a574; color: #0a0a0a; }
  .ph-resto .ph-stage .pcta span:last-child { background: transparent; color: #f5e9d2; border: 1px solid rgba(245,233,210,0.3); }

  /* Coverflow controls */
  .cf-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; padding: 0 16px; }
  .cf-dots { display: flex; gap: 8px; }
  .cf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stroke-2); cursor: pointer; transition: all .2s; }
  .cf-dot.on { background: var(--grad-primary); width: 32px; border-radius: 999px; }
  .cf-arrows { display: flex; gap: 8px; }
  .cf-arrow { width: 44px; height: 44px; border-radius: 50%; background: var(--glass-2); border: 1px solid var(--stroke-1); color: var(--ink-0); display: grid; place-items: center; cursor: pointer; transition: all .2s; }
  .cf-arrow:hover { background: var(--glass-3); border-color: var(--stroke-bright); transform: translateY(-1px); }
  .cf-counter { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); letter-spacing: 0.06em; }
  .cf-counter .cur { color: var(--ink-0); font-weight: 600; }

  /* ============ ISOTOPE TEMPLATE GRID ============ */
  .iso-section { padding: 56px 0 96px; }
  .iso-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; gap: 24px; flex-wrap: wrap; }
  .iso-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
  .iso-tab { padding: 8px 14px; font-size: 13px; color: var(--ink-2); cursor: pointer; border-radius: var(--r-pill); border: 1px solid transparent; transition: all .2s; }
  .iso-tab:hover { color: var(--ink-0); }
  .iso-tab.on { background: var(--glass-2); border-color: var(--stroke-2); color: var(--ink-0); }
  .iso-tab .ct { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); margin-left: 6px; }
  .iso-tab.on .ct { color: var(--cyan); }
  .iso-search {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 13px;
    background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: var(--r-pill); color: var(--ink-1);
  }
  .iso-search input { background: transparent; border: 0; outline: 0; color: var(--ink-0); font-family: inherit; width: 180px; }

  .iso-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 200px;
    gap: 14px;
    transition: all .35s;
  }
  .iso-card {
    border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--stroke-1);
    position: relative; cursor: pointer; background: #0a0e1f;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s, border-color .2s, box-shadow .35s;
    transform-style: preserve-3d;
  }
  .iso-card:hover { transform: translateY(-4px); border-color: var(--stroke-bright); box-shadow: 0 20px 50px -16px rgba(0,0,0,0.6); }
  .iso-card.hide { opacity: 0; transform: scale(0.92); pointer-events: none; position: absolute; visibility: hidden; }

  .iso-card .top {
    position: absolute; top: 14px; left: 14px; right: 14px;
    display: flex; justify-content: space-between; align-items: flex-start; z-index: 2;
  }
  .iso-card .cat {
    padding: 4px 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em;
    background: rgba(8,11,24,0.7); border: 1px solid var(--stroke-2); border-radius: 999px;
    color: var(--ink-1); backdrop-filter: blur(10px);
  }
  .iso-card .ribbon-tag {
    padding: 4px 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em;
    border-radius: 999px; backdrop-filter: blur(10px);
  }
  .iso-card .ribbon-tag.hot { background: oklch(0.7 0.19 22 / 0.25); color: oklch(0.85 0.16 30); border: 1px solid oklch(0.7 0.19 22 / 0.5); }
  .iso-card .ribbon-tag.new { background: oklch(0.78 0.17 158 / 0.2); color: var(--success); border: 1px solid oklch(0.78 0.17 158 / 0.4); }
  .iso-card .ribbon-tag.pro { background: var(--grad-primary); color: white; border: 0; }

  .iso-card .bottom {
    position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
    display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  }
  .iso-card .meta { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; color: white; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
  .iso-card .meta .sub { font-size: 11px; font-weight: 400; opacity: 0.7; margin-top: 2px; font-family: var(--f-mono); letter-spacing: 0.05em; }
  .iso-card .open {
    width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.92); color: #0a1020;
    display: grid; place-items: center; flex-shrink: 0;
    opacity: 0; transform: translateY(4px); transition: all .25s;
  }
  .iso-card:hover .open { opacity: 1; transform: translateY(0); }

  /* Span variations for isotope cards */
  .iso-card.s-4x2 { grid-column: span 4; grid-row: span 2; }
  .iso-card.s-4x1 { grid-column: span 4; grid-row: span 1; }
  .iso-card.s-3x2 { grid-column: span 3; grid-row: span 2; }
  .iso-card.s-5x1 { grid-column: span 5; grid-row: span 1; }
  .iso-card.s-3x1 { grid-column: span 3; grid-row: span 1; }
  .iso-card.s-6x2 { grid-column: span 6; grid-row: span 2; }
  .iso-card.s-2x2 { grid-column: span 2; grid-row: span 2; }

  /* Loader strip below */
  .iso-load {
    margin-top: 28px; display: flex; justify-content: center; align-items: center; gap: 12px;
    font-family: var(--f-mono); font-size: 12px; color: var(--ink-2);
  }
  .iso-load .ln { width: 80px; height: 1px; background: var(--stroke-2); }
  .iso-load .ld-btn {
    padding: 10px 20px; background: var(--glass-2); border: 1px solid var(--stroke-2); color: var(--ink-0);
    border-radius: var(--r-pill); cursor: pointer; font-family: var(--f-sans); font-size: 13px;
  }

  /* ============ FEATURED GENERATOR HIGHLIGHTS — split scroller ============ */
  .gen-hl-section { padding: 96px 0; }
  .gen-hl-grid {
    display: grid; grid-template-columns: 0.45fr 0.55fr; gap: 56px; align-items: flex-start;
  }
  .gen-hl-left { position: sticky; top: 120px; align-self: flex-start; }
  .gen-hl-marker {
    margin-bottom: 24px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 6px;
    background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: var(--r-pill);
    font-size: 12px; color: var(--ink-1);
  }
  .gen-hl-marker .pill { background: var(--grad-primary); padding: 3px 10px; border-radius: var(--r-pill); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; font-weight: 600; }
  .gen-hl-progress {
    display: flex; flex-direction: column; gap: 14px; margin-top: 36px;
    padding-left: 22px; border-left: 1px solid var(--stroke-1);
  }
  .gen-hl-progress .item {
    position: relative; padding: 4px 0; font-size: 14px; color: var(--ink-2); cursor: pointer; transition: color .2s;
  }
  .gen-hl-progress .item.on { color: var(--ink-0); font-weight: 500; }
  .gen-hl-progress .item::before {
    content: ""; position: absolute; left: -27px; top: 8px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--bg-0); border: 1px solid var(--stroke-2); transition: all .25s;
  }
  .gen-hl-progress .item.on::before {
    background: var(--grad-primary); border: 0; box-shadow: 0 0 0 4px oklch(0.7 0.19 256 / 0.15);
  }

  .gen-hl-cards { display: flex; flex-direction: column; gap: 18px; }
  .gen-hl-card {
    padding: 26px; background: var(--glass-1); border: 1px solid var(--stroke-1); border-radius: var(--r-xl);
    display: grid; grid-template-columns: 1fr; gap: 18px; position: relative; overflow: hidden;
  }
  .gen-hl-card .ix {
    font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em;
    display: flex; align-items: center; gap: 10px;
  }
  .gen-hl-card .ix::after { content: ""; flex: 1; height: 1px; background: var(--stroke-1); }
  .gen-hl-card h3 { font-size: 26px; letter-spacing: -0.025em; margin: 0; }
  .gen-hl-card h3 em { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
  .gen-hl-card p { margin: 0; color: var(--ink-1); font-size: 14.5px; line-height: 1.55; max-width: 540px; }
  .gen-hl-card .art {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid var(--stroke-1); border-radius: var(--r-md); padding: 16px; min-height: 180px;
    position: relative; overflow: hidden;
  }

  /* Highlight art: prompt-to-sitemap */
  .art-sitemap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: center; }
  .art-sitemap .term {
    background: rgba(0,0,0,0.5); border: 1px solid var(--stroke-1); border-radius: 10px; padding: 14px 16px;
    font-family: var(--f-mono); font-size: 12px; color: var(--ink-1); line-height: 1.7;
  }
  .art-sitemap .term .ln { display: block; }
  .art-sitemap .term .pf { color: var(--ink-3); margin-right: 6px; }
  .art-sitemap .term .blink { display: inline-block; width: 7px; height: 13px; background: var(--cyan); vertical-align: -2px; margin-left: 2px; animation: pulse-glow 1s steps(2) infinite; box-shadow: 0 0 8px var(--cyan); }
  .art-sitemap .tree { display: flex; flex-direction: column; gap: 6px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-1); }
  .art-sitemap .tree .node { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--glass-2); border: 1px solid var(--stroke-1); border-radius: 6px; }
  .art-sitemap .tree .node.root { background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.18), oklch(0.66 0.21 295 / 0.1)); border-color: oklch(0.7 0.19 256 / 0.4); }
  .art-sitemap .tree .indent { margin-left: 22px; position: relative; }
  .art-sitemap .tree .indent::before { content: ""; position: absolute; left: -14px; top: 50%; width: 10px; height: 1px; background: var(--stroke-2); }
  .art-sitemap .tree .indent::after { content: ""; position: absolute; left: -14px; top: -12px; bottom: 50%; width: 1px; background: var(--stroke-2); }
  .art-sitemap .tree .node .pg { width: 14px; height: 14px; border-radius: 3px; background: var(--glass-3); border: 1px solid var(--stroke-2); }
  .art-sitemap .tree .node.root .pg { background: var(--grad-primary); border: 0; }

  /* Multi-model orchestration art */
  .art-agents { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
  .art-agents .a-cell {
    aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--stroke-1); position: relative;
    background: rgba(0,0,0,0.3); display: grid; place-items: center;
    font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.05em; color: var(--ink-2); text-align: center;
  }
  .art-agents .a-cell.live { background: linear-gradient(180deg, oklch(0.7 0.19 256 / 0.25), oklch(0.66 0.21 295 / 0.15)); border-color: oklch(0.7 0.19 256 / 0.45); color: var(--ink-0); }
  .art-agents .a-cell.live::after { content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px currentColor; animation: pulse-glow 1.4s ease-in-out infinite; }
  .art-agents .a-cell.done { color: var(--success); border-color: oklch(0.78 0.17 158 / 0.4); }
  .art-agents .a-cell.done::after { content: "✓"; position: absolute; top: 4px; right: 6px; font-size: 9px; color: var(--success); }

  /* Performance / lighthouse rings */
  .art-rings { display: flex; gap: 16px; justify-content: space-around; flex-wrap: wrap; }
  .ring {
    width: 116px; height: 116px; position: relative;
    display: grid; place-items: center;
  }
  .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .ring .track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 8; }
  .ring .bar { fill: none; stroke-width: 8; stroke-linecap: round; }
  .ring .val {
    position: absolute; inset: 0; display: grid; place-items: center; flex-direction: column;
    font-family: var(--f-mono); font-weight: 700; font-size: 22px; color: var(--ink-0);
    letter-spacing: -0.02em;
  }
  .ring .val .lbl { font-size: 9px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.08em; margin-top: 4px; }

  /* AI-ready / agent connection diagram */
  .art-mcp { padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
  .mcp-side { display: flex; flex-direction: column; gap: 8px; }
  .mcp-side .h { font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.1em; }
  .mcp-side .b {
    padding: 9px 11px; border-radius: 9px; font-size: 12.5px; color: var(--ink-0);
    background: var(--glass-2); border: 1px solid var(--stroke-1);
    display: flex; align-items: center; gap: 8px;
  }
  .mcp-side .b .d { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px currentColor; }
  .mcp-flow { position: relative; height: 100%; min-height: 130px; }
  .mcp-flow svg { width: 100%; height: 100%; }

  /* Code export filmstrip */
  .art-export { display: flex; gap: 10px; overflow: hidden; padding: 6px; }
  .exp-card {
    flex: 1; min-width: 0; padding: 14px 12px; border-radius: 10px;
    background: var(--glass-2); border: 1px solid var(--stroke-1);
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  }
  .exp-card .lm { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: white; font-weight: 700; font-size: 10px; font-family: var(--f-mono); }
  .exp-card .nm { font-size: 12px; font-weight: 500; }
  .exp-card .ln1 { width: 100%; height: 3px; background: rgba(255,255,255,0.16); border-radius: 2px; }
  .exp-card .ln2 { width: 70%; height: 3px; background: rgba(255,255,255,0.1); border-radius: 2px; }

  /* ============================================================
   * [2026-05-17] RESPONSIVE OVERHAUL
   * ------------------------------------------------------------
   * Before: only the pricing grid reflowed. Hero, nav, mega panels,
   * footer all stayed desktop-shaped → 2.3x horizontal scroll on
   * a 390px phone.
   *
   * Strategy: leave all desktop styles untouched, override layout-only
   * properties below 900px (tablet drawer) and 640px (single-column
   * mobile). The hamburger drawer wraps .nav-links into a fixed
   * right-side panel; mega menus inline inside as expanded sections.
   * ============================================================ */

  /* Hamburger button — hidden on desktop, becomes the menu toggle on tablet/mobile */
  .nav-burger {
    display: none;
    width: 40px; height: 40px;
    background: var(--glass-2);
    border: 1px solid var(--stroke-1);
    border-radius: var(--r-md);
    cursor: pointer;
    padding: 0;
    align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
    margin-left: auto;
    transition: background .2s, border-color .2s;
  }
  .nav-burger:hover { background: var(--glass-3); border-color: var(--stroke-2); }
  .nav-burger > span {
    display: block;
    width: 16px; height: 2px;
    background: var(--ink-0);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
    transform-origin: center;
  }
  body.menu-open .nav-burger { background: var(--grad-primary); border-color: transparent; }
  body.menu-open .nav-burger > span { background: white; }
  body.menu-open .nav-burger .b1 { transform: translateY(6px) rotate(45deg); }
  body.menu-open .nav-burger .b2 { opacity: 0; }
  body.menu-open .nav-burger .b3 { transform: translateY(-6px) rotate(-45deg); }

  /* Backdrop — covers the page behind the open drawer */
  .nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    z-index: 60;
    opacity: 0;
    transition: opacity .25s ease;
    cursor: pointer;
  }
  body.menu-open .nav-backdrop { opacity: 1; }
  body.menu-open { overflow: hidden; } /* lock page scroll while drawer is open */

  /* ===== ≤ 1100px : compress nav links and section padding ===== */
  @media (max-width: 1100px) {
    .container { padding: 0 32px; }
    .nav-wrap { padding: 0 16px; }
    .nav-links { gap: 2px; }
    .nav-links a { font-size: 13px; padding: 8px 10px; }
    .iso-grid { grid-template-columns: repeat(6, 1fr); }
    .ft-grid { grid-template-columns: 1.3fr repeat(2, 1fr); gap: 32px; }
    .ft-grid .ft-col:nth-child(n+4) { grid-column: span 1; }
  }

  /* ===== ≤ 900px : flip to drawer + stack hero ===== */
  @media (max-width: 900px) {
    /* [2026-05-17 fix v5 — drawer was sliding in to x=460 because .nav has
       backdrop-filter, which makes .nav the containing block for any fixed
       descendant. With the drawer (.nav-links) being a child of .nav, its
       `right: 0` resolved relative to .nav's content box (which expands as
       the drawer's translateX(110%) pushes its content rightward → 891 wide).
       Killing backdrop-filter on the nav at ≤900px restores the viewport
       as the drawer's containing block. The glassmorphism effect was a
       desktop-only flourish anyway. */
    .nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    /* [2026-05-17 fix v2] Structural overflow containment. The page has
       multiple sections with intentionally oversized inner mockups
       (template carousel, hero stage, trust marquee, gen-hl preview).
       Containing each section + the header prevents ANY child from
       widening the body — the canonical fix for marketing pages with
       decorative absolute-positioned design elements.

       overflow-x: clip is preferred over hidden because it doesn't
       break position:sticky descendants. */
    html, body { overflow-x: clip; max-width: 100vw; }
    /* [2026-05-17 fix v4] Clip overflow on individual sections and footer,
       NOT on <main> or <header>. Reason: <header> contains the drawer
       (.nav-links is position:fixed), and main is the drawer's grandparent.
       overflow:clip on any of those creates a containing block for the
       fixed drawer, which would re-anchor it inside main instead of the
       viewport — the drawer would slide in 460px off-screen. Clipping
       each section individually still prevents body-level overflow because
       main's width is just max(children.width) = vw. */
    footer, section { overflow-x: clip; max-width: 100vw; }
    .iso-card, .iso-card * { max-width: 100%; }
    .iso-card { overflow: hidden; min-width: 0; }
    .hero-stage { overflow: hidden; min-width: 0; max-width: 100%; }
    /* Grid + flex children need explicit min-width:0 to actually shrink
       below their content's intrinsic min-content size. */
    .hero-grid > *, .iso-grid > *, .ft-grid > * { min-width: 0; }
    img, video, iframe { max-width: 100%; height: auto; }
    /* The header's drawer (.nav-links is position:fixed) escapes the
       overflow-clip boundary so it still slides in correctly. */

    .nav-burger { display: flex; }

    /* Drawer */
    .nav-links {
      position: fixed;
      top: 0; right: 0;
      width: min(360px, 88vw);
      height: 100vh;
      max-height: 100vh;
      background: linear-gradient(180deg, oklch(0.18 0.04 260), oklch(0.12 0.03 260));
      border-left: 1px solid var(--stroke-2);
      padding: 80px 22px 28px;
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
      overflow-y: auto;
      transform: translateX(110%);
      transition: transform .3s cubic-bezier(.4,0,.2,1);
      z-index: 70;
      box-shadow: -16px 0 40px -10px rgba(0,0,0,0.5);
    }
    /* [2026-05-17 fix v6] `!important` here is intentional. The base
       .nav-links rule above sets transform: translateX(110%) inside the
       same media query, and without !important the open-state transform
       wasn't winning at runtime (live testing showed translateX stuck at
       110% despite body.menu-open having higher specificity, presumably
       because of an interaction with the WP admin bar styles in the
       cascade). !important guarantees the drawer slides on every click. */
    body.menu-open .nav-links { transform: translateX(0) !important; }
    .nav-links a, .nav-links .mega-trigger {
      padding: 14px 16px;
      font-size: 15px;
      border-radius: 10px;
      width: 100%;
      box-sizing: border-box;
    }

    /* Mega panels: inline inside the drawer as expandable cards instead
       of floating popovers. Forces a compact column layout that fits the
       drawer width. */
    .has-mega { width: 100%; }
    .mega-panel {
      position: static;
      width: 100%;
      max-width: 100%;
      transform: none;
      box-shadow: none;
      padding: 12px;
      margin-top: 6px;
      background: var(--glass-2);
      border: 1px solid var(--stroke-1);
      border-radius: var(--r-md);
      max-height: 380px;
      overflow-y: auto;
    }
    .mega-panel::before, .mega-arrow { display: none !important; }
    .mega-bar { flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: 10px; }
    .mega-bar .search { display: none; }
    .mega-bar .crumb { font-size: 12px; }
    .features-grid {
      grid-template-columns: 1fr !important;
      gap: 12px;
    }
    .fcol .fcol-head { font-size: 11px; }
    .fspot, .fspot-card, .fspot-stats { display: none; } /* skip spotlight on mobile */
    .mega-foot-rail { display: none; }
    .mega-grid { grid-template-columns: 1fr; }
    .mega-featured { display: none; }
    .mega-tools-wrap { width: 100%; }
    .mega-tabs { overflow-x: auto; gap: 4px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
    .tools-grid { grid-template-columns: 1fr !important; gap: 6px; }
    .tool-cell { padding: 10px; }

    /* Hero stack */
    .hero-grid {
      grid-template-columns: 1fr !important;
      gap: 32px;
    }
    .hero-stage { order: 2; max-width: 100%; }
    .h-display { font-size: clamp(36px, 7vw, 56px); line-height: 1.05; }

    /* Other grids stack to 2 columns at this breakpoint */
    .iso-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; }
    .iso-card.s-3x1, .iso-card.s-4x1 { grid-column: span 4 !important; }
    .iso-card.s-2x1 { grid-column: span 2; }

    .ft-grid {
      grid-template-columns: 1fr 1fr;
      gap: 36px 24px;
      padding-bottom: 32px;
    }

    .faq-grid { grid-template-columns: 1fr; gap: 24px; }

    /* Hide the nav-cta sign-in / start-free buttons in the top bar;
       keep only the burger. The CTAs move inside the drawer's footer
       via the App link + Generate-my-website hero button. */
    .nav-cta .btn-ghost { display: none; }
    .nav-cta .btn-primary { padding: 7px 12px; font-size: 12.5px; }

    /* Section padding compaction */
    section { padding-left: 0; padding-right: 0; }
    .hero { padding-top: 28px; padding-bottom: 48px; }
  }

  /* ===== ≤ 640px : single-column phone layout ===== */
  @media (max-width: 640px) {
    .container { padding: 0 18px; }
    .nav-wrap { padding: 8px 12px 0; }
    .nav { padding: 8px 12px; }
    .brand small { display: none; }
    .brand { font-size: 14px; gap: 8px; }
    .brand-mark { width: 28px; height: 28px; }

    /* [2026-05-17 fix] Top-bar gets only brand + burger on phones. The
       "Open builder" CTA was eating ~120px of horizontal space and forcing
       the brand off-screen; users can still launch the app via the App
       link inside the drawer or the hero "Generate my website" CTA. */
    .nav-cta { display: none; }

    /* [2026-05-17 fix] Hide the metropro.studio hero mockup on phones.
       It has decorative absolutely-positioned tags ("Search-fluent",
       "Agent-readable", "Schema-locked", "Adaptive layout") that don't
       fit + don't add value on a 400px screen. */
    .hero-stage { display: none; }
    .hero-grid { gap: 0; }

    /* Hero typography compaction */
    .h-display { font-size: clamp(32px, 9vw, 44px) !important; line-height: 1.07; }
    .h-1 { font-size: clamp(26px, 6vw, 34px) !important; }
    .hero-sub { font-size: 14.5px; line-height: 1.55; }
    .hero-eyebrow { flex-wrap: wrap; gap: 8px; font-size: 11.5px; }
    .hero-ctas { flex-wrap: wrap; gap: 10px; }
    .hero-ctas .btn { flex: 1 1 auto; min-width: 0; }

    /* Footer single column */
    .ft-grid {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .ft-brand p { max-width: 100%; }

    /* Iso (templates) grid: 2 col */
    .iso-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; gap: 10px; }
    .iso-card.s-3x1, .iso-card.s-4x1 { grid-column: span 2 !important; }
    .iso-card.s-2x1 { grid-column: span 2 !important; }

    /* Compact pricing card padding */
    .price { padding: 22px 18px; }
    .price .amt .v { font-size: 36px; }

    /* FAQ wrap padding */
    .faq-item { padding: 18px 0; }
    .faq-q { font-size: 14.5px; }

    /* Final CTA compact */
    .final-cta { padding: 48px 22px; }

    /* Drop tab counts beside category labels in the mega tabs to save
       horizontal space, they wrapped awkwardly. */
    .mega-tab .num { display: none; }
  }

  /* ===== ≤ 480px : phone-portrait micro layout ===== */
  @media (max-width: 480px) {
    .container { padding: 0 14px; }
    .h-display { font-size: clamp(28px, 9.5vw, 38px) !important; }
    .h-1 { font-size: clamp(24px, 7vw, 30px) !important; }
    .nav-cta .btn-primary span, .nav-cta .btn-primary .ic { display: inline; }
    .nav-cta .btn-primary { padding: 6px 10px; font-size: 12px; }
    .nav-links { width: 100vw; max-width: none; border-left: 0; }

    /* Drop the mockup eyebrow tags floating around the hero stage */
    .hero-stage .ribbon, .hero-stage .ic-tag { display: none; }

    /* Pricing already collapses to 1 col at 640; ensure inner stats list
       doesn't overflow */
    .price li { font-size: 13px; }
  }

  /* ============================================================
   * [2026-05-17 v2] SECTION-BY-SECTION RESPONSIVE UX
   * ------------------------------------------------------------
   * After the horizontal-scroll fix landed, every section was still
   * laid out for desktop (.steps = 4 cols, .bento = 6 cols, .trust-inner
   * = 2 cols, etc.) and section vertical padding ranged from 28px to
   * 112px with no rhythm.
   *
   * This block normalises the mobile layout for EVERY section:
   *   - All multi-column grids collapse to 1 column on phones
   *   - Tablet (≤900) gets 2 columns where sensible
   *   - Section vertical padding flattens to 56-64px on mobile so the
   *     scroll cadence between sections is consistent
   *   - .sec-head bottom margin shrinks from 56px → 32px on mobile
   *   - Card/grid gaps standardise to 14-20px
   * ============================================================ */

  /* === Section padding rhythm (consistent across the page) === */
  @media (max-width: 900px) {
    /* Override desktop's 112px / 96px / etc. with a uniform rhythm.
       Tablet keeps a little more breathing room than mobile. */
    section { padding: 72px 0; }
    .hero { padding: 32px 0 56px; }
    .iso-section, #templates { padding: 56px 0 72px; }
    .trust { padding: 48px 0; }
    .gen-hl-section { padding: 64px 0; }
    .final-cta { padding: 56px 32px; margin: 0 4px; }
    footer { padding: 48px 0 32px; }
    .sec-head { margin-bottom: 36px; gap: 12px; }
    .sec-head .lead { font-size: 15px; max-width: 100%; }
  }
  @media (max-width: 640px) {
    section { padding: 56px 0; }
    .hero { padding: 24px 0 40px; }
    .iso-section, #templates { padding: 48px 0 56px; }
    .trust { padding: 40px 0; }
    .gen-hl-section { padding: 48px 0; }
    .final-cta { padding: 44px 20px; margin: 0; }
    footer { padding: 40px 0 28px; }
    .sec-head { margin-bottom: 28px; gap: 10px; }
    .sec-head .lead { font-size: 14.5px; line-height: 1.55; }
    .kicker { font-size: 10.5px; }
  }

  /* === HOW IT WORKS — .steps (was 4 cols) === */
  @media (max-width: 900px) {
    .steps { grid-template-columns: 1fr 1fr; gap: 16px; }
    .step { min-height: auto; padding: 22px 20px 24px; }
    .step h3 { font-size: 17px; }
    .step p { font-size: 13.5px; }
    .step-vis { margin-top: 16px; }
  }
  @media (max-width: 640px) {
    .steps { grid-template-columns: 1fr; gap: 14px; }
    .step { padding: 22px 20px; }
  }

  /* === CAPABILITIES — .bento (was 6 cols, 220px tall) === */
  @media (max-width: 900px) {
    .bento {
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: auto;
      gap: 14px;
    }
    .bento .b-card { grid-column: span 1 !important; padding: 22px; min-height: 200px; }
    /* Cards that span 2+ at desktop should span both columns on tablet. */
    .bento .b-1, .bento .b-2, .bento .b-3, .bento .b-4, .bento .b-5, .bento .b-6,
    .bento .b-card[class*="b-"][class*="span"] { grid-column: span 2 !important; }
    .b-art svg { max-width: 100%; height: auto; }
  }
  @media (max-width: 640px) {
    .bento { grid-template-columns: 1fr; gap: 14px; }
    .bento .b-card { grid-column: span 1 !important; padding: 20px; min-height: auto; }
    .bento .b-card h3 { font-size: 15.5px; }
    .bento .b-card p { font-size: 13px; }
    .b-art { margin-top: 12px; }
  }

  /* === TRUST band — logos + stats === */
  @media (max-width: 900px) {
    .trust-inner {
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 24px 22px;
    }
    .trust-logos { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .trust-stats { justify-content: center; gap: 0; flex-wrap: wrap; }
    .trust-stat { padding: 12px 18px; border-left: 1px solid var(--stroke-1); flex: 1 1 33%; text-align: center; min-width: 0; }
    .trust-stat:first-child { border-left: 1px solid var(--stroke-1); }
  }
  @media (max-width: 640px) {
    .trust-inner { padding: 22px 18px; gap: 20px; }
    .trust-logos { grid-template-columns: repeat(2, 1fr); gap: 16px; justify-items: center; }
    .trust-logos > * { max-height: 28px; opacity: 0.7; }
    .trust-stat .v { font-size: 22px; }
    .trust-stat { padding: 10px 12px; flex: 1 1 100px; }
  }

  /* === GEN-HL section (sticky left + scrolling right on desktop) === */
  @media (max-width: 900px) {
    .gen-hl-grid {
      grid-template-columns: 1fr !important;
      gap: 28px !important;
    }
    .gen-hl-left { position: static !important; top: auto !important; }
    .gen-hl-progress { font-size: 13px; }
  }

  /* === ISO templates grid: 1 column on phones, larger card heights === */
  @media (max-width: 640px) {
    .iso-grid {
      grid-template-columns: 1fr !important;
      grid-auto-rows: 200px;
      gap: 12px;
    }
    .iso-card, .iso-card.s-2x1, .iso-card.s-3x1, .iso-card.s-4x1 {
      grid-column: 1 / -1 !important;
      grid-row: span 1 !important;
    }
  }

  /* === COMPACT / COMPOSITION / smaller mid-page sections === */
  @media (max-width: 900px) {
    .compact { padding: 56px 0 !important; }
    .compact .container > .sec-head { margin-bottom: 28px; }
    /* If .compact has internal columns/grids, stack them */
    .compact .grid, .compact [class*="grid"] {
      grid-template-columns: 1fr !important;
      gap: 14px !important;
    }
  }

  /* === FINAL CTA section === */
  @media (max-width: 640px) {
    .final-cta .h-1 { font-size: clamp(22px, 6.5vw, 30px) !important; }
    .final-cta p { font-size: 14.5px; padding: 0 4px; }
    .final-cta .btn { width: 100%; justify-content: center; }
  }

  /* === HERO CTAs side-by-side fix (stack instead of cramp) === */
  @media (max-width: 480px) {
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero-ctas .btn { width: 100%; justify-content: center; }
    .prompt-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
    .prompt-suggest .s { font-size: 11.5px; padding: 5px 9px; }
  }

  /* === FAQ === */
  @media (max-width: 900px) {
    .faq-grid { gap: 24px; }
    .faq-grid .sec-head { text-align: center; align-items: center; }
  }

  /* === Defensive: any direct child of .container that's a multi-col
     grid and hasn't been targeted gets stacked at phone widths. ===  */
  @media (max-width: 640px) {
    .container > .grid,
    .container > [class*="-grid"]:not(.iso-grid):not(.ft-grid):not(.faq-grid):not(.hero-grid):not(.steps):not(.bento):not(.gen-hl-grid):not(.pricing) {
      grid-template-columns: 1fr !important;
      gap: 16px !important;
    }
  }

  /* ============================================================
   * [2026-05-17 v3] CREATIVE MOBILE UX — HORIZONTAL CAROUSELS
   * ------------------------------------------------------------
   * Three goals:
   *   A. Bring the hero "metropro.studio" dashboard above the fold on
   *      mobile by scaling it down rather than hiding it.
   *   B. Convert long vertical stacks into horizontal scroll-snap
   *      carousels — How It Works (4 steps), Capabilities (6 cards),
   *      Live Composition (5 cards), Templates Coverflow, Iso gallery.
   *      Saves ~1500px of vertical scroll and feels native on mobile.
   *   C. Add a subtle scroll affordance (slim scrollbar / peek of next
   *      card) so users know it's swipeable.
   * Carousels use native scroll-snap (zero JS), peek-of-next via
   * scroll-padding so the next card edge is always visible.
   * ============================================================ */

  /* === A. HERO DASHBOARD ABOVE THE FOLD ON MOBILE === */
  @media (max-width: 900px) {
    /* Override the earlier rule that hid hero-stage at ≤640. Instead
       show a compressed version. */
    /* [2026-05-17 v5] Hero stage size-up. v4 clipped the dashboard at
       240-320px which made the metropro.studio mockup almost illegible
       above the fold. Bumping height + scale so the user sees the
       dashboard panels clearly. Border + subtle inner shadow tied the
       stage into the brand surface treatment. */
    .hero-stage {
      display: block !important;
      max-width: 100%;
      margin-top: 16px;
      position: relative;
      height: 380px;
      overflow: hidden;
      border-radius: var(--r-lg);
      isolation: isolate;
      border: 1px solid var(--stroke-1);
      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
      box-shadow: 0 12px 36px -16px rgba(0,0,0,0.6);
    }
    /* Scale the inner mockup down enough to fit, but large enough to
       read. 0.72 lets dashboard panels stay readable on tablets. */
    .hero-stage > * {
      transform: scale(0.72);
      transform-origin: top left;
      width: calc(100% / 0.72);
      max-width: none;
    }
    /* Re-hide the floating decorative tags that float around the mockup
       at desktop — they don't fit in the clipped frame. */
    .hero-stage .ribbon,
    .hero-stage .ic-tag,
    .hero-stage [class*="floating"] { display: none !important; }
  }
  @media (max-width: 640px) {
    .hero-stage { height: 340px; margin-top: 12px; }
    .hero-stage > * { transform: scale(0.62); width: calc(100% / 0.62); }
  }
  @media (max-width: 480px) {
    .hero-stage { height: 300px; margin-top: 8px; }
    .hero-stage > * { transform: scale(0.54); width: calc(100% / 0.54); }
  }

  /* === B1. HOW IT WORKS — horizontal scroll-snap carousel ===
     Replaces the 1-col stack from v2 with a swipeable horizontal
     carousel so all 4 steps fit in one viewport-sized strip. */
  @media (max-width: 900px) {
    .steps {
      display: flex !important;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding: 0 18px;
      gap: 14px !important;
      grid-template-columns: none !important;
      padding: 4px 18px 16px;
      margin: 0 -18px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    .step {
      flex: 0 0 86%;
      max-width: 320px;
      scroll-snap-align: start;
      min-height: 280px;
    }
  }

  /* === B2. CAPABILITIES — horizontal scroll-snap carousel === */
  @media (max-width: 900px) {
    .bento {
      display: flex !important;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding: 0 18px;
      gap: 14px !important;
      grid-template-columns: none !important;
      grid-auto-rows: auto !important;
      padding: 4px 18px 16px;
      margin: 0 -18px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    .bento .b-card {
      flex: 0 0 86%;
      max-width: 340px;
      scroll-snap-align: start;
      grid-column: auto !important;
      min-height: 260px;
      padding: 22px;
    }
    .bento .b-art { margin-top: 12px; max-height: 140px; overflow: hidden; }
    .bento .b-art svg { max-height: 130px; height: auto; }
  }

  /* === B3. LIVE COMPOSITION (gen-hl) — horizontal scroll-snap === */
  @media (max-width: 900px) {
    .gen-hl-grid {
      grid-template-columns: 1fr !important;
      gap: 24px !important;
    }
    .gen-hl-left { position: static !important; }
    .gen-hl-progress { font-size: 13px; }
    /* Convert the 5 cards into a horizontal swipeable strip.
       [2026-05-17 v4] CRITICAL: the base rule at L1015 sets
       `.gen-hl-cards { flex-direction: column }` and an earlier mobile
       override pass forgot to reset it — cards stacked vertically and
       scrollWidth never exceeded offsetWidth. flex-direction:row
       !important now wins the cascade so the strip actually scrolls. */
    .gen-hl-cards {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding: 0 18px;
      gap: 14px !important;
      padding: 4px 18px 16px;
      margin: 0 -18px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      min-width: 0;
    }
    .gen-hl-card {
      flex: 0 0 88% !important;
      max-width: 360px;
      scroll-snap-align: start;
      min-height: auto;
      padding: 22px !important;
    }
    /* Compact the inner mock "art" elements so each card fits well. */
    .gen-hl-card .art { transform: none !important; min-height: 150px !important; padding: 14px !important; }
    .gen-hl-card h3 { font-size: 22px !important; }
    .gen-hl-card p { font-size: 13.5px !important; }
    /* B3.1 Export-formats grid: 2×N on phone */
    .gen-hl-card .art-export { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .gen-hl-card .art-export .exp-card { min-width: 0; padding: 12px !important; }
    .gen-hl-card .art-export .exp-card .lg { font-size: 14px !important; }
    /* B3.2 Lighthouse rings 4-up: even spacing, smaller diameters */
    .gen-hl-card .art-rings {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 8px !important;
      align-items: start !important;
    }
    .gen-hl-card .art-rings .ring { gap: 4px !important; }
    .gen-hl-card .art-rings .ring svg { width: 52px !important; height: 52px !important; }
    .gen-hl-card .art-rings .ring .lbl { font-size: 10px !important; letter-spacing: 0.04em !important; }
    .gen-hl-card .art-rings .ring .num { font-size: 13px !important; }
    /* B3.3 Multi-stack swap: collapse the side-by-side stacks visualization
       into a 3-up mini stack so it reads at narrow widths. */
    .gen-hl-card .art-stacks { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; align-items: stretch !important; }
    .gen-hl-card .art-stacks .stk { padding: 10px !important; gap: 6px !important; }
    .gen-hl-card .art-stacks .stk .nm { font-size: 11px !important; letter-spacing: 0.02em !important; }
    .gen-hl-card .art-stacks .stk .badge { font-size: 9px !important; padding: 2px 6px !important; }
    .gen-hl-card .art-stacks .stk .layer { height: 6px !important; }
    /* B3.4 Sitemap art: 1-column stack inside the card */
    .gen-hl-card .art-sitemap { grid-template-columns: 1fr !important; gap: 12px !important; }
    .gen-hl-card .art-sitemap .term { font-size: 11px !important; padding: 10px 12px !important; }
    /* B3.5 Agents art: 4 columns instead of 7 */
    .gen-hl-card .art-agents { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
    .gen-hl-card .art-agents .a-cell { font-size: 8px !important; }
  }

  /* === B4. NICHES COVERFLOW — convert 3D carousel to scroll-snap ===
     The desktop .coverflow uses absolute positioning + 3D transforms.
     On mobile that's both heavy and broken (slides position based on a
     wide stage). Convert to a flat horizontal scroll-snap strip. */
  @media (max-width: 900px) {
    .coverflow {
      height: auto !important;
      overflow: visible !important;
      perspective: none !important;
      margin: 0 -16px !important;
      border-radius: 0 !important;
    }
    .coverflow-track {
      position: static !important;
      display: flex !important;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding: 0 16px;
      gap: 14px;
      padding: 8px 16px 20px;
      transform-style: flat !important;
      transform: none !important;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    .coverflow .cf-slide {
      position: static !important;
      transform: none !important;
      opacity: 1 !important;
      filter: none !important;
      flex: 0 0 86%;
      width: auto !important;
      max-width: 360px;
      /* [2026-05-17 v5] Extended card height 380 → 480 so the niche
         preview (brand hero + name + description + tags) is fully
         readable without truncating the description. */
      height: 480px !important;
      scroll-snap-align: start;
    }
    .cf-img { width: 100% !important; height: 100% !important; }
    .cf-img .ph-meta .name { font-size: 18px !important; }
    .cf-img .ph-meta .desc { font-size: 12.5px !important; max-width: 100% !important; }
    .ph-stage .hh { font-size: 22px !important; max-width: 95% !important; }
    /* Hide coverflow nav dots if present at mobile — native scrollbar
       + scroll-snap is the affordance. */
    .coverflow .cf-dots, .coverflow-nav { display: none !important; }
  }

  /* === B5. ISO TEMPLATE GALLERY — horizontal swipe on small phones ===
     Replaces the 1-col vertical list with a horizontal scroll-snap of
     three template cards visible at a time so users can quickly browse
     niches without endless scroll. */
  @media (max-width: 640px) {
    .iso-grid {
      display: flex !important;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding: 0 18px;
      gap: 12px !important;
      grid-template-columns: none !important;
      grid-auto-rows: none !important;
      padding: 4px 18px 16px;
      margin: 0 -18px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    .iso-card {
      flex: 0 0 84% !important;
      max-width: 320px !important;
      height: 200px !important;
      grid-column: auto !important;
      grid-row: auto !important;
      scroll-snap-align: start;
    }
  }

  /* === Scrollbar styling so the carousels look clean === */
  @media (max-width: 900px) {
    .steps::-webkit-scrollbar,
    .bento::-webkit-scrollbar,
    .gen-hl-cards::-webkit-scrollbar,
    .coverflow-track::-webkit-scrollbar,
    .iso-grid::-webkit-scrollbar {
      height: 4px;
    }
    .steps::-webkit-scrollbar-thumb,
    .bento::-webkit-scrollbar-thumb,
    .gen-hl-cards::-webkit-scrollbar-thumb,
    .coverflow-track::-webkit-scrollbar-thumb,
    .iso-grid::-webkit-scrollbar-thumb {
      background: var(--stroke-2);
      border-radius: 2px;
    }
    .steps::-webkit-scrollbar-track,
    .bento::-webkit-scrollbar-track,
    .gen-hl-cards::-webkit-scrollbar-track,
    .coverflow-track::-webkit-scrollbar-track,
    .iso-grid::-webkit-scrollbar-track {
      background: transparent;
    }
  }

  /* === Subtle "swipe me" affordance: pseudo-element gradient fade on
     the right edge of each carousel hinting more content. === */
  @media (max-width: 900px) {
    .steps, .bento, .gen-hl-cards, .iso-grid, .coverflow-track {
      mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%);
    }
  }

  /* ============================================================
   * [2026-05-17 v4] HERO COMPACTION — DASHBOARD ABOVE THE FOLD
   * ------------------------------------------------------------
   * Goal: bring the .hero-stage (metropro.studio dashboard mockup)
   * within the first 700px of viewport on phone widths so users
   * see at least a partial preview without scrolling.
   *
   * Hero stack pre-fix on a 387×800 viewport:
   *   header(76) → padTop(24) → h1(157+22mb) → sub(135+32mb) →
   *   input(56+12mb) → suggest(64) → ctas(113+32mt+28mb) → stage@879px
   *
   * Each rule below tightens one rung — collectively the stage
   * lifts to ~680-700px without hiding any content. Buttons stay
   * full-width, text stays readable (h1 ≥ 28px, sub ≥ 14px).
   * ============================================================ */
  @media (max-width: 640px) {
    /* Tighter section frame */
    .hero { padding: 16px 0 32px !important; }
    /* H1: tighter font + line-height + smaller margin */
    .hero h1 {
      font-size: clamp(26px, 7.6vw, 32px) !important;
      line-height: 1.08 !important;
      margin-bottom: 12px !important;
      letter-spacing: -0.025em !important;
    }
    /* Subline: 2-line clamp, smaller font, smaller margin */
    .hero-sub {
      font-size: 14px !important;
      line-height: 1.5 !important;
      margin-bottom: 14px !important;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    /* Prompt input: tighter row */
    .prompt-input { padding: 6px 6px 6px 14px !important; margin-bottom: 8px !important; }
    .prompt-input input { font-size: 13.5px !important; padding: 6px 4px !important; }
    .prompt-input .send { width: 32px !important; height: 32px !important; }
    /* Suggestion chips: tighter row + smaller padding so they fit in 1-2 rows */
    .prompt-suggest { margin-top: 8px !important; gap: 6px !important; }
    .prompt-suggest .s { font-size: 11px !important; padding: 4px 8px !important; }
    /* CTAs: tighter margin + smaller buttons */
    .hero-ctas { margin: 14px 0 12px !important; gap: 8px !important; }
    .hero-ctas .btn { padding: 11px 18px !important; font-size: 14px !important; }
    /* Stage closer to the CTAs */
    .hero-stage { margin-top: 6px !important; }
  }
  @media (max-width: 480px) {
    .hero { padding: 12px 0 28px !important; }
    .hero h1 {
      font-size: clamp(24px, 7.4vw, 28px) !important;
      line-height: 1.06 !important;
      margin-bottom: 10px !important;
    }
    .hero-sub {
      font-size: 13.5px !important;
      margin-bottom: 12px !important;
      -webkit-line-clamp: 2;
    }
    .hero-ctas { margin: 10px 0 8px !important; }
    .hero-ctas .btn { padding: 10px 16px !important; font-size: 13.5px !important; }
  }

  /* ============================================================
   * [2026-05-17 v5] WHY TEAMS SWITCH + LIVE COMPOSITION + COMPARE
   * ------------------------------------------------------------
   *   1. `.benefits` (5-stat row) had NO mobile rule and the
   *      `.compact .grid` defensive selector doesn't match it
   *      (class doesn't contain "grid"). Cards stayed cramped at
   *      ~70px wide each. Converted to horizontal scroll-snap.
   *   2. `.live-gen` (Watch a website compose itself) had a
   *      2-column desktop grid with NO mobile override — the
   *      composition trace and the preview dashboard fought for
   *      space at narrow widths. Stacks them now, preview on top
   *      so the user sees the mockup first.
   *   3. `.compare` (Traditional vs multi-agent) table needs the
   *      table-to-card transform on narrow widths to stay
   *      readable.
   * ============================================================ */

  /* === 1. WHY TEAMS SWITCH — horizontal scroll-snap === */
  @media (max-width: 900px) {
    .benefits {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding: 0 18px;
      gap: 14px !important;
      grid-template-columns: none !important;
      padding: 4px 18px 16px;
      margin: 0 -18px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%);
    }
    .benefit {
      flex: 0 0 70%;
      max-width: 240px;
      scroll-snap-align: start;
      padding: 22px 20px !important;
      min-height: 170px;
    }
    .benefit .v { font-size: 32px !important; margin-bottom: 6px !important; }
    .benefit h3 { font-size: 14px !important; margin-bottom: 6px !important; }
    .benefit p { font-size: 12.5px !important; line-height: 1.5 !important; }
    .benefits::-webkit-scrollbar { height: 4px; }
    .benefits::-webkit-scrollbar-thumb { background: var(--stroke-2); border-radius: 2px; }
    .benefits::-webkit-scrollbar-track { background: transparent; }
  }

  /* === 2. LIVE COMPOSITION — stack the 2-col on mobile === */
  @media (max-width: 900px) {
    .live-gen {
      grid-template-columns: 1fr !important;
      gap: 20px !important;
      padding: 18px !important;
      /* Reorder so the preview (visual) is on top, prompt+trace
         below. Phone users scan visuals first. */
    }
    .live-gen .gen-prompt { order: 2; }
    .live-gen .gen-preview { order: 1; min-height: 340px !important; padding: 12px !important; }
    .gp-toolbar { gap: 8px !important; margin-bottom: 10px !important; }
    .gp-toolbar .pdomain { font-size: 10px !important; padding: 4px 10px !important; }
    .gp-toolbar .gp-vp { display: none !important; }
    .gp-canvas { height: 270px !important; padding: 16px !important; }
    .gen-prompt .ph { font-size: 10px !important; }
    .gen-prompt .ta { font-size: 12.5px !important; padding: 12px !important; min-height: 80px !important; }
    .gen-tl .tl-row { font-size: 12px !important; padding: 8px !important; }
    .gen-tl .tl-row .time { font-size: 11px !important; }
  }
  @media (max-width: 480px) {
    .live-gen { padding: 14px !important; }
    .live-gen .gen-preview { min-height: 300px !important; }
    .gp-canvas { height: 230px !important; }
    .gp-canvas .gp-h { font-size: 20px !important; }
    .gp-canvas .gp-sub { font-size: 11.5px !important; }
  }

  /* === 3. COMPARISON TABLE — readable card flow on narrow === */
  @media (max-width: 640px) {
    .compare table { font-size: 12.5px; }
    .compare th, .compare td { padding: 10px 8px !important; }
    .compare .metric { font-size: 11px; }
  }

  /* ============================================================
   * [2026-05-17 v5] TYPOGRAPHY HIERARCHY — H1 > H2 > H3 on mobile
   * ------------------------------------------------------------
   * BEFORE this pass at 387px viewport:
   *   Hero H1 = 28px   (rule: .hero h1 ≤480 clamp max)
   *   Section .h-1 (H2) = 27.1px  (rule: .h-1 ≤640 7vw calc)
   *   Section .h-2 (H2) = 24px
   *   Card H3 = 22px
   *   → H1 and H2 were visually identical (within 1px). Hierarchy broken.
   *
   * AFTER (target at 387px):
   *   Hero H1 = ~32px
   *   Section .h-1 = ~22px
   *   Section .h-2 = ~19px
   *   Card H3 = ~18-19px
   *   → 10px gap H1↔H2, clear 3-4px gap each step down.
   * ============================================================ */

  /* Bump hero H1 (uses .h-display class) so it's clearly the largest. */
  @media (max-width: 640px) {
    .hero h1, .hero h1.h-display {
      font-size: clamp(30px, 8.4vw, 36px) !important;
      line-height: 1.08 !important;
      letter-spacing: -0.028em !important;
      margin-bottom: 12px !important;
    }
  }
  @media (max-width: 480px) {
    .hero h1, .hero h1.h-display {
      font-size: clamp(28px, 8.2vw, 32px) !important;
      line-height: 1.06 !important;
      margin-bottom: 10px !important;
    }
  }

  /* Bring section .h-1 (H2) firmly below hero H1.
     `:not(.hero h1)` isn't valid CSS, but every .h-1 in this codebase
     lives outside .hero (the hero uses .h-display), so the global
     selector is safe. */
  @media (max-width: 900px) {
    .h-1 {
      font-size: clamp(22px, 5vw, 28px) !important;
      line-height: 1.15 !important;
      letter-spacing: -0.022em !important;
    }
    .h-2 {
      font-size: clamp(19px, 4.2vw, 22px) !important;
      line-height: 1.2 !important;
    }
  }
  @media (max-width: 640px) {
    .h-1 {
      font-size: clamp(21px, 5.4vw, 24px) !important;
      line-height: 1.18 !important;
    }
    .h-2 {
      font-size: clamp(18px, 4.6vw, 20px) !important;
    }
    .final-cta .h-1 {
      font-size: clamp(22px, 5.8vw, 26px) !important;
    }
  }

  /* Bring card-level H3s below section H2 (.h-1) so the cascade reads. */
  @media (max-width: 900px) {
    .gen-hl-card h3 { font-size: 19px !important; line-height: 1.2 !important; }
    .bento .b-card h3 { font-size: 17px !important; }
    .step h3 { font-size: 16px !important; }
  }
  @media (max-width: 480px) {
    .gen-hl-card h3 { font-size: 18px !important; }
  }