/**
 * CattleScale marketing site — "Paddock".
 *
 * The tokens below are lifted verbatim from `app/globals.css` so the website and
 * the app are visibly one product: warm neutral ground, white cards on hairline
 * borders, ONE green accent doing every call to action, and a green-shifted
 * near-black that photographs can sit on without banding.
 *
 * The rule the app's palette is arranged around is inherited too, and it matters
 * more here than anywhere: the product looks calm, never certain. `--barn` is
 * reserved for real warnings. Nothing decorative borrows it. A marketing page
 * that shouts confidence would contradict the one thing this app sells, which is
 * a number that tells you how much to trust it.
 */

/* ------------------------------------------------------------------ tokens */

:root {
  /* Ground. Warm neutral, not sky — photography needs a quiet backdrop. */
  --sky: #f4f2ee;
  --sky-pale: #faf9f7;

  /* Structure: borders, secondary text, deep ink. */
  --wood: #7c8478;
  --wood-mid: #5f6960;
  --wood-dark: #2a3129;
  --plank: #eceae5;

  /* Card surfaces. */
  --cream: #ffffff;
  --cream-sunk: #f4f2ee;
  --cream-line: #e3e0d9;

  /* The single accent. Green carries every call to action. */
  --green: #2f7d4e;
  --green-deep: #20603a;
  --green-dark: #164729;
  --green-wash: #eef5f0;

  /* The dark the photographs sit on, and the only near-black on the site. */
  --char: #121714;
  --char-soft: #1b221d;

  /* Signals. Amber warns, red refuses — nothing decorative uses either. */
  --barn: #b4472c;
  --amber: #b9791a;

  /* Ink is a near-black green-grey. Warm enough not to read clinical. */
  --ink: #1c2320;
  /*
   * The app's own `--color-ink-soft` is #6b7469, which measures 4.34:1 on the
   * warm ground and 4.38:1 on the green wash — under WCAG AA for body text,
   * which is most of the words on this page.
   *
   * This is #5f6960, the palette's existing `--wood-mid`, so nothing new is
   * invented: the secondary text simply borrows the token one step darker and
   * clears 4.5:1 everywhere (5.11:1 at worst, on --sky).
   */
  --ink-soft: #5f6960;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-card: 1.375rem;
  --radius-control: 0.875rem;

  /* One spacing rhythm, 4px-based, used for every section gap. */
  --gap-s: 1rem;
  --gap-m: 1.5rem;
  --gap-l: 2.5rem;
  --gap-xl: 4rem;
  --gap-section: 6rem;

  --shell: 1120px;
}

/* --------------------------------------------------------------- baseline */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--sky);
  scroll-behavior: smooth;
  /*
   * The sticky header is 68px; without this every in-page jump lands with the
   * heading tucked underneath it.
   */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 450;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--green-deep);
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
}

a:hover {
  color: var(--green-dark);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--ink);
  /* Long compound words ("girth-and-length") must not overflow at 375px. */
  overflow-wrap: break-word;
}

p {
  margin: 0;
}

ul {
  margin: 0;
}

/* Tabular figures everywhere a number is compared against another number. */
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

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

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

/* Keyboard users get out of the nav in one press. */
.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-control);
  text-decoration: none;
  transition: top 0.15s ease-out;
}

.skip:focus {
  top: 1rem;
  color: #fff;
}

/* ----------------------------------------------------------------- layout */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  /* Gutters widen with the viewport rather than staying at a phone's inset. */
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.shell-narrow {
  max-width: 760px;
}

section {
  /* Anchor targets, so a nav jump does not land mid-paragraph. */
  scroll-margin-top: 5.5rem;
}

.band {
  padding-block: clamp(3.5rem, 9vw, var(--gap-section));
}

.band-sunk {
  background: var(--sky-pale);
  border-block: 1px solid var(--cream-line);
}

.band-dark {
  background: var(--char);
  color: #fff;
}

.band-dark h2,
.band-dark h3 {
  color: #fff;
}

/* ------------------------------------------------------------- typography */

.eyebrow {
  display: block;
  margin: 0 0 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
}

/*
 * The eyebrow's default green is a 2.3:1 contrast on the charcoal ground, so
 * every dark surface must be listed here. `.finale` is its own section rather
 * than a `.band-dark`, and was missed — it read as a dim green smudge.
 */
