/* ==========================================================================
   Headgate marketing site

   Two rules, both borrowed from the app's own stylesheet because the site and
   the product should not feel like they were made by different people:

   1. No hardcoded colour outside the token block. If a colour is needed and
      is not here, add a token and say what it means.
   2. No !important.

   The palette, the type stack and the green are Headgate's, lifted from
   farm_app/static/style.css and headgate-brand/BRAND.md. The brand green is
   never paired with yellow or gold: that pairing belongs to a very
   well-defended tractor company, and gold reads private-equity rather than
   ranch. (Gold does appear inside the chute screenshots. That is the product's
   own GO colour, not site chrome.)

     01  Fonts
     02  Tokens
     03  Reset and base
     04  Type
     05  Buttons and links
     06  Header and footer
     07  Screenshot frames
     08  Page furniture: bands, plates, rules
     09  Home
     10  Product pages
     11  Pricing
     12  About
     13  Motion
   ========================================================================== */

/* ==========================================================================
   01  FONTS - self-hosted, copied from the app. No Google Fonts request:
   the app refuses to make one and there is no reason the site should either.
   ========================================================================== */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/inter-tight-variable.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
}

/* ==========================================================================
   02  TOKENS
   ========================================================================== */
:root {
  color-scheme: light dark;

  /* surface */
  --ink: #141a17;
  --ink-2: #3a443e;
  /* The app uses #69716B, which clears 4.5:1 on its --paper and its --card.
     This site also sets muted text on --paper-2 and --brand-tint, where that
     value lands at 4.20 and 4.33. Darkened until it clears on every surface
     the site actually puts it on: 5.19 on paper, 4.80 on paper-2, 4.95 on
     tint, 5.75 on card. */
  --muted: #606861;
  --paper: #f2f4ef;
  --paper-2: #e8ece3;
  --card: #ffffff;
  --line: #d3dacd;
  --rule: #bcc5b4;

  /* brand */
  --brand: #0e5240;
  --brand-deep: #0b4b32;
  --brand-hover: #0a3e30;
  --brand-tint: #e7f0ec;
  --on-brand: #f5f1e6;

  /* screenshot mounts stay light in both themes: every screenshot is of a
     light interface, and a light interface floating on a dark page glows. */
  --mount: #e6eae0;
  --mount-line: #cdd5c5;
  --frame: #232a26;

  /* type */
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ui: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* one radius scale, applied everywhere. Square-ish on purpose: the mark is
     welded pipe and flat bar, and a pill-heavy page fights it. The only
     exception is the phone frame, which is round because a phone is. */
  --r-sm: 3px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-phone: 30px;

  /* measure */
  --wrap: 1180px;
  --wrap-wide: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --band: clamp(4rem, 9vw, 7.5rem);

  --shadow-plate: 0 1px 2px rgb(20 26 23 / 0.06),
                  0 12px 32px -8px rgb(20 26 23 / 0.14);
  --shadow-phone: 0 2px 4px rgb(20 26 23 / 0.12),
                  0 24px 48px -12px rgb(20 26 23 / 0.28);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eee9;
    --ink-2: #b6c1b9;
    --muted: #8b968e;
    --paper: #101613;
    --paper-2: #161e1a;
    --card: #18211c;
    --line: #2a342e;
    --rule: #3a453e;

    /* #0E5240 is 2.0:1 on the dark ground. The brand stays recognisably this
       green, lifted only far enough to clear AA for text and controls. */
    --brand: #56a889;
    --brand-deep: #0b4b32;
    --brand-hover: #6fbc9e;
    --brand-tint: #17281f;
    --on-brand: #08150f;

    --frame: #050907;
    --shadow-plate: 0 1px 2px rgb(0 0 0 / 0.5),
                    0 12px 32px -8px rgb(0 0 0 / 0.6);
    --shadow-phone: 0 2px 4px rgb(0 0 0 / 0.5),
                    0 24px 48px -12px rgb(0 0 0 / 0.7);
  }
}

