/* architect/site.css — generated shared stylesheet for the v8 two-page site.
   Source of truth: v7 Spot baseline + v5 Lifecycle hero + v6 cluster-story CSS. */

  /* Geist Sans (headlines only — matches agx.so). Body stays Commit Mono. */
  @font-face {
    font-family: 'Geist';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('fonts/geist-sans-variable.woff2') format('woff2-variations'),
         url('fonts/geist-sans-variable.woff2') format('woff2');
  }
  :root { --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif; }

  html { background: var(--bg-night); scroll-behavior: smooth; overflow-x: clip; scrollbar-gutter: stable; }
  body {
    margin: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-mono);
    /* Match loopholelabs.io body: Commit Mono light (300) + stylistic-set alternates. */
    font-weight: var(--weight-light);
    font-feature-settings: "ss02", "ss03", "ss04", "ss05", "cv02", "cv03", "cv06", "cv10";
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    overflow-x: clip;
  }
  /* subtle aurora kept low on the page only — hero glow removed in favor
     of the fading-tile canvas (.hero-tiles) */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(1100px 720px at 50% 115%, rgba(127, 87, 245, 0.18), transparent 62%);
  }
  * { box-sizing: border-box; }
  ::selection { background: var(--lhl-purple-75); color: var(--white); }
  a { color: inherit; }

  .container { max-width: 1000px; margin: 0 auto; padding: 0 32px; }
  .container-wide { max-width: 1240px; }
  .hairline { border-top: var(--border-w-hairline) solid var(--border-default); }
  .sec-head-wrap .hairline {
    border: 0; height: 1px;
    /* full-bleed: stretch to the viewport edges, resizing with the page */
    width: 100vw; margin-left: calc(50% - 50vw);
    background: linear-gradient(90deg, var(--lavender-bright), var(--lhl-purple) 45%, rgba(37, 24, 92, 0) 95%);
  }

  .sep { color: var(--text-muted); }
  .glyph-purple { color: var(--lhl-purple-logo); font-weight: var(--weight-medium); }
  .glyph-orange { color: var(--arch-orange); font-weight: var(--weight-medium); }
  .glyph-tilde { color: var(--white); font-weight: var(--weight-medium); }

  .kicker {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm); letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-secondary);
  }

  /* ── Buttons ─────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 26px;
    font-family: var(--font-mono); font-size: var(--text-base);
    font-weight: var(--weight-medium); text-decoration: none;
    border: var(--border-w-thin) solid transparent;
  }
  .btn-small { padding: 8px 18px; font-size: var(--text-sm); }
  .btn-primary { background: var(--arch-orange); color: var(--white); }
  .btn-primary:hover { opacity: 0.85; }
  .btn-ghost { border-color: var(--lavender-a50); color: var(--lavender); }
  .btn-ghost:hover { background: rgba(208, 197, 255, 0.08); }
  .btn-arrow { font-weight: var(--weight-light); }

  .arrow-link {
    display: inline-flex; gap: 8px;
    font-size: var(--text-base); color: var(--lavender);
    text-decoration: none;
    border-bottom: var(--border-w-thin) solid var(--lavender-a25);
    padding-bottom: 2px;
  }
  .arrow-link:hover { color: var(--white); border-bottom-color: var(--lavender-a50); }
  .arrow-glyph { color: var(--arch-orange); }

  /* ── Top bar + nav ───────────────────────────────────────── */
  .topbar { background: var(--bg-deep); border-bottom: var(--border-w-hairline) solid var(--border-faint); }
  .topbar-inner {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 0; font-size: var(--text-xs); color: var(--text-muted);
  }
  .topbar-right { display: flex; align-items: center; gap: 14px; }
  .topbar-variants { display: flex; gap: 12px; }
  .variant-link { color: var(--text-muted); text-decoration: none; }
  .variant-link:hover { color: var(--lavender); }
  .variant-active { color: var(--arch-orange); }
  .topbar-link { color: var(--text-muted); text-decoration: none; }
  .topbar-link:hover { color: var(--lavender); }

  .nav {
    position: sticky; top: 0; z-index: 50;
    background: var(--surface-page);
    border-bottom: var(--border-w-hairline) solid var(--border-default);
  }
  .nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-6); padding: 16px 0; }
  .nav-logo { display: inline-flex; text-decoration: none; }
  .nav-links { display: flex; gap: 14px; align-items: center; justify-content: flex-end; font-size: var(--text-sm); }
  .nav-links a { text-decoration: none; color: var(--lavender); }
  .nav-links a:hover { color: var(--white); }
  .nav-links .nav-active { color: var(--white); }
  .nav-dd { position: relative; display: inline-flex; }
  .nav-dd-btn {
    margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: inherit; font-weight: inherit;
    color: var(--lavender); display: inline-flex; align-items: center; gap: 6px;
  }
  .nav-dd-btn:hover, .nav-dd-btn.nav-dd-open { color: var(--white); }
  .nav-dd-caret { font-size: 10px; opacity: 0.7; }
  .nav-dd-menu {
    position: absolute; top: calc(100% + 14px); right: 0; z-index: 60;
    min-width: 196px; display: flex; flex-direction: column;
    background: var(--bg-deep);
    border: var(--border-w-thin) solid var(--border-default);
    box-shadow: 5px 5px 0 0 rgba(208, 197, 255, 0.08);
  }
  .nav-dd-menu a {
    padding: 12px 16px; color: var(--lavender); text-decoration: none;
    border-bottom: var(--border-w-hairline) solid var(--border-default);
  }
  .nav-dd-menu a:last-child { border-bottom: 0; }
  .nav-dd-menu a:hover { color: var(--white); background: rgba(208, 197, 255, 0.06); }
  .nav-cta { display: flex; align-items: center; gap: var(--space-3); }
  .nav-toggle {
    display: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--lavender); width: 34px; height: 34px; align-items: center; justify-content: center;
  }
  .nav-toggle:hover { color: var(--white); }
  .nav-toggle-box { position: relative; display: block; width: 20px; height: 14px; }
  .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
    position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
  }
  .nav-toggle-bar { top: 6px; }
  .nav-toggle-bar::before { content: ""; top: -6px; }
  .nav-toggle-bar::after { content: ""; top: 6px; }
  .nav-toggle-open .nav-toggle-bar { background: transparent; }
  .nav-toggle-open .nav-toggle-bar::before { top: 0; transform: rotate(45deg); }
  .nav-toggle-open .nav-toggle-bar::after { top: 0; transform: rotate(-45deg); }

  /* ── Hero (centered) ─────────────────────────────────────── */
  .hero { position: relative; padding: var(--space-8) 0 var(--space-8); overflow: hidden; }
  .dot-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(var(--lavender-a25) 1.1px, transparent 1.1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000 20%, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000 20%, transparent 72%);
  }
  .hero-center { position: relative; max-width: 880px; margin: 0 auto; }
  /* fading-tile canvas (AGX quiet-grid effect, in brand colors) */
  .hero-tiles {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: block; pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 30%, transparent 78%);
  }
  .hero-centered .hero-copy { text-align: center; }
  .hero-centered .kicker::before, .hero-centered .kicker::after { content: " ── "; color: var(--lavender-a25); }
  .hero-h1 {
    margin: 0 0 var(--space-5);
    font-family: var(--font-sans);
    font-size: 56px; line-height: 1.08;
    font-weight: var(--weight-medium);
    letter-spacing: -0.03em; text-wrap: pretty;
    background: linear-gradient(180deg, var(--white) 55%, var(--lavender));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--white);
  }
  .hero-standfirst {
    margin: 0 0 var(--space-4);
    font-size: var(--text-lg); line-height: var(--leading-snug);
    color: var(--lavender-bright); text-wrap: pretty;
  }
  .hero-sub { margin: 0 auto var(--space-6); color: var(--text-muted); max-width: 52ch; text-wrap: pretty; }
  .hero-centered .hero-ctas { justify-content: center; }
  .hero-ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; }

  /* gradient-framed terminal with glow */
  .hero-demo-center {
    position: relative; max-width: 920px; margin: var(--space-7) auto 0;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(217, 74, 34, 0.85), rgba(127, 87, 245, 0.85) 55%, rgba(208, 197, 255, 0.35));
    box-shadow: 0 24px 60px -32px rgba(127, 87, 245, 0.25);
  }
  .hero-demo-center .terminal { border: 0; box-shadow: none; }

  /* ── Terminal ────────────────────────────────────────────── */
  .terminal { border: var(--border-w-thin) solid var(--lavender-a25); background: var(--bg-deep); }
  .terminal-bar {
    display: flex; gap: var(--space-4); align-items: center;
    padding: 8px 14px;
    border-bottom: var(--border-w-hairline) solid var(--border-faint);
    background: var(--bg-raised);
  }
  .terminal-dots { font-size: 9px; color: var(--lavender-a40); letter-spacing: 2px; }
  .terminal-title { font-size: var(--text-xs); color: var(--text-muted); }
  .terminal-body {
    margin: 0; padding: 18px 20px;
    font-family: var(--font-mono-nerd);
    font-size: 13px; line-height: 1.7;
    color: var(--lavender);
    min-height: 310px; overflow-x: auto;
  }
  .term-prompt { color: var(--arch-orange); font-weight: var(--weight-medium); }
  .term-dim { color: var(--text-muted); }
  .term-note { color: var(--text-muted); }
  .term-note-accent { color: var(--arch-orange); }
  .term-cursor { color: var(--arch-orange); animation: term-blink 1s steps(1) infinite; }
  @keyframes term-blink { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .term-cursor { animation: none; } }

  /* ── Integrations marquee ────────────────────────────────── */
  .marquee-wrap {
    display: flex; align-items: stretch;
    border-top: var(--border-w-hairline) solid var(--border-faint);
    border-bottom: var(--border-w-hairline) solid var(--border-faint);
    background: rgba(11, 8, 24, 0.5);
  }
  .marquee-label {
    margin: 0; padding: 14px 24px 14px 32px;
    display: flex; align-items: center; white-space: nowrap;
    font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-secondary);
    border-right: var(--border-w-hairline) solid var(--border-faint);
  }
  .marquee {
    flex: 1; overflow: hidden; padding: 14px 0; align-self: center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .marquee-track { display: flex; width: max-content; animation: marquee-scroll 40s linear infinite; }
  .marquee-group { display: flex; gap: 28px; padding-right: 28px; white-space: nowrap; }
  .marquee-item { font-size: var(--text-sm); letter-spacing: 0.14em; color: var(--text-muted); }
  .marquee-item .sep { color: var(--lavender-a20); margin-left: 28px; }
  @keyframes marquee-scroll { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

  /* ── Backed by ───────────────────────────────────────────── */
  .backedby { padding: var(--space-6) 0 var(--space-7); }
  .backedby-label { margin: 0 0 var(--space-4); font-size: var(--text-sm); letter-spacing: 0.12em; color: var(--text-muted); }
  .backedby-row { display: flex; gap: var(--space-5); flex-wrap: wrap; }
  .investor-slot { width: 220px; height: 64px; opacity: 0.85; }

  /* ── Sections ────────────────────────────────────────────── */
  .section { padding: var(--space-8) 0; }
  .sec-head-wrap { margin-bottom: var(--space-6); }
  .sec-head {
    margin: 0 0 var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-xl); line-height: var(--leading-snug);
    font-weight: var(--weight-medium); letter-spacing: -0.02em; text-wrap: pretty;
  }
  .sec-glyph { color: var(--arch-orange); }
  .section-intro { margin: 0 0 var(--space-7); max-width: none; color: var(--text-secondary); text-wrap: pretty; }

  /* features — bento layout */
  .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .feature-card {
    border: var(--border-w-thin) solid var(--lavender-a25);
    padding: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-3);
    background: var(--gradient-raised);
  }
  .feature-card:hover { border-color: var(--arch-orange); }
  .feature-card:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template: "art title" auto "art body" auto "art link" 1fr / 0.85fr 1.15fr;
    column-gap: var(--space-7); row-gap: var(--space-3);
    align-items: start;
  }
  .feature-card:first-child .feature-art { grid-area: art; min-height: 240px; height: 100%; }
  .feature-card:first-child .feature-title { grid-area: title; align-self: end; font-size: var(--text-lg); }
  .feature-card:first-child .feature-body { grid-area: body; font-size: var(--text-base); max-width: 48ch; }
  .feature-card:first-child .arrow-link { grid-area: link; justify-self: start; align-self: start; }
  .feature-art {
    display: flex; align-items: center; justify-content: center;
    min-height: 180px;
    background-color: rgba(11, 8, 24, 0.55);
    background-image: radial-gradient(var(--lavender-a20) 1px, transparent 1px);
    background-size: 18px 18px;
    border: var(--border-w-hairline) solid var(--border-faint);
  }
  .ascii-art { margin: 0; font-family: var(--font-mono-nerd); font-size: 13px; line-height: 1.45; color: var(--lavender); }
  .feature-title { margin: var(--space-2) 0 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
  .feature-body { margin: 0; color: var(--text-muted); font-size: var(--text-sm); flex: 1; }

  /* how it works */
  .how-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-7); align-items: start; }
  .how-root { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
  .how-step { display: grid; grid-template-columns: auto auto 1fr; gap: var(--space-3); margin-bottom: var(--space-5); }
  .how-tee { color: var(--lavender-a40); }
  .how-num { color: var(--arch-orange); font-weight: var(--weight-semibold); }
  .how-title { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); }
  .how-body { margin: 0; color: var(--text-muted); font-size: var(--text-sm); max-width: 52ch; }
  .magic-panel {
    position: relative;
    border: var(--border-w-thin) solid var(--lavender-a25);
    background:
      radial-gradient(420px 260px at 100% 0%, rgba(127, 87, 245, 0.25), transparent 70%),
      var(--bg-raised);
    padding: var(--space-5);
  }
  .magic-title { margin: 0 0 var(--space-3); font-size: var(--text-md); font-weight: var(--weight-semibold); }
  .magic-body { margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: var(--text-sm); }
  .magic-rule { margin: var(--space-4) 0; }
  .compat-line { margin: 0; font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--text-muted); }

  /* scale-up sequence diagram (animated, replaces magic panel here) */
  .scaleup-panel {
    position: relative;
    border: var(--border-w-thin) solid var(--lavender-a25);
    background:
      radial-gradient(420px 260px at 100% 0%, rgba(127, 87, 245, 0.25), transparent 70%),
      var(--bg-raised);
    padding: var(--space-5);
  }
  .scaleup-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: var(--space-4); }
  .scaleup-lane-box {
    border: var(--border-w-thin) solid var(--lavender-a50);
    background: var(--bg-night-2);
    padding: 9px 4px; text-align: center;
    font-size: 11px; letter-spacing: 0.1em;
    color: var(--lavender);
  }
  .scaleup-lane-live { border-color: var(--lavender-bright); color: var(--white); background: var(--bg-panel); }
  .scaleup-stage { position: relative; padding: 6px 0 2px; }
  .scaleup-lifeline { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--lavender-a20); }
  .scaleup-msg { position: relative; height: 52px; opacity: 0; }
  .scaleup-msg.on { opacity: 1; }
  .scaleup-msg-label {
    position: absolute; top: 8px; transform: translateX(-50%); z-index: 2;
    background: var(--bg-night); border: var(--border-w-thin) solid var(--lavender-a40);
    padding: 3px 9px; font-size: 11px; letter-spacing: 0.08em;
    color: var(--lavender); white-space: nowrap;
  }
  .scaleup-msg.active .scaleup-msg-label { border-color: var(--lavender-bright); color: var(--white); }
  .scaleup-arrow { position: absolute; top: 38px; border-top: 2px solid var(--lhl-purple); }
  .scaleup-arrow::after {
    content: ""; position: absolute; right: 0; top: -5px;
    border-left: 8px solid var(--lhl-purple);
    border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  }
  .scaleup-msg.active .scaleup-arrow { border-top-color: var(--lavender-bright); }
  .scaleup-msg.active .scaleup-arrow::after { border-left-color: var(--lavender-bright); }
  .scaleup-status {
    position: relative; z-index: 2;
    margin: 10px auto 4px; width: fit-content;
    padding: 6px 12px; text-align: center;
    font-size: 11px; letter-spacing: 0.1em;
    opacity: 0; color: var(--arch-orange);
    background: var(--bg-night); border: var(--border-w-thin) solid rgba(217, 74, 34, 0.45);
  }
  .scaleup-status.on { opacity: 1; }
  .compat-line-wide { margin-top: var(--space-6); font-size: var(--text-sm); }

  /* comparison */
  .compare-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-6); align-items: start; }
  .compare-head {
    margin: 0 0 var(--space-4); font-size: var(--text-base);
    font-weight: var(--weight-semibold); letter-spacing: 0.06em; color: var(--text-muted);
  }
  .compare-head-new { color: var(--arch-orange); }
  .compare-line { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
  .compare-new { border: var(--border-w-thin) solid var(--lavender-a25); background: var(--gradient-raised); padding: var(--space-5); margin-top: calc(-1 * var(--space-5)); }
  .compare-new .compare-line { color: var(--lavender-bright); }
  .compare-mark { color: var(--lavender-a25); margin-right: 8px; }
  .compare-mark-new { color: var(--lavender-bright); }
  .compare-cow .ascii-art { color: var(--lavender-a40); font-size: 12px; }

  /* trio + teams */
  .trio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  .trio-item {
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--lavender-bright), var(--lhl-purple) 70%, rgba(37, 24, 92, 0.4)) 1;
    padding-top: var(--space-4);
  }
  .trio-title { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); }
  .trio-body { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

  .teams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .teams-head { margin: 0 0 var(--space-4); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--lavender-bright); }
  .teams-list { display: grid; gap: var(--space-3); }
  .teams-line { margin: 0; display: flex; gap: 12px; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.7; }
  .teams-mark { flex: none; color: var(--arch-orange); font-weight: var(--weight-medium); }
  .teams-head-slash { color: var(--text-muted); font-weight: var(--weight-light); }

  /* stats */
  .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
  .stat-cell { border: var(--border-w-thin) solid var(--border-default); padding: var(--space-5); background: rgba(11, 8, 24, 0.45); }
  .stat-label { margin: 0 0 var(--space-3); font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--text-muted); }
  .stat-value {
    margin: 0 0 var(--space-2);
    font-size: var(--text-3xl); font-weight: var(--weight-semibold);
    background: linear-gradient(90deg, var(--arch-orange), var(--pink));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--arch-orange);
  }
  .stat-caption { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }

  /* final cta */
  .final-cta {
    padding: var(--space-9) 0;
    border-top: var(--border-w-hairline) solid var(--border-default);
    background: radial-gradient(900px 480px at 0% 100%, rgba(217, 74, 34, 0.16), transparent 70%), var(--bg-ink);
    text-align: center;
  }
  .final-h2 { margin: 0 0 var(--space-3); font-family: var(--font-sans); font-size: var(--text-3xl); font-weight: var(--weight-medium); letter-spacing: -0.02em; }
  .final-sub { margin: 0 0 var(--space-6); color: var(--text-secondary); font-size: var(--text-md); }
  .final-ctas { justify-content: center; }
  .final-install { margin: var(--space-6) 0 0; font-size: var(--text-sm); color: var(--text-muted); }

  /* footer */
  .footer { border-top: var(--border-w-hairline) solid var(--border-default); padding: var(--space-7) 0 var(--space-5); background: var(--bg-deep); }
  .footer-top { display: grid; grid-template-columns: 1.1fr 1.9fr; gap: var(--space-7); margin-bottom: var(--space-6); }
  .footer-tagline { margin: var(--space-4) 0 var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); }
  .footer-lockup { display: flex; align-items: center; gap: 15px; }
  .footer-lockup a { display: inline-flex; align-items: center; transition: opacity 0.15s; }
  .footer-lockup a:hover { opacity: 0.7; }
  .footer-lockup-bar { font-weight: var(--weight-light); font-size: 24px; color: var(--lavender-a25); line-height: 1; }
  .footer-company { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.8; }
  .footer-company a { color: var(--lavender); text-decoration: none; }
  .footer-company a:hover { color: var(--white); }
  .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  .footer-head { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .footer-line { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
  .footer-tee { color: var(--lavender-a25); margin-right: 8px; }
  .footer-line a { color: var(--text-secondary); text-decoration: none; }
  .footer-line a:hover { color: var(--white); }
  .footer-meta {
    display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
    justify-content: space-between; padding-top: var(--space-4);
    font-size: var(--text-xs); color: var(--text-muted);
  }
  .footer-meta a { color: var(--text-muted); text-decoration: none; }
  .footer-meta a:hover { color: var(--lavender); }

  /* ── Scroll reveals: rise-in ─────────────────────────────── */
  .rv { opacity: 0; will-change: opacity, transform; }

  /* ── V7 Spot ─────────────────────────────────────────────── */
  .v7-hero { padding: var(--space-8) 0 var(--space-7); }
  .v7-hero .hero-center { text-align: center; }
  .v7-hero .hero-h1 { font-size: 60px; max-width: 23ch; margin-left: auto; margin-right: auto; }
  .v7-hero .hero-standfirst { max-width: 70ch; margin-left: auto; margin-right: auto; }
  .v7-hero-sub { max-width: 72ch; }
  .v7-eyebrow .arch-glyph { letter-spacing: 0; }
  .v7-term-body { min-height: 436px; font-size: 12.5px; line-height: 1.6; }

  .v7-proof {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
    gap: 8px 14px; margin: var(--space-6) auto 0; max-width: 900px;
    font-size: var(--text-sm); color: var(--text-muted);
  }
  .v7-proof .pm { white-space: nowrap; }
  .v7-proof .pm-n { color: var(--arch-orange); font-weight: var(--weight-semibold); }
  .v7-proof .pm-sep { color: var(--lavender-a25); }

  /* shared split layout for the content sections */
  .v7-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); align-items: start; }
  .v7-split-proof { grid-template-columns: 1.4fr 1fr; }
  .v7-prose { color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-relaxed); max-width: 58ch; }
  .v7-prose p { margin: 0 0 var(--space-4); text-wrap: pretty; }
  .v7-prose-tight { margin-bottom: var(--space-5); }
  .v7-prose strong { color: var(--lavender-bright); font-weight: var(--weight-medium); }
  .v7-turn { margin: var(--space-5) 0 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--white); line-height: var(--leading-snug); text-wrap: pretty; }
  .v7-turn em { color: var(--arch-orange); font-style: normal; }
  .v7-turn-sm { font-size: var(--text-lg); margin: 0 0 var(--space-5); }

  .v7-panel { border: var(--border-w-thin) solid var(--lavender-a25); background: var(--bg-raised); padding: var(--space-5); overflow-x: auto; }
  .v7-panel-art { background-color: rgba(11, 8, 24, 0.55); background-image: radial-gradient(var(--lavender-a20) 1px, transparent 1px); background-size: 18px 18px; border-color: var(--border-faint); display: flex; align-items: center; justify-content: center; }
  .v7-panel-art .ascii-art { font-size: 12.5px; line-height: 1.5; }

  /* reclaim loss list (dotted leaders) */
  .v7-reclaim { font-family: var(--font-mono-nerd); --loss-red: #F0433A; }
  .v7-reclaim-head { margin: 0 0 var(--space-4); color: var(--white); letter-spacing: 0.12em; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
  .v7-reclaim-without { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .v7-loss { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: 11px; }
  .v7-loss li { display: flex; align-items: baseline; gap: 10px; font-size: var(--text-sm); color: var(--text-secondary); }
  .v7-loss .x { color: var(--loss-red); flex: none; }
  .v7-loss .dots { flex: 1; border-bottom: 1px dotted var(--lavender-a25); transform: translateY(-4px); min-width: 18px; }
  .v7-loss .v { color: var(--loss-red); font-weight: var(--weight-semibold); letter-spacing: 0.08em; flex: none; }
  /* staggered entrance, triggered when the panel scrolls into view */
  @media (prefers-reduced-motion: no-preference) {
    .v7-reclaim .v7-loss li { opacity: 0; transform: translateX(-10px); }
    .v7-reclaim-in .v7-loss li {
      animation: lossRowIn 0.5s cubic-bezier(0.22,0.61,0.36,1) forwards;
      animation-delay: calc(var(--li) * 0.14s + 0.1s);
    }
    .v7-reclaim .v7-loss .x { display: inline-block; transform: scale(0); }
    .v7-reclaim-in .v7-loss .x {
      animation: lossXPop 0.42s cubic-bezier(0.34,1.56,0.64,1) forwards;
      animation-delay: calc(var(--li) * 0.14s + 0.22s);
    }
    .v7-reclaim .v7-loss .v { will-change: color; }
    .v7-reclaim-in .v7-loss .v {
      animation: lossWordFlash 0.6s ease-out forwards;
      animation-delay: calc(var(--li) * 0.14s + 0.28s);
    }
  }
  @keyframes lossRowIn { to { opacity: 1; transform: translateX(0); } }
  @keyframes lossXPop { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
  @keyframes lossWordFlash { 0% { color: var(--white); text-shadow: 0 0 12px rgba(240,67,58,0.7); } 100% { color: var(--loss-red); text-shadow: none; } }

  /* ── Solution panel (mirror of the loss panel, in green) ─── */
  .section-solution { --win-green: #2FB877; }
  .section-solution .sec-glyph { color: var(--win-green); }
  .v7-split-rev { grid-template-columns: 0.95fr 1.05fr; }
  .v7-keep { --win-green: #2FB877; }
  .v7-keep-head { margin: 0 0 var(--space-4); color: var(--white); letter-spacing: 0.12em; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
  .v7-keep-with { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .v7-keep .v7-loss .x { color: var(--win-green); }
  .v7-keep .v7-loss .v { color: var(--win-green); font-weight: var(--weight-semibold); }
  @media (prefers-reduced-motion: no-preference) {
    .v7-keep .v7-loss li { opacity: 0; transform: translateX(-10px); }
    .v7-keep-in .v7-loss li {
      animation: lossRowIn 0.5s cubic-bezier(0.22,0.61,0.36,1) forwards;
      animation-delay: calc(var(--li) * 0.14s + 0.1s);
    }
    .v7-keep .v7-loss .x { display: inline-block; transform: scale(0); }
    .v7-keep-in .v7-loss .x {
      animation: lossXPop 0.42s cubic-bezier(0.34,1.56,0.64,1) forwards;
      animation-delay: calc(var(--li) * 0.14s + 0.22s);
    }
    .v7-keep .v7-loss .v { will-change: color; }
    .v7-keep-in .v7-loss .v {
      animation: keepWordFlash 0.6s ease-out forwards;
      animation-delay: calc(var(--li) * 0.14s + 0.28s);
    }
  }
  @keyframes keepWordFlash { 0% { color: var(--white); text-shadow: 0 0 12px rgba(47,184,119,0.7); } 100% { color: var(--win-green); text-shadow: none; } }
  .v7-reclaim-after { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

  /* how it works: warning windows + steps */
  .v7-windows { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-5); }
  .v7-window { border: var(--border-w-thin) solid var(--lavender-a25); padding: 10px 16px; min-width: 120px; }
  .v7-window .w-cloud { font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--text-muted); }
  .v7-window .w-time { display: block; margin-top: 5px; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--lavender-bright); }
  .v7-window-arch { border-color: var(--arch-orange); }
  .v7-window-arch .w-time { color: var(--arch-orange); }
  .v7-steps { display: grid; gap: var(--space-3); }
  .v7-step { display: grid; grid-template-columns: auto 1fr; gap: 12px; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
  .v7-step-n { color: var(--arch-orange); font-weight: var(--weight-semibold); }
  .v7-step b { color: var(--lavender-bright); font-weight: var(--weight-medium); }
  .v7-step-t { color: var(--text-muted); white-space: nowrap; }

  /* timeline contrast */
  .v7-timeline { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
  .v7-tl-row { border-left: 2px solid var(--lavender-a25); padding-left: var(--space-4); }
  .v7-tl-new { border-left-color: var(--arch-orange); }
  .v7-tl-head { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: var(--text-sm); letter-spacing: 0.1em; color: var(--text-muted); }
  .v7-tl-sub { letter-spacing: 0; text-transform: none; color: var(--lavender-a40); }
  .v7-tl-total { margin-left: auto; font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--lavender-bright); }
  .v7-tl-total-new { color: var(--arch-orange); }
  .v7-tl-seq { margin: 0 0 6px; font-size: var(--text-sm); color: var(--lavender); line-height: 1.75; }
  .v7-tl-note { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
  .v7-tl-note-new { color: var(--arch-orange); }
  .v7-timeline-side { margin-top: 0; align-self: center; gap: var(--space-5); }

  /* proof: stateful workloads on a multi-node cluster */
  .v7-cluster { border: var(--border-w-thin) solid var(--lavender-a25); background: var(--bg-raised); padding: var(--space-5); }
  .v7-cluster-title { margin: 0 0 var(--space-4); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
  .v7-nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .v7-node { border: var(--border-w-hairline) solid var(--lavender-a20); background: var(--bg-night-2); padding: 10px 8px; display: grid; gap: 8px; align-content: start; }
  .v7-node-h { font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--text-muted); }
  .v7-pod { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: var(--border-w-hairline) solid var(--lavender-a40); background: var(--bg-panel); font-size: var(--text-xs); color: var(--lavender-bright); white-space: nowrap; }
  .v7-pod-dot { color: #2FB877; display: inline-block; }
  @media (prefers-reduced-motion: no-preference) {
    .v7-pod-dot { animation: podAlive 3.4s ease-in-out infinite; }
  }
  @keyframes podAlive {
    0%, 100% { opacity: 0.7; text-shadow: 0 0 0 rgba(47,184,119,0); }
    50% { opacity: 1; text-shadow: 0 0 7px rgba(47,184,119,0.85); }
  }
  .v7-cluster-cap { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--text-muted); text-wrap: pretty; }

  /* proof card */
  .v7-proof-card { border: var(--border-w-thin) solid var(--lavender-a25); background: var(--gradient-raised); padding: var(--space-6); }
  .v7-anno { margin: 0; font-family: var(--font-mono-nerd); font-size: 12.5px; line-height: 1.7; color: var(--lavender); overflow-x: auto; }
  .v7-card-rule { margin: var(--space-4) 0; }
  .v7-survives { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: 11px; }
  .v7-survives li { display: flex; align-items: baseline; gap: 12px; font-size: var(--text-sm); }
  .v7-survives .ok { color: var(--arch-orange); flex: none; }
  .v7-survives .sv-k { color: var(--white); font-weight: var(--weight-medium); flex: none; min-width: 130px; }
  .v7-survives .sv-v { color: var(--text-muted); }
  .v7-links { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-top: var(--space-5); }

  /* scale to zero (secondary, compact) */
  .v7-scale { border-top: var(--border-w-hairline) solid var(--border-default); }
  .v7-scale-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-7); align-items: start; }
  .v7-scale-body { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); max-width: 60ch; }
  .v7-scale-body b { color: var(--arch-orange); }
  .v7-scale-body em { color: var(--lavender-bright); font-style: normal; }
  .v7-scale-side { display: grid; gap: 10px; }
  .v7-scale-ex { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
  .v7-scale-quote { margin: var(--space-3) 0 0; padding-left: var(--space-4); border-left: 2px solid var(--arch-orange); font-size: var(--text-sm); color: var(--lavender-bright); font-style: italic; text-wrap: pretty; }
  .v7-util { border: var(--border-w-thin) solid var(--lavender-a25); background: var(--bg-raised); padding: var(--space-5); }
  .v7-util-title { margin: 0 0 var(--space-4); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
  .v7-util-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .v7-util-bar { position: relative; flex: 1; }
  .v7-util-track, .v7-util-fill { display: flex; gap: 3px; }
  .v7-util-fill { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path 1.15s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .v7-util-bar.is-in .v7-util-fill { clip-path: inset(0 calc(100% - var(--pct)) 0 0); }
  .v7-util-cell { flex: 1; height: 20px; background: var(--bg-night-2); border: var(--border-w-hairline) solid var(--lavender-a20); }
  .v7-util-fill .v7-util-cell.on { background: var(--lavender-a50); border-color: var(--lavender-a50); }
  .v7-util-fill .v7-util-cell.on-accent { background: var(--arch-orange); border-color: var(--arch-orange); }
  .v7-util-pct { min-width: 42px; text-align: right; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--lavender-bright); }
  .v7-util-pct-accent { color: var(--arch-orange); }
  .v7-util-mark { min-width: 30px; display: flex; justify-content: center; font-size: 18px; }
  .v7-util-cap { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--text-muted); }

  /* closing */
  .v7-closing { position: relative; overflow: hidden; padding: var(--space-9) 0; border-top: var(--border-w-hairline) solid var(--border-default); background: radial-gradient(900px 480px at 0% 100%, rgba(217, 74, 34, 0.16), transparent 70%), var(--bg-ink); }
  .v7-closing .container { position: relative; }
  .v7-closing .hero-tiles {
    -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 100%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 80% 100% at 50% 100%, #000 30%, transparent 78%);
  }
  .v7-closing-line { max-width: 62ch; margin: 0 0 var(--space-6); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--text-secondary); text-wrap: pretty; }
  .v7-closing-em { color: var(--white); font-weight: var(--weight-semibold); }
  .v7-closing-ctas { justify-content: flex-start; }
  .v7-smallprint { margin: var(--space-5) 0 0; max-width: 92.5ch; font-size: var(--text-xs); color: var(--text-muted); letter-spacing: 0.03em; line-height: 1.8; }

  /* ── Responsive ──────────────────────────────────────────── */
  @media (max-width: 1080px) {
    .v7-split, .v7-split-proof, .v7-scale-inner { grid-template-columns: 1fr; }
    .v7-hero .hero-h1 { font-size: 42px; }
  }
  @media (max-width: 680px) {
    .v7-hero .hero-h1 { font-size: 30px; }
    .v7-survives .sv-k { min-width: 0; }
  }
  @media (max-width: 1080px) {
    .how-grid, .teams-grid, .footer-top { grid-template-columns: 1fr; }
    .trio-grid { grid-template-columns: 1fr 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .compare-grid { grid-template-columns: 1fr 1fr; }
    .compare-cow { grid-column: 1 / -1; justify-self: center; }
    .feature-card:first-child { grid-template: "art" auto "title" auto "body" auto "link" auto / 1fr; }
    .hero-h1 { font-size: 42px; }
  }
  @media (max-width: 680px) {
    .feature-grid, .trio-grid, .stats-grid, .compare-grid, .footer-cols { grid-template-columns: 1fr; }
    .hero-h1 { font-size: 32px; }
  }
  /* Header collapses to a hamburger before the links would crowd the logo/CTA. */
  @media (max-width: 820px) {
    .nav-toggle { display: inline-flex; }
    .nav-links {
      position: absolute; top: 100%; left: 0; right: 0; z-index: 55;
      display: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
      background: var(--bg-deep);
      border-bottom: var(--border-w-thin) solid var(--border-default);
      padding: var(--space-2) 0;
    }
    .nav-links.nav-links-open { display: flex; }
    .nav-links > a { padding: 12px var(--space-5); }
    .nav-links .sep { display: none; }
    .nav-dd { display: block; }
    .nav-dd-btn { padding: 12px var(--space-5); width: 100%; justify-content: space-between; }
    .nav-dd-menu {
      position: static; min-width: 0; border: 0; box-shadow: none; background: transparent;
    }
    .nav-dd-menu a { padding-left: calc(var(--space-5) * 2); border-bottom: 0; }
  }
  @media (max-width: 560px) {
    .topbar-right { display: none; }
  }

  /* ── from 04 Lifecycle ───────────────────────────────── */
  /* ── V5 Lifecycle ─────────────────────────────────── */
  .v5-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); align-items: center; position: relative; }
  .v5-hero .hero-h1 { font-size: 48px; }
  .v5-hero .hero-sub { margin-left: 0; }
  .v5-hero-demo {
    position: relative; padding: 1.5px;
    background: linear-gradient(135deg, rgba(217, 74, 34, 0.85), rgba(127, 87, 245, 0.85) 55%, rgba(208, 197, 255, 0.35));
    box-shadow: 0 24px 60px -32px rgba(127, 87, 245, 0.25);
  }
  .v5-hero-demo .terminal { border: 0; box-shadow: none; }
  .v5-stats {
    position: relative;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
    margin-top: var(--space-7); padding-top: var(--space-5);
    border-top: var(--border-w-hairline) solid var(--border-default);
  }
  .v5-stat { display: flex; align-items: baseline; gap: 12px; }
  .v5-stat-v { font-size: 32px; font-weight: var(--weight-semibold); color: var(--white); }
  .v5-stat-k { font-size: var(--text-sm); color: var(--text-muted); }

  .v5-statement-wrap { max-width: 880px; }
  .v5-statement { margin: var(--space-4) 0; font-size: 40px; line-height: 1.15; font-weight: var(--weight-semibold); }
  .v5-statement-body { margin: 0; color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-relaxed); max-width: 64ch; }

  .v5-stages { display: grid; gap: var(--space-8); }
  .v5-stage { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-7); align-items: center; }
  .v5-stage-flip .v5-stage-copy { order: 2; }
  .v5-stage-flip .v5-stage-visual { order: 1; }
  .v5-stage-title { margin: 0 0 var(--space-3); font-size: 28px; font-weight: var(--weight-semibold); line-height: 1.25; text-wrap: pretty; }
  .v5-stage-body { margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); max-width: 48ch; }
  .v5-stage-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

  .v5-install { border: var(--border-w-thin) solid var(--lavender-a25); background: var(--bg-deep); padding: var(--space-5); }
  .v5-install-line { margin: 0 0 var(--space-2); font-size: var(--text-md); }
  .v5-install-out { margin: 0; color: var(--text-muted); }
  .v5-install-rule { margin: var(--space-4) 0; }

  .v5-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  .v5-feat-cell { border-top: 2px solid var(--lavender-a25); padding-top: var(--space-4); }
  .v5-feat-title { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); }
  .v5-feat-body { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

  @media (max-width: 1080px) {
    .v5-hero-grid, .v5-stage { grid-template-columns: 1fr; }
    .v5-stage-flip .v5-stage-copy { order: 1; }
    .v5-stage-flip .v5-stage-visual { order: 2; }
    .v5-stats { grid-template-columns: 1fr; gap: var(--space-4); }
    .v5-feat-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 680px) {
    .v5-feat-grid { grid-template-columns: 1fr; }
  }

  /* ── from 05 Cluster Story (scroll section) ──────────── */
  .cs-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); align-items: start; }
  .cs-stage { position: sticky; top: 176px; }
  .cs-canvas-wrap {
    position: relative; height: min(62vh, 540px);
    border: var(--border-w-thin) solid var(--lavender-a25);
    background: rgba(11, 8, 24, 0.55);
  }
  .cs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .cs-status { margin: 14px 0 0; font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--text-muted); }
  .cs-steps { display: flex; flex-direction: column; }
  .cs-step { min-height: min(62vh, 540px); display: flex; flex-direction: column; justify-content: center; opacity: 0.25; transition: opacity 0.35s; }
  .cs-step.on { opacity: 1; }
  .cs-num { margin: 0 0 var(--space-2); font-size: var(--text-md); }
  .cs-title { margin: 0 0 var(--space-3); font-family: var(--font-sans); font-size: 28px; font-weight: var(--weight-medium); letter-spacing: -0.02em; line-height: 1.25; text-wrap: pretty; }
  .cs-body { margin: 0; color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-relaxed); max-width: 52ch; }

  @media (max-width: 1080px) {
    .cs-grid { grid-template-columns: 1fr; }
    .cs-stage { position: static; }
    .cs-step { min-height: 0; opacity: 1; padding: var(--space-5) 0; }
    .v6-h1 { font-size: 42px; }
  }
  @media (max-width: 680px) {
    .v6-h1 { font-size: 32px; }
  }

