/* Sato website.
   The palette, type and shapes are the app's own "Plain" look: the iOS grouped
   ground, white cards at a 22pt continuous radius, SF Rounded, and the
   storybook accents (teal, moss, ochre, persimmon, slate, plum). The wordmark
   is Nunito ExtraBold, the same face the app's logo is set in, served locally.
   No remote fonts, no scripts, no trackers. */

@font-face {
  font-family: "Sato Wordmark";
  src: url("../fonts/nunito-extrabold-subset.woff") format("woff"),
       url("../fonts/nunito-extrabold-subset.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Nunito is Sato's web equivalent of SF Rounded. The variable cut preserves
   the face's round terminals while letting body copy sit at a calmer 475 and
   headings use the dense 780–820 weights seen in the app. */
@font-face {
  font-family: "Sato Sans";
  src: url("../fonts/nunito-latin-variable.woff") format("woff"),
       url("../fonts/nunito-latin-variable.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Surfaces: systemGroupedBackground / secondarySystemGroupedBackground */
  --ground: #f2f2f7;
  --band: #e9e9ef;
  --card: #fff;
  --row: #f1f1f5;

  /* Label hierarchy */
  --ink: #1c1c1e;
  --ink-2: #63636b;
  --ink-3: #9a9aa2;
  --hair: rgba(60,60,67,.14);
  --line: rgba(60,60,67,.11);

  /* Accents, from AppTheme */
  --teal: #2a8b86;
  --teal-ink: #1d6763;
  --moss: #6c8c52;
  --ochre: #b88430;
  --persimmon: #e25d4a;
  --slate: #4966a3;
  --plum: #795da3;
  --coral: #c25b4a;
  --blue: #2f6fe0;
  --mic: #c15a4b;
  --on-accent: #fff;
  /* Large filled surfaces take their own value: the app never fills a whole
     card with the accent. */
  --accent-fill: #26807b;
  --on-fill: #fff;
  /* Deepened twins of the tints, for the coloured words in a quoted
     transcript. The dots in the key keep the app's own values. */
  --moss-ink: #5b7645;
  --ochre-ink: #8f6725;
  --persimmon-ink: #c23a25;
  --slate-ink: #41598f;
  --tint-wash: 0.16;

  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 22px rgba(0,0,0,.05);
  --shadow-window: 0 2px 6px rgba(0,0,0,.06), 0 22px 48px rgba(0,0,0,.10);

  --sans: "Sato Sans", ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wordmark: "Sato Wordmark", var(--sans);

  --radius-card: 22px;
  --radius-row: 18px;
}


* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 28px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 475;
  line-height: 1.55;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }
p + p { margin-top: .9em; }

h1, h2, h3 {
  font-weight: 790;
  line-height: 1.1;
  letter-spacing: -.028em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 4.6vw, 3.75rem); max-width: 17ch; }
h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); }
h3 { font-size: 1.3rem; letter-spacing: -.02em; }

a {
  color: var(--teal-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
a:hover { color: var(--ink); }

button, input, textarea, select { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }

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

img { max-width: 100%; height: auto; }

.wrap { width: min(1120px, calc(100% - 56px)); margin-inline: auto; }

/* ---------- Small type ---------- */

.eyebrow {
  display: inline-block;
  color: var(--teal-ink);
  font-size: .95rem;
  font-weight: 650;
  margin-bottom: 14px;
}
.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: 500;
}
.small, .fine { font-size: .875rem; line-height: 1.55; color: var(--ink-2); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ground);
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
}
.btn:hover { background: var(--ink-2); color: var(--ground); }
.btn--teal { background: var(--accent-fill); color: var(--on-fill); }
.btn--teal:hover { background: var(--ink); color: var(--ground); }
.btn--sm { min-height: 46px; padding: 11px 22px; font-size: .95rem; }
.btn--wide { width: 100%; }

.text-link { font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 28px; }

