/* ===== Brand fonts ===== */
  @font-face { font-family: 'Suisse Intl'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/SuisseIntl-Regular.woff2') format('woff2'), url('/assets/fonts/SuisseIntl-Regular.woff') format('woff'); }
  @font-face { font-family: 'Suisse Intl'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/assets/fonts/SuisseIntl-Medium.woff2') format('woff2'), url('/assets/fonts/SuisseIntl-Medium.woff') format('woff'); }
  @font-face { font-family: 'Suisse Intl'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('/assets/fonts/SuisseIntl-SemiBold.woff2') format('woff2'), url('/assets/fonts/SuisseIntl-SemiBold.woff') format('woff'); }
  @font-face { font-family: 'Suisse Intl'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/assets/fonts/SuisseIntl-Bold.woff2') format('woff2'), url('/assets/fonts/SuisseIntl-Bold.woff') format('woff'); }
  @font-face { font-family: 'Kalice'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/Kalice-Regular.woff2') format('woff2'), url('/assets/fonts/Kalice-Regular.woff') format('woff'); }
  @font-face { font-family: 'Kalice'; font-style: italic; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/Kalice-Italic.woff2') format('woff2'), url('/assets/fonts/Kalice-Italic.woff') format('woff'); }
  @font-face { font-family: 'Kalice'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/assets/fonts/Kalice-Medium.woff2') format('woff2'), url('/assets/fonts/Kalice-Medium.woff') format('woff'); }
  @font-face { font-family: 'Kalice'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/assets/fonts/Kalice-Bold.woff2') format('woff2'), url('/assets/fonts/Kalice-Bold.woff') format('woff'); }

  :root {
    --outer-space: #062A32;
    --tropical: #1D7B5C;
    --yellow-green: #C8E66B;
    --almond: #EBDAC9;
    --almond-soft: #F4E9DC;
    --offwhite: #F7F3EE;
    --periwinkle: #C9D4F0;
    --eggplant: #5B1A30;

    --paper: #F7F3EE;
    --ink: #062A32;
    --ink-2: #2D4A52;
    --ink-3: rgba(6, 42, 50, 0.55);
    --rule: rgba(6, 42, 50, 0.12);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Suisse Intl', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .serif { font-family: 'Kalice', 'Instrument Serif', serif; font-weight: 400; }
  .mono  { font-family: 'JetBrains Mono', monospace; }

  a { color: inherit; text-decoration: none; }

  /* ===== Layout primitives ===== */
  .container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
  .container-wide { max-width: 1440px; margin: 0 auto; padding: 0 48px; }

  /* ===== Eyebrow / kicker ===== */
  .eyebrow {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em;
    font-weight: 500; color: var(--ink-3);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .eyebrow::before {
    content: ""; width: 24px; height: 1px; background: var(--ink-3);
  }

  /* ===== Type scale ===== */
  h1, h2, h3, h4 { margin: 0; font-family: 'Kalice', serif; font-weight: 400; letter-spacing: -0.015em; }
  h1.display { font-size: 96px; line-height: 0.96; letter-spacing: -0.025em; }
  h2.section { font-size: 64px; line-height: 1.0; letter-spacing: -0.02em; }
  h3.feature { font-size: 36px; line-height: 1.1; letter-spacing: -0.015em; }
  h4.card    { font-size: 24px; line-height: 1.2; }

  em { font-style: italic; }

  p.lead { font-size: 22px; line-height: 1.45; color: var(--ink-2); margin: 0; max-width: 60ch; }
  p.body { font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 0; }

  /* ===== Buttons ===== */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 24px; border-radius: 100px;
    font-family: 'Suisse Intl', sans-serif; font-size: 15px; font-weight: 500;
    border: 1px solid transparent; cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--outer-space); color: var(--almond); }
  .btn-primary:hover { background: #0a3a44; }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn .arrow { transition: transform 0.2s ease; display: inline-block; }
  .btn:hover .arrow { transform: translateX(3px); }

  /* ===== Navigation ===== */
  .nav {
    position: sticky; top: 0; z-index: 110;
    background: rgba(247, 243, 238, 0.85);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--rule);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 48px; max-width: 1440px; margin: 0 auto;
  }
  .nav-logo { display: flex; align-items: center; gap: 10px; }
  .nav-logo img { height: 26px; }
  .nav-links { display: flex; align-items: center; gap: 32px; cursor: pointer; }
  .nav-links li { list-style: none; }
  .nav-links a {
    font-size: 14px; font-weight: 500; color: var(--ink-2);
    transition: color 0.15s ease; cursor: pointer;
    font-family: 'Suisse Intl', sans-serif;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-right { display: flex; align-items: center; gap: 18px; }
  .lang-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
    color: var(--ink-3); cursor: pointer; border: 0; background: transparent;
    padding: 6px 10px; border-radius: 100px;
  }
  .lang-toggle .active { color: var(--ink); }
  .lang-toggle .sep { opacity: 0.4; }

  /* Burger button — desktop hidden, only on mobile */
  .burger {
    display: none; flex-direction: column; justify-content: center;
    width: 38px; height: 38px; padding: 0;
    background: transparent; border: 1px solid var(--rule); border-radius: 100px;
    cursor: pointer; gap: 4px; align-items: center;
    transition: background 180ms ease, border-color 180ms ease;
  }
  .burger:hover { background: rgba(31,41,46,0.04); }
  .burger span {
    display: block; width: 16px; height: 1.5px; background: var(--ink);
    transition: transform 220ms ease, opacity 180ms ease;
  }
  .burger.is-open { background: var(--ink); border-color: var(--ink); }
  .burger.is-open span { background: var(--almond); }
  .burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .burger.is-open span:nth-child(2) { opacity: 0; }
  .burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* Menu overlay */
  .menu-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(31, 41, 46, 0);
    pointer-events: none;
    transition: background 280ms ease;
  }
  .menu-overlay.is-open {
    background: rgba(31, 41, 46, 0.55);
    pointer-events: auto;
    backdrop-filter: blur(4px);
  }
  .menu-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(560px, 100%);
    background: var(--almond);
    transform: translateX(100%);
    transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
  }
  .menu-overlay.is-open .menu-panel { transform: translateX(0) !important; }
  .menu-inner {
    padding: 110px 56px 56px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  }
  .menu-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-muted); margin-bottom: 20px;
    padding-bottom: 12px; border-bottom: 1px solid var(--rule);
  }
  .menu-list { list-style: none; padding: 0; margin: 0; }
  .menu-list li { margin-bottom: 4px; }
  .menu-list a {
    display: block; padding: 8px 0;
    font-family: 'Kalice', serif; font-size: 26px; font-weight: 400;
    color: var(--ink); cursor: pointer;
    transition: color 160ms ease, transform 160ms ease;
  }
  .menu-list a:hover { color: var(--accent); transform: translateX(4px); }
  .menu-list.small a { font-family: 'Suisse Intl', sans-serif; font-size: 15px; padding: 6px 0; }

  @media (max-width: 720px) {
    .menu-panel { width: 100%; }
    .menu-inner { grid-template-columns: 1fr; gap: 36px; padding: 96px 28px 48px; }
    .menu-list a { font-size: 22px; }
  }

  /* ===== Hero ===== */
  .hero {
    padding: 56px 0 96px;
    position: relative;
    overflow: hidden;
  }
  .hero .container-wide { padding: 0 64px; }
  .hero-meta {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 24px;
  }
  .hero h1 .accent { font-style: italic; color: var(--tropical); }
  .hero-lede { margin-top: 36px; max-width: 56ch; }
  .hero-cta {
    margin-top: 48px;
    display: flex; gap: 14px; flex-wrap: wrap;
  }

  /* Editorial hero — magazine cover treatment */
  .hero-editorial {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 1fr);
    gap: 88px;
    align-items: end;
    margin-top: 8px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--rule);
  }
  .hero-editorial .left {
    display: flex; flex-direction: column;
    min-height: 580px;
    min-width: 0;
  }
  .hero-wordmark {
    font-family: 'Kalice', serif;
    font-weight: 400;
    font-size: clamp(120px, 14vw, 220px);
    line-height: 0.82;
    letter-spacing: -0.04em;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.8vw, 14px);
    user-select: none;
    white-space: nowrap;
  }
  .hero-wordmark .slash {
    font-style: italic;
    color: var(--tropical);
    font-size: 0.85em;
    line-height: 1;
    transform: translateY(-0.04em);
  }
  .hero.var-dark .hero-wordmark { color: var(--almond); }
  .hero.var-dark .hero-wordmark .slash { color: var(--yellow-green); }
  .hero.var-periwinkle .hero-wordmark .slash { color: var(--eggplant); }

  .hero-mark-stage {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--ink);
    margin: 8px 0 4px;
    min-height: 320px;
  }
  .hero.var-dark .hero-mark-stage { color: var(--almond); }
  .hero.var-periwinkle .hero-mark-stage { color: var(--ink); }
  .hero-mark-stage svg { display: block; }

  .hero-tagline {
    font-family: 'Kalice', serif;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 32px 0 0;
    max-width: 22ch;
  }
  .hero-tagline em { color: var(--tropical); font-style: italic; }
  .hero.var-dark .hero-tagline em { color: var(--yellow-green); }
  .hero.var-periwinkle .hero-tagline em { color: var(--eggplant); }

  .hero-manifest {
    margin-top: auto;
    padding-top: 48px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .hero-manifest p {
    font-family: 'Kalice', serif;
    font-size: 22px; line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink-2);
  }
  .hero-manifest p:last-child {
    color: var(--ink);
    font-style: italic;
  }
  .hero.var-dark .hero-manifest p { color: rgba(235,218,201,0.65); }
  .hero.var-dark .hero-manifest p:last-child { color: var(--almond); }
  .hero.var-periwinkle .hero-manifest p { color: rgba(91,26,48,0.7); }
  .hero.var-periwinkle .hero-manifest p:last-child { color: var(--eggplant); }

  /* Biomarker roll — live data ticker at the bottom of the hero left column */
  .biomarker-roll {
    margin-top: auto;
    padding-top: 56px;
    opacity: 0;
    transition: opacity 700ms ease;
  }
  .biomarker-roll.is-active { opacity: 1; }
  .biomarker-roll-eyebrow {
    display: flex; align-items: center; gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 16px;
  }
  .biomarker-roll-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--tropical);
    animation: pulse-dot 2.4s ease-in-out infinite;
  }
  @keyframes pulse-dot {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.25); }
  }
  .biomarker-roll-window {
    position: relative; overflow: hidden;
    /* soft fade at top + bottom so values appear/disappear smoothly */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  }
  .biomarker-roll-track {
    will-change: transform;
    transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
  }
  .biomarker-row {
    height: 28px;
    display: flex; align-items: baseline; gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--ink-2);
  }
  .biomarker-row .bm-label {
    flex: 0 0 auto;
    letter-spacing: 0.02em;
    color: var(--ink);
  }
  .biomarker-row .bm-dots {
    flex: 1 1 auto;
    border-bottom: 1px dotted rgba(6, 42, 50, 0.18);
    transform: translateY(-3px);
  }
  .biomarker-row .bm-value {
    flex: 0 0 auto;
    font-feature-settings: "tnum" 1;
    color: var(--ink);
  }
  .biomarker-row .bm-unit {
    color: var(--ink-3);
    font-size: 11px;
    margin-left: 2px;
  }

  /* Dark hero variant */
  .hero.var-dark .biomarker-roll-eyebrow { color: rgba(235,218,201,0.55); }
  .hero.var-dark .biomarker-roll-eyebrow .dot { background: var(--yellow-green); }
  .hero.var-dark .biomarker-row { color: rgba(235,218,201,0.7); }
  .hero.var-dark .biomarker-row .bm-label,
  .hero.var-dark .biomarker-row .bm-value { color: var(--almond); }
  .hero.var-dark .biomarker-row .bm-dots { border-bottom-color: rgba(235,218,201,0.18); }
  .hero.var-dark .biomarker-row .bm-unit { color: rgba(235,218,201,0.5); }

  /* Periwinkle hero variant */
  .hero.var-periwinkle .biomarker-roll-eyebrow { color: rgba(91,26,48,0.6); }
  .hero.var-periwinkle .biomarker-roll-eyebrow .dot { background: var(--eggplant); }
  .hero.var-periwinkle .biomarker-row .bm-dots { border-bottom-color: rgba(91,26,48,0.2); }
  .hero-issue {
    display: flex; align-items: center; gap: 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .hero-issue .dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--tropical);
  }
  .hero.var-dark .hero-issue { color: rgba(235,218,201,0.55); }
  .hero.var-dark .hero-issue .dot { background: var(--yellow-green); }
  .hero.var-periwinkle .hero-issue { color: rgba(91,26,48,0.6); }
  .hero.var-periwinkle .hero-issue .dot { background: var(--eggplant); }

  .hero-editorial .right {
    align-self: end;
    display: flex; flex-direction: column;
    gap: 24px;
  }
  .hero-shot-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--rule);
    background: #fff;
    box-shadow: 0 30px 80px -50px rgba(6,42,50,0.3), 0 8px 20px -8px rgba(6,42,50,0.06);
  }
  .hero.var-dark .hero-shot-card { border-color: rgba(235,218,201,0.18); }
  .hero-shot-card img { display: block; width: 100%; height: auto; }

  .hero-lede-block {
    padding-top: 24px;
    border-top: 1px solid var(--rule);
  }
  .hero.var-dark .hero-lede-block { border-color: rgba(235,218,201,0.18); }
  .hero-lede-block .label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 14px;
  }
  .hero.var-dark .hero-lede-block .label { color: rgba(235,218,201,0.5); }
  .hero-lede-block p {
    font-size: 17px; line-height: 1.55;
    color: var(--ink-2);
    margin: 0; max-width: 50ch;
  }
  .hero.var-dark .hero-lede-block p { color: rgba(235,218,201,0.78); }
  .hero-lede-block .cta-row {
    margin-top: 28px;
    display: flex; gap: 12px; flex-wrap: wrap;
  }

  /* Old shot caption (kept for compatibility, hidden in editorial layout) */
  .hero-shot { display: none; }
  .hero-shot-caption { display: none; }

  /* ===== Trust badges row ===== */
  .trust {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 24px 0;
    background: var(--almond-soft);
  }
  .trust-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px; flex-wrap: wrap;
  }
  .trust-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 500; color: var(--ink-2);
  }
  .trust-item .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--tropical);
  }

  /* ===== Section base ===== */
  section.block { padding: 140px 0; }
  section.block.tight { padding: 96px 0; }

  /* light-on-dark theming, used by .dark, .eggplant and .tropical */
  section.block.dark,
  section.block.eggplant,
  section.block.tropical {
    color: var(--almond);
  }
  section.block.dark { background: var(--outer-space); }
  section.block.eggplant { background: var(--eggplant); }
  section.block.tropical { background: var(--tropical); }
  section.block.dark .eyebrow,
  section.block.eggplant .eyebrow,
  section.block.tropical .eyebrow { color: rgba(235, 218, 201, 0.55); }
  section.block.dark .eyebrow::before,
  section.block.eggplant .eyebrow::before,
  section.block.tropical .eyebrow::before { background: rgba(235, 218, 201, 0.3); }
  section.block.dark p.lead, section.block.dark p.body,
  section.block.eggplant p.lead, section.block.eggplant p.body,
  section.block.tropical p.lead, section.block.tropical p.body { color: rgba(235, 218, 201, 0.82); }
  section.block.dark h2,
  section.block.eggplant h2,
  section.block.tropical h2 { color: var(--almond); }
  section.block.dark h2 em { color: var(--yellow-green); }
  section.block.eggplant h2 em { color: var(--periwinkle); }
  section.block.tropical h2 em { color: var(--yellow-green); }

  section.block.almond { background: var(--almond-soft); }
  section.block.almond-deep { background: var(--almond); }
  section.block.periwinkle { background: var(--periwinkle); }
  section.block.periwinkle h2 em { color: var(--eggplant); }

  /* ===== Two-perspective intro ===== */
  .perspective {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    align-items: start; margin-top: 80px;
  }
  .perspective-card {
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 36px;
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .perspective-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px -30px rgba(6,42,50,0.2);
  }
  .perspective-card .label {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--tropical); font-weight: 500; margin-bottom: 24px;
  }
  .perspective-card h3 {
    margin-bottom: 20px;
    font-size: 30px;
    line-height: 1.1;
    text-wrap: balance;
  }
  .perspective-card ul {
    list-style: none; padding: 0; margin: 28px 0;
    display: grid; gap: 12px;
  }
  .perspective-card li {
    font-size: 15px; color: var(--ink-2);
    padding-left: 20px; position: relative;
  }
  .perspective-card li::before {
    content: "·"; position: absolute; left: 6px; top: -2px;
    color: var(--tropical); font-size: 22px; line-height: 1;
  }

  /* ===== Feature row (split: text + screenshot) ===== */
  .feature {
    display: grid; grid-template-columns: 6fr 5fr; gap: 72px;
    align-items: center;
  }
  .feature.reverse { grid-template-columns: 5fr 6fr; }
  .feature.reverse .feature-text { order: 2; }
  .feature.reverse .feature-shot { order: 1; }

  .feature-text .eyebrow { margin-bottom: 24px; }
  .feature-text h3 { margin-bottom: 28px; }
  .feature-text ul {
    list-style: none; padding: 0; margin: 32px 0 36px;
    display: grid; gap: 14px;
  }
  .feature-text li {
    font-size: 15px; color: var(--ink-2);
    display: flex; align-items: flex-start; gap: 12px;
  }
  .feature-text li::before {
    content: ""; flex: 0 0 auto;
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--tropical);
    background: radial-gradient(circle, var(--tropical) 0 4px, transparent 5px);
    margin-top: 1px;
  }
  .feature-shot {
    border-radius: 12px; overflow: hidden;
    border: 1px solid var(--rule);
    background: #fff;
    box-shadow: 0 20px 60px -40px rgba(6,42,50,0.25);
  }
  .feature-shot img { display: block; width: 100%; height: auto; }

  /* feature stack adds extra spacing between rows */
  .feature-stack { display: grid; gap: 140px; margin-top: 96px; }

  /* ===== Stats strip ===== */
  .stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    margin-top: 80px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .stat {
    padding: 36px 28px;
    border-right: 1px solid var(--rule);
  }
  .stat:last-child { border-right: 0; }
  .stat .num {
    font-family: 'Kalice', serif;
    font-size: 64px; line-height: 1; letter-spacing: -0.02em;
    color: var(--ink); margin-bottom: 16px;
  }
  .stat .num em { font-style: italic; color: var(--tropical); }
  .stat .lbl {
    font-size: 14px; font-weight: 500;
    margin-bottom: 6px;
  }
  .stat .desc {
    font-size: 13px; color: var(--ink-3); line-height: 1.4;
  }

  /* ===== Workflow / step list ===== */
  .workflow {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 48px; margin-top: 80px;
    counter-reset: step;
  }
  .step { position: relative; }
  .step .num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; letter-spacing: 0.1em;
    color: var(--tropical); font-weight: 500;
    margin-bottom: 28px;
    padding-bottom: 12px; border-bottom: 1px solid var(--rule);
  }
  .step h4 {
    font-family: 'Kalice', serif; font-size: 28px; line-height: 1.2;
    margin-bottom: 16px;
  }
  .step p { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

  /* ===== Science pillars (3-up) ===== */
  .pillars {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 48px; margin-top: 80px;
  }
  .pillar { padding-top: 28px; border-top: 1px solid var(--rule); }
  .pillar .glyph {
    font-family: 'Kalice', serif; font-style: italic;
    font-size: 48px; line-height: 1; color: var(--tropical);
    margin-bottom: 32px; display: block;
  }
  .pillar h4 {
    font-family: 'Kalice', serif; font-size: 28px; margin-bottom: 16px;
  }
  .pillar p { font-size: 14px; color: var(--ink-2); }

  /* ===== Promise pillars (4-up) ===== */
  .promise-pillars { grid-template-columns: repeat(4, 1fr); gap: 40px; }
  .promise-pillars .pillar .glyph {
    font-family: 'Kalice', serif; font-style: normal;
    font-size: 36px; letter-spacing: 0.02em;
    color: var(--tropical);
  }

  /* ===== Tests grid ===== */
  .tests-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 24px; margin-top: 80px;
    align-items: stretch;
  }
  .test-card {
    padding: 32px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: #fff;
    display: flex; flex-direction: column;
    min-height: 320px;
    height: 100%;
  }
  .test-card .label {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--tropical); font-weight: 500; margin-bottom: 32px;
  }
  .test-card h4 {
    font-family: 'Kalice', serif; font-size: 26px; line-height: 1.15;
    margin-bottom: 16px;
  }
  .test-card p { font-size: 14px; color: var(--ink-2); flex: 1; }
  .test-card .examples {
    margin-top: 24px; padding-top: 24px;
    border-top: 1px solid var(--rule);
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    color: var(--ink-3); letter-spacing: 0.02em;
  }
  .test-card .status {
    margin-top: 10px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: rgba(6, 42, 50, 0.35); letter-spacing: 0.02em;
    font-style: italic;
  }

  /* ===== Testimonials ===== */
  .testimonials {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 32px; margin-top: 80px;
  }
  .quote {
    padding: 36px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--paper);
    display: flex; flex-direction: column;
  }
  .quote .role {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--tropical); font-weight: 500; margin-bottom: 24px;
  }
  .quote .text {
    font-family: 'Kalice', serif; font-size: 22px; line-height: 1.35;
    margin-bottom: 32px; flex: 1; letter-spacing: -0.005em;
  }
  .quote .author {
    display: flex; align-items: center; gap: 14px;
    padding-top: 24px; border-top: 1px solid var(--rule);
  }
  .quote .avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--almond);
    display: grid; place-items: center;
    font-family: 'Suisse Intl', sans-serif; font-weight: 500; font-size: 13px;
    color: var(--ink);
  }
  .quote .meta { font-size: 13px; }
  .quote .meta .name { font-weight: 500; }
  .quote .meta .where { color: var(--ink-3); font-size: 12px; }

  /* ===== Team grid ===== */
  .team-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 28px; margin-top: 80px;
  }
  .team-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .team-photo {
    aspect-ratio: 4/5;
    background: var(--almond);
    overflow: hidden; position: relative;
  }
  .team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(20%); }
  .team-info { padding: 24px 28px 28px; }
  .team-info .role {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--tropical); font-weight: 500; margin-bottom: 10px;
  }
  .team-info h4 {
    font-family: 'Kalice', serif; font-size: 26px; line-height: 1.15;
    margin-bottom: 14px;
  }
  .team-info p { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
  .team-info .email {
    margin-top: 18px; font-family: 'JetBrains Mono', monospace; font-size: 12px;
    color: var(--ink-3);
  }

  /* ===== Advisor list (Beirat) ===== */
  .advisor-list {
    margin-top: 56px;
    display: flex; flex-direction: column;
    gap: 16px; align-items: center;
  }
  .advisor-card {
    display: flex; align-items: center; gap: 20px;
    width: 100%; max-width: 560px;
    text-align: left;
    padding: 18px 22px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--paper);
  }
  .advisor-photo {
    width: 64px; height: 64px;
    border-radius: 50%;
    overflow: hidden; flex-shrink: 0;
    background: var(--almond);
  }
  .advisor-photo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    filter: grayscale(20%);
  }
  .advisor-info h4 {
    font-family: 'Kalice', serif; font-size: 18px;
    line-height: 1.2; margin-bottom: 6px;
  }
  .advisor-info p {
    font-size: 13px; color: var(--ink-2);
    line-height: 1.5;
  }

  /* ===== CTA ===== */
  .cta-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
    margin-top: 64px;
  }
  .cta-card {
    padding: 48px;
    border: 1px solid rgba(235,218,201,0.18);
    border-radius: 14px;
    background: rgba(235,218,201,0.04);
  }
  .cta-card h4 {
    font-family: 'Kalice', serif; font-size: 32px; line-height: 1.1;
    margin-bottom: 16px;
  }
  .cta-card p {
    font-size: 15px; color: rgba(235,218,201,0.7); margin: 0 0 28px;
  }
  .cta-card .btn-primary {
    background: var(--almond); color: var(--outer-space);
  }
  .cta-card .btn-primary:hover { background: #fff; }

  /* ===== Footer ===== */
  footer {
    background: var(--outer-space); color: var(--almond);
    padding: 96px 0 48px;
  }
  .foot-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 64px;
    padding-bottom: 64px;
    border-bottom: 1px solid rgba(235,218,201,0.15);
  }
  .foot-brand img { height: 26px; margin-bottom: 24px; }
  .foot-brand p { font-size: 14px; color: rgba(235,218,201,0.65); max-width: 36ch; line-height: 1.55; }
  .foot-brand .email { margin-top: 24px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--almond); }
  .foot-col h5 {
    font-family: 'Suisse Intl', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em;
    font-weight: 500; color: rgba(235,218,201,0.5); margin: 0 0 20px;
  }
  .foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
  .foot-col a { font-size: 14px; color: rgba(235,218,201,0.85); }
  .foot-col a:hover { color: var(--almond); }
  .foot-base {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 32px;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    color: rgba(235,218,201,0.45);
  }

  /* ===== Subpage hero ===== */
  .sub-hero {
    padding: 80px 0 60px;
    border-bottom: 1px solid var(--rule);
  }
  .sub-hero h1 {
    font-family: 'Kalice', serif; font-size: 80px; line-height: 0.96;
    letter-spacing: -0.02em; margin: 24px 0 0;
  }
  .sub-hero h1 em { color: var(--tropical); }
  .sub-hero p { margin-top: 24px; font-size: 20px; color: var(--ink-2); max-width: 60ch; }

  /* ===== Editorial Index navigation (left rail) ===== */
  .index-nav {
    position: fixed;
    top: 50%; left: 24px;
    transform: translateY(-50%);
    z-index: 55;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 16px 14px;
    background: rgba(247, 243, 238, 0.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--rule);
    border-radius: 10px;
    max-width: 220px;
    font-family: 'JetBrains Mono', monospace;
  }
  @media (min-width: 1280px) {
    .index-nav { display: flex; }
  }
  .index-nav .header {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 4px 8px 10px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 6px;
  }
  .index-nav a {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 7px 8px;
    font-size: 11px;
    color: var(--ink-3);
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.35;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .index-nav a .num {
    font-size: 10px;
    color: var(--ink-3);
    opacity: 0.65;
    letter-spacing: 0.04em;
  }
  .index-nav a .label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
  }
  .index-nav a:hover { color: var(--ink); background: rgba(6,42,50,0.04); }
  .index-nav a.active { color: var(--ink); background: rgba(6,42,50,0.06); }
  .index-nav a.active .num { color: var(--tropical); opacity: 1; }
  .index-nav a.active .label { color: var(--ink); }
  .index-nav .progress {
    margin: 10px 8px 4px;
    height: 2px;
    background: var(--rule);
    border-radius: 999px;
    overflow: hidden;
  }
  .index-nav .progress-bar {
    height: 100%;
    background: var(--tropical);
    transform-origin: left;
    transition: transform 0.1s linear;
  }

  /* ===== Photo counterpoint section ===== */
  section.block.photos { padding: 0; background: var(--ink); color: var(--almond); }
  .photo-grid {
    display: grid;
    grid-template-columns: 4fr 5fr 3fr;
    grid-template-rows: 380px 380px;
    gap: 0;
  }
  .photo {
    position: relative;
    overflow: hidden;
    background: #1a3036;
    border: 0.5px solid rgba(235,218,201,0.06);
  }
  .photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.92) saturate(0.85);
    transition: transform 1.2s ease;
  }
  .photo:hover img { transform: scale(1.04); }
  .photo .caption {
    position: absolute;
    bottom: 24px; left: 24px;
    right: 24px;
    color: var(--almond);
    z-index: 2;
  }
  .photo .caption .label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(235,218,201,0.65);
    margin-bottom: 8px;
  }
  .photo .caption .text {
    font-family: 'Kalice', serif;
    font-size: 22px; line-height: 1.2;
    letter-spacing: -0.01em;
    max-width: 22ch;
  }
  .photo::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(6,42,50,0.85) 100%);
    pointer-events: none;
  }
  /* Quote photo cell */
  .photo.is-quote {
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
    padding: 48px 36px;
  }
  .photo.is-quote::after { display: none; }
  .photo.is-quote .quote-block {
    color: var(--almond);
    font-family: 'Kalice', serif;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    max-width: 24ch;
  }
  .photo.is-quote .quote-block em { color: var(--yellow-green); font-style: italic; }
  .photo.is-quote .attribution {
    margin-top: 28px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(235,218,201,0.55);
  }

  /* Span helpers */
  .photo.span-2col { grid-column: span 2; }
  .photo.span-2row { grid-row: span 2; }

  @media (max-width: 1080px) {
    .photo-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 280px 280px 280px;
    }
    .photo.span-2col { grid-column: span 2; }
    .photo.span-2row { grid-row: span 1; }

    /* ===== Tablet: collapse 3+ col grids ===== */
    .container, .container-wide { padding-left: 32px; padding-right: 32px; }
    .hero .container-wide { padding-left: 32px; padding-right: 32px; }
    .hero { padding: 32px 0 64px; }
    .hero-editorial {
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: stretch;
    }
    .hero-editorial .left { min-height: auto; }
    .hero-tagline { font-size: 30px; }
    .hero-mark-stage { min-height: auto; }
    .hero-mark-stage svg { width: 280px !important; height: 280px !important; }

    .display { font-size: 64px; }
    h2.section { font-size: 48px; }
    h3.feature { font-size: 32px; }

    .block { padding: 96px 0; }
    .block.tight { padding: 72px 0; }

    .perspective { grid-template-columns: 1fr; gap: 32px; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .pillars { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .workflow { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .tests-grid, .testimonials, .team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .cta-grid { grid-template-columns: 1fr; gap: 20px; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .feature { grid-template-columns: 1fr; gap: 40px; }
    .feature.reverse .feature-shot { order: 0; }
  }

  @media (max-width: 768px) {
    /* ===== Phone ===== */
    .container, .container-wide,
    .hero .container-wide { padding-left: 20px; padding-right: 20px; }

    /* Nav: condense — keep logo + lang + CTA + burger */
    .nav { padding: 12px 0; }
    .nav-inner { gap: 10px; padding: 0 20px; }
    .nav-right { gap: 10px; }
    .nav-links { display: none; }
    .burger { display: inline-flex; }
    /* On mobile: compact pill with short label, not just an icon */
    .nav-cta {
      padding: 9px 14px !important;
      height: auto;
      width: auto;
      border-radius: 999px !important;
      font-size: 12px !important;
      letter-spacing: 0.04em;
      gap: 6px !important;
      white-space: nowrap;
    }
    .nav-cta-label { display: inline; }
    .nav-cta .arrow { font-size: 14px; line-height: 1; }
    .lang-toggle { font-size: 11px; }

    .hero { padding: 24px 0 48px; }
    .hero-mark-stage svg { width: 220px !important; height: 220px !important; }
    .hero-tagline { font-size: 24px; max-width: 18ch; }
    .hero-shot-card { border-radius: 8px; }
    .hero-lede-block .label { font-size: 10px; }
    .hero-lede-block p { font-size: 15px; }

    .display { font-size: 44px; line-height: 0.98; }
    h2.section { font-size: 36px; max-width: 100% !important; }
    h3.feature { font-size: 26px; }
    p.lead { font-size: 17px; }
    .eyebrow { font-size: 11px; }

    .block { padding: 64px 0; }
    .block.tight { padding: 48px 0; }

    /* All multi-col grids stack */
    .perspective { grid-template-columns: 1fr; gap: 20px; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .pillars { grid-template-columns: 1fr; gap: 20px; }
    .workflow { grid-template-columns: 1fr; gap: 20px; }
    .tests-grid { grid-template-columns: 1fr; gap: 16px; }
    .testimonials { grid-template-columns: 1fr; gap: 16px; }
    .team-grid { grid-template-columns: 1fr; gap: 20px; }
    .feature { grid-template-columns: 1fr !important; gap: 32px; }
    .feature.reverse .feature-shot,
    .feature.reverse .feature-text { order: initial; }
    .feature-shot { width: 100%; }
    .feature-shot img { width: 100%; height: auto; display: block; }
    .feature-text h3 { font-size: 28px; line-height: 1.1; }
    .feature-text p { font-size: 16px; line-height: 1.55; }
    .feature-text li { font-size: 15px; }

    .foot-grid {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    footer { padding: 64px 0 32px; }

    /* Photo counterpoint — single column */
    .photo-grid {
      grid-template-columns: 1fr;
      grid-template-rows: 240px 240px 240px 240px;
    }
    .photo.span-2col, .photo.span-2row { grid-column: span 1; grid-row: span 1; }
    .photo .caption .text { font-size: 18px; }
    .photo.is-quote .quote-block { font-size: 22px; }

    /* Trust bar */
    .trust-bar { gap: 16px; flex-wrap: wrap; padding: 24px 0; }
    .trust-bar > div { font-size: 11px; }
  }



  /* ===== Page switcher (left rail) ===== */
  .pageswitch {
    position: fixed; top: 50%; right: 24px; transform: translateY(-50%);
    z-index: 60;
    background: rgba(6,42,50,0.92);
    color: var(--almond);
    border-radius: 12px;
    padding: 14px 12px;
    display: flex; flex-direction: column; gap: 4px;
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 40px -16px rgba(6,42,50,0.4);
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
  }
  .pageswitch button {
    background: transparent; border: 0; color: rgba(235,218,201,0.6);
    padding: 8px 12px; border-radius: 6px;
    cursor: pointer; text-align: left;
    font-family: inherit; font-size: inherit;
    letter-spacing: 0.08em; text-transform: uppercase;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .pageswitch button:hover { color: var(--almond); }
  .pageswitch button.active { background: rgba(235,218,201,0.12); color: var(--yellow-green); }
  .pageswitch .label {
    font-size: 9px; letter-spacing: 0.16em; opacity: 0.5;
    padding: 4px 12px 6px; text-transform: uppercase;
  }

  /* ===== Mobile preview frame ===== */
  .mobile-preview {
    width: 390px; margin: 0 auto;
    border: 14px solid var(--ink);
    border-radius: 48px;
    overflow: hidden; background: var(--paper);
    box-shadow: 0 40px 100px -50px rgba(6,42,50,0.4);
  }
  .mobile-preview iframe { width: 390px; height: 800px; border: 0; display: block; }

  /* ===== Misc ===== */
  .ruletop { border-top: 1px solid var(--rule); }
  .max-prose { max-width: 70ch; }
  .text-mono { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.02em; color: var(--ink-3); }

  /* ===== Accent rotations (stats, pillars, tests, quotes) ===== */
  .stat:nth-child(1) .num em { color: var(--tropical); }
  .stat:nth-child(2) .num em { color: var(--yellow-green-dark, #6e8a2a); }
  .stat:nth-child(3) .num em { color: var(--eggplant); }
  .stat:nth-child(4) .num em { color: var(--periwinkle-dark, #4a6bd1); }
  /* yellow-green is too light on white — define a darker readable variant */
  :root { --yellow-green-dark: #7a9926; --periwinkle-dark: #4a6bd1; }

  .pillar:nth-child(1) .glyph { color: var(--tropical); }
  .pillar:nth-child(2) .glyph { color: var(--eggplant); }
  .pillar:nth-child(3) .glyph { color: var(--yellow-green-dark); }

  .test-card:nth-child(1) { border-top: 4px solid var(--tropical); }
  .test-card:nth-child(2) { border-top: 4px solid var(--yellow-green-dark); }
  .test-card:nth-child(3) { border-top: 4px solid var(--eggplant); }
  .test-card:nth-child(4) { border-top: 4px solid var(--periwinkle); }
  .test-card:nth-child(1) .label { color: var(--tropical); }
  .test-card:nth-child(2) .label { color: var(--yellow-green-dark); }
  .test-card:nth-child(3) .label { color: var(--eggplant); }
  .test-card:nth-child(4) .label { color: var(--periwinkle-dark); }

  /* Quote backgrounds alternate — works inside any section */
  .quote:nth-child(3n+1) { background: var(--paper); }
  .quote:nth-child(3n+2) { background: var(--almond-soft); }
  .quote:nth-child(3n+3) { background: var(--periwinkle); }
  .quote:nth-child(3n+3) .role { color: var(--eggplant); }
  .quote:nth-child(3n+3) .avatar { background: rgba(255,255,255,0.6); }

  /* Eggplant section — concierge — needs adjusted feature shot framing */
  section.block.eggplant .feature-shot { border-color: rgba(235,218,201,0.18); }
  section.block.eggplant .feature-text li { color: rgba(235, 218, 201, 0.85); }
  section.block.eggplant .feature-text li::before { border-color: var(--yellow-green); background: radial-gradient(circle, var(--yellow-green) 0 4px, transparent 5px); }

  /* Tropical section — concierge alt background */
  section.block.tropical .feature-shot { border-color: rgba(235,218,201,0.20); }
  section.block.tropical .feature-text li { color: rgba(235, 218, 201, 0.88); }
  section.block.tropical .feature-text li::before { border-color: var(--yellow-green); background: radial-gradient(circle, var(--yellow-green) 0 4px, transparent 5px); }

  /* Periwinkle section bullets */
  section.block.periwinkle .perspective-card { background: var(--paper); }
  section.block.periwinkle .perspective-card .label { color: var(--eggplant); }
  section.block.periwinkle .perspective-card li::before { color: var(--eggplant); }

  /* Two-card color separation */
  section.block.periwinkle .perspective-card.card-pro {
    background: #1F292E; color: var(--almond);
    border-color: rgba(247,243,238,0.12);
  }
  section.block.periwinkle .perspective-card.card-pro h3 { color: var(--almond); }
  section.block.periwinkle .perspective-card.card-pro p { color: rgba(247,243,238,0.78); }
  section.block.periwinkle .perspective-card.card-pro li { color: rgba(247,243,238,0.85); }
  section.block.periwinkle .perspective-card.card-pro .label { color: #C9D946; }
  section.block.periwinkle .perspective-card.card-pro li::before { color: #C9D946; }

  section.block.periwinkle .perspective-card.card-concierge {
    background: var(--eggplant); color: var(--almond);
    border-color: rgba(247,243,238,0.12);
  }
  section.block.periwinkle .perspective-card.card-concierge h3 { color: var(--almond); }
  section.block.periwinkle .perspective-card.card-concierge p { color: rgba(247,243,238,0.78); }
  section.block.periwinkle .perspective-card.card-concierge li { color: rgba(247,243,238,0.85); }
  section.block.periwinkle .perspective-card.card-concierge .label { color: var(--periwinkle); }
  section.block.periwinkle .perspective-card.card-concierge li::before { color: var(--periwinkle); }

  /* Hero variant — outer-space */
  .hero.var-dark { background: var(--outer-space); color: var(--almond); }
  .hero.var-dark h1 { color: var(--almond); }
  .hero.var-dark h1 .accent { color: var(--yellow-green); }
  .hero.var-dark .eyebrow { color: rgba(235, 218, 201, 0.55); }
  .hero.var-dark .eyebrow::before { background: rgba(235, 218, 201, 0.3); }
  .hero.var-dark .hero-lede { color: rgba(235, 218, 201, 0.75); }
  .hero.var-dark .btn-primary { background: var(--almond); color: var(--outer-space); }
  .hero.var-dark .btn-primary:hover { background: #fff; }
  .hero.var-dark .btn-ghost { color: var(--almond); border-color: rgba(235, 218, 201, 0.25); }
  .hero.var-dark .btn-ghost:hover { border-color: var(--almond); }
  .hero.var-dark .hero-shot-caption { background: rgba(6,42,50,0.85); color: var(--almond); border-color: rgba(235,218,201,0.2); }

  /* Hero variant — periwinkle */
  .hero.var-periwinkle { background: var(--periwinkle); }
  .hero.var-periwinkle h1 .accent { color: var(--eggplant); }
  .hero.var-periwinkle .eyebrow { color: rgba(91, 26, 48, 0.6); }
  .hero.var-periwinkle .eyebrow::before { background: rgba(91, 26, 48, 0.4); }

  /* ===== Legal page ===== */
  .legal-content { padding: 64px 0 120px; }
  .legal-content h2 { font-family: 'Kalice', serif; font-size: 32px; margin: 48px 0 16px; letter-spacing: -0.01em; }
  .legal-content h3 { font-family: 'Kalice', serif; font-size: 22px; margin: 32px 0 12px; }
  .legal-content p { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0 0 16px; max-width: 70ch; }
  .legal-content ul { font-size: 16px; line-height: 1.65; color: var(--ink-2); padding-left: 22px; margin: 0 0 16px; }
  .legal-content .meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }