/* ═════════════════════════════════════════════════════════════════════════════
   Smart Animal — smart-animal.com

   Art direction is locked in DESIGN_BRIEF.md. This sheet is the synthesis of a
   three-way concept panel: the material system and device construction from the
   "Paper & Instrument" direction, the reading metrics and the vet-trust line
   from "Quiet Luxury", and the accessible CTA pair from "The Moving Seam".

   Deliberately ABSENT, because a jury flagged each as a machine signature:
   figure captions, vertical rotated labels, section numbering, decorative
   status dots, middle-dot separator chains, per-section eyebrows (one on the
   page, total), hero trust micro-strips, and copy that vouches for itself.

   Type: Fraunces (display) + Plus Jakarta Sans (text). Both are the product's
   own faces, self-hosted. Fraunces never sets a paragraph.

   LIGHT ONLY, DELIBERATELY. DESIGN_SYSTEM.md section "Dark Mode (Phase 2)" says
   "Not in MVP." A prefers-color-scheme block was shipped here by mistake, which
   meant anyone whose OS is set to dark saw a navy site instead of the white one
   the system specifies. Do not reintroduce one until the app itself has a dark
   theme to match.
   ════════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jakarta';
  src: url('../fonts/PlusJakartaSans.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* DESIGN_SYSTEM.md, verbatim. White page ground; the system's Warm White and
     Soft Cream are the surfaces that sit on top of it. No invented tokens. */
  --paper: #FAFAF7;         /* page ground: the app's own Warm White */
  --warm-white: #FAFAF7;    /* system Background */
  --cream: #F5F0E8;         /* system Surface: Soft Cream */
  --cream-deep: #F0EDE8;    /* system No-data tone */
  --line: #E0DBD2;          /* system Border: Warm Grey */
  --line-soft: #EDE9E2;
  --ink: #1E3A5F;           /* system Primary Dark: Deep Navy */
  --ink-strong: #1E3A5F;
  --espresso: #1E3A5F;      /* alias: keeps display rules on the system navy */
  /* DESIGN_SYSTEM's Muted Grey is #6B7280, and its own table only claims
     "4.6:1 on white". Measured, it is 4.83:1 on white but 4.26:1 on the system's
     Soft Cream, which fails AA for body text on every cream surface here.
     Darkened the minimum needed to clear 4.5 on all three grounds
     (white 5.53, warm white 5.29, cream 4.88). Same hue, same role. */
  --muted: #616977;
  --accent: #4A90D9;        /* system Primary: Soft Trust Blue, large only */
  --accent-deep: #2C6BB3;   /* Trust Blue darkened for AA text-on-fill */
  --wash: #E8F1FA;          /* system Primary Light: Sky Wash */
  --sage: #4A9B6E;          /* system Success: Soft Sage */
  --on-accent: #FFFFFF;
  /* the page's single colour block */
  --band-1: #1B3157; --band-2: #12203A;
  --band-ink: #F7F3EC; --band-body: #C3D0E0; --band-mute: #B9C6D9; --band-ico: #9CC4EE;

  /* machined hardware — the device frames */
  --metal-1: #4E5F79;
  --metal-2: #24334A;
  --metal-3: #182740;
  --metal-4: #3D4E68;
  --tray-1: #FFFFFF;
  --tray-2: #F5F0E8;
  --hi: rgba(255, 255, 255, .72);

  /* shadows tinted to the ground, never black */
  --sh-plate: 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(30,58,95,.05),
              0 18px 44px -18px rgba(30,58,95,.16);
  --sh-card:  0 1px 0 rgba(255,255,255,.55), 0 4px 10px rgba(30,58,95,.045),
              0 34px 70px -34px rgba(30,58,95,.20);
  --sh-lift:  0 1px 0 rgba(255,255,255,.55), 0 8px 18px rgba(30,58,95,.07),
              0 52px 96px -40px rgba(30,58,95,.26);
  --sh-dev:   0 2px 4px rgba(30,58,95,.10), 0 18px 40px -12px rgba(30,58,95,.18),
              0 70px 120px -40px rgba(30,58,95,.32);
  --sh-nav:   0 1px 0 rgba(255,255,255,.6), 0 2px 10px rgba(30,58,95,.05),
              0 20px 50px -26px rgba(30,58,95,.24);
  --sh-cta:   0 1px 0 rgba(255,255,255,.22) inset, 0 2px 6px rgba(24,60,110,.22),
              0 14px 28px -12px rgba(24,60,110,.42);
  --sh-cta-h: 0 1px 0 rgba(255,255,255,.28) inset, 0 4px 10px rgba(24,60,110,.24),
              0 26px 44px -14px rgba(24,60,110,.50);

  /* documented radius system: pill buttons, concentric shells */
  --r-pill: 999px;
  --r-shell: 28px;
  --r-core: 22px;
  --r-plate: 26px;
  --r-plate-in: 18px;
  --r-input: 10px;

  --font: 'Jakarta', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 44px);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  font-family: var(--font);
  font-optical-sizing: auto;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* The app's background is Warm White (#FAFAF7); the page uses the same ground.
     The gradient is WARM ONLY: white at the crown, settling into Warm White,
     warming to Soft Cream at the foot. No blue in the page ground - the one
     touch of Sky Wash on the page lives in the hero's own radial, so it cannot
     follow the reader down the page.
     NOT background-attachment: fixed. Fixed pins the gradient to the viewport,
     so the top stop reappears at the top of the screen at every scroll position
     and reads as a band travelling with you. */
  background: linear-gradient(
      180deg,
      #FFFFFF 0%,
      var(--warm-white) 18%,
      var(--warm-white) 68%,
      var(--cream) 100%);
  background-repeat: no-repeat;
  min-height: 100%;
  color: var(--ink);
  /* reading metrics grafted from the Quiet Luxury concept */
  font-size: 17px;
  line-height: 1.62;
  font-variation-settings: 'wght' 400;
  text-rendering: optimizeLegibility;
}

