/* ============================================================
   OrbitsWell homepage v2 — compiled from the Claude Design export.
   Mobile-first (min-width breakpoints). Zero !important. Every
   color is a custom property — no raw hex in this file.
   Colour tokens live in the shared assets/css/tokens.css, loaded ahead
   of this file so the homepage and every sub-page share one palette.
   ============================================================ */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--brass);
  text-decoration: none;
}
a:hover { color: var(--brass-light); }

::selection {
  background: rgb(from var(--brass) r g b / 0.28);
  color: var(--white);
}

img { max-width: 100%; display: block; }

/* ---------- Accessibility ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Controls with their own pill/rounded shape get a matching offset ring instead of a boxy one */
.btn:focus-visible,
.chip:focus-visible,
.app-card:focus-visible,
.blog-card:focus-visible {
  outline-offset: 4px;
}

.skip-link {
  position: absolute; left: 14px; top: -60px; z-index: 200;
  background: var(--panel-solid); color: var(--ink);
  padding: 10px 16px; border-radius: 10px;
  border: 1px solid var(--line-strong);
  transition: top 0.2s;
}
.skip-link:focus-visible { top: 14px; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: 24px;
}

section { position: relative; }
.section-pad { padding-block: clamp(56px, 8vw, 110px); }
.section-border-top { border-top: 1px solid var(--line); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--periwinkle);
}
.eyebrow--sage { color: var(--sage); }
.eyebrow--brass { color: var(--brass); }

.eyebrow-dot {
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--periwinkle);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
h1 { font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.03; margin-bottom: 22px; }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.04rem; margin-bottom: 8px; }

.grad-text {
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: var(--ink-dim);
  margin: 0;
}

.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 600 1rem var(--font-body);
  padding: 15px 28px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn.primary {
  color: var(--ink-on-brass);
  background: var(--grad-brass);
  box-shadow: 0 12px 34px -12px rgb(from var(--brass) r g b / 0.7);
}
.btn.primary:hover { filter: brightness(1.05); }
.btn.ghost {
  color: var(--ink);
  background: rgb(255 255 255 / 0.04);
  border-color: var(--line-strong);
}
.btn.ghost:hover { background: rgb(255 255 255 / 0.08); }
.btn.small { padding: 11px 20px; font-size: 0.92rem; }

/* ---------- Starfield ---------- */
.sky {
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
}
.sky::before {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
/* The "different sky": on arrival from the camera push, the atmosphere blooms
   in the chosen world's colour — so you emerge into that world's sky rather than
   the neutral one you left — then settles back to neutral over ~2.8s. The tint
   is set on <html data-arrived="…"> by the intro JS at the resolve step, timed
   so the sky is already glowing as the overlay fades away. */
.sky::after {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background:
    radial-gradient(95% 62% at 50% -6%, var(--arrival-tint, transparent), transparent 68%),
    radial-gradient(85% 55% at 78% 108%, var(--arrival-tint, transparent), transparent 66%);
}
html[data-arrived="haven"] { --arrival-tint: rgb(from var(--periwinkle) r g b / 0.6); }
html[data-arrived="reflect"] { --arrival-tint: rgb(from var(--brass) r g b / 0.55); }
html[data-arrived="boundaries"] { --arrival-tint: rgb(from var(--sage) r g b / 0.5); }
html[data-arrived] .sky::after { animation: arrival-bloom 2.8s ease-out both; }
@keyframes arrival-bloom {
  0% { opacity: 0; }
  14% { opacity: 1; }
  45% { opacity: 0.82; }
  100% { opacity: 0; }
}

.stars { position: absolute; inset: -25%; width: 150%; height: 150%; }
.stars span {
  position: absolute; border-radius: 50%; background: var(--white);
  box-shadow: 0 0 6px 1px rgb(255 255 255 / 0.4);
}

/* ---------- Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(16px);
  background: rgb(from var(--bg) r g b / 0.66);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.site-header.is-scrolled {
  background: rgb(from var(--bg) r g b / 0.86);
  border-bottom-color: var(--line-strong);
}
.nav {
  display: flex; align-items: center; gap: 20px;
  height: 70px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--ink);
  flex: none;
}
.brand-mark { flex: none; overflow: visible; }
.brand-mark .orbit-dot { transform-origin: 16px 16px; animation: ow-rot 16s linear infinite; }
.brand-name { font: 700 1.17rem var(--font-body); letter-spacing: -0.01em; }

.nav-links {
  display: none;
  gap: 2px; margin-left: auto; align-items: center;
}
.nav-links a, .nav-links .nav-btn {
  font: 500 0.95rem var(--font-body);
  color: var(--ink-soft);
  background: none; border: none; cursor: pointer;
  padding: 9px 13px; border-radius: 9px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover, .nav-links a:focus-visible,
.nav-links .nav-btn:hover, .nav-links .nav-btn:focus-visible {
  background: rgb(255 255 255 / 0.05);
  color: var(--white);
}

.nav-dropdown { position: relative; }
.nav-dropdown-chevron { transition: transform 0.25s; }
.nav-dropdown[data-open="true"] .nav-dropdown-chevron { transform: rotate(180deg); }
.nav-dropdown-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 320px;
  background: var(--panel-strong);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong);
  border-radius: 16px; padding: 8px;
  box-shadow: 0 24px 70px -20px rgb(0 0 0 / 0.85);
  animation: ow-fadein 0.22s ease;
}
.nav-dropdown-panel[hidden] { display: none; }
.nav-product {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; border-radius: 11px;
  text-decoration: none; color: var(--ink);
  transition: background 0.2s;
}
.nav-product:hover, .nav-product:focus-visible { background: rgb(255 255 255 / 0.05); }
.nav-product[aria-disabled="true"] { opacity: 0.72; }
.nav-product-icon {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
}
.nav-product-icon--haven { background: linear-gradient(140deg, rgb(from var(--periwinkle) r g b / 0.28), rgb(120 90 180 / 0.2)); color: var(--periwinkle-light); }
.nav-product-icon--reflect { background: linear-gradient(140deg, rgb(from var(--brass) r g b / 0.26), rgb(from var(--clay) r g b / 0.18)); color: var(--brass-light); }
.nav-product-icon--boundaries { background: rgb(255 255 255 / 0.04); color: var(--ink-muted); }
.nav-product-title { font: 600 0.96rem var(--font-body); display: block; color: var(--ink); }
.nav-product-desc { color: var(--ink-faint); font-size: 0.82rem; }

.chip {
  font: 600 0.6rem var(--font-body);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brass);
  background: rgb(from var(--brass) r g b / 0.14);
  border: 1px solid rgb(from var(--brass) r g b / 0.3);
  padding: 2px 7px; border-radius: 999px;
}

.nav-cta { display: none; }
.hamburger {
  display: inline-flex; margin-left: auto;
  width: 42px; height: 42px; border-radius: 11px;
  align-items: center; justify-content: center;
  background: rgb(255 255 255 / 0.05); border: 1px solid var(--line-strong);
  color: var(--ink); cursor: pointer;
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 150;
  background: rgb(5 6 12 / 0.75);
  backdrop-filter: blur(6px);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--panel-solid);
  border-left: 1px solid var(--line-strong);
  padding: 88px 22px 22px;
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto;
  animation: ow-fadein 0.25s ease;
}
.mobile-menu-label {
  color: var(--ink-faint); font: 600 0.68rem var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 12px;
}
.mobile-menu-panel a {
  color: var(--ink); padding: 13px 12px; border-radius: 10px;
  font-weight: 600; text-decoration: none;
  display: flex; align-items: center; gap: 8px;
}
.mobile-menu-panel a:hover, .mobile-menu-panel a:focus-visible { background: rgb(255 255 255 / 0.05); }
.mobile-menu-divider { height: 1px; background: var(--line); margin: 8px 12px; }
.mobile-menu-panel .btn { margin-top: 14px; text-align: center; }

/* ============================================================
   Horizon intro — a first-load overlay, not a component. Ships `hidden`
   in the markup; only JS ever removes that attribute. Three worlds on
   two rings around the brand mark; choosing one pushes the camera through
   that world's horizon into the resolved homepage. See docs/redesign-handoff.md
   for the full spec — this implements it.
   ============================================================ */
/* ============================================================
   HORIZON INTRO — "Entering the Horizon"
   Three worlds drift on two elliptical rings around the brand mark.
   Choosing one pushes the camera through that world's horizon and resolves
   into the homepage, scrolled to the matching app card. Plain CSS 3D
   (perspective + translateZ) + a single transform-driven disc — no WebGL,
   no canvas, no dependency. Every stage is compositor-only (transform/opacity).
   ============================================================ */
.horizon-intro {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(24px, 5vw, 40px);
  overflow: hidden;
  padding: 24px;
}
.horizon-intro[hidden] { display: none; }

/* Solid backdrop as its own layer, so the resolve can fade it (revealing the
   already-scrolled page) while the tint disc stays on top, tracking into the
   app card — the shared-element handoff from world to card. */
.horizon-backdrop {
  position: absolute; inset: 0;
  background: var(--bg);
  transition: opacity 0.4s ease;
}

/* ---------- Full-frame depth starfield ----------
   Lives at overlay scope (not inside the 560px scene) so the parallax during
   the push spans the whole viewport. Static at rest; the push is the only
   place this motion is load-bearing rather than wallpaper. */
.horizon-starfield {
  position: absolute; inset: 0;
  perspective: 700px;
  transform-style: preserve-3d;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.horizon-layer {
  position: absolute; inset: -25%;
  background-repeat: no-repeat;
  transition: transform 0.7s cubic-bezier(0.33, 0, 0.2, 1), opacity 0.7s ease-out;
  will-change: transform, opacity;
}
.horizon-layer--far {
  transform: translateZ(-360px) scale(1.55);
  opacity: 0.34;
  background-image:
    radial-gradient(1px 1px at 65.0% 90.4%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 29.8% 10.4%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 22.8% 75.9%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 19.5% 32.7%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 80.2% 33.9%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 61.9% 84.3%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 95.3% 51.9%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 29.8% 45.3%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 44.5% 58.4%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 25.7% 81.2%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 11.8% 78.1%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 3.9% 31.6%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 59.5% 65.4%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 73.5% 37.1%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 83.8% 3.8%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 6.2% 40.7%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 86.6% 8.4%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 78.1% 63.7%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 85.4% 37.4%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 76.6% 78.8%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 30.3% 88.6%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 63.9% 47.4%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 74.3% 27.8%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 20.5% 50.2%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 22.1% 37.8%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 50.8% 88.3%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 41.0% 17.8%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 68.3% 71.8%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 92.9% 3.5%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 71.8% 17.8%, var(--ink) 0, transparent 55%),
    radial-gradient(1px 1px at 35.7% 82.6%, var(--ink) 0, transparent 55%);
}
.horizon-layer--mid {
  transform: translateZ(-190px) scale(1.32);
  opacity: 0.5;
  background-image:
    radial-gradient(1.4px 1.4px at 36.8% 95.1%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 61.7% 97.5%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 26.1% 89.8%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 71.8% 84.6%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 26.1% 1.5%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 12.4% 12.1%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 28.2% 51.0%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 89.5% 93.5%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 42.2% 0.1%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 39.1% 27.5%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 85.4% 6.8%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 48.8% 87.1%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 38.1% 47.6%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 47.0% 74.7%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 65.6% 6.6%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 58.3% 44.6%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 7.6% 30.6%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 33.2% 51.7%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 0.7% 7.7%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 63.2% 76.1%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 96.0% 2.3%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 59.5% 39.6%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 10.6% 92.7%, var(--ink) 0, transparent 55%),
    radial-gradient(1.4px 1.4px at 65.6% 60.6%, var(--ink) 0, transparent 55%);
}
.horizon-layer--near {
  transform: translateZ(-70px) scale(1.1);
  opacity: 0.66;
  background-image:
    radial-gradient(2px 2px at 8.5% 99.7%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 93.7% 84.5%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 29.3% 3.7%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 24.1% 36.5%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 71.9% 69.1%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 62.8% 39.9%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 93.7% 42.7%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 49.3% 12.6%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 39.8% 41.7%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 52.6% 73.8%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 15.0% 62.5%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 88.0% 22.7%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 32.1% 20.1%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 34.5% 84.0%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 57.8% 88.0%, var(--ink) 0, transparent 55%),
    radial-gradient(2px 2px at 80.8% 55.3%, var(--ink) 0, transparent 55%);
}

/* ---------- Scene: rings, core, worlds ---------- */
.horizon-scene {
  position: relative;
  width: min(600px, 92vw);
  aspect-ratio: 1;
}

.horizon-orbits {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.horizon-ring {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.15s ease, opacity 0.25s ease;
}
.horizon-constellation line {
  stroke: rgb(from var(--periwinkle) r g b / 0.28);
  stroke-width: 0.3;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}

.horizon-core {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  display: grid; place-items: center;
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 0.25s ease;
  filter: drop-shadow(0 0 12px rgb(from var(--brass) r g b / 0.35));
}

/* ---------- Worlds ----------
   Anchored onto the ring curves (Haven + Boundaries on the outer ring, Reflect
   on the inner). Deliberately flat: the links stay outside any 3D transform
   stack so their hit-test box always equals their visual box — real 3D
   transforms on a clickable target are a known hit-testing hazard. The disc
   and starfield carry the depth instead. */
.horizon-world {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-decoration: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, filter 0.2s ease;
}
.horizon-world:focus-visible { outline: none; }
.horizon-world:focus-visible .horizon-body { outline: 2px solid var(--focus); outline-offset: 5px; }

/* Ring-anchored centres. Values are the point on each ellipse; translate(-50%,-50%)
   centres the body group on it. */
.horizon-world--haven { top: 24%; left: 21%; }        /* outer ring, upper-left */
.horizon-world--reflect { top: 59%; left: 77%; }      /* inner ring, right */
.horizon-world--boundaries { top: 85%; left: 41%; }   /* outer ring, lower */

.horizon-body {
  width: clamp(48px, 9vw, 62px); height: clamp(48px, 9vw, 62px);
  border-radius: 50%;
  /* 150ms acknowledgment, calm — no overshoot (that restraint is the brand). */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.horizon-world--haven .horizon-body {
  background: radial-gradient(circle at 34% 30%, var(--periwinkle-light), var(--periwinkle) 44%, rgb(from var(--periwinkle) r g b / 0.78) 100%);
  box-shadow: 0 0 22px -4px rgb(from var(--periwinkle) r g b / 0.55);
}
.horizon-world--reflect .horizon-body {
  background: radial-gradient(circle at 34% 30%, var(--brass-light), var(--brass) 44%, var(--brass-dark) 100%);
  box-shadow: 0 0 22px -4px rgb(from var(--brass) r g b / 0.55);
}
.horizon-world--boundaries .horizon-body {
  background: radial-gradient(circle at 34% 30%, #c4d8ca, var(--sage) 44%, rgb(from var(--sage) r g b / 0.72) 100%);
  box-shadow: 0 0 22px -4px rgb(from var(--sage) r g b / 0.5);
}

.horizon-label {
  font: 600 0.86rem var(--font-body);
  color: var(--ink-dim);
  text-align: center;
  transition: color 0.15s ease, font-weight 0.15s ease;
  white-space: nowrap;
}
.horizon-label small {
  display: block;
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Hover / focus acknowledgment — 150ms. The chosen body lifts slightly, its
   label gains weight, and its ring hairline brightens in the world's own tint.
   Nothing else moves. */
.horizon-world:hover .horizon-label,
.horizon-world:focus-visible .horizon-label { color: var(--ink); font-weight: 700; }
.horizon-world:hover .horizon-body,
.horizon-world:focus-visible .horizon-body { transform: scale(1.08); }
.horizon-scene:has(.horizon-world--haven:hover, .horizon-world--haven:focus-visible) .horizon-ring--outer,
.horizon-scene:has(.horizon-world--boundaries:hover, .horizon-world--boundaries:focus-visible) .horizon-ring--outer {
  stroke: rgb(from var(--periwinkle) r g b / 0.55);
}
.horizon-scene:has(.horizon-world--haven:hover) .horizon-world--haven .horizon-body,
.horizon-scene:has(.horizon-world--reflect:hover) .horizon-world--reflect .horizon-body,
.horizon-scene:has(.horizon-world--boundaries:hover) .horizon-world--boundaries .horizon-body { transform: scale(1.08); }
.horizon-scene:has(.horizon-world--reflect:hover, .horizon-world--reflect:focus-visible) .horizon-ring--inner {
  stroke: rgb(from var(--brass) r g b / 0.55);
}

/* Backdrop-click acknowledgment. A click on empty space used to do nothing,
   reading as broken; this briefly brightens the rings and pulses the bodies to
   say "tap one of these" — without dismissing (a near-miss shouldn't eject the
   visitor). Reduced motion still gets the ring brighten; the pulse is neutralised
   by the global reduced-motion override, so nothing jumps. */
.horizon-intro.is-nudging .horizon-ring { stroke: rgb(from var(--periwinkle) r g b / 0.5); }
.horizon-intro.is-nudging .horizon-body { animation: horizon-nudge 0.5s ease; }
@keyframes horizon-nudge {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.12); }
}

.horizon-tagline {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--ink-dim);
  text-align: center;
  line-height: 1.5;
  margin: 0;
  max-width: 32ch;
  transition: opacity 0.25s ease;
}

.horizon-skip {
  position: absolute; top: 20px; right: 20px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 0.86rem var(--font-body);
  color: var(--ink-dim);
  background: rgb(255 255 255 / 0.04);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.horizon-skip:hover, .horizon-skip:focus-visible {
  background: rgb(255 255 255 / 0.08); color: var(--ink);
  border-color: rgb(from var(--periwinkle) r g b / 0.4);
}

/* Resting motion is a slow, continuous orbit along the rings, driven from JS
   (setupHorizonIntro → startOrbit) so it can be frozen the instant a world is
   chosen — the camera-push disc must seat over a stationary body. The top/left
   anchors above are the frame-0 positions (and the still fallback under reduced
   motion / no-JS, where the orbit never starts). Kept slow enough (~3 min/lap)
   to read as a living system while staying an easy tap target. */

@media (max-width: 560px) {
  .horizon-world--haven { top: 24%; left: 20%; }
  .horizon-world--reflect { top: 60%; left: 78%; }
  .horizon-world--boundaries { top: 86%; left: 40%; }
  .horizon-tagline { max-width: 26ch; }
}

/* ---------- The travelling disc ----------
   Positioned by JS over the chosen body, then driven through three transforms:
   over-body → fill-frame (the push) → into-card-icon (the resolve). One fixed
   element, transform + opacity only. transform-origin is its own centre, so a
   single translate(--dx,--dy) scale(--dscale) places and sizes it anywhere. */
.horizon-disc {
  position: fixed; left: 0; top: 0;
  width: 100px; height: 100px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transform-origin: 50% 50%;
  transform: translate(calc(var(--dx, 50vw) - 50px), calc(var(--dy, 50vh) - 50px)) scale(var(--dscale, 0.6));
  transition: transform var(--dtime, 0.7s) cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  will-change: transform, opacity;
}
.horizon-disc.is-active { opacity: 1; }
.horizon-disc--haven { background: radial-gradient(circle at 42% 40%, var(--periwinkle-light), var(--periwinkle) 60%, rgb(from var(--periwinkle) r g b / 0.9) 100%); }
.horizon-disc--reflect { background: radial-gradient(circle at 42% 40%, var(--brass-light), var(--brass) 60%, var(--brass-dark) 100%); }
.horizon-disc--boundaries { background: radial-gradient(circle at 42% 40%, #c4d8ca, var(--sage) 60%, rgb(from var(--sage) r g b / 0.9) 100%); }

/* ---------- Stage transitions ----------
   JS applies, in order: is-committing (0→100ms) → is-pushing (100→800ms) →
   is-resolving (800→1200ms). Reduced-motion visitors never see these — the JS
   branches to an instant resolve (see home-v2.js). */

/* Commit: unchosen worlds ease back and fade; rings, core, tagline recede so
   only the chosen world remains as the disc takes over. */
.horizon-intro.is-committing .horizon-world.is-fading { opacity: 0; filter: blur(1px); }
.horizon-intro.is-committing .horizon-world.is-chosen { opacity: 0; }
.horizon-intro.is-committing .horizon-ring,
.horizon-intro.is-committing .horizon-core { opacity: 0; }
.horizon-intro.is-committing .horizon-tagline { opacity: 0; }

/* Push: starfield flies outward (differential rates = real parallax), disc
   fills the frame. This is the one moment the starfield earns its keep. */
.horizon-intro.is-pushing .horizon-layer--far { transform: translateZ(-360px) scale(3.1); opacity: 0; }
.horizon-intro.is-pushing .horizon-layer--mid { transform: translateZ(-190px) scale(4.2); opacity: 0; }
.horizon-intro.is-pushing .horizon-layer--near { transform: translateZ(-70px) scale(6); opacity: 0; }

/* Resolve: backdrop + starfield fade to reveal the already-scrolled page while
   the disc shrinks into the destination card icon (JS sets the disc target). */
.horizon-intro.is-resolving .horizon-backdrop { opacity: 0; }
.horizon-intro.is-resolving .horizon-starfield { opacity: 0; }

/* Brief landing acknowledgment on the app card the visitor arrives at — the
   card holds its own tint (per-world), then it fades and motion ends. */
.app-card.is-landed {
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.app-card.is-landed[data-world="haven"] {
  border-color: rgb(from var(--periwinkle) r g b / 0.6);
  box-shadow: 0 0 0 1px rgb(from var(--periwinkle) r g b / 0.35), 0 0 34px -10px rgb(from var(--periwinkle) r g b / 0.5);
}
.app-card.is-landed[data-world="reflect"] {
  border-color: rgb(from var(--brass) r g b / 0.6);
  box-shadow: 0 0 0 1px rgb(from var(--brass) r g b / 0.35), 0 0 34px -10px rgb(from var(--brass) r g b / 0.5);
}
.app-card.is-landed[data-world="boundaries"] {
  border-color: rgb(from var(--sage) r g b / 0.6);
  box-shadow: 0 0 0 1px rgb(from var(--sage) r g b / 0.35), 0 0 34px -10px rgb(from var(--sage) r g b / 0.5);
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(52px, 8vw, 104px) clamp(40px, 6vw, 80px); }
.hero-grid {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.trust-line {
  display: flex; align-items: center; gap: 11px;
  color: var(--ink-faint); font-size: 0.92rem;
}
.trust-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--trust);
  flex: none;
}
/* Quiet, early reassurance for a visitor arriving mid-moment — the disclaimer
   band sits ~7 viewports down, too far for someone not browsing casually. Kept
   small and dim so it doesn't dampen the hero for everyone else. */
.hero-note {
  margin: 14px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: 42ch;
}
.hero-note strong { color: var(--ink-dim); font-weight: 700; }

.hero-visual { display: flex; justify-content: center; position: relative; overflow: hidden; }

.phone {
  position: relative; width: min(292px, 74vw); aspect-ratio: 1206 / 2622;
  border-radius: 40px; padding: 11px;
  background: linear-gradient(160deg, var(--phone-bezel), var(--void));
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 1px rgb(from var(--periwinkle) r g b / 0.2), 0 44px 90px -34px rgb(0 0 0 / 0.9);
}
.phone-notch {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 17px; background: var(--void-deep); border-radius: 0 0 13px 13px; z-index: 2;
}
/* Device captures cropped below the status bar carry their own ratio and
   have no room for the notch. See .phone-frame--capture in styles.css. */
.phone--capture { aspect-ratio: 1179 / 2379; }

.phone-screen {
  width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: var(--bg-2);
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Privacy — asymmetric spine (the grid-break section) ---------- */
.privacy-intro {
  max-width: 660px; margin: 0 auto 56px; text-align: center;
}
.privacy-spine {
  list-style: none; margin: 0 auto; padding: 0;
  padding-left: clamp(24px, 6vw, 56px);
  border-left: 1px solid var(--line-strong);
  max-width: 940px;
}
.privacy-item {
  position: relative;
  padding-block: clamp(26px, 4vw, 38px);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: clamp(2.6rem, 6vw, 4rem) 1fr;
  gap: clamp(14px, 3vw, 28px);
  align-items: start;
}
.privacy-item:last-child { border-bottom: 0; }
.privacy-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(24px, 6vw, 56px));
  top: calc(clamp(26px, 4vw, 38px) + 0.55em);
  width: clamp(24px, 6vw, 56px);
  height: 1px;
  background: var(--line-strong);
}
.privacy-num {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--ink-muted);
  line-height: 1;
}
.privacy-item p { color: var(--ink-muted); margin: 0; font-size: 0.96rem; }

.privacy-item--featured {
  grid-template-columns: clamp(3.6rem, 11vw, 6.4rem) 1fr;
  padding-block: clamp(34px, 6vw, 54px);
}
.privacy-item--featured .privacy-num {
  font-size: clamp(3rem, 8vw, 5.6rem);
  background: var(--grad-hero);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.privacy-item--featured h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 10px;
}
.privacy-item--featured p { font-size: clamp(1rem, 1.4vw, 1.08rem); color: var(--ink-dim); }

/* The spot where a skeptic's "prove it" peaks — a direct route to the actual
   policy, aligned with the spine, not buried in the footer. */
.privacy-policy-link {
  margin: clamp(24px, 4vw, 36px) auto 0;
  padding-left: clamp(24px, 6vw, 56px);
  max-width: 940px;
  font-size: 0.95rem;
  color: var(--ink-muted);
}
.privacy-policy-link a { color: var(--sage); font-weight: 600; white-space: nowrap; }
.privacy-policy-link a:hover, .privacy-policy-link a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Card grids (apps / steps / blog) ---------- */
.grid-3 { display: grid; gap: 18px; grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: 16px; grid-template-columns: 1fr; }

.app-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px; border-radius: 20px;
  border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: transform 0.2s, border-color 0.25s, box-shadow 0.25s;
}
/* Lift on hover, on programmatic landing focus, and when a keyboard user
   focuses the stretched title link inside. */
.app-card:hover, .app-card:focus-visible,
.app-card:has(.app-card-link:focus-visible) {
  transform: translateY(-5px);
  box-shadow: 0 26px 60px -30px rgb(0 0 0 / 0.5);
}
.app-card--haven { background: linear-gradient(180deg, rgb(from var(--periwinkle) r g b / 0.08), var(--panel)); }
.app-card--haven:hover, .app-card--haven:focus-visible,
.app-card--haven:has(.app-card-link:focus-visible) { border-color: rgb(from var(--periwinkle) r g b / 0.45); }
.app-card--reflect { background: linear-gradient(180deg, rgb(from var(--brass) r g b / 0.08), var(--panel)); }
.app-card--reflect:hover, .app-card--reflect:focus-visible,
.app-card--reflect:has(.app-card-link:focus-visible) { border-color: rgb(from var(--brass) r g b / 0.45); }
.app-card--boundaries { background: linear-gradient(180deg, rgb(from var(--sage) r g b / 0.08), var(--panel)); }
.app-card--boundaries:hover, .app-card--boundaries:focus-visible,
.app-card--boundaries:has(.app-card-link:focus-visible) { border-color: rgb(from var(--sage) r g b / 0.45); }
.app-card--soon { background: rgb(22 26 48 / 0.3); border-style: dashed; }

/* Whole-card click → product page (title link stretched over the card).
   The App Store link sits above the stretch so it stays independently clickable. */
.app-card-link { color: var(--ink); text-decoration: none; }
.app-card-link::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px;
}
.app-card-store {
  position: relative; z-index: 2;
  font: 600 0.9rem var(--font-body);
  color: var(--brass);
  text-decoration: none;
  white-space: nowrap;
}
.app-card-store:hover, .app-card-store:focus-visible { color: var(--brass-light); text-decoration: underline; text-underline-offset: 3px; }

.app-card-icon {
  width: 48px; height: 48px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 20px;
  border: 1px solid var(--line-strong);
}
.app-card-icon--haven { background: linear-gradient(140deg, rgb(from var(--periwinkle) r g b / 0.3), rgb(120 90 180 / 0.22)); color: var(--periwinkle-light); }
.app-card-icon--reflect { background: linear-gradient(140deg, rgb(from var(--brass) r g b / 0.28), rgb(from var(--clay) r g b / 0.2)); color: var(--brass-light); }
.app-card-icon--boundaries { background: linear-gradient(140deg, rgb(from var(--sage) r g b / 0.28), rgb(from var(--periwinkle) r g b / 0.16)); color: var(--sage); }
.app-card-icon--soon { background: rgb(255 255 255 / 0.04); color: var(--ink-muted); }

.app-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; }
.app-card p { color: var(--ink-muted); margin: 0 0 22px; font-size: 0.96rem; flex: 1; }
.app-card-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-card-soon-badge { position: absolute; top: 20px; right: 20px; }

.steps-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
.step { text-align: center; padding: 8px; }
.step-num {
  width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 500; font-size: 1.5rem;
  background: rgb(22 26 48 / 0.6); border: 1px solid var(--line-strong);
}
.step p { color: var(--ink-muted); margin: 0; font-size: 0.95rem; }

/* ---------- Disclaimer ---------- */
.disclaimer {
  max-width: 900px; margin: 0 auto;
  border-radius: 20px; border: 1px solid rgb(from var(--sage) r g b / 0.24);
  background: linear-gradient(160deg, rgb(from var(--sage) r g b / 0.07), rgb(22 26 48 / 0.35));
  padding: clamp(24px, 4vw, 36px);
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
}
.disclaimer-icon {
  width: 48px; height: 48px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: rgb(from var(--sage) r g b / 0.14);
  border: 1px solid rgb(from var(--sage) r g b / 0.32);
  color: var(--sage);
}
.disclaimer h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; margin-bottom: 10px; }
.disclaimer p { color: var(--ink-dim); margin: 0 0 16px; font-size: 0.98rem; max-width: 56ch; }
.disclaimer-crisis { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.disclaimer-crisis-label { font-size: 0.88rem; color: var(--ink-faint); }
.disclaimer-crisis-chip {
  font: 600 0.84rem var(--font-body); color: var(--ink);
  background: rgb(255 255 255 / 0.05); border: 1px solid var(--line-strong);
  padding: 6px 12px; border-radius: 999px;
}

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  color: var(--ink); font: 600 1.06rem var(--font-body);
  padding: 22px 4px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-chevron { flex: none; transition: transform 0.25s; color: var(--brass); }
.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 0.32s ease, opacity 0.32s ease;
}
.faq-answer p { padding: 0 4px 22px; color: var(--ink-dim); margin: 0; font-size: 0.98rem; max-width: 64ch; }

/* ---------- Blog ---------- */
.blog-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; margin-bottom: 40px;
}
.blog-head > div { max-width: 540px; }
.blog-card {
  display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); background: rgb(22 26 48 / 0.35);
  text-decoration: none; color: inherit;
  transition: transform 0.2s, border-color 0.25s;
}
.blog-card:hover, .blog-card:focus-visible { transform: translateY(-4px); }
.blog-card-cover {
  height: 132px; position: relative; overflow: hidden;
  background-image:
    radial-gradient(1px 1px at 30% 40%, var(--white), transparent),
    radial-gradient(1px 1px at 70% 60%, var(--white), transparent),
    radial-gradient(1px 1px at 50% 20%, var(--white), transparent);
  background-size: 100% 100%;
}
.blog-card-cover::before { content: ""; position: absolute; inset: 0; opacity: 0.5; background: inherit; }
.blog-card-cover--haven { background-color: var(--void); background-image: radial-gradient(circle at 50% 30%, rgb(from var(--periwinkle) r g b / 0.35), transparent 60%); }
.blog-card-cover--reflect { background-color: var(--void); background-image: radial-gradient(circle at 60% 30%, rgb(from var(--brass) r g b / 0.32), transparent 60%); }
.blog-card-cover--studio { background-color: var(--void); background-image: radial-gradient(circle at 40% 30%, rgb(from var(--sage) r g b / 0.3), transparent 60%); }
.blog-card-body { padding: 20px; }
.blog-card-tag { font: 600 0.66rem var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.blog-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.22rem; margin: 10px 0 8px; }
.blog-card p { color: var(--ink-muted); margin: 0; font-size: 0.92rem; }

/* ---------- Final CTA ---------- */
.cta-band {
  max-width: 920px; margin: 0 auto; border-radius: 28px;
  border: 1px solid var(--line-strong);
  padding: clamp(40px, 6vw, 72px); text-align: center;
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 30% 0%, rgb(from var(--periwinkle) r g b / 0.18), transparent 55%),
    radial-gradient(circle at 80% 100%, rgb(from var(--brass) r g b / 0.14), transparent 55%),
    rgb(13 16 32 / 0.5);
}
.cta-band > * { position: relative; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line-strong); padding: 60px 24px 32px; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
.footer-brand p { color: var(--ink-muted); font-size: 0.94rem; max-width: 280px; margin: 16px 0 0; }
.footer h3 {
  font: 600 0.72rem var(--font-body); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-faint); margin: 0 0 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer a { color: var(--ink-muted); font-size: 0.94rem; text-decoration: none; }
.footer a:hover, .footer a:focus-visible { color: var(--ink); }
.footer-legal {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-strong);
  color: var(--ink-faint); font-size: 0.86rem;
}
.footer-legal nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { color: var(--ink-faint); }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--ink); }

/* ---------- Motion ---------- */
@keyframes ow-rot { to { transform: rotate(360deg); } }
@keyframes ow-fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Reduced motion gets a genuinely different entry, not a frozen frame of the
     animated one: a still constellation map. Faint lines connect each world to
     the brand's star, the rings read a touch brighter, and choosing a world
     resolves instantly (handled in JS) — no push, no drift, no disc travel. */
  .horizon-constellation line { opacity: 1; }
  .horizon-ring { stroke: rgb(from var(--periwinkle) r g b / 0.32); }
  .horizon-body { box-shadow: none; }
  .horizon-core { filter: none; }
}
/* the only !important in this file is inside the reduced-motion override above,
   where it is required to defeat any component-level transition/animation duration
   set elsewhere in this sheet — everything else in this file avoids !important entirely. */

