/* swesee marketing site — zero JS, zero third-party, CSP default-src 'self'
 *
 * Layer cascade keeps specificity predictable across pages (SRP per layer):
 *   reset       — normalize the box
 *   tokens      — design-system custom properties (light + dark)
 *   base        — element-level typography + colour
 *   components  — reusable primitives (aurora, glass, bento, btn, chip, ...)
 *   layouts     — page-scoped compositions that compose components
 *   pages       — one-off per-page overrides (rare)
 */
@layer reset, tokens, base, components, layouts, pages;

/* ============================================================================
   RESET
   ========================================================================= */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  :where(button) { font: inherit; color: inherit; }
}

/* ============================================================================
   TOKENS  —  one source of truth for colour, type, space, motion, depth
   Light mode is default; dark overrides at the bottom of the @layer.
   ========================================================================= */
@layer tokens {
  :root {
    /* Brand green (mirrors Swesee/Shared/DesignSystem/SweseeTheme.swift) */
    --green-50:   #e9f9ef;
    --green-100:  #c7f0d5;
    --green-200:  #93e3b0;
    --green-300:  #5cd58a;
    --green-400:  #3EDD7E;  /* primary glow */
    --green-500:  #2ECC71;  /* primary */
    --green-600:  #27AE60;  /* deep */
    --green-700:  #1f8a4c;
    --green-800:  #166436;
    --green-900:  #0D3B20;  /* abyss-green */

    --green-glow:  rgba(46, 204, 113, 0.55);
    --green-haze:  rgba(46, 204, 113, 0.22);
    --green-mist:  rgba(46, 204, 113, 0.10);

    /* Light-mode neutrals — warm off-white, ink-green text (matches iOS sweseeBase / Color.sweseeBase) */
    --bg-base:        #F4F8F5;
    --bg-veil:        rgba(255, 255, 255, 0.74);
    --surface:        #ffffff;
    --surface-soft:   #eef4f0;
    --surface-deep:   #e1ebe5;
    --border:         rgba(8, 36, 18, 0.10);
    --border-strong:  rgba(8, 36, 18, 0.18);
    --text:           #0a1f12;
    --text-muted:     rgba(10, 31, 18, 0.66);
    --text-faint:     rgba(10, 31, 18, 0.46);
    --link:           var(--green-600);
    --code-bg:        rgba(8, 36, 18, 0.06);
    --shadow-card:    0 1px 0 rgba(8, 36, 18, 0.04), 0 12px 36px -16px rgba(8, 36, 18, 0.18);
    --shadow-glow:    0 0 0 1px rgba(46, 204, 113, 0.18), 0 24px 64px -28px rgba(46, 204, 113, 0.45);
    --aurora-a:       rgba(62, 221, 126, 0.28);
    --aurora-b:       rgba(46, 204, 113, 0.20);
    --aurora-c:       rgba(13, 59, 32,  0.12);
    --grid-line:      rgba(8, 36, 18, 0.05);

    /* Type scale — 1.250 minor third for body, 1.333 perfect fourth at display */
    --font-sans:    ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Inter, system-ui, sans-serif;
    --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    --fs-eyebrow:   0.72rem;   /* 11.5px — chip / label */
    --fs-meta:      0.82rem;   /* 13.1px — supplementary */
    --fs-body:      1rem;      /* 16px   — paragraph */
    --fs-lead:      1.125rem;  /* 18px   — hero subhead */
    --fs-h3:        1.25rem;
    --fs-h2:        clamp(1.5rem, 2.4vw + 0.2rem, 2.125rem);
    --fs-h1:        clamp(2.25rem, 5.6vw + 0.4rem, 4.5rem);

    --lh-tight:     1.05;
    --lh-snug:      1.25;
    --lh-body:      1.62;

    --tracking-display: -0.035em;
    --tracking-h2:      -0.02em;
    --tracking-eyebrow: 0.14em;

    /* Spacing — 4px base, even rhythm */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  24px;
    --s-6:  32px;
    --s-7:  48px;
    --s-8:  72px;
    --s-9:  112px;

    /* Radii — soft (cards) to pill (chips) */
    --r-sm:   8px;
    --r-md:   14px;
    --r-lg:   22px;
    --r-xl:   32px;
    --r-pill: 999px;

    /* Layout */
    --content-narrow: 680px;
    --content:        920px;
    --content-wide:   1120px;

    /* Motion — slow ambient by default; respects prefers-reduced-motion below */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:     180ms;
    --dur-med:      320ms;
    --dur-slow:     640ms;
    --dur-ambient:  28s;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg-base:        #050b07;       /* abyssal — deeper than #0c150f for richer aurora contrast */
      --bg-veil:        rgba(5, 11, 7, 0.55);
      --surface:        #0c150f;
      --surface-soft:   #111d15;
      --surface-deep:   #182821;
      --border:         rgba(146, 220, 173, 0.10);
      --border-strong:  rgba(146, 220, 173, 0.20);
      --text:           #eaf8ee;
      --text-muted:     rgba(234, 248, 238, 0.72);
      --text-faint:     rgba(234, 248, 238, 0.46);
      --link:           var(--green-400);
      --code-bg:        rgba(146, 220, 173, 0.08);
      --shadow-card:    0 1px 0 rgba(0, 0, 0, 0.5), 0 16px 48px -20px rgba(0, 0, 0, 0.6);
      --shadow-glow:    0 0 0 1px rgba(62, 221, 126, 0.25), 0 32px 72px -28px rgba(62, 221, 126, 0.55);
      --aurora-a:       rgba(62, 221, 126, 0.40);
      --aurora-b:       rgba(46, 204, 113, 0.28);
      --aurora-c:       rgba(7, 28, 16, 0.65);
      --grid-line:      rgba(146, 220, 173, 0.06);
    }
  }
}