/* Film grain: fixed overlay only, never on a scrolling container. */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url('../img/grain.png');
  background-size: 128px 128px;
  opacity: 0.026;
  mix-blend-mode: multiply;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 6px;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: fixed; top: 14px; left: 14px; z-index: 60;
  background: var(--accent-deep); color: var(--on-accent);
  font-size: .94rem; font-weight: 600;
  padding: 11px 20px; border-radius: var(--r-pill);
  transform: translateY(calc(-100% - 20px));
}
.skip-link:focus { transform: none; text-decoration: none; }

/* ── type ─────────────────────────────────────────────────────────────────── */
h1, h2 {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'wght' 430, 'SOFT' 0, 'WONK' 1;
  color: var(--ink-strong);
  margin: 0;
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 400;
}
h1 { font-size: clamp(2.9rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2.1rem, 4vw, 3.15rem); }
h3 {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 60, 'wght' 500, 'SOFT' 0, 'WONK' 0;
  font-size: 1.42rem; line-height: 1.18; letter-spacing: -0.016em;
  color: var(--ink-strong); margin: 0; font-weight: 400;
}
p { margin: 0; }
.lede {
  font-size: 1.13rem; line-height: 1.62;
  color: var(--muted);
  max-width: 58ch;
  font-variation-settings: 'wght' 400;
}
strong { font-variation-settings: 'wght' 650; color: var(--ink-strong); }

/* The page's single eyebrow. One, total. */
.eyebrow {
  display: inline-block;
  font-size: .77rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 20px;
}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: var(--r-pill);
  padding: 15px 18px 15px 30px;
  font-size: 1.02rem; font-variation-settings: 'wght' 600;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease),
              background-color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: scale(.985) translateY(0); }
.btn-primary {
  background: var(--accent-deep); color: var(--on-accent);
  box-shadow: var(--sh-cta);
}
.btn-primary:hover { box-shadow: var(--sh-cta-h); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--muted);
  padding: 15px 28px;
}
.btn-ghost:hover { background: var(--cream); border-color: var(--muted); }

