/* ============================================================
   Mozart Health — marketing site
   2026-09-21 retheme, modelled on ecogreen.com.au: off-white page, near-black
   text, one olive green, pale sage panels, a single quiet grotesque at small
   sizes, square corners, left-aligned copy, generous space. Tokens below are
   the accepted values — see docs/design/brand.md, "Editorial theme". The
   wordmark keeps Newsreader Light and its own fixed colors.
   ============================================================ */

:root {
  /* --charcoal is the name the dark blocks were built on; it is olive now. */
  --charcoal: #4e6548;
  --ink: #292929;
  --text: #292929;
  --text-2: #5b5f59;
  --text-3: #8a8f87;
  --silver: #a9aea6;
  --line: #e0e3dd;
  --line-dark: rgba(255, 255, 255, 0.24);
  --paper: #fafafa;
  --mist: #eaede9;
  --sand: #e5e3df;

  --moss: #4e6548;
  --moss-on-dark: #dfe7da;
  --logo-ink: #20362c;
  --logo-sub: #7c8d7f;
  --logo-ink-dark: #f4f7f2;
  --logo-sub-dark: #c9d4c4;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --display: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --ui: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1440px;
  --gutter: clamp(18px, 2.8vw, 40px);
  --header-h: 72px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }
.on-dark :focus-visible, .hero :focus-visible { outline-color: var(--moss-on-dark); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--paper); color: var(--ink); padding: 10px 16px; }

/* Retired ambient background (the privacy page still carries the markup). */
.bg { display: none; }