.band-dark .eyebrow,
.hero .eyebrow,
.finale .eyebrow,
.legal-head .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

h1 {
  font-size: clamp(2.25rem, 6.4vw, 4rem);
  letter-spacing: -0.032em;
}

h2 {
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  letter-spacing: -0.028em;
}

h3 {
  font-size: clamp(1.1875rem, 2.2vw, 1.4375rem);
}

.lede {
  /* 60–70 characters at every width — the readable measure. */
  max-width: 42ch;
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

.band-dark .lede {
  color: rgba(255, 255, 255, 0.75);
}

.prose p + p,
.prose ul + p,
.prose p + ul {
  margin-top: 1rem;
}

.prose {
  max-width: 66ch;
}

/* --------------------------------------------------------------- surfaces */

/**
 * A card that floats. Hairline border plus a soft shadow — never an offset
 * shadow, which reads as a sticker, and stickers do not sit under photography.
 */
.panel {
  background: var(--cream);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-card);
  box-shadow:
    0 1px 2px rgba(28, 35, 32, 0.04),
    0 8px 24px -12px rgba(28, 35, 32, 0.18);
}

.panel-sunk {
  background: var(--cream-sunk);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-control);
}

/**
 * A photograph with words on it, and the scrim that is not optional.
 *
 * Legibility of white text is never allowed to depend on a photograph's
 * exposure — these are real skies at sunrise, and the brightest part of the
 * frame is exactly where a headline wants to sit.
 */
.shot {
  position: relative;
  isolation: isolate;
  background-color: var(--char);
  overflow: hidden;
}

.shot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 16, 13, 0.68) 0%,
    rgba(10, 16, 13, 0.22) 38%,
    rgba(10, 16, 13, 0.88) 100%
  );
  pointer-events: none;
}

.shot > *:not(img) {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------- buttons */

/**
 * 56px tall, everywhere, on purpose. Apple's minimum hit target is 44pt and the
 * app's own buttons are 56px because they are tapped with a thumb, outdoors,
 * possibly in a glove. The website inherits the height so the two feel the same.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.5rem;
  padding: 0 1.75rem;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  background: var(--green);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(28, 35, 32, 0.12);
  transition:
    transform 0.14s ease-out,
    background-color 0.18s ease-out;
}

.btn:hover {
  background: var(--green-deep);
  color: #fff;
}

.btn:active {
  transform: scale(0.985);
}

.btn-quiet {
  background: transparent;
  border-color: var(--cream-line);
  color: var(--ink);
}

.btn-quiet:hover {
  background: var(--plank);
  color: var(--ink);
}

.band-dark .btn-quiet,
.hero .btn-quiet {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.band-dark .btn-quiet:hover,
.hero .btn-quiet:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/**
 * Apple's official "Download on the App Store" badge.
 *
 * The artwork is Apple's own, fetched from their badge service
 * (toolbox.marketingtools.apple.com) and stored in assets/ so the page has no
 * external dependency. Apple's guidelines ask for the supplied artwork
 * unaltered, a minimum height of 40 px, and clear space around it of at least
 * a quarter of its height, which the surrounding flex gaps already give it.
 * The height here matches the button beside it so the row stays level.
 */
.appstore {
  display: inline-flex;
  flex: none;
  border-radius: 8px;
  transition: transform 0.14s ease-out;
}

.appstore img {
  display: block;
  height: 3.5rem;
  width: auto;
}

.appstore:active {
  transform: scale(0.985);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
}

/* ------------------------------------------------------------------ chrome */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 247, 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--cream-line);
}

.masthead .shell {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  min-height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}

.wordmark img {
  width: 30px;
  height: 30px;
}

.masthead nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.masthead nav a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}

.masthead nav a:hover {
  color: var(--green-deep);
}

.masthead .btn {
  min-height: 2.75rem;
  padding: 0 1.125rem;
  font-size: 0.9375rem;
}