/* Button-in-button: the trailing glyph rides in its own well. */
.btn-ico {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: rgba(255,255,255,.16);
  transition: transform .5s var(--ease), background-color .3s var(--ease);
}
.btn-primary:hover .btn-ico { transform: translate(3px, -1px); background: rgba(255,255,255,.26); }
.btn-ico svg { width: 15px; height: 15px; }
/* ── nav: a floating instrument, detached from the top ────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  padding-top: 18px;
  transition: padding-top .6s var(--ease);
}
.nav.is-stuck { padding-top: 8px; }
.nav-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  height: 68px;
  padding: 0 12px 0 44px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid transparent;
  transition: border-color .6s var(--ease), box-shadow .6s var(--ease),
              background-color .6s var(--ease);
}
.nav.is-stuck .nav-inner {
  border-color: var(--line-soft);
  box-shadow: var(--sh-nav);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink-strong);
  font-variation-settings: 'wght' 620;
  font-size: 1.09rem; letter-spacing: -.022em;
}
.brand:hover { text-decoration: none; }
.brand img { width: 40px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a:not(.btn) {
  color: var(--ink); font-size: .96rem;
  font-variation-settings: 'wght' 500;
  transition: color .3s var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--accent-deep); text-decoration: none; }
.nav-cta { padding: 11px 13px 11px 22px; font-size: .93rem; }
.nav-cta .btn-ico { width: 26px; height: 26px; }
.nav-cta .btn-ico svg { width: 13px; height: 13px; }
.nav-toggle { display: none; }

/* ── hero: editorial split, copy against one machined device ──────────────── */
.hero { position: relative; overflow: clip; }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  top: -32vh; right: -14vw; width: 74vw; height: 92vh;
  max-width: 1000px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--wash), transparent 70%);
  opacity: .85;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .78fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
  padding-block: clamp(38px, 5.5vw, 76px) clamp(60px, 8vw, 112px);
}
.hero h1 { margin-bottom: 26px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
/* The line that makes a vet trust the page. Not a trust micro-strip. */
.hero-note {
  margin-top: 30px;
  font-size: .95rem; color: var(--muted);
  max-width: 46ch;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

/* ── the device: tray / body / screen, concentric ─────────────────────────── */
.device { position: relative; display: inline-block; }
.device-tray {
  padding: 9px;
  border-radius: 54px;
  background: linear-gradient(168deg, var(--tray-1), var(--tray-2));
  border: 1px solid var(--line);
  box-shadow: var(--sh-dev), 0 1px 0 var(--hi) inset;
}
.device-body {
  position: relative;
  padding: 10px;
  border-radius: 45px;
  background: linear-gradient(158deg, var(--metal-1) 0%, var(--metal-2) 38%,
                                      var(--metal-3) 72%, var(--metal-4) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset,
    0 -1px 0 rgba(0,0,0,.42) inset,
    0 0 0 1px rgba(10,20,36,.55);
}
.device-body::before {
  content: ""; position: absolute; inset: 0; border-radius: 45px;
  background: linear-gradient(114deg, rgba(255,255,255,.20) 0%, transparent 26%,
                              transparent 74%, rgba(255,255,255,.10) 100%);
  pointer-events: none;
}
.device-screen {
  position: relative;
  aspect-ratio: 1170 / 2532;   /* the capture's own ratio: never cropped */
  width: clamp(232px, 25vw, 292px);
  border-radius: 35px;
  overflow: hidden;
  background: var(--warm-white);
  box-shadow: 0 0 0 1px rgba(0,0,0,.34), 0 8px 22px -10px rgba(0,0,0,.55) inset;
}
.device-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.device-btn {
  position: absolute; right: -2px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--metal-1), var(--metal-3));
}
.device-btn-a { top: 27%; height: 8%; }
.device-btn-b { top: 38%; height: 5%; }
.device-btn-c {
  position: absolute; left: -2px; top: 21%; height: 4%; width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, var(--metal-1), var(--metal-3));
}
.hero .device { rotate: 1.4deg; }
.hero-visual { display: flex; justify-content: center; }

/* ── sections ─────────────────────────────────────────────────────────────── */
.section { padding-block: clamp(72px, 10vw, 148px); }
.section-head { max-width: 34ch; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head-centred { max-width: 30ch; margin-inline: auto; text-align: center; }
.section-head-centred .lede { margin-inline: auto; }
.section-head .lede { max-width: 54ch; }
.section-head .lede { margin-top: 20px; max-width: 54ch; }

/* ── tour: alternating editorial rows ─────────────────────────────────────
   Four capabilities, four rows, each with a real capture. Deliberately NOT a
   card grid: removing one feature left that grid with a single image and three
   empty text boxes, and a row layout cannot develop that failure. Alternation
   is capped at 4 by the section itself, and each row is a full-bleed band of
   surface rather than a floating card. ───────────────────────────────────── */
.tour { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 28px); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .84fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(38px, 4.4vw, 66px) 0 0;
  border-radius: var(--r-plate);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--sh-plate);
  overflow: hidden;
  /* Bleed the band to the page edges and pad it back to the content rail, so a
     row heading sits on exactly the same line as every section heading. */
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
}
.row:nth-child(even) { background: var(--cream); border-color: var(--line-soft); }
.row-flip .row-copy { order: 2; }
.row-flip .row-shot { order: 1; }
.row-copy { padding-bottom: clamp(34px, 4vw, 60px); }
.row-copy h3 { margin-bottom: 14px; }
.row-copy p { color: var(--muted); font-size: 1.04rem; max-width: 46ch; }
.row-shot { display: flex; justify-content: center; align-self: end; }
.row-shot .device { width: min(300px, 100%); }
/* The shot sits on its shelf and runs off the bottom edge of the row, so the
   phone is never chopped through the middle of its own UI. */
.row-shot .device-tray { border-radius: 46px 46px 0 0; padding: 8px 8px 0; }
.row-shot .device-body { border-radius: 38px 38px 0 0; padding: 9px 9px 0; }
.row-shot .device-body::before { border-radius: 38px 38px 0 0; }
.row-shot .device-screen { width: 100%; border-radius: 29px 29px 0 0; }
.device-screen.s-tall  { aspect-ratio: 1170 / 1400; }
.device-screen.s-mid   { aspect-ratio: 1170 / 1290; }
.device-screen.s-short { aspect-ratio: 1170 / 980; }
.device-screen.s-short img { object-position: top; }

/* ── research: the page's one colour block ────────────────────────────────── */
.band { background: linear-gradient(178deg, var(--band-1), var(--band-2)); color: var(--band-body);
        border-block: 1px solid rgba(255,255,255,.06); }
.band h2 { color: var(--band-ink); }
.band .lede { color: var(--band-mute); }
.band-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 92px);
  padding-block: clamp(76px, 10vw, 148px);
  align-items: start;
}
.band-points { display: flex; flex-direction: column; gap: 26px; }
.band-point { display: grid; grid-template-columns: 26px 1fr; gap: 18px; }
.band-point svg { width: 21px; height: 21px; color: var(--band-ico); margin-top: 4px; }
.band-point strong { color: var(--band-ink); display: block; margin-bottom: 4px; font-variation-settings: 'wght' 620; }
.band-point p { color: var(--band-body); font-size: 1rem; }

/* ── story: the polaroid, grafted from Quiet Luxury ───────────────────────── */
.story-grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.polaroid {
  background: var(--cream);
  padding: 16px 16px 0;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-lift);
  rotate: -2.4deg;
  max-width: 430px;
  margin: 0;
  transition: rotate .8s var(--ease);
}
.polaroid:hover { rotate: -1.2deg; }
.polaroid img { border-radius: 3px; aspect-ratio: 1; object-fit: cover; }
.polaroid figcaption {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40, 'wght' 400, 'WONK' 0;
  font-size: 1.02rem; color: var(--espresso);
  padding: 20px 4px 24px; text-align: center;
}
.story-copy h2 + .lede { margin-top: 24px; }
.story-copy p + p { margin-top: 18px; }
.story-more {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 30px; font-variation-settings: 'wght' 600;
}
.story-more svg { width: 16px; height: 16px; transition: transform .5s var(--ease); }
.story-more:hover svg { transform: translateX(4px); }

/* ── team ─────────────────────────────────────────────────────────────────── */
/* Three people, three columns. This was left at repeat(4, 1fr) after Sara's card
   moved out of the roster and into the dedication below, so the cards filled
   three of four tracks and the empty fourth pushed them off centre. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 22px);
}
.person {
  border: 1px solid var(--line); border-radius: var(--r-shell);
  padding: 30px 28px 32px;
  background: var(--warm-white);
  box-shadow: var(--sh-plate);
  display: flex; flex-direction: column; gap: 5px;
}
.person .face {
  width: 62px; height: 62px; border-radius: var(--r-pill);
  margin-bottom: 16px;
  display: grid; place-items: center;
  background: var(--cream); color: var(--espresso);
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40, 'wght' 500;
  font-size: 1.2rem; letter-spacing: .02em;
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.person .face img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { font-size: 1.14rem; }
.person .role { color: var(--muted); font-size: .85rem; font-variation-settings: 'wght' 600; }
.person p { color: var(--muted); font-size: .95rem; margin-top: 8px; }

/* ── closing CTA ──────────────────────────────────────────────────────────── */
.cta-band { border-top: 1px solid var(--line); background: var(--cream); }
.cta-inner {
  padding-block: clamp(72px, 9vw, 128px);
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  text-align: center;
  max-width: 34ch;          /* constrains the text ... */
  margin-inline: auto;      /* ... and centres the block in the page */
}
.cta-inner h2 { max-width: 18ch; }
.cta-inner .lede { max-width: 46ch; margin-inline: auto; }
.cta-note { font-size: .94rem; color: var(--muted); }

/* ── footer ───────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding-block: 68px 44px; }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 3fr));
  gap: 48px;
}
.footer h3 {
  font-family: var(--font); font-size: .87rem; font-variation-settings: 'wght' 650;
  letter-spacing: 0; margin: 0 0 16px; color: var(--ink-strong);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.footer li a { display: inline-flex; align-items: center; min-height: 40px; }
.footer a { color: var(--muted); font-size: .95rem; }
.footer a:hover { color: var(--accent-deep); }
.footer-brand p { color: var(--muted); font-size: .95rem; max-width: 40ch; margin-top: 16px; }
.footer-dedication { font-size: .89rem; }
.footer-dedication a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.footer-dedication a:hover { color: var(--accent-deep); }
.footer-legal {
  margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.footer-legal p { color: var(--muted); font-size: .85rem; max-width: 92ch; }

/* ── legal pages ──────────────────────────────────────────────────────────── */
.legal-wrap { max-width: 740px; margin: 0 auto; padding: 56px var(--pad) 104px; }
.legal-wrap h1 { font-size: clamp(2.2rem, 4.4vw, 3rem); margin-bottom: 12px; }
.legal-meta { color: var(--muted); font-size: .95rem; margin-bottom: 36px; }
.legal-notice {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--cream); border-radius: 0 var(--r-plate-in) var(--r-plate-in) 0;
  padding: 20px 24px; margin-bottom: 46px; font-size: .96rem; color: var(--ink);
}
.legal-wrap h2 {
  font-size: 1.5rem; margin: 50px 0 16px; scroll-margin-top: 100px;
  font-variation-settings: 'opsz' 42, 'wght' 500, 'SOFT' 0, 'WONK' 0;
}
.legal-wrap p { margin: 0 0 15px; color: var(--ink); }
.legal-wrap ul { margin: 0 0 15px; padding-left: 26px; color: var(--ink); }
.legal-wrap li { margin-bottom: 8px; }
.legal-toc {
  border: 1px solid var(--line); border-radius: var(--r-plate-in);
  padding: 24px 28px; margin-bottom: 44px;
  columns: 2; column-gap: 34px; font-size: .93rem;
}
.legal-toc a { display: block; padding-block: 5px; color: var(--muted); break-inside: avoid; }
.legal-toc a:hover { color: var(--accent-deep); }
.nav-links--inline { display: flex; align-items: center; gap: 28px; }

/* ── motion: one motivated entrance per element, nothing loops ────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(6px);
    transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease);
    transition-delay: var(--d, 0s);
  }
  .js .reveal.in { opacity: 1; transform: none; filter: none; }
  .hero-copy > *, .hero .device { animation: rise .95s var(--ease) backwards; }
  .hero-copy > *:nth-child(1) { animation-delay: .05s; }
  .hero-copy > *:nth-child(2) { animation-delay: .13s; }
  .hero-copy > *:nth-child(3) { animation-delay: .21s; }
  .hero-copy > *:nth-child(4) { animation-delay: .29s; }
  .hero-copy > *:nth-child(5) { animation-delay: .36s; }
  .hero .device { animation-delay: .2s; animation-duration: 1.15s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(30px); filter: blur(7px); }
    to   { opacity: 1; transform: none; filter: none; }
  }
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════════
   Every asymmetric layout above collapses explicitly, per section, rather than
   being trusted to the grid. ═════════════════════════════════════════════════ */

@media (max-width: 1080px) {
}

@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; gap: 0; padding-inline: clamp(24px, 5vw, 40px); }
  .row-flip .row-copy { order: 1; }
  .row-flip .row-shot { order: 2; }
  .row-copy { padding-bottom: clamp(24px, 4vw, 34px); }
  .row-shot .device { width: min(290px, 82%); }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; padding-block: 26px 64px; }
  .hero .device { rotate: 0deg; }
  .device-screen { width: min(268px, 68vw); }
  .band-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .polaroid { rotate: 0deg; max-width: 360px; margin-inline: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 860px) {
  .nav { padding-top: 10px; }
  .nav-inner { height: 62px; padding: 0 10px 0 16px; }
  .brand img { width: 34px; }
  .brand { font-size: 1.02rem; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; background: none; color: var(--ink);
    cursor: pointer; border-radius: var(--r-pill);
  }
  .nav-toggle svg { width: 23px; height: 23px; }
  .nav-toggle .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }
  .nav-toggle ~ .nav-links {
    display: none;
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: color-mix(in srgb, var(--paper) 97%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-shell);
    box-shadow: var(--sh-nav);
    padding: 10px;
  }
  .nav-toggle ~ .nav-links.is-open,
  #nav-links:target { display: flex; }
  .nav-toggle ~ .nav-links a { padding: 14px 16px; border-radius: var(--r-core); }
  .nav-toggle ~ .nav-links a:hover { background: var(--cream); }
  .nav-toggle ~ .nav-links .nav-cta { margin-top: 8px; justify-content: center; }
}