.skip-link { position: absolute; left: 20px; top: -100px; background: var(--card); padding: 12px; z-index: 10; border-radius: 10px; }
.skip-link:focus { top: 10px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 8;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.site-nav { display: flex; gap: 26px; align-items: center; min-height: 72px; }

.brand {
  font-family: var(--wordmark);
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: -.02em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  padding-block: 6px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.brand-mark { display: block; width: 30px; height: 30px; flex: none; border-radius: 6.75px; }
.site-footer .brand { font-size: 1.5rem; gap: 9px; }
.site-footer .brand-mark { width: 26px; height: 26px; border-radius: 5.85px; }

.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a {
  font-size: .93rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-2);
  padding-block: 10px;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--teal-ink); }
.nav-cta { font-size: .9rem; min-height: 42px; padding: 9px 18px; }

/* ---------- Intake hero ---------- */

.intake-hero {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  min-height: clamp(420px, 62vh, 600px);
  padding-block: 56px 44px;
  overflow: hidden;
  text-align: center;
}
.hero-icons {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.intake-hero > :not(.hero-icons) { position: relative; z-index: 1; }

/* The intake's drifting glyphs: the real SF Symbols, rendered out of AppKit
   at the weight the intake asks for and used as masks so the tint still comes
   from a colour token. Each box carries the symbol's own aspect ratio, so the
   nine keep the relative sizes they have on the welcome screen.

   The motion is the intake's: x = sin(t), y = cos(0.83t) and a rotation of
   tilt + sin(0.7t) * 9, on a per-icon clock, three periods that never line up,
   which is what stops nine icons reading as one synchronised bob. Three
   incommensurate periods need more than one element to carry them: the wrapper
   takes the vertical, the glyph takes the horizontal and the wobble, since
   `translate` and `rotate` are separate animatable properties. */
.hero-icon {
  --iw: calc(var(--w, 48px) * var(--icon-scale, 1));
  --ih: calc(var(--h, 48px) * var(--icon-scale, 1));
  position: absolute;
  width: var(--iw);
  height: var(--ih);
  margin-left: calc(var(--iw) / -2);
  margin-top: calc(var(--ih) / -2);
  opacity: .92;
}
.hero-icon > span {
  display: block;
  height: 100%;
  animation: sato-drift-y var(--ty, 9s) var(--d, 0s) ease-in-out infinite alternate;
}
.hero-icon > span > span {
  display: block;
  height: 100%;
  background: currentColor;
  -webkit-mask-image: var(--glyph);
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--glyph);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  rotate: var(--tilt, 0deg);
  animation: sato-drift-x var(--tx, 7s) var(--d, 0s) ease-in-out infinite alternate,
             sato-wobble var(--tr, 11s) var(--d, 0s) ease-in-out infinite alternate;
}
/* A relative url() inside a custom property resolves against the sheet that
   uses it, so these live here rather than beside the geometry in the markup. */
.i-syringe { --glyph: url("../img/glyphs/syringe.png"); }
.i-fork-knife { --glyph: url("../img/glyphs/fork-knife.png"); }
.i-note-text { --glyph: url("../img/glyphs/note-text.png"); }
.i-figure-walk { --glyph: url("../img/glyphs/figure-walk.png"); }
.i-scalemass-fill { --glyph: url("../img/glyphs/scalemass-fill.png"); }
.i-waveform-path-ecg { --glyph: url("../img/glyphs/waveform-path-ecg.png"); }
.i-calendar { --glyph: url("../img/glyphs/calendar.png"); }
.i-drop-fill { --glyph: url("../img/glyphs/drop-fill.png"); }
.i-dumbbell-fill { --glyph: url("../img/glyphs/dumbbell-fill.png"); }