/* The nav links fold away on phones; the download button never does. */
@media (max-width: 860px) {
  .masthead nav {
    display: none;
  }

  /*
   * Without the nav the bar is a wordmark and one button, so the button no
   * longer needs desktop weight: a shorter bar and a quieter button keep the
   * hero, not the header, as the first thing a phone shows.
   */
  .masthead .shell {
    min-height: 3.5rem;
    justify-content: space-between;
  }

  .masthead .btn {
    min-height: 2.25rem;
    padding: 0 0.875rem;
    font-size: 0.875rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* The smallest phones: a tighter gap so the wordmark and the button share one line. */
@media (max-width: 360px) {
  .masthead .shell {
    gap: var(--gap-s);
  }
}

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

.hero {
  position: relative;
  isolation: isolate;
  background: var(--char);
  color: #fff;
  overflow: hidden;
}

.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
   * The photograph is portrait (1333x2000) and the hero is wide, so the crop is
   * doing real work. 46% keeps the sunrise and the horizon line in frame; lower
   * values push the sky out of shot and the picture stops being a sunrise.
   */
  object-position: 50% 46%;
  z-index: 0;
}

/*
 * Two scrims, each with one job. The vertical one seats the headline and the
 * value strip; the horizontal one darkens only the left column where the text
 * actually sits, so the cattle and the sun on the right stay visible. Earlier
 * values (0.5 / 0.72) were legible but muddied the photograph into a grey
 * field, which defeats the point of leading with photography.
 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 16, 13, 0.34) 0%, rgba(10, 16, 13, 0.22) 32%, rgba(10, 16, 13, 0.9) 100%),
    linear-gradient(90deg, rgba(10, 16, 13, 0.66) 0%, rgba(10, 16, 13, 0.26) 46%, rgba(10, 16, 13, 0) 78%);
  pointer-events: none;
}

.hero .shell {
  position: relative;
  z-index: 2;
  padding-block: clamp(4.5rem, 13vw, 8.5rem);
}

.hero h1 {
  color: #fff;
  max-width: 15ch;
  text-shadow: 0 2px 24px rgba(10, 16, 13, 0.45);
}

.hero .lede {
  margin-top: 1.375rem;
  color: rgba(255, 255, 255, 0.86);
  max-width: 46ch;
}

.hero .cta-row {
  margin-top: 2.25rem;
}

/**
 * The value strip: one photo, ~25 seconds, one dollar, no account.
 *
 * This is the whole offer stated as four numbers before a single paragraph is
 * read. It sits ON the hero rather than below it because these four facts are
 * what a farmer is deciding on, and they should not require a scroll.
 */
.value-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 6vw, 3.75rem);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.value-strip div {
  background: rgba(10, 16, 13, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.25rem 1.125rem;
}

.value-strip strong {
  display: block;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.value-strip span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

@media (max-width: 720px) {
  .value-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ------------------------------------------------------------------ grids */

.grid {
  display: grid;
  gap: var(--gap-m);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

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

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

@media (max-width: 960px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

.section-head {
  max-width: 46ch;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.section-head .lede {
  margin-top: 1rem;
}

/* ------------------------------------------------------------------ cards */

.card {
  padding: 1.75rem;
  background: var(--cream);
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-card);
  box-shadow:
    0 1px 2px rgba(28, 35, 32, 0.04),
    0 8px 24px -12px rgba(28, 35, 32, 0.18);
}

.card h3 {
  margin-bottom: 0.625rem;
}

.card p {
  color: var(--ink-soft);
  font-size: 0.9688rem;
  line-height: 1.6;
}

.band-dark .card {
  background: var(--char-soft);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.band-dark .card p {
  color: rgba(255, 255, 255, 0.7);
}

/* The numbered step badge on "How it works". */
.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1.125rem;
  border-radius: 999px;
  background: var(--green-wash);
  color: var(--green-dark);
  font-weight: 700;
  font-size: 0.9375rem;
}

.band-dark .step-no {
  background: rgba(63, 143, 90, 0.22);
  color: #8fd0a6;
}

/* ----------------------------------------------------------- screenshots */

/**
 * The phone frame.
 *
 * A 1290x2796 App Store screenshot is 19.5:9. `aspect-ratio` holds that shape
 * before the PNG decodes, so a page that is mostly imagery does not shuffle
 * itself as it loads — the single biggest source of layout shift here.
 */
.shots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: start;
}

.phone {
  margin: 0;
}

.phone img {
  width: 100%;
  /*
   * `height: auto` is load-bearing, not tidiness.
   *
   * The <img> carries height="2796" so the browser can reserve space before the
   * PNG decodes. That presentational attribute becomes a used height of 2796px
   * unless CSS overrides it — and `aspect-ratio` only computes a dimension the
   * other axis has left auto. Without this line every phone rendered 187px wide
   * and 2794px tall, and the section ran to nearly three thousand pixels.
   */
  height: auto;
  aspect-ratio: 1290 / 2796;
  object-fit: cover;
  object-position: top center;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--sky);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.8);
}

.phone figcaption {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}

/*
 * Below 1080px five phones each become too narrow to read, so the row turns
 * into a swipeable carousel rather than shrinking further. `scroll-snap` keeps
 * each phone landing square, and the scrollbar stays visible so the affordance
 * is not gesture-only.
 */
@media (max-width: 1080px) {
  .shots {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(62vw, 260px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    /* Let the row bleed to the viewport edge so it reads as scrollable. */
    margin-inline: calc(clamp(1.25rem, 5vw, 2.5rem) * -1);
    padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    scroll-padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  }

  .phone {
    scroll-snap-align: start;
  }

  /*
   * With the script running, one phone fills the strip and the arrows below
   * step through it. The image is capped so a tablet does not show one giant
   * phone, and the scrollbar goes because the arrows and counter now carry
   * the affordance. Swiping still works.
   */
  .shots-stepped .shots {
    grid-auto-columns: 100%;
    padding-bottom: 0;
    scrollbar-width: none;
  }

  .shots-stepped .shots::-webkit-scrollbar {
    display: none;
  }

  .shots-stepped .phone img {
    display: block;
    max-width: min(72vw, 300px);
    margin-inline: auto;
  }
}

/* The arrows and counter under the strip. Hidden without the script. */
.shots-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.shots-count {
  min-width: 4.5rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.shots-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.18s ease-out;
}

.shots-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.shots-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* -------------------------------------------------------- free vs unlocked */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-m);
}

@media (max-width: 780px) {
  .split {
    grid-template-columns: 1fr;
  }
}

.ledger {
  padding: 1.875rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--cream-line);
  background: var(--cream);
}