@media (max-width: 720px) {
  .section { padding-block: clamp(56px, 12vw, 84px); }
  .section-head { max-width: none; margin-bottom: 32px; }
  .hero-note { margin-top: 24px; }
  .hero-ctas { gap: 12px; }
  .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  h1 { font-size: clamp(2.35rem, 10.4vw, 3rem); }
  h2 { font-size: clamp(1.8rem, 7.6vw, 2.3rem); }
  h3 { font-size: 1.24rem; }
  .lede { font-size: 1.04rem; }
  .team-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-brand { grid-column: span 1; }
  .legal-toc { columns: 1; }
  .plate-copy { padding: 24px; }
  .plate-shot { padding-inline: 24px; }
  .polaroid { max-width: none; }
  .device-screen { width: min(252px, 72vw); }
  .cta-inner { max-width: none; }
  .band-point { grid-template-columns: 22px 1fr; gap: 14px; }
  .legal-wrap { padding-top: 36px; }
}

@media (max-width: 380px) {
  :root { --pad: 16px; }
  .hero-ctas .btn { width: 100%; }
}

/* ── how it works: numbered rail against a sticky device ──────────────────── */
.how-grid {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .8fr);
  gap: clamp(40px, 7vw, 100px); align-items: start;
}
.how-list { display: flex; flex-direction: column; }
.how-item { display: grid; grid-template-columns: 46px 1fr; gap: 22px; padding-block: 30px; }
.how-item + .how-item { border-top: 1px solid var(--line-soft); }
.how-num {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--cream); color: var(--espresso);
  border: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40, 'wght' 500;
  font-size: 1.02rem;
}
.how-item h3 { margin-bottom: 9px; }
.how-item p { color: var(--muted); max-width: 46ch; }
.how-phone { position: sticky; top: 108px; display: flex; justify-content: center; }
.how-phone .device { rotate: -1.6deg; }
@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr; gap: 44px; }
  .how-phone { position: static; }
  .how-phone .device { rotate: 0deg; }
}
@media (max-width: 560px) {
  .how-item { grid-template-columns: 36px 1fr; gap: 16px; padding-block: 24px; }
  .how-num { width: 32px; height: 32px; font-size: .92rem; }
}

/* Sara's dedication: deliberately NOT a staff card. It sits under the team,
   full width, in the story voice. See DESIGN_BRIEF.md "Writing about Sara". */
.team-dedication-centred { margin-inline: auto; text-align: center; }
.team-dedication {
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 60, 'wght' 400, 'WONK' 0;
  font-size: clamp(1.12rem, 1.7vw, 1.34rem);
  line-height: 1.42;
  color: var(--espresso);
  max-width: 56ch;
}

/* Now that the nav genuinely sticks, every in-page anchor must clear it or the
   section heading lands underneath the pill. */
#tour, #how, #research, #story, #team { scroll-margin-top: 104px; }
@media (max-width: 860px) { #tour, #how, #research, #story, #team { scroll-margin-top: 86px; } }

/* ── feedback round: hero sub, band prose, team portraits ─────────────────── */

/* The eyebrow above the old headline was unreadable at its size and weight, so
   it is gone. The positioning line is now the h1, and the former headline sits
   beneath it as the sub: still prominent, but clearly secondary. */
.hero-sub {
  margin-top: 22px;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 72, 'wght' 400, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(1.32rem, 2.1vw, 1.72rem);
  line-height: 1.24;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 24ch;
}
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); }

/* Research band is two paragraphs now, not a four-point list. */
.band-copy { display: flex; flex-direction: column; gap: 18px; }
.band-copy p { color: var(--band-body); font-size: 1.06rem; line-height: 1.6; }

/* Real portraits replace the initials in two of the three cards. */
.person .face { width: 84px; height: 84px; }
.person .face img { width: 100%; height: 100%; object-fit: cover; }