/* Landing v8 only — tokens from project root DESIGN.md.
   Static index.html links this file directly; MarketingLayout imports it for Vue marketing routes. */
      :root {
        --ds-ink: #000000;
        --ds-on-primary: #ffffff;
        --ds-body: #959494;
        --ds-canvas: #ffffff;
        --ds-canvas-dark: #010120;
        --ds-surface-dark-soft: #313641;
        --ds-hairline: #ebebeb;
        --ds-accent-mint: #c8f6f9;
        --ds-accent-orange: #fc4c02;
        --ds-accent-magenta: #ef2cc1;
        --ds-accent-periwinkle: #bdbbff;
        --ds-brand-gradient: linear-gradient(90deg, var(--ds-accent-orange), var(--ds-accent-magenta), var(--ds-accent-periwinkle));

        --bg: var(--ds-canvas);
        --text: var(--ds-ink);
        --text-muted: var(--ds-body);
        --text-faint: rgba(0, 0, 0, 0.45);
        --accent: var(--ds-ink);
        --accent-2: var(--ds-ink);
        --border: rgba(0, 0, 0, 0.08);
        --glass: rgba(255, 255, 255, 0.94);
        --glass-strong: #ffffff;
        --shadow: rgba(1, 1, 32, 0.1) 0 4px 10px 0;
        --shadow-soft: none;

        --radius: 8px;
        --radius-sm: 4px;
        --max-w: 1280px;

        --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
        --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      }

      /* Visual tokens: project root DESIGN.md — this file is only linked from landing-v8/index.html (does not load in Vue or v1–v7). */
      * { box-sizing: border-box; }
      /* Single scroll container (html only). height:100% + overflow-x:hidden on body
         forces overflow-y:auto on body and duplicates the viewport scrollbar. */
      html {
        overflow-x: clip;
        overflow-y: auto;
        scrollbar-gutter: stable;
      }
      body {
        margin: 0;
        min-height: 100%;
        font-family: var(--font);
        background: var(--bg);
        color: var(--text);
        overflow-x: clip;
        overflow-y: visible;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: "ss01" 1;
      }

      ::selection { background: rgba(0, 0, 0, 0.12); }

      /* Background mesh + noise */
      .bg {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: var(--ds-canvas);
      }
      .noise {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.035;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 220px 220px;
      }

      /* Starscape canvas (subtle on light bg) */
      #stars {
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0.20;
        mix-blend-mode: multiply;
      }

      /* Top progress bar */
      .scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 250;
        background: transparent;
      }
      .scroll-progress > div {
        height: 100%;
        width: 0%;
        background: var(--ds-brand-gradient);
        box-shadow: none;
      }

      /* Navbar (full -> pill) */
      .nav {
        position: fixed;
        top: 12px;
        left: 0;
        right: 0;
        z-index: 220;
        padding: 0 calc(26px * var(--dp-density-scale, 1));
        pointer-events: none;
      }
      .nav-inner {
        pointer-events: auto;
        max-width: var(--max-w);
        margin: 0 auto;
        padding: calc(12px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1));
        border-radius: var(--radius);
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: calc(12px * var(--dp-density-scale, 1));
        background: var(--ds-canvas);
        border: 1px solid var(--ds-hairline);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: var(--shadow);
        transform-origin: top center;
        transition: transform 280ms ease, background 280ms ease, box-shadow 280ms ease, max-width 280ms ease, padding 280ms ease, gap 280ms ease;
      }
      .nav-inner.scrolled {
        max-width: min(980px, calc(100% - 52px));
        padding: calc(8px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1));
        gap: calc(8px * var(--dp-density-scale, 1));
        background: var(--ds-canvas);
        box-shadow: var(--shadow);
      }
      .brand {
        display: flex;
        align-items: center;
        gap: calc(10px * var(--dp-density-scale, 1));
        text-decoration: none;
        color: inherit;
        flex-shrink: 0;
      }
      .brand img:not(.brand-logo__lockup):not(.brand-logo__mark):not(.brand-logo__word) {
        display: block;
        width: auto;
        height: calc(32px * var(--dp-density-scale, 1));
        max-width: min(160px, 40vw);
        padding: 0;
        object-fit: contain;
        object-position: left center;
        background: transparent;
        border-radius: 0;
        border: none;
        box-shadow: none;
        box-sizing: border-box;
        transition: height 280ms ease, max-width 280ms ease;
      }
      .brand .brand-logo {
        height: auto;
        max-width: none;
        padding: 0;
        background: transparent;
      }
      .brand .brand-logo__lockup {
        height: var(--hp-lockup-height, 72px);
        width: auto;
        max-width: none;
        transition: height 280ms ease;
      }
      .brand .brand-logo__mark {
        width: var(--hp-lockup-mark-size, 32px);
        height: var(--hp-lockup-mark-size, 32px);
        transition: height 280ms ease, width 280ms ease;
      }
      .brand .brand-logo__word {
        height: var(--hp-lockup-word-size, 22px);
        width: auto;
      }
      .nav-inner.scrolled .brand .brand-logo__lockup {
        height: 28px;
      }
      .nav-inner.scrolled .brand .brand-logo__mark {
        height: 24px;
        width: 24px;
      }
      .nav-inner.scrolled .brand .brand-logo__word {
        height: 18px;
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: calc(6px * var(--dp-density-scale, 1));
        flex-shrink: 1;
        min-width: 0;
      }
      .nav-links a {
        text-decoration: none;
        color: var(--text-muted);
        font-size: calc(16px * var(--dp-density-scale, 1));
        font-weight: 400;
        letter-spacing: -0.01em;
        line-height: 1.3;
        padding: calc(8px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1));
        border-radius: var(--radius-sm);
        transition: background 160ms ease, color 160ms ease, font-size 280ms ease, padding 280ms ease;
        white-space: nowrap;
      }
      .nav-links a:hover { background: var(--ds-hairline); color: var(--text); }
      .nav-inner.scrolled .nav-links {
        gap: calc(2px * var(--dp-density-scale, 1));
      }
      .nav-inner.scrolled .nav-links a {
        font-size: calc(14px * var(--dp-density-scale, 1));
        padding: calc(6px * var(--dp-density-scale, 1)) calc(8px * var(--dp-density-scale, 1));
      }
      .nav-actions {
        display: flex;
        gap: calc(8px * var(--dp-density-scale, 1));
        align-items: center;
        flex-shrink: 0;
      }
      .nav-actions__auth-skeleton {
        display: inline-flex;
        gap: calc(8px * var(--dp-density-scale, 1));
        align-items: center;
        min-height: calc(36px * var(--dp-density-scale, 1));
      }
      .nav-actions__auth-skeleton span {
        display: inline-block;
        height: calc(34px * var(--dp-density-scale, 1));
        border-radius: var(--radius-sm);
        background: var(--ds-hairline);
      }
      .nav-actions__auth-skeleton span:first-child {
        width: calc(72px * var(--dp-density-scale, 1));
      }
      .nav-actions__auth-skeleton span:last-child {
        width: calc(96px * var(--dp-density-scale, 1));
      }
      .nav-inner.scrolled .nav-actions__auth-skeleton span {
        height: calc(30px * var(--dp-density-scale, 1));
      }
      .nav-actions .btn {
        white-space: nowrap;
        flex-shrink: 0;
        transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, filter 160ms ease, padding 280ms ease, font-size 280ms ease;
      }
      .nav-inner.scrolled .nav-actions {
        gap: calc(6px * var(--dp-density-scale, 1));
      }
      .nav-inner.scrolled .nav-actions .btn {
        padding: calc(7px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1));
        font-size: calc(13px * var(--dp-density-scale, 1));
      }
      .nav-inner.scrolled .nav-actions .nav-locale {
        margin-left: calc(4px * var(--dp-density-scale, 1));
        padding-left: calc(8px * var(--dp-density-scale, 1));
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: calc(10px * var(--dp-density-scale, 1));
        padding: calc(8px * var(--dp-density-scale, 1)) calc(24px * var(--dp-density-scale, 1));
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        background: var(--ds-canvas);
        color: var(--text);
        text-decoration: none;
        font-family: var(--mono);
        font-weight: 500;
        font-size: calc(16px * var(--dp-density-scale, 1));
        line-height: 1;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease, filter 160ms ease;
        cursor: pointer;
      }
      .btn:hover { transform: translateY(-1px); background: var(--ds-hairline); border-color: rgba(0, 0, 0, 0.12); }
      .btn.primary {
        background: var(--ds-ink);
        color: var(--ds-on-primary);
        border-color: var(--ds-ink);
        box-shadow: none;
      }
      .btn.primary:hover { box-shadow: none; filter: brightness(1.08); }
      .btn.secondary {
        background: var(--ds-accent-mint);
        color: var(--ds-ink);
        border-color: rgba(0, 0, 0, 0.08);
      }
      .btn.secondary:hover { background: #b8ecf1; border-color: rgba(0, 0, 0, 0.12); }

      /* Author .btn { display: inline-flex } otherwise wins over [hidden] on <button class="btn"> */
      button.btn[hidden] {
        display: none !important;
      }

      .iconBtn {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(27,49,57,0.12);
        background: rgba(255,255,255,0.22);
        color: var(--text);
        display: inline-grid;
        place-items: center;
        cursor: pointer;
        transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
      }
      .iconBtn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.44); border-color: rgba(27,49,57,0.18); }
      .nav-menu { display: none; font-size: calc(18px * var(--dp-density-scale, 1)); font-weight: 900; line-height: 1; }

      /* Mobile menu */
      .menuBackdrop{
        position: fixed;
        inset: 0;
        z-index: 240;
        background: rgba(0,0,0,0.42);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
      }
      .mobileMenu{
        position: fixed;
        top: 14px;
        right: 14px;
        left: 14px;
        z-index: 241;
        border-radius: 22px;
        background: rgba(255,255,255,0.92);
        border: 1px solid rgba(255,255,255,0.82);
        box-shadow: 0 28px 80px rgba(0,0,0,0.28);
        overflow: hidden;
      }
      .mobileMenuTop{
        display:flex;
        align-items:center;
        justify-content: space-between;
        gap: calc(10px * var(--dp-density-scale, 1));
        padding: calc(14px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1)) calc(10px * var(--dp-density-scale, 1));
        border-bottom: 1px solid rgba(27,49,57,0.08);
        background: radial-gradient(circle at top left, rgba(255,255,255,0.98), rgba(255,255,255,0.84));
      }
      .mobileMenuTitle{
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(27,49,57,0.66);
      }
      .mobileMenuLinks{
        display: grid;
        gap: calc(6px * var(--dp-density-scale, 1));
        padding: calc(12px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1)) calc(10px * var(--dp-density-scale, 1));
      }
      .mobileMenuLinks a{
        text-decoration:none;
        color: var(--text);
        font-weight: 800;
        letter-spacing: -0.02em;
        padding: calc(12px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1));
        border-radius: 14px;
        border: 1px solid rgba(27,49,57,0.08);
        background: rgba(27,49,57,0.03);
      }
      .mobileMenuLinks a:active{ transform: translateY(1px); }
      .mobileMenuActions{
        display:flex;
        gap: calc(10px * var(--dp-density-scale, 1));
        padding: calc(10px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1));
      }
      .mobileMenuActions .btn{ flex: 1; }

      /* Layout — scope to marketing surfaces only (static index + MarketingLayout).
         Unscoped `section` leaked 80px padding into app shell nav/PLG after SPA navigation. */
      main { position: relative; z-index: 2; }
      body.landing-v8 main section { padding: calc(80px * var(--dp-density-scale, 1)) calc(32px * var(--dp-density-scale, 1)); }
      .wrap { max-width: var(--max-w); margin: 0 auto; }
      .divider {
        height: 1px;
        max-width: 760px;
        margin: 0 auto;
        background: var(--ds-hairline);
        opacity: 1;
      }

      /* Hero */
      .hero { padding-top: calc(132px * var(--dp-density-scale, 1)); padding-bottom: calc(84px * var(--dp-density-scale, 1)); }
      .hero-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: calc(40px * var(--dp-density-scale, 1));
        align-items: center;
      }
      .badge {
        display: inline-flex;
        align-items: center;
        gap: calc(10px * var(--dp-density-scale, 1));
        padding: calc(2px * var(--dp-density-scale, 1)) calc(8px * var(--dp-density-scale, 1));
        background: var(--ds-canvas);
        border: 1px solid var(--ds-hairline);
        border-radius: var(--radius-sm);
        box-shadow: none;
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .badge-dot {
        width: 10px;
        height: 10px;
        background: rgba(34, 197, 94, 0.90);
        border-radius: 50%;
        box-shadow: 0 0 0 6px rgba(34,197,94,0.10);
        animation: pulse 1.9s ease-in-out infinite;
      }
      @keyframes pulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(0.9); opacity: 0.55 } }

      h1 {
        margin: calc(18px * var(--dp-density-scale, 1)) 0 calc(12px * var(--dp-density-scale, 1));
        font-size: clamp(40px, 5.2vw, 68px);
        line-height: 1.03;
        letter-spacing: -0.045em;
        font-weight: 800;
      }
      .grad {
        background: var(--ds-brand-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .lead {
        margin: 0 0 calc(22px * var(--dp-density-scale, 1));
        font-size: calc(18px * var(--dp-density-scale, 1));
        line-height: 1.65;
        color: var(--text-muted);
        max-width: 52ch;
      }
      .hero-ctas { display: flex; flex-wrap: wrap; gap: calc(10px * var(--dp-density-scale, 1)); margin-top: calc(18px * var(--dp-density-scale, 1)); }
      .scroll-hint {
        margin-top: calc(26px * var(--dp-density-scale, 1));
        font-family: var(--mono);
        font-size: calc(12px * var(--dp-density-scale, 1));
        color: rgba(27,49,57,0.55);
        display: inline-flex;
        align-items: center;
        gap: calc(10px * var(--dp-density-scale, 1));
      }
      .scroll-hint .chev {
        width: 22px;
        height: 22px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(27,49,57,0.12);
        background: rgba(255,255,255,0.65);
        box-shadow: var(--shadow-soft);
      }

      .hero-card {
        border-radius: var(--radius);
        background: rgba(255,255,255,0.56);
        border: 1px solid rgba(255,255,255,0.84);
        box-shadow:
          0 24px 60px rgba(12,18,22,0.14),
          0 0 0 0.5px rgba(255,255,255,0.88);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        overflow: hidden;
        position: relative;
      }
      .hero-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255,255,255,0.8),
          transparent
        );
        pointer-events: none;
      }
      .hero-card-top {
        padding: calc(12px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: calc(10px * var(--dp-density-scale, 1));
        background: radial-gradient(circle at top left, rgba(255,255,255,0.96), rgba(255,255,255,0.70));
        border-bottom: 1px solid rgba(255,255,255,0.82);
      }
      .dots { display: flex; gap: calc(6px * var(--dp-density-scale, 1)); }
      .dot { width: 10px; height: 10px; border-radius: 50%; }
      .dot.r { background: #ef4444; }
      .dot.y { background: #eab308; }
      .dot.g { background: #22c55e; }
      .hero-card-title {
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        color: rgba(27,49,57,0.62);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hero-card-body { padding: calc(16px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1)); }
      .mini {
        display: grid;
        gap: calc(10px * var(--dp-density-scale, 1));
      }
      .mini-row {
        display: grid;
        grid-template-columns: 24px 1fr;
        gap: calc(10px * var(--dp-density-scale, 1));
        align-items: start;
      }
      .pill {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background: rgba(235,22,0,0.10);
        border: 1px solid rgba(235,22,0,0.18);
      }
      .mini-row p {
        margin: 0;
        font-size: calc(13px * var(--dp-density-scale, 1));
        line-height: 1.55;
        color: rgba(27,49,57,0.72);
      }
      .mini-row strong { color: var(--text); }

      /* Scroll animation section */
      .scrollSection { padding-top: calc(84px * var(--dp-density-scale, 1)); padding-bottom: calc(84px * var(--dp-density-scale, 1)); }
      .scrollShell {
        position: relative;
        height: 360vh; /* tweak to pace animation */
        min-height: 2400px;
      }
      .sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        display: grid;
        align-items: center;
      }
      .stage {
        width: min(1240px, 100%);
        margin: 0 auto;
        padding: calc(24px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1));
        border-radius: 30px;
        background: rgba(255,255,255,0.52);
        border: 1px solid rgba(255,255,255,0.88);
        box-shadow:
          0 28px 80px rgba(12,18,22,0.16),
          0 0 0 0.5px rgba(255,255,255,0.88);
        backdrop-filter: blur(26px);
        -webkit-backdrop-filter: blur(26px);
        display: grid;
        grid-template-columns: 1.4fr 0.6fr;
        gap: calc(16px * var(--dp-density-scale, 1));
        align-items: center;
        position: relative;
        overflow: hidden;
      }
      .stage::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
        pointer-events: none;
      }
      .frameWrap {
        position: relative;
        border-radius: 22px;
        overflow: hidden;
        background:
          url('./frames/frame_0001.jpg') center / cover no-repeat,
          rgba(255,255,255,0.85);
        border: 1px solid rgba(27,49,57,0.10);
      }
      #seq {
        width: 100%;
        height: min(74vh, 720px);
        display: block;
        background: transparent;
      }
      .annoRail { position: relative; padding: calc(10px * var(--dp-density-scale, 1)) calc(8px * var(--dp-density-scale, 1)); }
      .anno {
        border-radius: 18px;
        padding: calc(14px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1));
        background: rgba(255,255,255,0.72);
        border: 1px solid rgba(27,49,57,0.10);
        box-shadow: 0 12px 32px rgba(12,18,22,0.10);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 280ms ease, transform 280ms ease;
      }
      .anno.visible { opacity: 1; transform: translateY(0); }
      .anno + .anno { margin-top: calc(12px * var(--dp-density-scale, 1)); }
      .anno .k {
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(27,49,57,0.56);
      }
      .anno h3 {
        margin: calc(8px * var(--dp-density-scale, 1)) 0 calc(6px * var(--dp-density-scale, 1));
        font-size: calc(15px * var(--dp-density-scale, 1));
        letter-spacing: -0.02em;
      }
      .anno p {
        margin: 0;
        font-size: calc(13px * var(--dp-density-scale, 1));
        color: rgba(27,49,57,0.72);
        line-height: 1.55;
      }
      .snapHint {
        margin-top: calc(10px * var(--dp-density-scale, 1));
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        color: rgba(27,49,57,0.52);
      }

      /* Specs */
      .specsGrid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: calc(14px * var(--dp-density-scale, 1));
      }
      .spec {
        padding: calc(24px * var(--dp-density-scale, 1)) calc(20px * var(--dp-density-scale, 1));
        border-radius: var(--radius-sm);
        background: var(--ds-canvas);
        border: 1px solid var(--ds-hairline);
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      .spec .num {
        font-size: calc(34px * var(--dp-density-scale, 1));
        font-weight: 820;
        letter-spacing: -0.03em;
        margin: 0;
        line-height: 1.05;
      }
      .spec .label {
        margin-top: calc(8px * var(--dp-density-scale, 1));
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
      }

      /* Features */
      .sectionHead {
        text-align: center;
        margin-bottom: calc(40px * var(--dp-density-scale, 1));
      }
      .sectionHead .tag {
        display: inline-flex;
        align-items: center;
        gap: calc(10px * var(--dp-density-scale, 1));
        padding: calc(2px * var(--dp-density-scale, 1)) calc(8px * var(--dp-density-scale, 1));
        border-radius: var(--radius-sm);
        background: var(--ds-hairline);
        border: 1px solid var(--ds-hairline);
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .sectionHead h2 {
        margin: calc(14px * var(--dp-density-scale, 1)) 0 calc(10px * var(--dp-density-scale, 1));
        font-size: clamp(28px, 3.6vw, 40px);
        font-weight: 500;
        letter-spacing: -0.02em;
        line-height: 1.2;
      }
      .sectionHead p {
        margin: 0 auto;
        max-width: 68ch;
        color: var(--text-muted);
        font-size: calc(16px * var(--dp-density-scale, 1));
        line-height: 1.7;
      }

      .grid3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: calc(14px * var(--dp-density-scale, 1));
      }
      .card {
        padding: calc(22px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1));
        border-radius: var(--radius);
        background: rgba(255,255,255,0.52);
        border: 1px solid rgba(255,255,255,0.88);
        box-shadow:
          0 18px 52px rgba(12,18,22,0.14),
          0 0 0 0.5px rgba(255,255,255,0.88);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease, border-color 240ms ease;
        position: relative;
        overflow: hidden;
      }
      .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 26px 72px rgba(12,18,22,0.18);
        border-color: rgba(255,255,255,0.95);
        background: rgba(255,255,255,0.96);
      }
      .icon {
        width: 46px; height: 46px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: rgba(235,22,0,0.08);
        border: 1px solid rgba(235,22,0,0.16);
        margin-bottom: calc(14px * var(--dp-density-scale, 1));
      }
      .card h3 { margin: 0 0 calc(8px * var(--dp-density-scale, 1)); letter-spacing: -0.02em; font-size: calc(16px * var(--dp-density-scale, 1)); }
      .card p { margin: 0; color: var(--text-muted); font-size: calc(14px * var(--dp-density-scale, 1)); line-height: 1.65; }

      /* How it works — scope to marketing only; unscoped `.step` hid app wizards (opacity:0) after SPA nav. */
      body.landing-v8 .steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: calc(14px * var(--dp-density-scale, 1));
      }
      body.landing-v8 .step {
        text-align: center;
        padding: calc(24px * var(--dp-density-scale, 1)) calc(20px * var(--dp-density-scale, 1));
        border-radius: var(--radius-sm);
        background: var(--ds-canvas);
        border: 1px solid var(--ds-hairline);
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform-origin: center bottom;
        transform: translateY(18px) scale(0.96) rotateX(18deg);
        opacity: 0;
        transition:
          opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
          transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
      }
      body.landing-v8 .step.step-visible {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        box-shadow: none;
      }
      body.landing-v8 .step:nth-child(2).step-visible {
        transition-delay: 90ms;
      }
      body.landing-v8 .step:nth-child(3).step-visible {
        transition-delay: 170ms;
      }
      body.landing-v8 .step .n {
        width: 56px; height: 56px;
        margin: 0 auto calc(14px * var(--dp-density-scale, 1));
        border-radius: 18px;
        display: grid;
        place-items: center;
        background: rgba(27,49,57,0.05);
        border: 1px solid rgba(27,49,57,0.10);
        font-family: var(--mono);
        font-size: calc(12px * var(--dp-density-scale, 1));
        letter-spacing: 0.10em;
        color: rgba(27,49,57,0.72);
      }
      body.landing-v8 .step h3 { margin: 0 0 calc(8px * var(--dp-density-scale, 1)); font-size: calc(17px * var(--dp-density-scale, 1)); letter-spacing: -0.02em; }
      body.landing-v8 .step p { margin: 0; color: var(--text-muted); font-size: calc(14px * var(--dp-density-scale, 1)); line-height: 1.65; }

      /* Testimonials */
      .tGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14px * var(--dp-density-scale, 1)); }
      .tCard {
        padding: calc(22px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1));
        border-radius: var(--radius);
        background: rgba(255,255,255,0.52);
        border: 1px solid rgba(255,255,255,0.88);
        box-shadow:
          0 18px 52px rgba(12,18,22,0.14),
          0 0 0 0.5px rgba(255,255,255,0.88);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
      }
      .tCard q { display: block; margin: 0 0 calc(16px * var(--dp-density-scale, 1)); color: var(--text-muted); font-style: italic; line-height: 1.65; }
      .who { display: flex; align-items: center; gap: calc(10px * var(--dp-density-scale, 1)); }
      .avatar {
        width: 38px; height: 38px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 800;
        letter-spacing: -0.02em;
        background: linear-gradient(135deg, var(--accent), #00aebf);
      }
      .who .name { font-weight: 800; letter-spacing: -0.02em; }
      .who .role { font-size: calc(12.5px * var(--dp-density-scale, 1)); color: rgba(27,49,57,0.60); }

      /* Rocket.new-like testimonial background */
      .testimonialsBg {
        padding-top: calc(160px * var(--dp-density-scale, 1));
        padding-bottom: calc(130px * var(--dp-density-scale, 1));
        background: url("./assets/trusted-bg.jpeg") center/cover no-repeat;
        position: relative;
        color: #ffffff;
      }
      .testimonialsBg::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(900px 520px at 15% 25%, rgba(0,173,191,0.34) 0%, transparent 60%),
          linear-gradient(180deg, rgba(7,16,45,0.86) 0%, rgba(7,16,45,0.72) 40%, rgba(7,16,45,0.82) 100%);
        pointer-events: none;
      }
      .testimonialsOverlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; }

      .sectionHeadOnDark .tag {
        background: rgba(255,255,255,0.12);
        border-color: rgba(255,255,255,0.18);
        color: rgba(255,255,255,0.88);
      }
      .sectionHeadOnDark h2 { color: #ffffff; text-shadow: 0 18px 46px rgba(0,0,0,0.35); }
      .sectionHeadOnDark p { color: rgba(255,255,255,0.80); }

      /* Horizontal glass carousel */
      .tCarousel {
        margin-top: calc(26px * var(--dp-density-scale, 1));
        display: flex;
        flex-direction: column;
        gap: calc(16px * var(--dp-density-scale, 1));
      }
      .carouselControls{
        display:flex;
        justify-content: center;
      }
      .chipBtn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:calc(10px * var(--dp-density-scale, 1));
        padding: calc(10px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1));
        border-radius: 999px;
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.88);
        border: 1px solid rgba(255,255,255,0.22);
        background: rgba(255,255,255,0.10);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        cursor: pointer;
      }
      .chipBtn[aria-pressed="true"]{
        background: rgba(255,255,255,0.22);
        border-color: rgba(255,255,255,0.28);
      }
      .tCarouselRow {
        overflow-x: hidden;
        position: relative;
      }
      .tCarouselTrack {
        display: flex;
        gap: calc(14px * var(--dp-density-scale, 1));
        align-items: stretch;
        padding: calc(10px * var(--dp-density-scale, 1)) calc(4px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1));
        min-height: 200px;
      }
      .tCardOnDark {
        min-width: min(360px, calc(100vw - 80px));
        max-width: 400px;
        padding: calc(24px * var(--dp-density-scale, 1)) calc(22px * var(--dp-density-scale, 1));
        border-radius: 24px;
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.22);
        box-shadow:
          0 26px 72px rgba(0,0,0,0.28),
          0 0 0 0.5px rgba(255,255,255,0.08);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        overflow: hidden;
      }
      .tCardOnDark q {
        margin-bottom: calc(18px * var(--dp-density-scale, 1));
        color: rgba(255,255,255,0.82);
      }
      .tCardOnDark .who .role { color: rgba(255,255,255,0.68); }
      .carouselHint {
        margin-top: calc(10px * var(--dp-density-scale, 1));
        text-align: center;
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.65);
      }

      /* Make header readable on top of busy background */
      .testimonialsBg .sectionHeadOnDark {
        background: rgba(0, 0, 0, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 22px;
        padding: calc(18px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1));
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 26px 80px rgba(0,0,0,0.25);
      }

      .testimonialsBg .sectionHeadOnDark .tag {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.24);
        color: rgba(255, 255, 255, 0.92);
      }
      .testimonialsBg .sectionHeadOnDark h2 {
        color: rgba(255, 255, 255, 0.98);
        text-shadow: 0 20px 64px rgba(0,0,0,0.50);
      }
      .testimonialsBg .sectionHeadOnDark p {
        color: rgba(255, 255, 255, 0.90);
        text-shadow: 0 20px 64px rgba(0,0,0,0.42);
      }

      @media (max-width: 980px) {
        .testimonialsBg { padding-top: calc(140px * var(--dp-density-scale, 1)); padding-bottom: calc(110px * var(--dp-density-scale, 1)); }
        .tCardOnDark { min-width: min(340px, calc(100vw - 56px)); }
      }
      @media (max-width: 520px) {
        .testimonialsBg { padding-top: calc(116px * var(--dp-density-scale, 1)); padding-bottom: calc(88px * var(--dp-density-scale, 1)); }
        .tCardOnDark { min-width: calc(100vw - 42px); }
      }

      /* FAQ */
      #faq .wrap { position: relative; z-index: 2; }
      #faq {
        position: relative;
        z-index: 2;
      }
      #faq .sectionHead { margin-bottom: calc(24px * var(--dp-density-scale, 1)); }
      .faqGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: calc(14px * var(--dp-density-scale, 1));
      }
      .faqItem {
        border-radius: var(--radius-sm);
        background: var(--ds-canvas);
        border: 1px solid var(--ds-hairline);
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: hidden;
      }
      .faqItem summary {
        cursor: pointer;
        list-style: none;
        padding: calc(18px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1));
        display: flex;
        align-items: center;
        gap: calc(12px * var(--dp-density-scale, 1));
        font-weight: 820;
        letter-spacing: -0.02em;
        color: var(--text);
        user-select: none;
      }
      .faqItem summary::-webkit-details-marker { display: none; }
      .faqItem summary::after {
        content: "+";
        margin-left: auto;
        width: 28px;
        height: 28px;
        border-radius: var(--radius-sm);
        display: grid;
        place-items: center;
        background: var(--ds-hairline);
        border: 1px solid var(--ds-hairline);
        color: var(--text);
        transition: transform 180ms ease, background 180ms ease;
      }
      .faqItem[open] summary::after {
        content: "–";
        transform: rotate(0deg) scale(1.02);
        background: var(--ds-hairline);
      }
      .faqBody {
        padding: 0 calc(18px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1));
        color: var(--text-muted);
        line-height: 1.75;
        font-size: calc(14px * var(--dp-density-scale, 1));
      }
      .faqItem[open] .faqBody { animation: faqIn 200ms ease both; }
      @keyframes faqIn {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @media (max-width: 980px) {
        .faqGrid { grid-template-columns: 1fr; }
      }

      /* CTA */
      .ctaBox {
        border-radius: 30px;
        padding: calc(58px * var(--dp-density-scale, 1)) calc(24px * var(--dp-density-scale, 1));
        background: linear-gradient(135deg, rgba(235,22,0,0.06), rgba(0,173,191,0.04)), rgba(255,255,255,0.54);
        border: 1px solid rgba(255,255,255,0.92);
        box-shadow:
          0 28px 80px rgba(12,18,22,0.18),
          0 0 0 0.5px rgba(255,255,255,0.94);
        backdrop-filter: blur(26px);
        -webkit-backdrop-filter: blur(26px);
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      .ctaBox h2 { margin: 0 0 calc(10px * var(--dp-density-scale, 1)); font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.04em; }
      .ctaBox p { margin: 0 auto calc(20px * var(--dp-density-scale, 1)); max-width: 70ch; color: var(--text-muted); line-height: 1.7; }
      .ctaBox .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(10px * var(--dp-density-scale, 1)); }

      /* Rocket.new-style CTA */
      .rocketCta {
        padding: calc(92px * var(--dp-density-scale, 1)) calc(22px * var(--dp-density-scale, 1)) calc(78px * var(--dp-density-scale, 1));
        background: url("./assets/cta-rocket.png") center bottom / cover no-repeat;
        position: relative;
        color: #ffffff;
      }
      .rocketCta::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(7, 16, 45, 0.78) 0%, rgba(7, 16, 45, 0.55) 40%, rgba(7, 16, 45, 0.72) 100%);
        pointer-events: none;
      }
      .rocketCta .wrap {
        position: relative;
        z-index: 1;
      }
      .rocketTitle {
        text-align: center;
        font-size: clamp(34px, 5vw, 56px);
        letter-spacing: -0.05em;
        margin: 0 0 calc(10px * var(--dp-density-scale, 1));
        font-weight: 850;
        text-shadow: 0 16px 46px rgba(0,0,0,0.35);
      }
      .rocketSub {
        text-align: center;
        margin: 0 auto calc(28px * var(--dp-density-scale, 1));
        max-width: 64ch;
        color: rgba(255,255,255,0.78);
        font-size: calc(15px * var(--dp-density-scale, 1));
        line-height: 1.65;
      }
      .rocketPromptCard {
        max-width: 860px;
        margin: 0 auto;
        border-radius: 18px;
        background: rgba(255,255,255,0.95);
        box-shadow: 0 26px 70px rgba(0,0,0,0.35);
        padding: calc(18px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1));
        border: 1px solid rgba(255,255,255,0.55);
      }
      .rocketPromptTop {
        height: 44px;
        display: flex;
        align-items: center;
        border-radius: 14px;
        padding: 0 calc(16px * var(--dp-density-scale, 1));
        background: rgba(255,255,255,0.88);
        border: 1px solid rgba(27,49,57,0.06);
      }
      .rocketPlaceholder {
        color: rgba(27,49,57,0.46);
        font-size: calc(14px * var(--dp-density-scale, 1));
        font-weight: 600;
      }
      .rocketPromptBottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: calc(14px * var(--dp-density-scale, 1));
        gap: calc(14px * var(--dp-density-scale, 1));
      }
      .rocketChip {
        display: inline-flex;
        align-items: center;
        gap: calc(10px * var(--dp-density-scale, 1));
        padding: calc(10px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1));
        border-radius: 14px;
        background: rgba(27,49,57,0.02);
        border: 1px solid rgba(27,49,57,0.06);
      }
      .rocketPlus {
        width: 20px;
        height: 20px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        font-weight: 900;
        color: rgba(27,49,57,0.55);
        background: rgba(27,49,57,0.03);
        line-height: 1;
      }
      .rocketChipText {
        font-size: calc(14px * var(--dp-density-scale, 1));
        font-weight: 700;
        color: rgba(27,49,57,0.66);
      }
      .rocketSend {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        border: 1px solid rgba(27,49,57,0.08);
        background: rgba(255,255,255,0.85);
        color: rgba(27,49,57,0.60);
        text-decoration: none;
        box-shadow: 0 14px 36px rgba(0,0,0,0.10);
        cursor: pointer;
        transition: transform 140ms ease, background 140ms ease;
      }
      .rocketSend:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,1);
      }

      @media (max-width: 520px) {
        .rocketCta { padding: calc(76px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1)) calc(64px * var(--dp-density-scale, 1)); }
        .rocketPromptCard { padding: calc(14px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1)); border-radius: 16px; }
        .rocketPromptTop { padding: 0 calc(12px * var(--dp-density-scale, 1)); }
        .rocketPromptBottom { padding-top: calc(12px * var(--dp-density-scale, 1)); }
      }

      /* Footer (DESIGN.md: footer + footer-signoff band) */
      .footer-v8 {
        position: relative;
        z-index: 2;
        background: var(--ds-canvas);
        border-top: 1px solid var(--ds-hairline);
        padding: calc(80px * var(--dp-density-scale, 1)) calc(32px * var(--dp-density-scale, 1)) 0;
      }
      .footer-v8__inner {
        max-width: var(--max-w);
        margin: 0 auto;
      }
      .footer-v8__head {
        display: grid;
        gap: calc(16px * var(--dp-density-scale, 1));
        margin-bottom: calc(48px * var(--dp-density-scale, 1));
        padding-bottom: calc(40px * var(--dp-density-scale, 1));
        border-bottom: 1px solid var(--ds-hairline);
      }
      @media (min-width: 720px) {
        .footer-v8__head {
          grid-template-columns: auto 1fr auto;
          grid-template-rows: auto auto;
          align-items: start;
          column-gap: calc(32px * var(--dp-density-scale, 1));
          row-gap: calc(12px * var(--dp-density-scale, 1));
        }
        .footer-v8__brand-link {
          grid-row: 1 / span 2;
        }
        .footer-v8__lede {
          grid-column: 2;
          grid-row: 1 / span 2;
          margin: 0;
          align-self: center;
        }
        .footer-v8__cta-row {
          grid-column: 3;
          grid-row: 1 / span 2;
          justify-self: end;
          align-self: center;
        }
      }
      .footer-v8__brand-link img.brand-logo__lockup {
        display: block;
        height: 32px;
        width: auto;
        max-width: min(200px, 42vw);
        padding: 0;
        background: transparent;
        object-fit: contain;
        object-position: left center;
      }
      .footer-v8__brand-link img:not(.brand-logo__lockup):not(.brand-logo__mark):not(.brand-logo__word) {
        display: block;
        padding: 0;
        background: transparent;
        object-fit: contain;
        object-position: left center;
      }
      .footer-v8__brand-link .brand-logo {
        height: auto;
        max-width: none;
      }
      .footer-v8__brand-link .brand-logo__mark {
        width: 28px;
        height: 28px;
      }
      .footer-v8__brand-link .brand-logo__lockup {
        height: 32px;
        width: auto;
      }
      .footer-v8__brand-link .brand-logo__word {
        height: 20px;
        width: auto;
        max-width: none;
      }
      .footer-v8__lede {
        margin: 0;
        font-family: var(--font);
        font-size: calc(16px * var(--dp-density-scale, 1));
        font-weight: 400;
        line-height: 1.65;
        letter-spacing: -0.01em;
        color: var(--text-muted);
        max-width: 42rem;
      }
      .footer-v8__cta-row {
        display: flex;
        flex-wrap: wrap;
        gap: calc(10px * var(--dp-density-scale, 1));
        align-items: center;
      }
      .footer-v8__cta.footer-v8__cta--secondary {
        background: var(--ds-canvas);
        color: var(--text);
        border-color: var(--ds-ink);
      }
      .footer-v8__cta.footer-v8__cta--secondary:hover {
        background: var(--ds-hairline);
      }
      .footer-v8__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: calc(24px * var(--dp-density-scale, 1)) calc(32px * var(--dp-density-scale, 1));
      }
      .footer-v8__col-title {
        margin: 0 0 calc(14px * var(--dp-density-scale, 1));
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        font-weight: 500;
        line-height: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.55px;
        text-transform: uppercase;
        color: var(--text);
      }
      .footer-v8__links {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: calc(10px * var(--dp-density-scale, 1));
      }
      .footer-v8__links a {
        font-family: var(--font);
        font-size: calc(16px * var(--dp-density-scale, 1));
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: -0.01em;
        color: var(--text-muted);
        text-decoration: none;
        border-radius: var(--radius-sm);
      }
      .footer-v8__links a:hover {
        color: var(--text);
      }
      .footer-v8__links a:focus-visible {
        outline: 2px solid var(--ds-ink);
        outline-offset: 2px;
      }
      .footer-v8__bottom {
        margin-top: calc(48px * var(--dp-density-scale, 1));
        padding-top: calc(24px * var(--dp-density-scale, 1));
        border-top: 1px solid var(--ds-hairline);
      }
      .footer-v8__copyright {
        font-family: var(--font);
        font-size: calc(14px * var(--dp-density-scale, 1));
        font-weight: 400;
        line-height: 1.4;
        color: var(--text-muted);
      }
      /* Governed Horizon footer endcap (DESIGN.md: canvas-dark + brand gradient + mono labels) */
      .footer-v8__signoff {
        position: relative;
        margin-top: calc(48px * var(--dp-density-scale, 1));
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        max-width: 100vw;
        min-height: clamp(180px, 19vw, 240px);
        padding: clamp(44px, 6vw, 72px) max(32px, calc((100vw - var(--max-w)) / 2 + 32px));
        padding-bottom: calc(clamp(44px, 6vw, 72px) + env(safe-area-inset-bottom, 0px));
        background:
          radial-gradient(circle at 18% 10%, rgba(252, 76, 2, 0.18), transparent 28%),
          radial-gradient(circle at 82% 18%, rgba(189, 187, 255, 0.14), transparent 30%),
          var(--ds-canvas-dark);
        border-top: 1px solid var(--ds-surface-dark-soft);
        color: var(--ds-on-primary);
        overflow: hidden;
      }
      .footer-v8__signoff::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
        background-size: 44px 44px;
        mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
        opacity: 0.6;
        pointer-events: none;
      }
      .footer-v8__signoff-wordmark {
        position: absolute;
        user-select: none;
        pointer-events: none;
        z-index: 0;
      }
      .footer-v8__signoff-rail {
        position: absolute;
        left: max(32px, calc((100vw - var(--max-w)) / 2 + 32px));
        right: max(32px, calc((100vw - var(--max-w)) / 2 + 32px));
        top: clamp(28px, 4vw, 44px);
        height: 1px;
        background: rgba(255, 255, 255, 0.16);
        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        overflow: hidden;
      }
      .footer-v8__signoff-rail span {
        display: block;
        width: 42%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(252, 76, 2, 0.08) 12%,
          var(--ds-accent-orange) 30%,
          var(--ds-accent-magenta) 52%,
          var(--ds-accent-periwinkle) 72%,
          rgba(189, 187, 255, 0.08) 88%,
          transparent 100%
        );
        filter: blur(0.35px);
        opacity: 0.92;
        animation: footerHorizonDrift 18s cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
      }
      @keyframes footerHorizonDrift {
        from { transform: translateX(-6%); }
        to { transform: translateX(144%); }
      }
      .footer-v8__signoff-content {
        position: relative;
        z-index: 1;
        max-width: var(--max-w);
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px 40px;
        align-items: end;
        padding-bottom: clamp(56px, 9vw, 104px);
      }
      .footer-v8__signoff-eyebrow {
        grid-column: 1 / -1;
        margin: 0 0 -8px;
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        font-weight: 500;
        line-height: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.55px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.64);
      }
      .footer-v8__signoff-title {
        margin: 0;
        max-width: 12ch;
        font-family: var(--font);
        font-size: clamp(32px, 4.8vw, 64px);
        font-weight: 500;
        line-height: 1.02;
        letter-spacing: -0.045em;
        color: var(--ds-on-primary);
        text-wrap: balance;
      }
      .footer-v8__signoff-body {
        margin: 12px 0 0;
        max-width: 52ch;
        font-family: var(--font);
        font-size: calc(16px * var(--dp-density-scale, 1));
        line-height: 1.55;
        letter-spacing: -0.01em;
        color: rgba(255, 255, 255, 0.68);
      }
      .footer-v8__signoff-chips {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
      }
      .footer-v8__signoff-chips li {
        padding: 7px 10px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.055);
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.55px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.82);
      }
      .footer-v8__signoff-copyright {
        grid-column: 1 / -1;
        justify-self: end;
        position: relative;
        z-index: 2;
        margin-top: clamp(16px, 3vw, 32px);
        color: rgba(255, 255, 255, 0.46);
      }
      html[lang='zh-CN'] .footer-v8__signoff-eyebrow,
      html[lang='zh-TW'] .footer-v8__signoff-eyebrow,
      html[lang='zh-CN'] .footer-v8__signoff-chips li,
      html[lang='zh-TW'] .footer-v8__signoff-chips li {
        font-family: var(--font);
        font-size: calc(12px * var(--dp-density-scale, 1));
        line-height: calc(16px * var(--dp-density-scale, 1));
        letter-spacing: -0.01em;
        text-transform: none;
      }
      @media (prefers-reduced-motion: reduce) {
        .footer-v8__signoff-rail span {
          animation: none;
          width: 100%;
        }
      }
      @media (max-width: 900px) {
        .footer-v8__grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .footer-v8__signoff-content {
          grid-template-columns: 1fr;
          align-items: start;
        }
        .footer-v8__signoff-title {
          max-width: 14ch;
        }
        .footer-v8__signoff-chips {
          justify-content: flex-start;
        }
        .footer-v8__signoff-copyright {
          justify-self: start;
        }
      }
      @media (max-width: 520px) {
        .footer-v8 {
          padding: calc(56px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1)) 0;
        }
        .footer-v8__head {
          margin-bottom: calc(36px * var(--dp-density-scale, 1));
          padding-bottom: calc(28px * var(--dp-density-scale, 1));
        }
        .footer-v8__grid {
          grid-template-columns: 1fr;
          gap: calc(28px * var(--dp-density-scale, 1));
        }
        .footer-v8__cta-row {
          width: 100%;
        }
        .footer-v8__cta-row .btn {
          flex: 1 1 auto;
          justify-content: center;
        }
        .footer-v8__signoff {
          margin-top: calc(36px * var(--dp-density-scale, 1));
          padding-left: calc(16px * var(--dp-density-scale, 1));
          padding-right: calc(16px * var(--dp-density-scale, 1));
          min-height: 164px;
        }
        .footer-v8__signoff-rail {
          left: calc(16px * var(--dp-density-scale, 1));
          right: calc(16px * var(--dp-density-scale, 1));
        }
        .footer-v8__signoff-body {
          max-width: 34ch;
        }
      }

      /* Trusted-by: inline SVG marks (no external hotlinks) */
      .trust-strip .trust-card {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 72px;
      }
      .trust-marks {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(12px, 3vw, 22px);
        flex-wrap: wrap;
      }
      .trust-mark {
        display: inline-flex;
        align-items: center;
        line-height: 0;
      }
      .trust-img {
        height: 24px;
        width: auto;
        max-width: min(120px, 28vw);
        object-fit: contain;
        flex-shrink: 0;
        display: block;
      }
      .trust-img--apple {
        max-width: 22px;
      }

      /* Social proof row (v8; marks are illustrative—see section disclaimer) */
      .socialProof {
        padding: calc(72px * var(--dp-density-scale, 1)) calc(32px * var(--dp-density-scale, 1)) calc(64px * var(--dp-density-scale, 1));
        border-top: 1px solid var(--ds-hairline);
        background: linear-gradient(180deg, var(--ds-hairline), transparent 44%);
      }
      .socialProof .sectionHead {
        margin-bottom: calc(22px * var(--dp-density-scale, 1));
      }
      .socialProofStrip {
        row-gap: calc(16px * var(--dp-density-scale, 1));
      }
      .socialProof .trust-card--social {
        background: var(--ds-canvas);
        border: 1px solid var(--ds-hairline);
        border-radius: var(--radius-sm);
        box-shadow: none;
        padding: calc(18px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1));
      }

      /* Responsive */
      @media (max-width: 980px) {
        .hero-grid { grid-template-columns: 1fr; }
        .stage { grid-template-columns: 1fr; }
        #seq { height: min(62vh, 640px); }
        .grid3 { grid-template-columns: 1fr; }
        body.landing-v8 .steps { grid-template-columns: 1fr; }
        .tGrid { grid-template-columns: 1fr; }
        .specsGrid { grid-template-columns: repeat(2, 1fr); }
        .nav-links { display: none; }
        .nav-menu { display: inline-grid; }
        body.landing-v8 .nav-locale { display: none; }
      }
      @media (max-width: 520px) {
        body.landing-v8 main section { padding: calc(80px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1)); }
        .socialProof {
          padding: calc(56px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1)) calc(48px * var(--dp-density-scale, 1));
        }
        .hero { padding-top: calc(122px * var(--dp-density-scale, 1)); }
        .nav { padding: 0 calc(14px * var(--dp-density-scale, 1)); }
        .nav-inner { padding: calc(10px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1)); }
        .brand img { height: calc(24px * var(--dp-density-scale, 1)); max-width: min(120px, 42vw); padding: 0; background: transparent; }
        .brand .brand-logo__mark { height: 24px; }
        .specsGrid { grid-template-columns: 1fr; }
        .scrollShell { height: 270vh; min-height: 2000px; }
        .annoRail { padding: 0; }
        .anno { position: absolute; left: 14px; right: 14px; bottom: 16px; margin: 0 !important; }
        .anno p { display: none; }
        .anno .k { font-size: calc(10px * var(--dp-density-scale, 1)); }
        .anno h3 { margin: calc(6px * var(--dp-density-scale, 1)) 0 0; font-size: calc(14px * var(--dp-density-scale, 1)); }
        .snapHint { margin-top: calc(8px * var(--dp-density-scale, 1)); }
      }
      @media (prefers-reduced-motion: reduce) {
        * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
      }

      /* ——— Landing v8 — layout & components (tokens: :root + DESIGN.md) ——— */
      body.landing-v8 {
        scroll-padding-top: calc(96px * var(--dp-density-scale, 1));
      }
      body.landing-v8 #stars {
        display: none !important;
      }
      body.landing-v8 .nav-links {
        gap: calc(2px * var(--dp-density-scale, 1));
      }
      body.landing-v8 .nav-links a {
        padding: calc(8px * var(--dp-density-scale, 1)) calc(10px * var(--dp-density-scale, 1));
        font-size: calc(15px * var(--dp-density-scale, 1));
      }
      body.landing-v8 .nav-actions .nav-locale {
        margin-left: calc(6px * var(--dp-density-scale, 1));
        padding-left: calc(12px * var(--dp-density-scale, 1));
        border-left: 1px solid var(--ds-hairline);
      }
      body.landing-v8 .nav-locale .locale-dd__trigger {
        border: none;
        background: transparent;
        color: var(--text-muted);
        font-family: var(--font);
        font-size: calc(13px * var(--dp-density-scale, 1));
        font-weight: 500;
        letter-spacing: 0.02em;
        padding: calc(8px * var(--dp-density-scale, 1)) calc(4px * var(--dp-density-scale, 1));
        box-shadow: none;
      }
      body.landing-v8 .nav-locale .locale-dd__trigger:hover {
        transform: none;
        background: transparent;
        color: var(--text);
        border-color: transparent;
      }
      body.landing-v8 .nav-locale .locale-dd__caret {
        font-size: calc(9px * var(--dp-density-scale, 1));
        opacity: 0.5;
      }
      /* JetBrains Mono has no CJK glyphs — buttons fell back to system Chinese fonts */
      html[lang='zh-CN'] body.landing-v8 .btn,
      html[lang='zh-TW'] body.landing-v8 .btn {
        font-family: var(--font);
        text-transform: none;
        letter-spacing: -0.01em;
        font-weight: 500;
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: calc(-1px * var(--dp-density-scale, 1));
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .hero--v8 {
        padding-top: calc(120px * var(--dp-density-scale, 1));
        padding-bottom: calc(56px * var(--dp-density-scale, 1));
      }
      .hero-v8-layout {
        display: flex;
        flex-direction: column;
        gap: calc(28px * var(--dp-density-scale, 1));
      }
      @media (min-width: 1080px) {
        .hero-v8-layout {
          flex-direction: row;
          align-items: center;
          gap: clamp(32px, 4vw, 56px);
        }
        .hero-v8-copy {
          flex: 1 1 0;
          min-width: 0;
        }
        .policyLoop {
          flex: 1.05 1 0;
          min-width: 0;
        }
      }
      .hero-v8-title {
        font-family: var(--font);
        font-size: clamp(28px, 3.6vw, 40px);
        line-height: 1.2;
        letter-spacing: -0.02em;
        font-weight: 500;
        margin: 0.35em 0 0.45em;
        text-wrap: balance;
      }
      .hero-v8-title-accent {
        color: var(--text-muted);
        font-style: normal;
        font-weight: 500;
      }
      .hero-v8-lead {
        max-width: 46rem;
        text-wrap: pretty;
        line-height: 1.58;
      }
      .hero-v8-micro {
        margin-top: calc(14px * var(--dp-density-scale, 1));
        font-size: calc(13px * var(--dp-density-scale, 1));
        color: var(--text-faint);
        max-width: 40rem;
      }

      .policyLoop {
        border-radius: var(--radius-sm);
        border: 1px solid var(--ds-hairline);
        background: var(--ds-canvas);
        box-shadow: none;
        padding: calc(24px * var(--dp-density-scale, 1));
      }
      .policyLoop__tabs {
        display: none;
        flex-wrap: wrap;
        gap: calc(8px * var(--dp-density-scale, 1));
        margin-bottom: calc(12px * var(--dp-density-scale, 1));
      }
      .policyTab {
        border: 1px solid var(--ds-hairline);
        background: var(--ds-hairline);
        border-radius: var(--radius-sm);
        padding: calc(8px * var(--dp-density-scale, 1)) calc(14px * var(--dp-density-scale, 1));
        font-family: var(--mono);
        font-size: calc(14px * var(--dp-density-scale, 1));
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        cursor: pointer;
        color: var(--text-muted);
        touch-action: manipulation;
      }
      .policyTab.is-active {
        border-color: var(--ds-ink);
        color: var(--ds-on-primary);
        background: var(--ds-ink);
      }
      .policyTab:focus-visible {
        outline: 2px solid var(--ds-ink);
        outline-offset: 2px;
      }
      .policyLoop__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: calc(12px * var(--dp-density-scale, 1));
        align-items: stretch;
      }
      @media (min-width: 901px) {
        .policyLoop__grid {
          grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
          grid-template-rows: auto minmax(0, 1fr);
          grid-template-areas:
            "data answer"
            "rules answer";
          gap: calc(14px * var(--dp-density-scale, 1)) calc(18px * var(--dp-density-scale, 1));
        }
        .policyPanel--data {
          grid-area: data;
        }
        .policyPanel--rules {
          grid-area: rules;
        }
        .policyPanel--answer {
          grid-area: answer;
          display: flex;
          flex-direction: column;
          min-height: 0;
        }
        .policyPanel--answer .policySnippet {
          flex: 1 1 auto;
          max-height: min(400px, 52vh);
        }
        .policyPanel--answer .policyReplay {
          margin-top: calc(12px * var(--dp-density-scale, 1));
          align-self: flex-start;
        }
      }
      .policyPanel {
        border-radius: var(--radius-sm);
        border: 0;
        background: var(--ds-hairline);
        padding: calc(16px * var(--dp-density-scale, 1));
        min-height: 0;
      }
      .policyPanel__head {
        font-size: calc(12px * var(--dp-density-scale, 1));
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: calc(10px * var(--dp-density-scale, 1));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: calc(10px * var(--dp-density-scale, 1));
      }
      .policyPanel__tag {
        font-size: calc(10px * var(--dp-density-scale, 1));
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: calc(4px * var(--dp-density-scale, 1)) calc(8px * var(--dp-density-scale, 1));
        background: var(--ds-canvas);
      }
      .policyTableWrap {
        overflow: auto;
        border-radius: 10px;
        border: 1px solid rgba(27, 49, 57, 0.07);
        background: #fff;
      }
      .policyTable {
        width: 100%;
        border-collapse: collapse;
        font-size: calc(12px * var(--dp-density-scale, 1));
        font-variant-numeric: tabular-nums;
      }
      .policyTable th,
      .policyTable td {
        padding: calc(8px * var(--dp-density-scale, 1)) calc(10px * var(--dp-density-scale, 1));
        border-bottom: 1px solid rgba(27, 49, 57, 0.08);
        text-align: left;
        vertical-align: top;
      }
      .policyTable th {
        font-size: calc(11px * var(--dp-density-scale, 1));
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        background: var(--ds-hairline);
      }
      .policyTable code {
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
      }
      .pill-ok,
      .pill-warn,
      .pill-bad {
        display: inline-flex;
        padding: calc(2px * var(--dp-density-scale, 1)) calc(8px * var(--dp-density-scale, 1));
        border-radius: 999px;
        font-size: calc(11px * var(--dp-density-scale, 1));
        font-weight: 700;
        border: 1px solid rgba(27, 49, 57, 0.12);
      }
      .pill-ok { background: rgba(34, 197, 94, 0.12); color: rgb(22, 101, 52); }
      .pill-warn { background: rgba(245, 158, 11, 0.14); color: rgb(146, 64, 14); }
      .pill-bad { background: rgba(235, 22, 0, 0.10); color: rgb(127, 29, 29); }

      .policyControls {
        display: flex;
        flex-direction: column;
        gap: calc(14px * var(--dp-density-scale, 1));
      }
      .policyField__label {
        display: flex;
        justify-content: space-between;
        gap: calc(10px * var(--dp-density-scale, 1));
        font-size: calc(13px * var(--dp-density-scale, 1));
        color: var(--text-muted);
        margin-bottom: calc(6px * var(--dp-density-scale, 1));
      }
      .policyField input[type="range"] {
        width: 100%;
        accent-color: var(--ds-ink);
      }
      .policyField input[type="range"]:focus-visible {
        outline: 2px solid var(--ds-ink);
        outline-offset: 4px;
        border-radius: var(--radius-sm);
      }
      .policyToggle {
        display: flex;
        gap: calc(10px * var(--dp-density-scale, 1));
        align-items: flex-start;
        font-size: calc(13px * var(--dp-density-scale, 1));
        color: var(--text);
        cursor: pointer;
      }
      .policyToggle input {
        margin-top: calc(3px * var(--dp-density-scale, 1));
      }
      .policyHint {
        margin: 0;
        font-size: calc(12px * var(--dp-density-scale, 1));
        color: var(--text-faint);
        line-height: 1.45;
      }
      .policySnippet {
        margin: 0;
        padding: calc(16px * var(--dp-density-scale, 1));
        border-radius: var(--radius-sm);
        background: var(--ds-canvas-dark);
        border: 1px solid var(--ds-surface-dark-soft);
        font-family: var(--mono);
        font-size: calc(10px * var(--dp-density-scale, 1));
        line-height: 1.4;
        letter-spacing: 0.05em;
        color: rgba(255, 255, 255, 0.88);
        white-space: pre-wrap;
        word-break: break-word;
        max-height: 220px;
        overflow: auto;
      }
      .policyReplay {
        margin-top: calc(12px * var(--dp-density-scale, 1));
        width: fit-content;
      }

      .painSection {
        padding: calc(80px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1)) calc(64px * var(--dp-density-scale, 1));
        border-top: 1px solid var(--ds-hairline);
        background: linear-gradient(180deg, var(--ds-hairline), transparent 48%);
      }
      .painInner {
        max-width: 820px;
        margin: 0 auto;
      }
      .painQuote {
        margin: 0;
        font-family: var(--font);
        font-size: clamp(22px, 2.4vw, 28px);
        line-height: 1.3;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--text);
        text-wrap: pretty;
      }
      .painLead {
        margin: calc(18px * var(--dp-density-scale, 1)) 0 0;
        font-size: calc(16px * var(--dp-density-scale, 1));
        line-height: 1.65;
        color: var(--text-muted);
      }

      .journeyTrack {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: calc(12px * var(--dp-density-scale, 1));
      }
      .journeyStop {
        border-radius: var(--radius-sm);
        border: 1px solid var(--ds-hairline);
        background: var(--ds-canvas);
        padding: calc(24px * var(--dp-density-scale, 1));
        box-shadow: none;
      }
      .journeyStop__n {
        display: inline-flex;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(27, 49, 57, 0.08);
        font-size: calc(12px * var(--dp-density-scale, 1));
        font-weight: 800;
        margin-bottom: calc(10px * var(--dp-density-scale, 1));
      }
      .journeyStop__t {
        margin: 0 0 calc(8px * var(--dp-density-scale, 1));
        font-size: calc(15px * var(--dp-density-scale, 1));
        letter-spacing: -0.01em;
      }
      .journeyStop__p {
        margin: 0;
        font-size: calc(13px * var(--dp-density-scale, 1));
        color: var(--text-muted);
        line-height: 1.55;
      }

      /* MVP pillars: stable 2×2 so row two does not leave empty 12-col tracks (old 8+4 / 4+4+tall layout). */
      .bentoGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: calc(16px * var(--dp-density-scale, 1));
        align-items: stretch;
      }
      .bento {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        border-radius: var(--radius-sm);
        border: 1px solid var(--ds-hairline);
        background: var(--ds-canvas);
        padding: calc(24px * var(--dp-density-scale, 1));
        box-shadow: none;
      }
      .bento__k {
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-faint);
        margin-bottom: calc(8px * var(--dp-density-scale, 1));
      }
      .bento h3 {
        margin: 0 0 calc(8px * var(--dp-density-scale, 1));
        font-size: calc(17px * var(--dp-density-scale, 1));
        letter-spacing: -0.02em;
      }
      .bento p {
        flex: 1 1 auto;
        margin: 0;
        font-size: calc(14px * var(--dp-density-scale, 1));
        color: var(--text-muted);
        line-height: 1.55;
      }

      .shareSection {
        padding-top: calc(96px * var(--dp-density-scale, 1));
        padding-bottom: calc(96px * var(--dp-density-scale, 1));
      }
      .shareCard {
        max-width: 720px;
        margin: 0 auto;
        border-radius: var(--radius-sm);
        border: 1px solid var(--ds-hairline);
        background: var(--ds-canvas);
        padding: calc(24px * var(--dp-density-scale, 1));
        box-shadow: none;
      }
      .shareLabel {
        display: block;
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: calc(10px * var(--dp-density-scale, 1));
      }
      .shareTextarea {
        width: 100%;
        border-radius: var(--radius-sm);
        border: 1px solid var(--ds-hairline);
        padding: calc(12px * var(--dp-density-scale, 1)) calc(12px * var(--dp-density-scale, 1));
        font-family: var(--mono);
        font-size: calc(12px * var(--dp-density-scale, 1));
        line-height: 1.5;
        resize: vertical;
        min-height: 140px;
        background: var(--ds-canvas);
        color: var(--text);
      }
      .shareActions {
        display: flex;
        align-items: center;
        gap: calc(12px * var(--dp-density-scale, 1));
        margin-top: calc(12px * var(--dp-density-scale, 1));
      }
      .shareToast {
        font-size: calc(13px * var(--dp-density-scale, 1));
        font-weight: 650;
        color: rgb(22, 101, 52);
      }

      .scenariosSection {
        padding-bottom: calc(96px * var(--dp-density-scale, 1));
      }
      .scenarioTabs {
        display: flex;
        flex-wrap: wrap;
        gap: calc(8px * var(--dp-density-scale, 1));
        margin-bottom: calc(14px * var(--dp-density-scale, 1));
      }
      .scenarioTab {
        border: 1px solid var(--ds-hairline);
        background: var(--ds-hairline);
        border-radius: var(--radius-sm);
        padding: calc(10px * var(--dp-density-scale, 1)) calc(16px * var(--dp-density-scale, 1));
        font-family: var(--mono);
        font-size: calc(14px * var(--dp-density-scale, 1));
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        cursor: pointer;
        color: var(--text-muted);
        touch-action: manipulation;
      }
      .scenarioTab.is-active {
        border-color: var(--ds-ink);
        color: var(--ds-on-primary);
        background: var(--ds-ink);
      }
      .scenarioTab:focus-visible {
        outline: 2px solid var(--ds-ink);
        outline-offset: 2px;
      }
      .scenarioPanel {
        border-radius: var(--radius-sm);
        border: 1px solid var(--ds-hairline);
        background: var(--ds-canvas);
        padding: calc(24px * var(--dp-density-scale, 1));
        box-shadow: none;
      }
      .scenarioPanel__h {
        margin: 0 0 calc(10px * var(--dp-density-scale, 1));
        font-size: calc(18px * var(--dp-density-scale, 1));
        letter-spacing: -0.02em;
      }
      .scenarioPanel p {
        margin: 0;
        font-size: calc(14px * var(--dp-density-scale, 1));
        color: var(--text-muted);
        line-height: 1.6;
      }

      .trustSection {
        padding-bottom: calc(96px * var(--dp-density-scale, 1));
      }
      .trustList {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: calc(12px * var(--dp-density-scale, 1));
        max-width: 820px;
      }
      .trustList li {
        border-radius: var(--radius-sm);
        border: 1px solid var(--ds-hairline);
        background: var(--ds-canvas);
        padding: calc(16px * var(--dp-density-scale, 1)) calc(20px * var(--dp-density-scale, 1));
        font-size: calc(16px * var(--dp-density-scale, 1));
        line-height: 1.55;
        color: var(--text-muted);
      }
      .trustList strong {
        color: var(--text);
      }

      .missionBand {
        padding: calc(80px * var(--dp-density-scale, 1)) calc(32px * var(--dp-density-scale, 1));
        background: var(--ds-canvas-dark);
        color: var(--ds-on-primary);
      }
      .missionInner {
        max-width: 900px;
        margin: 0 auto;
      }
      .missionKicker {
        margin: 0 0 calc(10px * var(--dp-density-scale, 1));
        font-family: var(--mono);
        font-size: calc(11px * var(--dp-density-scale, 1));
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
      }
      .missionText {
        margin: 0;
        font-family: var(--font);
        font-size: clamp(22px, 3vw, 36px);
        line-height: 1.25;
        font-weight: 500;
        letter-spacing: -0.02em;
      }
      .missionText em {
        font-style: italic;
        color: #fff;
      }

      .finalCta {
        padding: calc(80px * var(--dp-density-scale, 1)) calc(32px * var(--dp-density-scale, 1));
        background: var(--ds-canvas);
        border-top: 1px solid var(--ds-hairline);
      }
      .finalCta__inner {
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
      }
      .finalCta__title {
        margin: 0 0 calc(12px * var(--dp-density-scale, 1));
        font-family: var(--font);
        font-size: clamp(28px, 3.4vw, 40px);
        font-weight: 500;
        letter-spacing: -0.02em;
        text-wrap: balance;
      }
      .finalCta__sub {
        margin: 0 0 calc(22px * var(--dp-density-scale, 1));
        font-size: calc(16px * var(--dp-density-scale, 1));
        color: var(--text-muted);
        line-height: 1.6;
      }
      .finalCta__actions {
        display: flex;
        flex-wrap: wrap;
        gap: calc(10px * var(--dp-density-scale, 1));
        justify-content: center;
      }

      body.landing-v8 .btn:focus-visible {
        outline: 2px solid var(--ds-ink);
        outline-offset: 2px;
      }
      body.landing-v8 .btn.primary:focus-visible {
        outline: 2px solid var(--ds-on-primary);
        outline-offset: 2px;
      }
      body.landing-v8 .nav-links a:focus-visible {
        outline: 2px solid var(--ds-ink);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
      }

      @media (max-width: 1100px) {
        .journeyTrack {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 900px) {
        .policyLoop__tabs {
          display: flex;
        }
        .policyLoop__grid {
          grid-template-columns: 1fr;
          grid-template-rows: none;
          grid-template-areas: none;
        }
        .policyPanel--data,
        .policyPanel--rules,
        .policyPanel--answer {
          grid-area: auto;
        }
      }

      @media (max-width: 720px) {
        .bentoGrid {
          grid-template-columns: 1fr;
        }
        .journeyTrack {
          grid-template-columns: 1fr;
        }
      }

/* Embedded in Vue MarketingLayout (?chrome=0) — parent supplies SiteNav/SiteFooter */
html[data-chrome='0'] header.nav,
html[data-chrome='0'] .menuBackdrop,
html[data-chrome='0'] .mobileMenu,
html[data-chrome='0'] footer.footer-v8,
html[data-chrome='0'] .landing-preview-switcher {
  display: none !important;
}

html[data-chrome='0'] body.landing-v8 main#top {
  padding-top: 0;
}

/* Embed mode (legacy) — parent scrolls; iframe document must not scroll */
html[data-chrome='0'] {
  overflow-y: visible !important;
  overflow-x: clip !important;
}

html[data-chrome='0'] body {
  min-height: 0 !important;
  overflow: visible !important;
}

html[data-chrome='0'] body.landing-v8 .wrap,
html[data-chrome='0'] body.landing-v8 main#top {
  width: 100%;
  max-width: 100%;
}