/* ---------- Type ---------- */
.eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--moss);
  margin-bottom: 8px;
}
.eyebrow-dot { display: none; }
.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--moss);
}
.section-lead, .lead { font-size: 16px; color: var(--text-2); max-width: 60ch; }
.rule { width: 48px; height: 1px; background: var(--moss); border: 0; margin: 28px 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 24px;
  font-family: var(--ui); font-size: 14px; font-weight: 400; white-space: nowrap;
  border: 1px solid var(--moss); color: var(--moss); background: transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  cursor: pointer;
}
.btn:hover { background: var(--moss); color: var(--paper); }
.btn--primary { background: var(--moss); color: var(--paper); }
.btn--primary:hover { background: #3f533a; border-color: #3f533a; }
.btn--soft { background: var(--mist); border-color: var(--mist); }
.btn svg { width: 15px; height: 15px; flex: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  /* No backdrop-filter here: it would make the header the containing block
     for the fixed full-screen mobile menu and clip it to the header bar. */
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; flex: none; }
.brand-lockup { height: 34px; width: 187px; text-rendering: geometricPrecision; shape-rendering: geometricPrecision; }
.brand-lockup--sm { height: 30px; width: 165px; }
.brand-lockup .wm { font-family: var(--serif); font-weight: 300; }
.brand-lockup path, .brand-lockup text, .brand-lockup tspan { transition: fill 0.35s var(--ease), stroke 0.35s var(--ease); }

.nav { display: flex; gap: 34px; margin-left: auto; }
.nav a, .header-login {
  font-family: var(--ui); font-size: 14px; font-weight: 400; color: var(--text);
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nav a:hover, .header-login:hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }
.header-actions { display: flex; align-items: center; gap: 26px; }
.header-cta { min-height: 38px; padding: 0 18px; background: var(--mist); border-color: var(--mist); }

.menu-toggle {
  display: none; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
}
.menu-toggle span { display: block; width: 26px; height: 1px; margin: 6px auto; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.3s; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-header.is-stuck { border-bottom-color: var(--line); }

/* Landing view, desktop: until the page scrolls, the header lives inside the
   left (copy) half so the photograph owns the whole right side, top to bottom.
   It lines up with the hero copy column, and drops the "Get the app" button
   because the hero carries that call to action itself. Once scrolled it is the
   ordinary full-width bar. */
@media (min-width: 901px) {
  .has-hero .site-header { position: fixed; left: 0; right: 0; }
  .has-hero .site-header:not(.is-stuck) { right: 50%; background: transparent; }
  .has-hero .site-header:not(.is-stuck) .header-inner {
    max-width: calc(var(--wrap) / 2 + var(--gutter)); margin-right: 0;
    padding-right: 28px; gap: 20px;
  }
  .has-hero .site-header:not(.is-stuck) .nav { gap: 20px; }
  .has-hero .site-header:not(.is-stuck) .nav a,
  .has-hero .site-header:not(.is-stuck) .header-login { font-size: 13.5px; white-space: nowrap; }
  .has-hero .site-header:not(.is-stuck) .header-cta { display: none; }
  .has-hero .hero { min-height: 100vh; min-height: 100svh; }
  .has-hero .hero-inner { padding-top: calc(var(--header-h) + 4px); }
}
/* Narrower desktops: the half-width bar cannot hold logo and links on one
   line, so the links drop to their own row under the logo. */
@media (min-width: 901px) and (max-width: 1240px) {
  .has-hero .site-header:not(.is-stuck) { height: auto; }
  .has-hero .site-header:not(.is-stuck) .header-inner { flex-wrap: wrap; row-gap: 0; padding-top: 18px; }
  .has-hero .site-header:not(.is-stuck) .brand { flex-basis: 100%; }
  .has-hero .site-header:not(.is-stuck) .nav { margin-left: 0; }
  .has-hero .hero-inner { padding-top: calc(var(--header-h) + 40px); }
}
.site-footer .brand-lockup path { stroke: var(--moss-on-dark); }
.site-footer .brand-lockup text { fill: var(--logo-ink-dark); }
.site-footer .brand-lockup tspan { fill: var(--logo-sub-dark); }

/* ---------- Hero ---------- */
/* Split view: copy on the page color at left, one full-height photograph at
   right. The copy column lines up with the page's content edge. */
.hero {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
}
.hero-media { order: 2; position: relative; min-height: 420px; background: var(--mist); }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-inner {
  position: relative; align-self: start; justify-self: end;
  width: 100%; max-width: calc(var(--wrap) / 2 + var(--gutter));
  padding: 40px clamp(28px, 5vw, 84px) 48px var(--gutter);
}
.hero-title {
  font-weight: 300; font-size: clamp(30px, 3.3vw, 44px); line-height: 1.14;
  letter-spacing: -0.02em; color: var(--moss);
}
/* The second line answers the first, so it sits a size down from it. */
.hero-title-2 { display: block; font-weight: 300; font-size: 0.78em; letter-spacing: -0.015em; }
/* A reader's own question, then the answer on its own line in the heading's
   green (the title's two-line shape, one step down; one step up from the
   paragraph under it). */
.hero-line {
  margin-top: 18px;
  font-size: clamp(18px, 1.6vw, 21px); line-height: 1.4; font-weight: 400;
  letter-spacing: -0.01em; color: var(--ink);
}
.hero-line-answer { display: block; color: var(--moss); }
.hero-sub { max-width: 46ch; margin-top: 20px; font-size: 16.5px; line-height: 1.65; color: var(--text); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.icon-helix { width: 12px; height: 18px; }
/* Three short proof lines under the buttons, each on its own hairline. */
.hero-points { margin-top: 24px; max-width: 50ch; }
.hero-points li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.5; color: var(--text-2);
}
.hero-points li:last-child { border-bottom: 1px solid var(--line); }
.hero-points li::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--moss); transform: translateY(-4px); }
.hero-scroll { display: none; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(52px, 6vw, 84px); }
.section--compact { padding-block: clamp(48px, 5vw, 68px); }
/* Anchored sections land right under the fixed header (html's
   scroll-padding-top already reserves the bar), so their own top padding is
   trimmed and the heading sits close to it. */
