/* KarrotCal marketing + legal pages — shared styles.

   The palette, the type and the rules are the app's own (constants/theme.ts):
   a warm paper canvas, the carrot in its four roles, Nunito 500 for every word
   and 700 for every number. Flat: no gradients, no shadows, no blobs. Depth is
   surface lightness plus space, and hierarchy is type plus whitespace.

   Carrot is rationed the way it is in the app. A saturated fill means one of:
   press this (the nav CTA, one per viewport), these are the calories (the
   budget bar in the mockups), you logged this day (the week strip), you are
   here (the mockup's lit tab), or this one is chosen. Everything else that
   wants to feel orange takes the wash (--surface-2) or the ink
   (--carrot-deep), neither of which is capped.

   Sections are grouped: SHARED (header / footer / buttons / legal — used by
   index, privacy, terms), LANDING (index.html only) and MOCKUP (the device
   drawings, index.html only). Editing LANDING never touches the legal pages. */

:root {
  /* Paper ramp. Every step below the canvas is a peach, not a beige: 14%
     carrot mixed in, luminance held. Retune by that rule, never by eye. */
  --paper: #fdf7f0;
  --surface: #ffffff;
  --surface-2: #fee5d2;
  --surface-3: #f9dfcb;
  --hairline: #f4dac5;
  --hairline-strong: #d4b8a1;

  /* Ink. Warm, never pure black. */
  --ink: #1a1512;
  --ink-2: #5c5148;
  --ink-muted: #6f645b;

  /* The brand, in its roles. --carrot is the fill (2.37:1, a shape and never a
     word); --carrot-deep is the same hue taken to where it reads as text
     (5.22:1) and is also the press step. */
  --carrot: #f28654;
  --carrot-deep: #ac4b1d;

  /* One green in two steps: the leaf is the shape, success is the same hue
     taken down until it can carry a small mark. */
  --leaf: #7ab26e;
  --success: #3e7435;

  /* Macro pigments. Warm-shifted so they sit on the paper rather than on top
     of it; their separation is carried by lightness, not hue. */
  --protein: #636ab7;
  --carbs: #9c6f00;
  --fat: #704574;
  --fiber: #416758;

  /* The honest A–F ladder. Its own scale, deliberately not Nutri-Score. */
  --grade-a: #1b6e4c;
  --grade-b: #2a7e42;
  --grade-c: #946a00;
  --grade-d: #a85e27;
  --grade-e: #c0392b;
  --grade-f: #8e2a20;

  --maxw: 1040px;
  --gutter: 24px;

  /* 4pt grid, the app's spacing scale. */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-xxl: 32px;
  --sp-xxxl: 48px;
  --sp-huge: 64px;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* One text weight for every word. Only figures go to 700, which is what the
   .num class is for. */
h1,
h2,
h3,
strong,
b {
  font-weight: 500;
}

.num {
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}

a {
  color: var(--ink);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

img,
svg {
  max-width: 100%;
}

/* Small uppercase label above a section heading. Ink, not carrot: chrome drawn
   in a hue competes with the marks on the page that mean something. */
.eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: var(--sp-md);
}

/* ============================================================
   SHARED — buttons
   ============================================================ */

/* The primary button is the carrot: a pill fill that grows two leaves out of
   its top edge, because the fill and the leaves are one idea. One of these per
   viewport at rest — the moment a second pressable turns orange it stops
   meaning press. */
.cta {
  position: relative;
  display: inline-block;
}
.btn {
  position: relative; /* paints over the tuft's rooted ends, as in the app */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  border-radius: var(--r-pill);
  padding: 12px 22px;
  font-size: 15px;
  transition: background 0.15s ease;
}
.btn:hover {
  text-decoration: none;
}
.btn-primary {
  background: var(--carrot);
  /* White is a look rather than a contrast choice (2.53:1), the same trade the
     app's primary Button makes. --ink is the accessible label at 7.17:1 if it
     is ever reversed. */
  color: var(--surface);
}
.btn-primary:hover,
.btn-primary:active {
  background: var(--carrot-deep); /* a press deepens, never fades */
}
/* The tuft: two blades rooted at one point on the top edge, fanning apart by
   about what the mascot's two do. A blade is a plain ellipse, the same shape
   LeafBlade draws. Tucked under the edge so the opaque pill eats their ends. */
.tuft {
  position: absolute;
  left: 42%;
  bottom: calc(100% - 7px);
  width: 0;
  height: 18px;
  pointer-events: none;
}
.tuft i {
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 6.5px;
  height: 18px;
  border-radius: 50%;
  background: var(--leaf);
  transform-origin: 50% 100%;
}
.tuft i:first-child {
  transform: rotate(-34deg);
}
.tuft i:last-child {
  transform: rotate(34deg);
}

/* ============================================================
   SHARED — site header
   ============================================================ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  padding: var(--sp-lg) var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  font-size: 19px;
  color: var(--ink);
}
.brand:hover {
  text-decoration: none;
}
.brand-logo {
  width: 34px;
  height: 34px;
  display: block;
  border-radius: 8px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
  font-size: 15px;
}
.nav-links a {
  color: var(--ink-2);
}
.nav-links a:hover {
  color: var(--ink);
}
/* The page's one "press this" carrot. */
.nav-links .cta .btn {
  padding: 10px 18px;
  font-size: 14px;
}

/* ============================================================
   LANDING — index.html only
   ============================================================ */

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-huge) var(--gutter) 0;
}
.section h2 {
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-md);
}
.section .sub {
  color: var(--ink-2);
  font-size: 17px;
  max-width: 56ch;
  margin: 0 0 var(--sp-xxl);
}