/* ============================================================================
   BASE  —  element defaults that aren't layout-specific
   ========================================================================= */
@layer base {
  html {
    color-scheme: light dark;
    /* Subtle aurora-mesh background tints — fixed so they don't scroll with content */
    background-color: var(--bg-base);
    background-image:
      radial-gradient(60vmax 50vmax at 10% -10%, var(--aurora-a), transparent 60%),
      radial-gradient(50vmax 40vmax at 110% 10%, var(--aurora-b), transparent 55%),
      radial-gradient(80vmax 60vmax at 50% 120%, var(--aurora-c), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Faint hand-laid grid behind everything — a Stripe-tier touch */
    background-image:
      linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
  }

  main { flex: 1; }

  h1, h2, h3 { color: var(--text); margin: 0; font-weight: 700; letter-spacing: var(--tracking-h2); text-wrap: balance; }
  h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-weight: 800; }
  h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
  h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em; }

  p  { margin: 0 0 var(--s-4); color: var(--text); text-wrap: pretty; }
  p.lead { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.55; }

  a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--dur-fast) var(--ease-out);
  }
  a:hover { color: var(--green-400); text-decoration-thickness: 2px; }

  code, pre { font-family: var(--font-mono); font-size: 0.92em; }
  code { background: var(--code-bg); padding: 1px 6px; border-radius: 4px; }
  pre {
    background: var(--code-bg);
    padding: var(--s-4);
    border-radius: var(--r-sm);
    overflow-x: auto;
    border: 1px solid var(--border);
  }
  pre code { background: transparent; padding: 0; }

  ul, ol { padding-left: 1.4rem; margin: 0 0 var(--s-4); }
  li { margin-bottom: var(--s-2); }

  ::selection { background: var(--green-haze); color: var(--text); }

  :focus-visible {
    outline: 2px solid var(--green-400);
    outline-offset: 3px;
    border-radius: 4px;
  }
}

/* ============================================================================
   COMPONENTS  —  reusable primitives composed by pages
   ========================================================================= */