.section--anchored { padding-top: clamp(30px, 3vw, 40px); }
.section--mist { background: var(--mist); }
.section-head { max-width: 720px; margin-bottom: clamp(24px, 2.8vw, 36px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .section-lead { margin-inline: auto; }
.display + .section-lead { margin-top: 14px; }


/* ---------- Genetics ---------- */
.genetics { display: grid; grid-template-columns: minmax(0, 0.62fr) 1fr; gap: clamp(32px, 5vw, 76px); align-items: start; }
/* The photo drops to the heading's line rather than the eyebrow above it. */
.genetics-photo { position: relative; margin-top: 31px; }
.genetics-photo img { width: 100%; aspect-ratio: 4 / 5; max-height: 440px; object-fit: cover; object-position: center 30%; filter: saturate(0.88); }
.points { margin-top: 26px; }
.points li { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--moss); }
.points h3, .step h3, .cell h3, .limits h3 {
  font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.5;
}
.points p { color: var(--text-2); font-size: 15px; line-height: 1.6; }

/* ---------- Cells (track + feature grids) ---------- */
/* Hairline grid: the 1px gap shows the container's line color. */
/* Open columns under a single hairline: no boxes, no chips. */
.cells { display: grid; gap: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 48px); }
.cells--4 { grid-template-columns: repeat(4, 1fr); }
.cells--3 { grid-template-columns: repeat(3, 1fr); }
.cell { padding-top: 18px; border-top: 1px solid var(--moss); }
.cell p { margin-top: 6px; color: var(--text-2); font-size: 15px; line-height: 1.6; }

/* Panels: a quiet raise on hover, the icon inline to the left of the title on
   its own tinted plate, with the body copy aligned under the title. */
.cells--4, .cells--3 { gap: clamp(14px, 1.4vw, 20px); }
.cells--4 .cell, .cells--3 .cell {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
  padding: clamp(20px, 2vw, 26px); border: 1px solid var(--line); border-top: 1px solid var(--line);
  /* The panel carries a whisper of its own icon tint, fading out before the
     body copy starts, so the set reads as a family rather than six boxes. */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--icon-tint, var(--mist)) 34%, var(--paper)) 0%, var(--paper) 58%);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
/* A hairline of the panel's own accent, drawn across the top on hover. */
.cells--4 .cell::before, .cells--3 .cell::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--accent, var(--moss));
  transform: scaleX(0); transform-origin: left; opacity: 0.85;
  transition: transform 0.45s var(--ease);
}
.cells--4 .cell:hover::before, .cells--3 .cell:hover::before { transform: scaleX(1); }
.cells--4 .cell:hover, .cells--3 .cell:hover {
  border-color: var(--moss); transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(41, 41, 41, 0.07);
}
.cells--4 .cell > :not(.cell-icon), .cells--3 .cell > :not(.cell-icon) { grid-column: 2; }
.cells--4 .cell h3, .cells--3 .cell h3 { letter-spacing: -0.005em; }
.cells--4 .cell-icon, .cells--3 .cell-icon {
  grid-row: 1; grid-column: 1;
  display: grid; place-items: center; width: 38px; height: 38px; margin: 0;
  background: var(--icon-tint, var(--mist)); color: var(--accent, var(--moss));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--moss)) 16%, transparent);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cells--4 .cell-icon svg, .cells--3 .cell-icon svg { width: 19px; height: 19px; }