/* ---- Hero ---- */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-xxl) var(--gutter) var(--sp-xxxl);
  display: flex;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}
.hero-copy {
  flex: 1 1 0;
  max-width: 560px;
}
.hero h1 {
  font-size: clamp(34px, 5.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 var(--sp-xl);
}
/* The highlighted word keeps its ink and takes the marker underneath, which is
   the same ribbon and the same leaf green as the app's Underline. */
.hl {
  position: relative;
  white-space: nowrap;
}
.hl::after {
  content: "";
  position: absolute;
  left: -1%;
  right: -1%;
  bottom: -0.1em;
  height: 0.2em;
  background: url("underline.svg") no-repeat center / 100% 100%;
  pointer-events: none;
}
.hero .lead {
  font-size: clamp(17px, 2vw, 19px);
  color: var(--ink-2);
  margin: 0 0 var(--sp-xl);
  max-width: 52ch;
  text-wrap: pretty;
}
.hero .lead strong {
  color: var(--ink);
}
.hero-art {
  flex: 0 0 auto;
}

/* ---- Store badges ---- */
.store-badges {
  display: flex;
  gap: var(--sp-md);
  flex-wrap: wrap;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--r-md);
  padding: 11px 20px;
  min-width: 196px;
  transition: background 0.15s ease;
}
.badge:hover {
  text-decoration: none;
  background: #0f0c0a;
}
.badge svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}
.badge-small {
  font-size: 11px;
  opacity: 0.86;
}
.badge-big {
  font-size: 17px;
}
.store-note {
  margin: var(--sp-lg) 0 0;
  font-size: 14px;
  color: var(--ink-muted);
}
.store-note .num {
  color: var(--ink);
}
.privacy-note {
  margin: var(--sp-md) 0 0;
  font-size: 14px;
  color: var(--ink-2);
}

/* ---- How it works ---- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xxl) var(--sp-xl);
}
.step h3 {
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: var(--sp-lg) 0 var(--sp-sm);
}
.step p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
}
/* Each step carries a true-to-app drawing, sitting straight on the paper. No
   card around it: hierarchy is the drawing, the heading and the space between
   them. The fixed height is only there to line the three up. */
.step-art {
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- The honest score ---- */
.grades {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  margin-bottom: var(--sp-xxl);
}
.grade {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 14px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 6px 14px 6px 6px;
}
/* The letter fills its disc under a white glyph, the way the log row's grade
   disc does. Every step of the ladder clears 4.5:1 on paper as ink too. */
.grade-disc {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--surface);
  font-weight: 700;
  font-size: 13px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}