.ledger-paid {
  border-color: var(--green);
  border-width: 2px;
  background: var(--green-wash);
}

.ledger-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.375rem 0 1.25rem;
}

.ledger-price b {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--green-dark);
}

.ledger-price span {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* A tick/lock list. The icon is inline SVG, never an emoji. */
.marks {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.6875rem;
}

.marks li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.6875rem;
  align-items: start;
  font-size: 0.9688rem;
  line-height: 1.5;
}

.marks svg {
  margin-top: 0.28em;
  flex: none;
}

.marks .k {
  font-weight: 600;
  color: var(--ink);
}

/* -------------------------------------------------------------- the caveat */

/**
 * The warning block. `--barn` appears here and nowhere else on the page.
 *
 * A marketing site that hides this would be selling a different product than
 * the one that ships: the app's governing rule is that a wrong number presented
 * confidently is worse than no number, and section 4 of the Terms says the same
 * thing in the same words.
 */
.caution {
  padding: 1.75rem;
  border: 1px solid var(--barn);
  border-radius: var(--radius-card);
  background: #fff;
}

.caution-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--barn);
}

.caution h3 {
  margin-bottom: 0.75rem;
}

.caution p,
.caution li {
  color: var(--ink-soft);
  font-size: 0.9688rem;
}

.caution ul {
  margin-top: 0.875rem;
  padding-left: 1.125rem;
  display: grid;
  gap: 0.5rem;
}

/* ---------------------------------------------------------------- feature */

/* A photograph beside a block of words. Alternates side on wide screens. */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.feature-media {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--char);
}

.feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .feature {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------- faq */

.faq {
  display: grid;
  gap: 0.75rem;
  max-width: 780px;
}

.faq details {
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-control);
  background: var(--cream);
  overflow: hidden;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* 44px minimum hit target, met by padding rather than a fixed height. */
  padding: 1.125rem 1.375rem;
  font-weight: 650;
  font-size: 1.0313rem;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid var(--wood);
  border-bottom: 2px solid var(--wood);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease-out;
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq summary:hover {
  background: var(--cream-sunk);
}

.faq .answer {
  padding: 0 1.375rem 1.375rem;
  color: var(--ink-soft);
  font-size: 0.9688rem;
}

.faq .answer p + p {
  margin-top: 0.75rem;
}

/* ------------------------------------------------------------- final call */

.finale {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--char);
  color: #fff;
  text-align: center;
}

.finale > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.finale::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 16, 13, 0.82) 0%, rgba(10, 16, 13, 0.94) 100%);
}

.finale .shell {
  position: relative;
  z-index: 2;
  padding-block: clamp(4rem, 10vw, 7rem);
}

.finale h2 {
  color: #fff;
  max-width: 18ch;
  margin-inline: auto;
}

.finale .lede {
  margin: 1.25rem auto 0;
  color: rgba(255, 255, 255, 0.8);
}

.finale .cta-row {
  justify-content: center;
  margin-top: 2.25rem;
}

/* ----------------------------------------------------------------- footer */

.footer {
  background: var(--sky-pale);
  border-top: 1px solid var(--cream-line);
  padding-block: 3.5rem 2.5rem;
  font-size: 0.9375rem;
}

.footer-top {
  display: grid;
  /* minmax(0, …) so a long unbreakable link cannot push a column past the screen. */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-l);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--cream-line);
}

@media (max-width: 780px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Small phones: one column, and the email address may break mid-word rather than overflow. */
@media (max-width: 440px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
  }
}

.footer ul a {
  overflow-wrap: anywhere;
}

.footer-brand p {
  margin-top: 0.875rem;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 0.9063rem;
}

.footer h3 {
  margin-bottom: 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* No gap: each link now carries its own 44px tap height (see "tap targets"). */
.footer ul {
  list-style: none;
  padding: 0;
  display: grid;
}

.footer ul a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.footer ul a:hover {
  color: var(--green-deep);
  text-decoration: underline;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

/* ------------------------------------------------------------ legal pages */

.legal-head {
  background: var(--char);
  color: #fff;
  padding-block: clamp(3rem, 8vw, 5rem);
}

.legal-head h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3rem);
}

.legal-head .updated {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.62);
}

/* The plain-English summary above the clauses. */
.legal-summary {
  margin-top: 2rem;
  padding: 1.625rem 1.75rem;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.legal-summary h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.875rem;
}

.legal-summary p {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1rem;
}

.legal-summary p + p {
  margin-top: 0.75rem;
}

.legal-body {
  padding-block: clamp(2.5rem, 7vw, 4rem);
}

.clause {
  padding-top: 2.25rem;
  margin-top: 2.25rem;
  border-top: 1px solid var(--cream-line);
}

.clause:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.clause > h2 {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.clause > h2 .n {
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.clause p,
.clause li {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
}

.clause p + p,
.clause ul + p,
.clause p + ul {
  margin-top: 0.875rem;
}

.clause strong {
  color: var(--ink);
}

.clause ul {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.5rem;
}

.subclause {
  margin-top: 1.5rem;
}

.subclause h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.625rem;
}

.clause code {
  padding: 0.1em 0.4em;
  border-radius: 5px;
  background: var(--plank);
  font-size: 0.875em;
  color: var(--wood-dark);
}

/* Same warning treatment as the app's `<Warning>` component. */
.legal-warning {
  margin: 1.25rem 0;
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--barn);
  border-radius: var(--radius-control);
  background: #fff;
}

.legal-warning p {
  color: var(--ink);
  font-weight: 550;
}

.legal-toc {
  position: sticky;
  top: 5.5rem;
  align-self: start;
}

.legal-toc h3 {
  margin-bottom: 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}

.legal-toc a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.4;
  display: block;
}

.legal-toc a:hover {
  color: var(--green-deep);
}

.legal-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* The table of contents is a wide-screen convenience, not the navigation. */
@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    display: none;
  }
}

/* --------------------------------------------------------- tap targets */

/**
 * Text links in the nav, the footer and the legal contents list.
 *
 * As plain inline text these were 19px tall — under WCAG 2.2's 24px minimum
 * target size, and well under Apple's 44pt. Padding rather than a fixed height,
 * so a link that wraps to two lines grows instead of overflowing its own box,
 * and `inline-flex` so the padded area is genuinely clickable rather than just
 * drawn.
 *
 * The negative inline margin cancels the horizontal padding at the row edge, so
 * the visible left edge of each column still lines up with everything above it.
 */
.masthead nav a,
.footer ul a,
.legal-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
}

/* The contents list wraps to two lines; centring would look wrong there. */
.legal-toc a {
  align-items: flex-start;
  padding-block: 0.375rem;
}

.wordmark {
  min-height: 44px;
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}