/* ── v8: How-page hero adjustments ───────────────────────── */
.v5-hero .v5-hero-grid { align-items: start; }

/* ── v8: How-Architect-Works page closing hero ───────────── */
.how-closing {
  position: relative; overflow: hidden;
  padding: 150px 0 160px; text-align: center;
  border-top: var(--border-w-hairline) solid var(--border-default);
  background: radial-gradient(900px 520px at 50% 130%, rgba(217, 74, 34, 0.18), transparent 70%), var(--bg-ink);
}
.how-closing .container { position: relative; }
.how-closing .hero-tiles {
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 100%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 100% at 50% 100%, #000 30%, transparent 78%);
}
.how-closing-h2 {
  margin: 0 auto var(--space-4); max-width: 36ch;
  font-family: var(--font-sans);
  font-size: 52px; line-height: 1.1; text-wrap: balance;
  font-weight: var(--weight-medium); letter-spacing: -0.03em; text-wrap: pretty;
  background: linear-gradient(180deg, var(--white) 55%, var(--lavender));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--white);
}
.how-closing-sub { margin: 0 auto var(--space-6); max-width: 56ch; color: var(--text-secondary); }
.how-closing-ctas { justify-content: center; }
.how-closing-install { margin: var(--space-6) 0 0; font-size: var(--text-sm); color: var(--text-muted); }
@media (max-width: 680px) { .how-closing-h2 { font-size: 32px; } }

  /* ── Pricing page ───────────────────────────────────────────── */
  .pricing-section { position: relative; overflow: hidden; }
  .pricing-intro { color: var(--text-secondary); max-width: 60ch; }
  .price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
  .price-card {
    display: flex; flex-direction: column; gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-raised);
    border: var(--border-w-thin) solid var(--border-default);
  }
  .price-card-featured { border-color: var(--arch-orange); background: var(--gradient-raised); }
  .price-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .price-title { font-size: var(--text-md); letter-spacing: 0.08em; font-weight: var(--weight-semibold); }
  .price-badge {
    font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--arch-orange);
    border: var(--border-w-hairline) solid rgba(217, 74, 34, 0.45); padding: 2px 6px;
  }
  .price-metric { display: flex; align-items: baseline; gap: var(--space-2); }
  .price-metric-n { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--white); }
  .price-metric-k { font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--text-muted); }
  .price-features { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
  .price-feature { font-size: var(--text-sm); color: var(--text-secondary); }
  .price-feature-dot { color: var(--arch-orange); }
  .price-amount { display: flex; align-items: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
  .price-amount-n { font-size: var(--text-2xl); color: var(--white); line-height: 1; }
  .price-amount-p { font-size: var(--text-sm); color: var(--text-muted); }
  .price-card .btn { margin-top: var(--space-2); justify-content: center; }
  .pricing-foot { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--text-muted); }
  .pricing-foot a { color: var(--lavender-bright); }
  @media (max-width: 900px) { .price-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; } }