/* A chip carries no border in either state: the fill alone says which one it is
   and which one is picked. Chosen fills carrot under a white label. */
.chip {
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 14px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
}
.chip.on {
  background: var(--carrot);
  color: var(--surface);
}
.chip-note {
  max-width: 56ch;
  margin: var(--sp-lg) 0 0;
  font-size: 14px;
  color: var(--ink-muted);
}

/* ---- Values ---- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xxl) var(--sp-xl);
}
.value h3 {
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-sm);
}
.value p {
  color: var(--ink-2);
  font-size: 15px;
  margin: 0;
}
/* ---- Closing CTA ---- */
/* The wash, not a saturated slab: this is where the brand covers real area for
   free, without spending the fill that has to keep meaning something. */
.cta-band {
  background: var(--surface-2);
  border-radius: var(--r-xl);
  padding: var(--sp-xxxl) var(--sp-xl);
  margin: var(--sp-huge) 0 0;
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-md);
}
.cta-band .cta-sub {
  color: var(--ink-2);
  margin: 0 auto var(--sp-xl);
  max-width: 46ch;
  font-size: 16px;
}
.cta-band .store-badges {
  justify-content: center;
}
.cta-band .store-note {
  color: var(--ink-2);
}
.cta-mascot {
  height: 76px;
  width: auto;
  display: block;
  margin: 0 auto var(--sp-lg);
}

/* ---- Entrance ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *,
  .hero-art {
    animation: rise 0.55s ease both;
  }
  .hero h1 {
    animation-delay: 0.04s;
  }
  .hero .lead {
    animation-delay: 0.1s;
  }
  .hero .store-badges {
    animation-delay: 0.16s;
  }
  .hero .store-note {
    animation-delay: 0.2s;
  }
  .hero .privacy-note {
    animation-delay: 0.24s;
  }
  .hero-art {
    animation-delay: 0.18s;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   MOCKUP — the app, drawn in HTML

   Every value here is the app's own, scaled to a 300px-wide screen. It is a
   drawing of the current build, not a screenshot: when the app moves, this has
   to move with it or the page starts advertising something that isn't there.
   ============================================================ */

.phone {
  --screen-w: 300px;
  --wk-square: 22px;
  width: calc(var(--screen-w) + 16px);
  padding: 8px;
  border-radius: 46px;
  background: #241d18;
}
.phone-screen {
  width: var(--screen-w);
  height: 612px;
  border-radius: 38px;
  background: var(--paper);
  overflow: hidden;
  position: relative;
  padding: 14px 18px 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink);
}

/* The greeting: the carrot saying hello, which is the one place the mascot
   appears on the dashboard. Nothing that reports a figure gets one. */
.mock-greet {
  display: flex;
  align-items: center;
  gap: 7px;
}
.mock-greet img {
  height: 30px;
  width: auto;
  display: block;
}
.mock-bubble {
  position: relative;
  background: var(--surface-2);
  border: 2px solid var(--surface-3);
  border-radius: var(--r-lg);
  padding: 6px 10px;
  font-size: 11px;
}
.mock-bubble::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  background: var(--surface-2);
  border-left: 2px solid var(--surface-3);
  border-bottom: 2px solid var(--surface-3);
  transform: rotate(45deg);
}
.mock-dots {
  color: var(--ink-muted);
  letter-spacing: 1px;
}

/* The free-scan counter, which is Today's whole "press this" budget. */
.mock-scanpill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  background: var(--carrot);
  color: var(--surface);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-size: 11px;
}
.mock-scanpill svg {
  width: 12px;
  height: 12px;
}
.mock-tuft {
  position: absolute;
  left: 44%;
  bottom: calc(100% - 4px);
  width: 0;
  height: 11px;
}
.mock-tuft i {
  position: absolute;
  bottom: 0;
  left: -2px;
  width: 4px;
  height: 11px;
  border-radius: 50%;
  background: var(--leaf);
  transform-origin: 50% 100%;
}
.mock-tuft i:first-child {
  transform: rotate(-34deg);
}
.mock-tuft i:last-child {
  transform: rotate(34deg);
}