@keyframes sato-drift-y {
  from { translate: 0 calc(var(--icon-scale, 1) * -16px); }
  to { translate: 0 calc(var(--icon-scale, 1) * 16px); }
}
@keyframes sato-drift-x {
  from { translate: calc(var(--icon-scale, 1) * -12px) 0; }
  to { translate: calc(var(--icon-scale, 1) * 12px) 0; }
}
@keyframes sato-wobble {
  from { rotate: calc(var(--tilt, 0deg) - 9deg); }
  to { rotate: calc(var(--tilt, 0deg) + 9deg); }
}
.wordmark-xl {
  font-family: var(--wordmark);
  font-weight: 800;
  font-size: clamp(4rem, 13vw, 6.5rem);
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
.hero-sub {
  max-width: 18ch;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 600;
  color: var(--ink-2);
  margin: 0;
}
.hero-foot {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: 26px;
  position: relative;
}
.hero-foot .btn { min-width: 260px; }
.hero-note { font-size: .85rem; color: var(--ink-2); margin: 0; max-width: 42ch; }

/* ---------- Sections ---------- */

.section { padding-block: 76px; }
.section + .section { border-top: 1px solid var(--line); }
.section-first { padding-top: 8px; border-top: 0; }
.band { background: var(--band); border-top: 1px solid var(--line); }
.band + .section { border-top: 0; }

.section-heading { max-width: 720px; margin-bottom: 40px; }
.section-heading p:last-child { margin-top: 18px; max-width: 56ch; color: var(--ink-2); }

.page-intro { padding-block: 56px 40px; }
.page-intro h1 { max-width: 19ch; }
.page-intro .lede { margin-top: 20px; max-width: 60ch; }

/* ---------- Cards, windows ---------- */

.card {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
}

.window {
  margin: 0 auto;
  max-width: 880px;
  border-radius: 26px;
  background: var(--ground);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-window);
  border: 1px solid var(--hair);
}
.window img { display: block; width: 100%; }
.window video { display: block; width: 100%; height: auto; background: var(--ground); }
.window--hero { max-width: 660px; }
.window figcaption {
  padding: 12px 18px 14px;
  font-size: .8rem;
  color: var(--ink-2);
  background: var(--card);
  border-top: 1px solid var(--line);
}

.window-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: start;
}
.window-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

/* Each capture is its own app surface. Nothing overlaps another capture or
   the site chrome, and the crop itself excludes Sato's floating tab ribbon. */
.product-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
  align-items: start;
}
.product-gallery .app-screen { grid-column: span 4; }
.product-gallery .app-screen:nth-child(4),
.product-gallery .app-screen:nth-child(5) { grid-column: span 6; }
.app-screen {
  margin: 0;
  min-width: 0;
}
.app-screen__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.app-screen__label h3 { font-size: 1.08rem; }
.app-screen__label span { color: var(--ink-3); font-size: .78rem; font-weight: 700; }
.app-screen .window { border-radius: 22px; }
.gallery-note { margin-top: 24px; color: var(--ink-2); font-size: .88rem; }

.tool-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}
.tool-card h3 { margin-bottom: 8px; }
.tool-card > p { color: var(--ink-2); margin-bottom: 20px; }

.voice-showcase {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 64px;
  align-items: center;
}
.voice-showcase__copy { max-width: 46ch; }
.voice-showcase__copy h2 { margin: 10px 0 18px; }
.voice-showcase__copy .lede { color: var(--ink); }
.voice-showcase__copy .spoken { margin-top: 24px; font-size: 1.05rem; max-width: 42ch; }
.voice-video {
  max-width: 420px;
  border-radius: 34px;
  padding: 8px;
  background: #101014;
}
.voice-video video { border-radius: 27px; }
.media-note { margin-top: 12px; font-size: .78rem; color: var(--ink-3); text-align: center; }

/* ---------- Voice steps ---------- */

.voice-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }
.voice-step { display: grid; gap: 18px; align-content: start; }
.voice-step h3 { font-size: 1.2rem; margin-top: 8px; }
.voice-step p { color: var(--ink-2); font-size: .95rem; margin-top: 8px; min-height: 4.5em; }
.step-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 650;
  color: var(--teal-ink);
}
.step-mark::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
}

/* One step of a flow: the screen on one side, what it does on the other. */
.step-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding-block: 44px;
  border-top: 1px solid var(--line);
}
.step-row:first-of-type { border-top: 0; padding-top: 8px; }
.step-row--flip .step-row__media { order: 2; }
.step-row__copy { max-width: 42ch; }
.step-row__copy h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); margin: 12px 0 14px; }
.step-row__copy p { color: var(--ink-2); }

/* A list where each item carries one of the app's semantic tints. */
.tint-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tint-list li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 20px;
  border-radius: var(--radius-row);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.tint-list li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--dot, var(--teal));
}
.tint-list b { display: block; font-weight: 800; }
.tint-list span { color: var(--ink-2); font-size: .94rem; }