/* ==========================================================================
   03  RESET AND BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img { height: auto; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  color: var(--ink);
  padding: 0.75rem 1rem;
  z-index: 40;
  border: 1px solid var(--rule);
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--wrap-wide); }

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

/* ==========================================================================
   04  TYPE
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); }
h2 { font-size: clamp(2rem, 3.9vw, 3.1rem); }
h3 { font-size: clamp(1.4rem, 2.1vw, 1.75rem); line-height: 1.1; }
h4 { font-size: 1.2rem; line-height: 1.15; }

p { margin: 0 0 1.1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

h1 + p, h2 + p, h3 + p, h4 + p,
h2 + .facts, h2 + ul, h3 + ul { margin-top: 1.05rem; }
h1 + .lede, h2 + .lede { margin-top: 1.3rem; }

.lede {
  font-size: clamp(1.125rem, 1.55vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-2);
}

.small { font-size: 0.9375rem; color: var(--muted); }

.label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.num {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

strong, b { font-weight: 600; }

/* ==========================================================================
   05  BUTTONS AND LINKS
   ========================================================================== */
a { color: var(--brand); text-underline-offset: 0.18em; }
a:hover { color: var(--brand-hover); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.9rem 1.4rem;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s cubic-bezier(0.32, 0.72, 0, 1),
              border-color 0.18s cubic-bezier(0.32, 0.72, 0, 1),
              transform 0.12s cubic-bezier(0.32, 0.72, 0, 1);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.btn--primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--on-brand);
}

.btn--ghost {
  background: transparent;
  border-color: var(--rule);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }

.btn--sm { padding: 0.6rem 1rem; font-size: 0.9375rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* A link that reads as a next step without wearing a button's clothes. */
.onward {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--brand-tint);
  padding-bottom: 2px;
  transition: border-color 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
.onward:hover { border-bottom-color: var(--brand); }

/* ==========================================================================
   06  HEADER AND FOOTER
   ========================================================================== */
.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
/* Only go translucent where the blur that makes it legible is available;
   otherwise a 12% see-through bar over a photograph is just a smeared bar.
   Blur is applied to a sticky element only, never to scrolling content. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead {
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 68px;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.wordmark svg { width: 26px; height: 26px; fill: var(--brand); }
.wordmark span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  line-height: 1;
  padding-top: 2px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav a,
.nav summary {
  font-size: 0.9688rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav a:hover,
.nav summary:hover { color: var(--ink); background: var(--paper-2); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Product menu. <details> so it works with no script; the script only closes
   it on outside click and Escape, which <details> alone cannot do. */
.menu { position: relative; }
.menu > summary {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.menu[open] > summary { color: var(--ink); background: var(--paper-2); }

.menu__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: min(30rem, 84vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem;
  padding: 0.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-plate);
}
.menu__panel a {
  display: block;
  padding: 0.6rem 0.7rem;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
}
.menu__panel a span {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.1rem;
}

.nav__login { margin-left: 0.5rem; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
}
.burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

@media (max-width: 900px) {
  .burger { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem var(--gutter) 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .nav[data-open] { display: flex; }
  .nav a,
  .nav summary { padding: 0.8rem 0.25rem; font-size: 1.0625rem; }
  /* On a phone the six product links are just the top of the list, so the
     disclosure is dropped. <details> hides its own contents even when the
     author sets display, because Chrome now does it through
     ::details-content rather than a display rule, so both have to be
     overridden or the six links vanish from the phone menu entirely. */
  .menu > summary { display: none; }
  .menu::details-content { content-visibility: visible; block-size: auto; }
  .menu__panel {
    display: grid;
    position: static;
    width: auto;
    grid-template-columns: 1fr;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  /* Once they are just rows in the phone menu they should look like the
     other rows in it, not like a dropdown's headings. */
  .menu__panel a {
    padding: 0.8rem 0.25rem;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--ink-2);
  }
  .menu__panel a span { display: none; }
  .nav__login { margin: 0.75rem 0 0; justify-content: center; }
}

/* --- footer --------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding: clamp(2.5rem, 5vw, 4rem) 0 2.5rem;
  margin-top: var(--band);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.footer h4 {
  font-family: var(--ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.35rem; }
/* Inline links in the footer were 19px tall, under the 24px target minimum.
   Padding rather than line-height, so the text keeps its own rhythm. */
.footer li a {
  display: inline-block;
  padding: 0.3rem 0;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9688rem;
}
.footer li a:hover { color: var(--brand); }
.footer__fine {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.footer__fine p { max-width: 46ch; margin: 0; }
.footer__blurb { margin-top: 0.9rem; }

@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   07  SCREENSHOT FRAMES
   Every image inside one of these is an unretouched capture of the app.
   ========================================================================== */
.phone {
  width: min(300px, 76vw);
  padding: 9px;
  background: var(--frame);
  border-radius: var(--r-phone);
  box-shadow: var(--shadow-phone);
  flex: none;
}
.phone img {
  width: 100%;
  border-radius: calc(var(--r-phone) - 9px);
}
.phone--lg { width: min(340px, 80vw); }

.plate {
  background: var(--mount);
  border: 1px solid var(--mount-line);
  border-radius: var(--r-lg);
  padding: 10px;
  box-shadow: var(--shadow-plate);
}
.plate img {
  width: 100%;
  border-radius: calc(var(--r-lg) - 10px);
}

figure { margin: 0; }
figcaption {
  margin-top: 0.85rem;
  font-size: 0.875rem;
  color: var(--muted);
  max-width: 58ch;
}

/* ==========================================================================
   08  PAGE FURNITURE
   ========================================================================== */
.band { padding-block: var(--band); }
.band--tint { background: var(--paper-2); }
.band--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.band--nopad-top { padding-top: 0; }

.band__head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.band__head h2 { max-width: 18ch; }
.band__head p { margin-top: 1rem; max-width: 56ch; }

/* Full-bleed photograph carrying a single statement. */
.statement {
  position: relative;
  isolation: isolate;
  min-height: clamp(20rem, 42vw, 30rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.statement img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.statement::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right,
      rgb(9 22 16 / 0.72) 0%,
      rgb(9 22 16 / 0.34) 46%,
      rgb(9 22 16 / 0.10) 100%),
    linear-gradient(to top,
      rgb(9 22 16 / 0.94) 0%,
      rgb(9 22 16 / 0.70) 38%,
      rgb(9 22 16 / 0.16) 100%);
}
.statement__body { padding-block: clamp(2.5rem, 5vw, 4rem); }
.statement h2,
.statement p { color: #f4f6f1; }
.statement p { margin-top: 0.9rem; max-width: 42ch; }

/* Two-column text/figure split, used at most twice in a row and mirrored. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--wide { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.split--narrow { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.split__figure { display: flex; justify-content: center; }
.split--mirror .split__text { order: 2; }

@media (max-width: 860px) {
  .split,
  .split--wide,
  .split--narrow { grid-template-columns: 1fr; }
  .split--mirror .split__text { order: 0; }
}

/* A short list of facts set as rules, not as cards. */
.facts { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.facts li {
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
}
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts dt,
.facts .facts__key {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}
.facts .facts__val { color: var(--ink-2); }

@media (max-width: 520px) {
  .facts li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ==========================================================================
   09  HOME
   ========================================================================== */
.hero {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 { max-width: 20ch; }
.hero .lede { margin-top: 1.4rem; max-width: 42ch; }

/* The phone sits on a mount sized to it, not on a panel stretched to fill the
   column: a big empty rounded rectangle behind a device reads as filler. */
.hero__figure { display: flex; justify-content: center; }
.hero__mount {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.hero .phone { width: min(268px, 66vw); }
.hero .phone img { border-radius: calc(var(--r-phone) - 9px); }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 17ch; }
}

/* the six product pages, indexed */
.index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.index a {
  display: block;
  background: var(--card);
  padding: 1.4rem 1.5rem 1.5rem;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
.index a:hover { background: var(--brand-tint); }
.index h3 { margin-bottom: 0.35rem; }
.index p { font-size: 0.9375rem; color: var(--muted); margin: 0; }
@media (max-width: 980px) { .index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .index { grid-template-columns: 1fr; } }

.index img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
  border: 1px solid var(--mount-line);
  border-radius: var(--r-sm);
  margin-bottom: 1rem;
  background: var(--mount);
}

/* the price band on the home page */
.prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem 2.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--rule);
}
.prices__tier .num {
  display: block;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  color: var(--ink);
  line-height: 1;
}
.prices__tier h3 {
  font-family: var(--ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.prices__tier p { font-size: 0.9375rem; color: var(--ink-2); margin: 0.6rem 0 0; }
.prices__tier .num small {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--muted);
}
.prices__lede { margin-top: 1rem; }
.prices__more { margin-top: 1.75rem; }

/* the honest note about the iPhone build */
.note {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.note img { width: 84px; border-radius: var(--r-md); }
@media (max-width: 560px) {
  .note { grid-template-columns: 1fr; }
}

/* ==========================================================================
   10  PRODUCT PAGES
   ========================================================================== */
.pagehead {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.pagehead h1 { font-size: clamp(2.3rem, 4.8vw, 3.75rem); max-width: 21ch; }
.pagehead .lede { margin-top: 1.25rem; max-width: 52ch; }

/* Desktop plate with the phone standing alongside it, not on top of it: an
   overlap looks designed and hides the part of the screenshot it covers. */
.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: end;
}
.pair .phone { width: min(252px, 70vw); }
.pair .phone + figcaption,
.pair figure:last-child figcaption { max-width: 26ch; }
@media (max-width: 900px) {
  .pair { grid-template-columns: 1fr; justify-items: center; }
}

.detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.detail > * { border-top: 2px solid var(--rule); padding-top: 1.1rem; }
.detail h3 { margin-bottom: 0.55rem; }
.detail p { color: var(--ink-2); font-size: 1rem; max-width: 42ch; }

/* Pulled quote from the interface itself, set in the app's own mono. */
.readout {
  font-family: var(--mono);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  border-left: 3px solid var(--brand);
  padding: 0.35rem 0 0.35rem 1.25rem;
  margin: 0 0 1.25rem;
  max-width: 46ch;
}
.readout span { color: var(--muted); }
.readout--wide { max-width: 60ch; margin-top: 2rem; }

.nextpages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.nextpages a {
  display: inline-block;
  padding: 0.3rem 0;
  font-weight: 600;
  text-decoration: none;
}
.nextpages a:hover { text-decoration: underline; }

/* ==========================================================================
   11  PRICING
   ========================================================================== */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.tier {
  background: var(--card);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
}
.tier--picked { background: var(--brand-tint); }
.tier__name {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  line-height: 1;
}
.tier__for {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0.4rem 0 1.25rem;
  min-height: 1.2em;
}
.tier__price {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--ink);
}
.tier__price small {
  display: block;
  font-family: var(--ui);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.5rem;
  line-height: 1.4;
}
.tier__limits {
  list-style: none;
  margin: 1.5rem 0 1.25rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
}
.tier__limits li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.tier__limits b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.tier__gets {
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

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

.pricing-note {
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.pricing-note p { max-width: none; }

.qa { margin-top: clamp(2.5rem, 5vw, 4rem); }
.qa dl { margin: 0; }
.qa dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.qa dd { margin: 0.5rem 0 1.5rem; color: var(--ink-2); max-width: 62ch; }

/* ==========================================================================
   12  ABOUT
   ========================================================================== */
.prose > * { max-width: 62ch; }
.prose h2 { margin-top: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: 0.9rem; }
.prose figure { max-width: none; margin: clamp(2.25rem, 4.5vw, 3.5rem) 0; }
.wide-photo {
  width: 100%;
  border-radius: var(--r-md);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.about-contact { margin-top: 2rem; }

/* ==========================================================================
   13  MOTION
   Scroll-driven, and only where the browser supports doing it off the main
   thread. No script, no IntersectionObserver, no layout-triggering property.
   Anything the browser cannot do this way simply renders in place.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise-in linear both;
      animation-timeline: view();
      /* Finished by the time a quarter of the element has entered, so a
         reader scrolling fast never meets a half-faded paragraph. Do not put
         .reveal on anything that is already on screen at load: it would
         arrive dimmed and stay that way until the reader scrolls. */
      animation-range: entry 0% entry 25%;
    }
    @keyframes rise-in {
      from { opacity: 0; transform: translateY(1.5rem); }
      to { opacity: 1; transform: translateY(0); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .masthead, .footer, .btn-row { display: none; }
  body { background: #fff; color: #000; }
}