/* The week: one small square a day, runs of logged days merging into a single
   block, a sprig per logged day. A count of what you did, never a verdict. */
.mock-week {
  position: relative;
  margin-top: 22px;
  height: 52px;
}
.mock-week-fills {
  position: absolute;
  inset: 9px 0 auto 0;
  height: var(--wk-square);
}
.wk-fill {
  --col: calc(100% / 7);
  --inset: calc((var(--col) - var(--wk-square)) / 2);
  position: absolute;
  top: 0;
  height: var(--wk-square);
  border-radius: 7px;
  left: calc(var(--col) * var(--s) + var(--inset));
  width: calc(var(--col) * var(--n) - var(--inset) * 2);
  background: var(--carrot);
}
.wk-fill.empty {
  background: var(--surface);
}
.wk-fill.today {
  background: none;
  border: 2px solid var(--ink-muted);
}
.mock-week-days {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.wk-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 9px;
}
.wk-i {
  height: var(--wk-square);
  display: grid;
  place-items: center;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--ink-muted);
}
.wk-day.logged .wk-i {
  color: var(--surface);
  font-weight: 700;
}
.wk-d {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.wk-day:not(.logged) .wk-d {
  color: var(--ink-muted);
}
/* Rooted under the square's top edge, so the fill eats their ends. */
.wk-sprig {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 0;
  height: 0;
}
.wk-sprig i {
  position: absolute;
  bottom: 0;
  left: -1.5px;
  width: 3.2px;
  height: 9px;
  border-radius: 50%;
  background: var(--leaf);
  transform-origin: 50% 100%;
}
.wk-sprig i:first-child {
  transform: rotate(-34deg);
}
.wk-sprig i:last-child {
  transform: rotate(34deg);
}

/* The calorie budget: the remaining figure over a bar whose whole width is the
   day. No road past the end, and nothing drawn beyond it. */
.mock-cal {
  margin-top: 26px;
  text-align: center;
}
.mock-cal-num {
  font-size: 52px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -1.6px;
  font-variant-numeric: tabular-nums lining-nums;
}
.mock-cal-unit {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-2);
}
.mock-bar {
  position: relative;
  margin-top: 20px;
  height: 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  overflow: hidden;
}
/* One segment per plate, in the order they were eaten, seam-separated. Width
   carries how much; the photo under it carries which. */
.mock-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--carrot);
}
.mock-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--paper);
}
.mock-bubbles {
  position: relative;
  height: 44px;
}
.mock-connector line {
  stroke: var(--hairline-strong);
  stroke-width: 1;
}
.mock-connector {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  overflow: visible;
}
.mock-thumb {
  position: absolute;
  top: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  background-image: url("plate.jpg");
  background-size: 190%;
}

/* The three macros, one short bar each. The fill is the macro's identity
   colour, the same every day whatever the coverage: length carries the amount,
   hue carries which macro it is. Not a traffic light. */
.mock-macros {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}
.mock-macro {
  flex: 1;
}
.mock-macro-label {
  font-size: 9px;
  color: var(--ink-2);
}
.mock-macro-value {
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mock-macro-value span {
  color: var(--ink-muted);
}
.mock-macro-track {
  margin-top: 4px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.mock-macro-fill {
  height: 100%;
  border-radius: var(--r-pill);
}

/* The low-on note: ink on the canvas with a sprout glyph, not a warning on a
   frame. At 3pm it is a fact about an unfinished day. */
.mock-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 10px;
  color: var(--ink-2);
}
.mock-note svg {
  width: 11px;
  height: 11px;
}

/* The last few plates, newest first. Photo-led: the thumbnail, then the dish
   name over a meta line carrying the honest grade as a small disc. No
   dividers, whitespace separates the rows. */
.mock-recent {
  margin-top: 20px;
}
.mock-recent-head {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.mock-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}
.mock-row-thumb {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 9px;
  background-image: url("plate.jpg");
  background-size: 190%;
}
.mock-row-main {
  flex: 1 1 auto;
  min-width: 0;
}
.mock-row-title {
  display: block;
  font-size: 10.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-row-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: var(--ink-muted);
}
.mock-grade {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--surface);
  font-style: normal;
  font-weight: 700;
  font-size: 8px;
}
.mock-row-kcal {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Four peer tabs on a flat bar the colour of the canvas. Selection is a colour
   change and nothing else: no pill, no indicator, no shadow. */
.mock-tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
}
.mock-tabs svg {
  width: 19px;
  height: 19px;
  color: var(--ink-muted);
}
.mock-tabs svg.on {
  color: var(--carrot);
}

/* ---- Step drawings ---- */

/* The scan: the app's own hand-drawn corner brackets over a plate. */
.mock-scan {
  position: relative;
  width: 136px;
  height: 136px;
  border-radius: var(--r-md);
  background: url("plate.jpg") center / cover;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.mock-scan svg {
  width: 100%;
  height: 100%;
  color: var(--surface);
}
.mock-scan-tag {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 11px;
  white-space: nowrap;
}

/* The calorie budget again, at step size. */
.mock-mini {
  width: 100%;
  max-width: 200px;
  text-align: center;
}
.mock-mini .mock-cal-num {
  font-size: 40px;
}
.mock-mini .mock-bar {
  margin-top: 14px;
}

/* Where you are, how far you have moved, how far is left. */
.mock-stats {
  display: flex;
  gap: var(--sp-lg);
  text-align: center;
}
.mock-stat-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mock-stat-label {
  font-size: 11px;
  color: var(--ink-2);
}

/* ============================================================
   SHARED — footer
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: var(--sp-huge);
  padding: var(--sp-xl) var(--gutter) var(--sp-xxxl);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-md);
  color: var(--ink-muted);
  font-size: 14px;
}
.footer-links {
  display: flex;
  gap: var(--sp-xl);
}
.footer-links a {
  color: var(--ink-2);
}

/* ============================================================
   SHARED — legal pages (privacy.html, terms.html)
   ============================================================ */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-xl) var(--gutter) var(--sp-huge);
}
.legal h1 {
  font-size: clamp(30px, 5vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: var(--sp-sm) 0 var(--sp-sm);
}
.legal .updated {
  color: var(--ink-muted);
  font-size: 14px;
  margin: 0 0 var(--sp-xxl);
}
.legal h2 {
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: var(--sp-xxl) 0 var(--sp-sm);
}
.legal h3 {
  font-size: 17px;
  margin: var(--sp-xl) 0 var(--sp-xs);
}
.legal p,
.legal li {
  color: var(--ink-2);
  font-size: 16px;
}
.legal ul {
  padding-left: var(--sp-xl);
}
.legal li {
  margin-bottom: var(--sp-xs);
}
.legal strong {
  color: var(--ink);
}
.legal a {
  color: var(--carrot-deep);
  text-decoration: underline;
}
/* A wash, the same peach every track in the app sits in. Not a card. */
.legal .callout {
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: var(--sp-lg) var(--sp-xl);
  margin: var(--sp-xl) 0;
}
.legal .callout p {
  margin: 0;
  color: var(--ink);
}
.back-link {
  display: inline-block;
  margin-bottom: var(--sp-sm);
  font-size: 14px;
  color: var(--ink-2);
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .hero {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-xxl);
  }
  .hero-copy {
    max-width: 100%;
  }
  .hero .lead {
    margin-left: auto;
    margin-right: auto;
  }
  .hero .store-badges,
  .hero .grades {
    justify-content: center;
  }
  .steps,
  .values-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
  .values-grid {
    text-align: center;
  }
  .section .sub {
    margin-left: auto;
    margin-right: auto;
  }
  .nav-links .cta {
    display: none;
  }
  .nav-links {
    gap: var(--sp-lg);
    font-size: 14px;
  }
}

@media (max-width: 520px) {
  /* The anchors wrap into two crowded lines beside the brand, and the page is
     one scroll anyway. */
  .nav-links a[href^="#"] {
    display: none;
  }
}

@media (max-width: 420px) {
  /* Two badges side by side here would each wrap their own label. */
  .store-badges {
    flex-direction: column;
    align-items: center;
  }
  .badge {
    min-width: 200px;
  }
}