/* The five colours the app tints a transcript with. */
.key { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.key li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--card);
  border-radius: 999px;
  padding: 6px 13px 6px 10px;
  box-shadow: var(--shadow-card);
}
.key i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot, var(--teal));
}
.k-dose { --dot: var(--teal); }
.k-symptom { --dot: var(--persimmon); }
.k-appetite { --dot: var(--ochre); }
.k-food { --dot: var(--moss); }
.k-body { --dot: var(--slate); }

.spoken {
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink-2);
  max-width: 34ch;
}
.spoken b { font-weight: 700; }
.spoken .t-dose { color: var(--teal-ink); }
.spoken .t-symptom { color: var(--persimmon-ink); }
.spoken .t-appetite { color: var(--ochre-ink); }
.spoken .t-food { color: var(--moss-ink); }
.spoken .t-body { color: var(--slate-ink); }

/* ---------- Feature rows ---------- */

.feature-rows { border-bottom: 1px solid var(--line); }
.feature-row {
  display: grid;
  grid-template-columns: 40px 1fr 1.5fr;
  gap: 26px;
  padding-block: 26px;
  border-top: 1px solid var(--line);
}
.feature-row p { color: var(--ink-2); }
.row-number {
  font-size: .82rem;
  font-weight: 700;
  color: var(--teal-ink);
  padding-top: 5px;
  font-variant-numeric: tabular-nums;
}
.section-tail { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 28px; }

.attribution { font-size: .85rem; padding-block: 14px; }
.section-tail .attribution { padding: 0; }

/* ---------- Plans ---------- */

.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; }
.plan {
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.plan h3 { font-size: 1.9rem; margin-bottom: 16px; }
.plan .eyebrow { margin-bottom: 14px; }
.plan p { color: var(--ink-2); font-size: .96rem; }
.plan .plan-price { font-weight: 700; color: var(--ink); line-height: 1.35; }
.plan a { font-size: .92rem; font-weight: 700; margin-top: auto; padding-top: 24px; }
.plan-free { background: var(--accent-fill); }
.plan-free h3, .plan-free .plan-price { color: var(--on-fill); }
.plan-free p, .plan-free a { color: color-mix(in srgb, var(--on-fill) 84%, transparent); }
.plan-free .eyebrow { color: var(--on-fill); }
.plan-free a:hover { color: var(--on-fill); }

.plan-detail {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  column-gap: 56px;
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid var(--line);
}
.plan-detail h2 { font-size: 1.75rem; grid-row: span 3; }
.plan-detail p { color: var(--ink-2); }

/* ---------- Blocks ---------- */

.story, .two-column { display: grid; grid-template-columns: .7fr 1.3fr; gap: 60px; }
.story h2 { margin-bottom: 22px; }
.story .text-link { display: inline-block; margin-top: 20px; }
.updates-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.updates-grid h2 { margin-bottom: 20px; }

.notice {
  padding: 14px 20px;
  border-radius: var(--radius-row);
  background: color-mix(in srgb, var(--teal) calc(var(--tint-wash) * 60%), var(--card));
  font-size: .93rem;
}
.callout {
  padding: 28px 32px;
  margin-top: 40px;
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--line);
}
.callout h2 { font-size: 1.5rem; margin-bottom: 12px; }
.callout p { max-width: 74ch; color: var(--ink-2); }
.callout a { display: inline-block; margin-top: 14px; font-weight: 700; }

.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.steps li { border-top: 2px solid var(--teal); padding-top: 22px; }
.steps h2 { font-size: 1.65rem; margin-bottom: 16px; }
.steps p { color: var(--ink-2); font-size: .96rem; }

.document-links { display: grid; margin-block: 30px; }
.document-links a { padding: 17px 0; border-bottom: 1px solid var(--line); font-weight: 700; text-decoration: none; }
.document-links a:hover { text-decoration: underline; }

.reading { max-width: 860px; }

/* ---------- FAQ ---------- */