@layer components {

  /* ── containers ─────────────────────────────────────────────────────── */
  .container       { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--s-5); }
  .container-narrow{ width: 100%; max-width: var(--content-narrow); margin-inline: auto; padding-inline: var(--s-5); }
  .container-wide  { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--s-5); }

  /* ── site header (Liquid Glass) ─────────────────────────────────────── */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--bg-base) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
            backdrop-filter: saturate(1.6) blur(18px);
    border-bottom: 1px solid var(--border);
  }
  .site-header-inner {
    max-width: var(--content-wide);
    margin: 0 auto;
    padding: var(--s-3) var(--s-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    flex-wrap: wrap;
  }
  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
    color: var(--text);
    text-decoration: none;
    line-height: 1;
  }
  .wordmark-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--green-400), var(--green-700));
    box-shadow: 0 6px 18px -8px var(--green-glow), inset 0 0 0 1px rgba(255,255,255,0.10);
    display: grid;
    place-items: center;
    color: #fff;
  }
  .wordmark-mark svg { width: 18px; height: 18px; }
  .wordmark:hover { color: var(--green-600); }
  @media (prefers-color-scheme: dark) {
    .wordmark:hover { color: var(--green-400); }
  }

  .site-nav { display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: center; }
  .site-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    padding: var(--s-1) 0;
    position: relative;
  }
  .site-nav a:hover { color: var(--text); }
  .site-nav a[aria-current="page"] {
    color: var(--text);
  }
  .site-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--green-500), var(--green-400));
  }

  /* ── aurora hero backdrop (greens only) ─────────────────────────────── */
  .aurora {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .aurora::before,
  .aurora::after {
    content: "";
    position: absolute;
    inset: -25%;
    z-index: -1;
    pointer-events: none;
    filter: blur(48px);
    opacity: 0.95;
  }
  .aurora::before {
    background:
      radial-gradient(38% 32% at 22% 28%, var(--green-glow), transparent 70%),
      radial-gradient(28% 24% at 78% 18%, var(--green-haze), transparent 75%),
      radial-gradient(46% 34% at 50% 92%, rgba(13, 59, 32, 0.55), transparent 70%);
    animation: aurora-drift var(--dur-ambient) var(--ease-out) infinite alternate;
  }
  .aurora::after {
    background:
      radial-gradient(30% 26% at 64% 60%, var(--green-mist), transparent 70%),
      radial-gradient(22% 18% at 12% 72%, var(--green-haze), transparent 75%);
    animation: aurora-drift var(--dur-ambient) var(--ease-out) -14s infinite alternate-reverse;
    mix-blend-mode: screen;
  }
  @keyframes aurora-drift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
    50%  { transform: translate3d( 2%,  1%, 0) scale(1.06); }
    100% { transform: translate3d(-1%,  2%, 0) scale(1); }
  }

  /* ── glass surface ──────────────────────────────────────────────────── */
  .glass {
    background: color-mix(in oklab, var(--surface) 78%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
            backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
  }
  .glass-strong {
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-glow);
  }

  /* ── chips & badges ─────────────────────────────────────────────────── */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 6px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-strong);
    background: color-mix(in oklab, var(--surface) 70%, transparent);
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    color: var(--text-muted);
    letter-spacing: 0.04em;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  }
  .chip-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green-500);
    box-shadow: 0 0 0 4px var(--green-haze);
    animation: chip-pulse 2.4s ease-in-out infinite;
  }
  @keyframes chip-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--green-haze); }
    50%      { box-shadow: 0 0 0 7px transparent; }
  }
  .eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--green-600);
    margin-bottom: var(--s-3);
  }
  @media (prefers-color-scheme: dark) {
    .eyebrow { color: var(--green-400); }
  }

  /* ── buttons ────────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 14px 22px;
    border-radius: var(--r-pill);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
    line-height: 1;
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn-primary {
    color: #052013;
    background: linear-gradient(180deg, var(--green-400), var(--green-500));
    box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset,
                0 0 0 1px var(--green-600),
                0 16px 40px -16px var(--green-glow);
  }
  .btn-primary:hover {
    background: linear-gradient(180deg, var(--green-300), var(--green-400));
    box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset,
                0 0 0 1px var(--green-500),
                0 22px 50px -16px var(--green-glow);
  }
  .btn-ghost {
    color: var(--text);
    background: color-mix(in oklab, var(--surface) 60%, transparent);
    border-color: var(--border-strong);
  }
  .btn-ghost:hover {
    background: var(--surface);
    border-color: var(--green-500);
  }
  .btn[data-disabled="true"] {
    pointer-events: none;
    opacity: 0.55;
    filter: saturate(0.6);
  }
  .btn-aside {
    font-size: 0.92rem;
    color: var(--text-faint);
    padding-left: var(--s-3);
  }

  /* ── bento grid ─────────────────────────────────────────────────────── */
  .bento {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(180px, auto);
  }
  /* On mobile the 180px row floor wastes vertical space for short tiles;
     let rows size to content. */
  @media (max-width: 600px) {
    .bento { grid-auto-rows: auto; }
  }
  .bento-tile {
    position: relative;
    padding: var(--s-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--surface) 84%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
            backdrop-filter: blur(20px) saturate(1.4);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--dur-med) var(--ease-out),
                border-color var(--dur-med) var(--ease-out),
                box-shadow var(--dur-med) var(--ease-out);
  }
  .bento-tile:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-glow);
  }
  .bento-tile::before {
    /* corner gleam */
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(60% 60% at 0% 0%, var(--green-haze), transparent 60%);
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out);
    z-index: -1;
  }
  .bento-tile:hover::before { opacity: 1; }
  .bento-tile h3 { margin-bottom: var(--s-2); }
  .bento-tile p { color: var(--text-muted); margin-bottom: 0; }
  .bento-tile .tile-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--green-600);
    margin-bottom: var(--s-3);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
  }
  @media (prefers-color-scheme: dark) {
    .bento-tile .tile-eyebrow { color: var(--green-400); }
  }
  .bento-tile .tile-number {
    width: 22px; height: 22px;
    border-radius: 6px;
    display: inline-grid;
    place-items: center;
    font-size: 0.7rem;
    background: var(--green-mist);
    color: var(--green-600);
    font-weight: 700;
  }
  @media (prefers-color-scheme: dark) {
    .bento-tile .tile-number { color: var(--green-300); }
  }

  /* tile spans */
  .bento-tile.span-3 { grid-column: span 3; }
  .bento-tile.span-2 { grid-column: span 2; }
  .bento-tile.span-6 { grid-column: span 6; }
  .bento-tile.row-2  { grid-row: span 2; }

  @media (max-width: 760px) {
    .bento { grid-template-columns: 1fr; }
    .bento-tile.span-3,
    .bento-tile.span-2,
    .bento-tile.span-6 { grid-column: span 1; }
    .bento-tile.row-2 { grid-row: auto; }
  }

  /* ── device showcase (pure CSS iPhone-on-Mac) ───────────────────────── */
  .showcase {
    position: relative;
    margin-top: var(--s-6);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
  }

  .phone-mock {
    --phone-w: 240px;
    --phone-h: 480px;
    width: var(--phone-w);
    height: var(--phone-h);
    border-radius: 38px;
    background: linear-gradient(180deg, #0d1410 0%, #050a07 100%);
    border: 1px solid var(--border-strong);
    padding: 12px;
    position: relative;
    box-shadow:
      0 60px 120px -40px rgba(13, 59, 32, 0.55),
      0 20px 40px -20px rgba(13, 59, 32, 0.35),
      inset 0 1px 0 rgba(255,255,255,0.08);
    transform: perspective(1400px) rotateX(2deg);
  }
  .phone-mock::before {
    /* dynamic island */
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 86px;
    height: 22px;
    border-radius: var(--r-pill);
    background: #000;
    border: 1px solid rgba(255,255,255,0.06);
  }
  .phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    background: var(--surface);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .phone-statusbar {
    height: 36px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 18px 8px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-muted);
  }
  .phone-statusbar span:last-child {
    color: var(--green-500);
  }
  .phone-header {
    padding: var(--s-3) var(--s-4) var(--s-3);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    background: color-mix(in oklab, var(--surface) 92%, transparent);
  }
  .phone-header-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--green-500);
    box-shadow: 0 0 0 3px var(--green-haze);
  }
  .phone-header-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
  }
  .phone-header-meta {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-faint);
  }
  .phone-rows {
    flex: 1;
    overflow: hidden;
    padding: var(--s-2) 0;
    display: flex;
    flex-direction: column;
  }
  .phone-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 7px var(--s-4);
    font-size: 0.7rem;
    color: var(--text);
    border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  }
  .phone-row:last-child { border-bottom: none; }
  .phone-row-icon {
    width: 14px; height: 14px; border-radius: 3px;
    background: var(--green-haze);
    flex-shrink: 0;
  }
  .phone-row.is-folder .phone-row-icon { background: linear-gradient(135deg, var(--green-400), var(--green-700)); }
  .phone-row.is-mod    .phone-row-icon { background: var(--green-500); box-shadow: 0 0 0 2px var(--green-haze); }
  .phone-row.is-new    .phone-row-icon { background: var(--green-300); }
  .phone-row .phone-row-name { flex: 1; font-family: var(--font-mono); font-size: 0.66rem; }
  .phone-row .phone-row-tag {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    padding: 1px 6px;
    border-radius: var(--r-pill);
    color: var(--green-600);
    background: var(--green-mist);
  }
  @media (prefers-color-scheme: dark) {
    .phone-row .phone-row-tag { color: var(--green-300); }
  }
  .phone-footer {
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-faint);
    background: color-mix(in oklab, var(--surface-soft) 80%, transparent);
  }
  .phone-footer .phone-pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green-500);
    animation: chip-pulse 1.8s ease-in-out infinite;
  }

  /* connection ribbon — from phone bottom to "mac" label below */
  .showcase-connection {
    position: relative;
    margin-top: var(--s-3);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    color: var(--text-muted);
  }
  .showcase-connection::before {
    content: "";
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--green-500));
  }
  .showcase-connection::after {
    content: "";
    width: 18px;
    height: 1px;
    background: linear-gradient(270deg, transparent, var(--green-500));
  }

  /* ── section eyebrow + spacing ──────────────────────────────────────── */
  .section {
    /* Fluid section rhythm — tighter than the previous --s-7→--s-8 ramp because
       inter-section gaps were still reading as wasted space on iPhone portrait.
       Mobile lands at 24px, desktop at 48px. */
    padding-block: clamp(var(--s-5), 4vw, var(--s-7));
  }
  /* The CTA section's bottom is paid for by the footer's own padding-top. */
  main > .section:last-of-type {
    padding-bottom: clamp(var(--s-3), 1.5vw, var(--s-4));
  }
  /* Adjacent-section gap eliminator: where two .section siblings meet, the
     bottom one drops its top-padding entirely so the visible gap is just the
     previous section's bottom slab. */
  .section + .section {
    padding-top: 0;
  }

  /* CTA card — uses .glass .glass-strong with mobile-aware internal rhythm,
     replaces the previous inline `style="padding: --s-7 --s-6"` which couldn't
     respond to viewport. */
  .cta-card {
    padding-block: clamp(var(--s-5), 4vw, var(--s-6));
    /* Generous horizontal padding so the headline + paragraph breathe inside
       the card frame; was clamping at --s-5 (24px) which crowded the copy. */
    padding-inline: clamp(var(--s-6), 6vw, var(--s-8));
    text-align: center;
  }
  .cta-card-h {
    max-width: 26ch;
    margin-inline: auto;
  }
  .cta-card-p {
    max-width: 50ch;
    margin: var(--s-4) auto var(--s-5);
  }
  .cta-card-row {
    /* Base layout was previously scoped only under .landing-hero .cta-row, so
       the CTA card's own .cta-row had no flex at all — buttons fell to default
       inline flow with effectively 0px between them. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--s-3);
    max-width: 28rem;
    margin-inline: auto;
  }
  @media (min-width: 600px) {
    .cta-card-row {
      flex-direction: row;
      align-items: center;
      max-width: none;
      gap: var(--s-4);
    }
  }
  .section-header {
    text-align: left;
    margin-bottom: var(--s-6);
  }
  .section-header h2 {
    max-width: 22ch;
  }
  .section-header p {
    color: var(--text-muted);
    margin-top: var(--s-3);
    font-size: var(--fs-lead);
    max-width: 56ch;
  }

  /* ── callout (used inside policy pages) ─────────────────────────────── */
  .callout {
    background: var(--green-mist);
    border: 1px solid var(--green-haze);
    border-left: 3px solid var(--green-500);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md);
    margin: var(--s-5) 0;
    color: var(--text);
  }
  .callout p:last-child { margin-bottom: 0; }

  .last-reviewed {
    margin-top: var(--s-7);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-faint);
    font-family: var(--font-mono);
  }

  /* ── footer ─────────────────────────────────────────────────────────── */
  .site-footer {
    /* No margin-top — the section above pays its own gap, and the border-top
       + fluid padding-top below provides intentional separation. The earlier
       static 112px margin left mobile portrait gasping. */
    margin-top: 0;
    border-top: 1px solid var(--border);
    background: color-mix(in oklab, var(--bg-base) 92%, transparent);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    padding-block: clamp(var(--s-5), 4vw, var(--s-7)) clamp(var(--s-5), 3vw, var(--s-6));
    padding-inline: var(--s-5);
  }
  .site-footer-inner {
    max-width: var(--content-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-5);
    align-items: center;
  }
  .site-footer .footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }
  .site-footer .footer-brand .wordmark { font-size: 1rem; }
  .site-footer .footer-tagline {
    font-size: 0.85rem;
    color: var(--text-faint);
    font-family: var(--font-mono);
  }
  .site-footer nav {
    display: flex;
    gap: var(--s-5);
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .site-footer nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
  }
  .site-footer nav a:hover { color: var(--text); text-decoration: underline; }
  .site-footer .made-by {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-faint);
    text-align: center;
  }

  @media (max-width: 600px) {
    .site-footer-inner {
      grid-template-columns: 1fr;
      text-align: left;
    }
    .site-footer nav { justify-content: flex-start; }
  }

  /* ── prose / long-form policy pages ─────────────────────────────────── */
  .prose {
    color: var(--text);
  }
  .prose > * + * { margin-top: var(--s-4); }
  .prose h2 {
    margin-top: var(--s-7);
    margin-bottom: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
  }
  .prose h2:first-of-type { border-top: none; padding-top: 0; margin-top: var(--s-5); }
  .prose h3 { margin-top: var(--s-5); margin-bottom: var(--s-2); color: var(--green-600); }
  @media (prefers-color-scheme: dark) {
    .prose h3 { color: var(--green-400); }
  }
  .prose ul, .prose ol { margin-bottom: var(--s-4); }
  .prose ul li, .prose ol li { color: var(--text); }
  .prose strong { color: var(--text); }
  .prose em { color: var(--text-muted); font-style: italic; }

  /* faq item */
  .faq-q {
    font-size: var(--fs-h3);
    font-weight: 700;
    margin-top: var(--s-6);
    margin-bottom: var(--s-2);
    color: var(--text);
    letter-spacing: -0.01em;
  }

  /* page hero (smaller than landing hero) */
  .page-hero {
    padding: var(--s-8) 0 var(--s-5);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--s-7);
  }
  .page-hero h1 {
    font-size: clamp(1.8rem, 3.8vw + 0.4rem, 3rem);
    letter-spacing: -0.03em;
  }
  .page-hero p.lead { max-width: 56ch; margin-top: var(--s-3); }

  /* ── badges row at hero ─────────────────────────────────────────────── */
  .badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-5);
    align-items: center;
  }
}