.cells--4 .cell:hover .cell-icon, .cells--3 .cell:hover .cell-icon {
  background: var(--accent, var(--moss)); color: var(--paper);
  box-shadow: inset 0 0 0 1px transparent;
}
/* Subtle, distinct tints, warm to cool around the set. */
.cell--1, .cells--3 .cell:nth-child(6n + 1) { --icon-tint: #e7ece2; --accent: #5c7350; }
.cell--2, .cells--3 .cell:nth-child(6n + 2) { --icon-tint: #e4eaec; --accent: #4f6a72; }
.cell--3, .cells--3 .cell:nth-child(6n + 3) { --icon-tint: #eeeae2; --accent: #7a6a4c; }
.cell--4, .cells--3 .cell:nth-child(6n + 4) { --icon-tint: #e8e6ee; --accent: #61597c; }
.cells--3 .cell:nth-child(6n + 5) { --icon-tint: #e6ebe7; --accent: #53705f; }
.cells--3 .cell:nth-child(6n) { --icon-tint: #ede7e4; --accent: #77604f; }
.tags { display: flex; flex-wrap: wrap; margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--moss); }
.tags li:not(:last-child)::after { content: "\00B7"; margin-inline: 8px; color: var(--text-3); }

.limits {
  margin-top: clamp(32px, 3.5vw, 48px); padding: 22px clamp(20px, 2.4vw, 30px); background: var(--mist);
}
.limits p { margin-top: 8px; color: var(--text-2); font-size: 15.5px; line-height: 1.7; max-width: 78ch; }

.cell-icon { width: 22px; height: 22px; color: var(--moss); margin-bottom: 12px; flex: none; }
.cell-icon svg { width: 100%; height: 100%; }
.limits { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.limits .cell-icon {
  display: grid; place-items: center; width: 38px; height: 38px; margin: 0;
  background: var(--paper); color: var(--moss);
}
.limits .cell-icon svg { width: 19px; height: 19px; }
.limits > div { min-width: 0; }

/* Section heading beside a photograph; photos are spread one per section. */
.head-split { display: grid; grid-template-columns: 1fr minmax(0, 340px);
  --head-photo-col: 340px; gap: clamp(36px, 6vw, 96px); align-items: start; margin-bottom: clamp(28px, 3.5vw, 44px); }
.head-split .section-head { margin-bottom: 0; }
.head-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; filter: saturate(0.92); }
.split-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; filter: saturate(0.92); }
/* The oak is a wide landscape and loses its crown and its outer branches to
   a 3:2 crop, so it keeps its own frame. */
#grows .split-photo img { aspect-ratio: 1461 / 821; object-position: center; }
.head-split:has(.head-photo--wide) { grid-template-columns: 1fr minmax(0, 480px); align-items: center; }
.split--flip > :first-child { order: 2; }

/* ---------- Get started ---------- */
.cta .hero-ctas { margin-top: 28px; }

/* ---------- Quote band ---------- */
.band { color: var(--paper); background: var(--charcoal); padding-block: clamp(72px, 9vw, 120px); }
.band .eyebrow { color: var(--moss-on-dark); }
.band blockquote {
  margin: 0; max-width: 22em;
  font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.2; letter-spacing: -0.02em;
}
.band cite {
  display: block; max-width: 52ch; margin: 20px 0 0; font-style: normal;
  font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.86);
}

/* ---------- Method (steps) ---------- */
/* What you can track: copy and the four panels on the left, one portrait
   photograph filling the right column beside them. */
.track-split { display: grid; grid-template-columns: 1fr minmax(0, 400px); gap: clamp(28px, 3.5vw, 52px); align-items: start; }
/* The photo drops clear of the section heading beside it. */
.track-photo { position: relative; margin-top: 50px; }
.track-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; filter: saturate(0.92); }
.cells--tight { gap: 12px; }
.cells--tight.cells--4 { grid-template-columns: repeat(2, 1fr); }
.cells--tight .cell { padding: 16px 18px 18px; }
.cells--tight .cell-icon { width: 32px; height: 32px; }
.cells--tight .cell-icon svg { width: 16px; height: 16px; }
.cells--tight .cell { column-gap: 12px; }
.cells--tight .cell h3 { font-size: 15px; }
.cells--tight .cell p { margin-top: 4px; font-size: 14.5px; }
.cells--tight .tags { margin-top: 8px; font-size: 13px; }
.track-split .limits { margin-top: clamp(16px, 1.6vw, 20px); padding: 18px clamp(18px, 2vw, 24px); }
.track-split .limits p { font-size: 14.5px; line-height: 1.6; }

/* How it works: heading and the three steps share the left column, with the
   photograph filling the right one beside them. */
.how-split { display: grid; grid-template-columns: 1fr minmax(0, 480px); gap: clamp(32px, 5vw, 76px); align-items: center; }
.how-photo img { width: 100%; height: 100%; max-height: 480px; object-fit: cover; object-position: center 35%; filter: saturate(0.92); }
.how-copy .section-head { margin-bottom: clamp(22px, 2.6vw, 32px); }

.steps--list { display: block; max-width: 880px; }
.steps--list .step {
  display: grid; grid-template-columns: 30px minmax(0, 190px) 1fr; align-items: baseline; gap: 4px 20px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.steps--list .step:last-child { border-bottom: 1px solid var(--line); }
.steps--list .step-num { font-size: 13.5px; line-height: inherit; color: var(--moss); margin: 0; }
.steps--list .step p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.6; }

/* ---------- A life, not a dashboard (photo mosaic) ---------- */
.mosaic { margin-top: clamp(28px, 3.5vw, 48px); display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.mosaic figure { position: relative; overflow: hidden; background: var(--mist); }
.mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); transition: transform 1.2s var(--ease); }
.mosaic figure:hover img { transform: scale(1.035); }
.mosaic .m-a { grid-column: span 7; aspect-ratio: 16 / 10; }
.mosaic .m-b { grid-column: span 5; aspect-ratio: auto; }
.mosaic .m-c { grid-column: span 5; aspect-ratio: 4 / 3; }
.mosaic .m-d { grid-column: span 7; aspect-ratio: auto; }


/* ---------- Privacy ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.split .trust-list { margin-top: 28px; }
.split .trust-list--top { margin-top: 0; }
.trust-more { margin-top: 32px; }
.trust-list li {
  display: flex; gap: 18px; align-items: baseline; padding: 22px 0;
  border-bottom: 1px solid var(--line); color: var(--text);
}
.trust-list li { padding: 16px 0; }
.trust-list li:first-child { border-top: 1px solid var(--line); }
.trust-list li::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--moss); transform: translateY(-5px); }

/* ---------- Get the app ---------- */
.app { background: var(--charcoal); color: var(--paper); }
.app-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.app-photo { position: relative; min-height: 420px; }
.app-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
.app-copy { padding: clamp(64px, 9vw, 130px) var(--gutter); max-width: 640px; align-self: center; }
.app .eyebrow { color: var(--moss-on-dark); }
.app .display { color: var(--paper); }
.app-copy > p { margin-top: 20px; color: rgba(255, 255, 255, 0.88); }
.stores { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.store {
  display: inline-flex; align-items: center; gap: 14px; min-width: 208px;
  padding: 12px 22px; border: 1px solid var(--line-dark); color: var(--paper);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.store svg { width: 24px; height: 24px; flex: none; fill: currentColor; }
.store small { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.72); line-height: 1.5; }
.store strong { display: block; font-size: 16px; font-weight: 500; line-height: 1.3; }
a.store:hover { border-color: var(--paper); background: rgba(255, 255, 255, 0.06); }
.store[aria-disabled="true"] { cursor: default; }
.app-web { margin-top: 30px; font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.app-web a { color: var(--paper); border-bottom: 1px solid var(--moss-on-dark); padding-bottom: 2px; }
.app-web a:hover { color: var(--moss-on-dark); }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: rgba(255, 255, 255, 0.7); border-top: 1px solid var(--line-dark); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; padding-block: 64px 40px; }
.footer-tag { margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.footer-nav a { font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.footer-nav a:hover { color: var(--paper); }
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px;
  padding-block: 28px 44px; border-top: 1px solid var(--line-dark);
  font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.68);
}
.footer-legal .disclaimer { max-width: 58ch; text-align: right; }

/* ---------- Reveal on scroll ---------- */
/* Additive: without JS (or with reduced motion) everything is simply visible.
   A short rise and a long fade, staggered a little across siblings by --d
   (set in main.js) so a row of cards arrives in sequence rather than at once. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1.05s var(--ease) var(--d, 0ms),
    transform 1.05s var(--ease) var(--d, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; will-change: auto; }

/* Photographs settle out of a barely perceptible zoom as they fade in. */
.js figure.reveal img, .js .app-photo.reveal img {
  transform: scale(1.03);
  transition: transform 1.4s var(--ease) var(--d, 0ms);
}
.js figure.reveal.is-in img, .js .app-photo.reveal.is-in img { transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .menu-toggle { display: block; margin-left: auto; }
  .header-actions { display: none; }
  .nav {
    position: fixed; inset: 0; z-index: -1; margin: 0;
    flex-direction: column; justify-content: center; align-items: center; gap: 30px;
    background: var(--charcoal); opacity: 0; visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s;
  }
  .nav a, .site-header .nav a { color: var(--paper) !important; font-size: 22px; }
  .nav .nav-mobile { display: block; }
  .menu-open .nav { opacity: 1; visibility: visible; }
  .menu-open .site-header { background: transparent !important; border-bottom-color: transparent !important; }
  .menu-open .menu-toggle { color: var(--paper) !important; }
  .menu-open .brand-lockup path { stroke: var(--moss-on-dark); }
  .menu-open .brand-lockup text { fill: var(--logo-ink-dark); }
  .menu-open .brand-lockup tspan { fill: var(--logo-sub-dark); }

  .hero, .genetics, .split, .head-split, .app-grid { grid-template-columns: 1fr; }
  .split--flip > :first-child { order: 0; }
  .hero { min-height: 0; }
  .hero-inner { max-width: none; padding: 48px var(--gutter) 44px; }
  .hero-media { min-height: 56vw; }
  .cells--4, .cells--3 { grid-template-columns: 1fr 1fr; }
  .genetics-photo { max-width: 460px; margin-top: 0; }
  .track-split { grid-template-columns: 1fr; }
  .track-photo { order: -1; min-height: 0; height: auto; margin-top: 0; }
  .track-photo img { aspect-ratio: 16 / 10; }
  .how-split { grid-template-columns: 1fr; }
  .how-photo { order: -1; }
  .how-photo img { max-height: 300px; }
  .steps--list .step { grid-template-columns: 30px 1fr; gap: 6px 16px; padding: 18px 0; }
  .steps--list .step p { grid-column: 2; }
  .app-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .app-copy { max-width: none; }
}
@media (min-width: 901px) { .nav .nav-mobile { display: none; } }
@media (max-width: 680px) {
  body { font-size: 16px; }
  .points li { grid-template-columns: 1fr; gap: 8px; }
  .mosaic .m-a, .mosaic .m-b, .mosaic .m-c, .mosaic .m-d { grid-column: span 12; aspect-ratio: 4 / 3; }
  .store { flex: 1 1 100%; }
  .cells--4, .cells--3 { grid-template-columns: 1fr; }
  .limits { grid-template-columns: 1fr; }
  .footer-legal .disclaimer { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js figure.reveal img, .js .app-photo.reveal img {
    opacity: 1; transform: none; transition: none;
  }
  .mosaic img { transition: none; }
}

/* ---------- Legal / privacy page ---------- */
.legal { max-width: 820px; padding-block: 84px 56px; }
.legal-hero h1 { font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -0.02em; color: var(--moss); }
.legal-hero .section-lead { margin-top: 24px; }
.legal-meta { color: var(--text-3); font-size: 14px; margin: 14px 0 0; }
.legal-section { margin-top: 56px; }
.legal-section h2 { font-weight: 500; font-size: 18px; color: var(--ink); margin: 0 0 18px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal-section p, .legal-section li { color: var(--text-2); }
.legal-section p + p { margin-top: 14px; }
.legal-section ul { padding-left: 22px; margin: 12px 0; list-style: disc; }
.legal-section li { margin: 8px 0; }
.legal-section li strong { color: var(--ink); font-weight: 600; }
.legal-section a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; }
.commit-list { list-style: none !important; padding: 0 !important; display: grid; gap: 0; }
.commit-list li { border-bottom: 1px solid var(--line); padding: 18px 0; margin: 0; }
.legal details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.legal summary { cursor: pointer; font-weight: 500; color: var(--ink); }
.legal details p { margin: 10px 0 0; }
.legal-disclaimer { font-size: 14px; }

@media (max-width: 680px) { .legal { padding-block: 56px 32px; } }