.qa { border-top: 1px solid var(--line); }
.qa:last-of-type { border-bottom: 1px solid var(--line); }
.qa summary {
  position: relative;
  list-style: none;
  padding: 21px 40px 21px 0;
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 15px;
  color: var(--teal-ink);
  font-size: 1.4rem;
  font-weight: 600;
}
.qa[open] summary::after { content: "\2212"; }
.qa > div { padding-bottom: 24px; color: var(--ink-2); }

/* ---------- Forms ---------- */

form { min-width: 0; }
.signup-form, .form-card { display: grid; gap: 16px; }
.form-field { display: grid; gap: 7px; font-size: .88rem; font-weight: 700; }
.form-control {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 13px 15px;
  background: var(--card);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
}
.form-control::placeholder { color: var(--ink-3); }
textarea.form-control { min-height: 150px; resize: vertical; }
.form-honeypot { display: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field--wide { grid-column: 1 / -1; }
.form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: .86rem; color: var(--ink-2); }
input[type=checkbox] { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--teal); flex-shrink: 0; }
.signup-form button, .form-actions button { justify-self: start; }
.form-actions { display: grid; gap: 18px; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); padding-block: 48px 24px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: 50px; }
.footer-grid > div p { max-width: 32ch; margin-top: 16px; color: var(--ink-2); font-size: .9rem; }
.footer-grid nav { display: flex; flex-direction: column; align-items: start; gap: 10px; }
.footer-grid nav .eyebrow { margin: 0 0 8px; }
.footer-grid nav a { font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--ink-2); }
.footer-grid nav a:hover { color: var(--ink); text-decoration: underline; }
.footer-bottom {
  display: flex;
  gap: 44px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-top: 36px;
}
.footer-bottom p { max-width: 74ch; }
.footer-bottom .attribution { flex-shrink: 0; }

/* ---------- Legal pages ---------- */

.legal-heading { padding-bottom: 32px; }
.legal-heading h1 { font-size: clamp(2.2rem, 3.8vw, 3.2rem); max-width: 22ch; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; font-size: .86rem; color: var(--ink-2); }
.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-bottom: 72px;
}
.legal-toc { position: sticky; top: 96px; font-size: .86rem; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.legal-toc a { text-decoration: none; color: var(--ink-2); font-weight: 600; }
.legal-toc a:hover { color: var(--teal-ink); text-decoration: underline; }
.legal-content { max-width: 760px; }
.legal-summary {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px 30px;
  margin-bottom: 32px;
}
.legal-summary h2 { font-size: 1.5rem; }
.legal-summary ul { padding-left: 20px; margin-bottom: 0; color: var(--ink-2); }
.legal-content li + li { margin-top: 9px; }
.legal-section { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 28px; overflow-wrap: anywhere; }
.legal-section h2 { font-size: 1.65rem; margin-bottom: 16px; }
.legal-section h3 { font-size: 1rem; font-weight: 800; margin: 22px 0 10px; line-height: 1.45; }
.legal-section ul { padding-left: 22px; color: var(--ink-2); }
.legal-section p { color: var(--ink-2); }
.legal-section .data-list { margin: 0; }
.data-list > div { padding-block: 16px; border-bottom: 1px solid var(--line); }
dt { font-weight: 700; color: var(--ink); }
dd { margin: 6px 0 0; color: var(--ink-2); }
.draft-status {
  font-size: .86rem;
  border-radius: var(--radius-row);
  background: var(--card);
  color: var(--ink);
  padding: 14px 20px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
}
.legal-content .small { margin-top: 20px; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .site-nav { gap: 18px; flex-wrap: wrap; padding-block: 14px; min-height: 0; }
  .nav-links { order: 3; width: 100%; justify-content: space-between; margin: 0; gap: 12px; }
  .nav-cta { margin-left: auto; }
  .window-grid, .voice-flow { grid-template-columns: 1fr; gap: 30px; }
  .step-row { gap: 34px; }
  .plans { gap: 14px; }
  .plan { padding: 22px; }
  .updates-grid { gap: 36px; }
  .legal-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 32px; }
  .footer-grid { gap: 24px; }
  .footer-bottom { display: block; }
  .footer-bottom .attribution { margin-top: 12px; }
  .product-gallery .app-screen { grid-column: span 6; }
  .product-gallery .app-screen:last-child { grid-column: 4 / span 6; }
}