/* ============================================================================
   LAYOUTS  —  page-scoped compositions
   ========================================================================= */
@layer layouts {

  /* Landing hero — two-column on desktop (copy + showcase), stacks on mobile */
  .landing-hero {
    /* Fluid hero rhythm — collapses gracefully from 112px → 56px without breakpoints */
    padding-block: clamp(var(--s-7), 7vw + var(--s-3), var(--s-9));
  }
  .landing-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--s-7);
    align-items: center;
  }
  .landing-hero h1 {
    margin-bottom: var(--s-4);
  }
  .landing-hero p.lead {
    max-width: 48ch;
    margin-bottom: var(--s-5);
  }
  .landing-hero .cta-row {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--s-2);
  }
  .landing-hero .requirements-row {
    margin-top: var(--s-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }
  @media (max-width: 880px) {
    .landing-hero-grid { grid-template-columns: 1fr; }
  }

  /* Code-style "ground truth" panel */
  .ground-truth {
    margin-top: clamp(var(--s-5), 3vw, var(--s-6));
    padding: var(--s-5) var(--s-6);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--surface) 70%, transparent);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-5);
    align-items: center;
  }
  .ground-truth-stat {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 800;
    color: var(--green-600);
    letter-spacing: -0.04em;
    line-height: 1;
  }
  @media (prefers-color-scheme: dark) {
    .ground-truth-stat { color: var(--green-400); }
  }
  .ground-truth p { margin-bottom: 0; color: var(--text-muted); }

  @media (max-width: 600px) {
    .ground-truth { grid-template-columns: 1fr; }
  }
}

/* ============================================================================
   MOTION & RESPONSIVE GUARDS
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .aurora::before,
  .aurora::after { animation: none !important; }
}

@media (max-width: 480px) {
  .site-header-inner { padding: var(--s-3) var(--s-4); }
  .container, .container-narrow, .container-wide { padding-inline: var(--s-4); }
  /* Hero, section, and footer rhythm are fluid via clamp() above — no overrides needed. */
}