/* ============================================================
   Mobile-first responsive — base styles above are mobile;
   these min-width queries progressively enhance for wider viewports.
   ============================================================ */

@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .hamburger { display: none; }

  .hero-grid { grid-template-columns: 1.06fr 0.94fr; }

  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; }
}

@media (min-width: 1400px) {
  /* the privacy spine breaks out of the centered container on large viewports —
     left-aligned and wider than the centered intro paragraph above it */
  .privacy-spine { margin-left: 0; margin-right: auto; max-width: 1040px; }
}

/* ---------- Section-scoped spacing (kept out of markup — no style="" attributes anywhere) ---------- */
.hero-copy .lede { max-width: 38rem; margin: 0 0 30px; }
.apps-intro { max-width: 640px; margin: 0 0 46px; }
.steps-intro { max-width: 600px; margin: 0 auto 52px; }
.faq-intro { margin: 0 0 44px; }
.app-grid-note { text-align: center; font-size: 0.9rem; color: var(--ink-muted); margin: 26px 0 0; }
.cta-band .lede { max-width: 44ch; margin: 0 auto 30px; }
.pad-bottom { padding: 0 24px clamp(56px, 8vw, 90px); }
.pad-bottom-lg { padding: 0 24px clamp(64px, 9vw, 120px); }

/* card/step/tag color modifiers — kept as classes so no markup ever needs style="" */
.app-card--soon h3,
.app-card--soon .eyebrow { color: var(--ink-muted); }
.app-card-soon-note { color: var(--ink-faint); font-weight: 500; }

.eyebrow--periwinkle { color: var(--periwinkle); }

.step-num--brass { color: var(--brass); }
.step-num--periwinkle { color: var(--periwinkle); }
.step-num--sage { color: var(--sage); }

.blog-card-tag--periwinkle { color: var(--periwinkle); }
.blog-card-tag--brass { color: var(--brass); }
.blog-card-tag--sage { color: var(--sage); }