@media (max-width: 760px) {
  .wrap { width: calc(100% - 36px); }
  body { font-size: 16.5px; }
  h1 { font-size: 2.6rem; }
  .site-nav { gap: 10px; }
  .nav-links { flex-wrap: wrap; justify-content: flex-start; gap: 0 20px; }
  .nav-links a { font-size: .88rem; padding-block: 7px; }
  .nav-cta { padding: 9px 16px; font-size: .82rem; min-height: 40px; }
  .brand { font-size: 1.6rem; }
  /* On a phone the header carries the app icon alone. */
  .site-header .brand-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-header .brand-mark { width: 34px; height: 34px; border-radius: 7.6px; }
  .intake-hero { min-height: 540px; padding-block: 30px 26px; }
  .hero-icons { --icon-scale: .62; }
  .hero-icon { opacity: .82; }
  /* The call to action fills the width on a phone, so the two icons that sit
     beside it on a wide screen move out of its band. */
  .hero-icons .i-scalemass-fill { top: 81% !important; left: 8% !important; }
  .hero-icons .i-calendar { top: 95% !important; left: 33% !important; }
  .hero-icons .i-dumbbell-fill { top: 85% !important; left: 63% !important; }
  .hero-icons .i-drop-fill { top: 95% !important; left: 90% !important; }
  .hero-icons .i-waveform-path-ecg { top: 24% !important; left: 92% !important; }
  .hero-icons .i-figure-walk { top: 8% !important; left: 92% !important; }
  .hero-icons .i-note-text { top: 33% !important; left: 6% !important; }
  .hero-foot { margin-top: 20px; width: 100%; }
  .hero-foot .btn { min-width: 0; width: 100%; }
  .section { padding-block: 52px; }
  .section-first { padding-top: 4px; }
  .section-heading { margin-bottom: 28px; }
  .feature-row { grid-template-columns: 28px 1fr; gap: 8px 14px; padding-block: 22px; }
  .feature-row > div { grid-column: 2; }
  .feature-row h3 { font-size: 1.2rem; }
  .plans, .steps, .story, .two-column, .updates-grid, .window-pair, .tool-gallery, .voice-showcase { grid-template-columns: 1fr; gap: 26px; }
  .product-gallery { grid-template-columns: 1fr; gap: 36px; }
  .product-gallery .app-screen,
  .product-gallery .app-screen:nth-child(4),
  .product-gallery .app-screen:nth-child(5),
  .product-gallery .app-screen:last-child { grid-column: auto; }
  .voice-video { max-width: 360px; }
  .step-row { grid-template-columns: 1fr; gap: 22px; padding-block: 32px; }
  .step-row--flip .step-row__media { order: 0; }
  .plan { padding: 24px; }
  .plan h3 { font-size: 1.7rem; margin-bottom: 12px; }
  .story { gap: 6px; }
  .page-intro { padding-block: 36px 30px; }
  .plan-detail { display: block; }
  .plan-detail h2 { margin-bottom: 16px; }
  .callout { padding: 22px 24px; margin-top: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-grid > div { grid-column: 1 / -1; }
  .legal-layout { display: block; }
  .legal-toc { position: static; padding-bottom: 26px; }
  .legal-toc ol { grid-template-columns: 1fr 1fr; }
  .legal-summary { padding: 22px; }
  .legal-section h2 { font-size: 1.45rem; }
}

@media (max-width: 380px) {
  .wrap { width: calc(100% - 28px); }
  h1 { font-size: 2.25rem; }
  .form-grid, .footer-grid, .legal-toc ol { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-icon span { animation: none; }
}

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .site-footer, .skip-link, .legal-toc, .hero-icons { display: none; }
  .wrap { width: 100%; }
  .legal-layout { display: block; }
  .page-intro { padding: 0 0 18px; }
  h1 { font-size: 26pt !important; }
  h2 { break-after: avoid; }
  .legal-summary, .draft-status, .callout, .card { background: transparent; border: 1px solid #777; box-shadow: none; }
  a { color: inherit; }
  p, li { orphans: 3; widows: 3; }
}