/* ═══════════════════════════════════════════════════════════════
   Promptly

   Centred, not alternating. The left-copy/right-screenshot row is a
   SaaS page, and stacking eight of them is what made this feel like a
   template. Apple centres almost everything, gives the type most of the
   page, and shows the device whole and large underneath. That is the
   whole structural difference, and it is worth more than any amount of
   shadow work.

   Three rules held throughout:
     1. No gradients. Flat surfaces, one hairline, one shadow.
     2. No rotation on a screenshot. It forces a resample and goes soft.
     3. A device is never accidentally cropped. Whole, or deliberately
        full-bleed — never eight pixels short of its own corner.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* the app's own tokens */
  --night:    #0B0B0D;
  --night-2:  #161619;
  --accent:   #FFD60A;
  --cream:    #F5F5F7;

  /* page */
  --ink:      #1D1D1F;   /* Apple's text black, not pure black */
  --ink-2:    #6E6E73;
  --ink-3:    #86868B;
  --paper:    #FFFFFF;
  --paper-2:  #F5F5F7;   /* the grey Apple alternates with white */
  --edge:     #D2D2D7;

  /* device chrome, flipped per section */
  --ring: rgba(0,0,0,.09);
  --cast: rgba(0,0,0,.18);

  --text-w:   680px;     /* measure for body copy */
  --wrap:     1040px;
  --gutter:   clamp(22px, 5vw, 40px);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Inter, system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

.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;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--night);
  padding: 12px 18px; font-weight: 600;
}
.skip:focus { left: 0; }

/* ── type ──────────────────────────────────────────────────────────
   One scale, used everywhere. Display sizes get negative tracking
   because SF Pro Display is drawn to be set tight; body copy does not. */

h1, h2, h3, h4 { margin: 0; font-weight: 700; }

h1 {
  font-size: clamp(3.25rem, 7.2vw, 5.75rem);
  line-height: 1.04; letter-spacing: -0.035em;
}
h1 em { font-style: normal; color: var(--accent); }

h2 {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1.07; letter-spacing: -0.032em;
}
h2.big { font-size: clamp(2.6rem, 5.6vw, 4.25rem); letter-spacing: -0.034em; }

h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.022em; }
h4 { font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.016em; }

p { margin: 0 0 1em; }

.eyebrow {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--accent); margin: 0 0 14px;
}
/* Grey on the light surfaces. The brand yellow is a screen colour — it was
   drawn for #0B0B0D — and darkening it enough to be legible on white turns
   it to mud. It keeps its job on the dark sections, where it belongs. */
.light .eyebrow { color: var(--ink-2); }

.lede {
  font-size: clamp(1.1875rem, 1.9vw, 1.4375rem);
  line-height: 1.38; letter-spacing: -0.019em;
  color: var(--ink-2); max-width: var(--text-w);
  margin-left: auto; margin-right: auto;
}
.dark .lede { color: #A1A1A6; }

.body-copy {
  max-width: 600px; margin-left: auto; margin-right: auto;
  color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6;
}
.dark .body-copy { color: #A1A1A6; }

.fineprint { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-3); margin: 0; }

code {
  font-family: var(--mono); font-size: 0.9em;
  background: rgba(0,0,0,.05); padding: 2px 6px; border-radius: 5px;
}
.dark code { background: rgba(255,255,255,.1); color: var(--accent); }

/* ── buttons ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #0071E3; color: #fff;            /* Apple's blue, for the primary */
  padding: 13px 24px; border-radius: 980px;
  font-size: 1.0625rem; font-weight: 400; letter-spacing: -0.014em;
  text-decoration: none; white-space: nowrap;
  transition: background .18s ease;
}
.btn:hover { background: #0077ED; }

.btn-lg  { padding: 16px 32px; font-size: 1.1875rem; }
.btn-sm  { padding: 7px 15px; font-size: 0.8125rem; border-radius: 980px; }

.btn-ghost {
  background: transparent; color: #0071E3;
  box-shadow: inset 0 0 0 1px currentColor;
}
.btn-ghost:hover { background: rgba(0,113,227,.06); }
.dark .btn-ghost { color: #2997FF; }
.dark .btn-ghost:hover { background: rgba(41,151,255,.1); }

/* A text link with a chevron — Apple's second-tier action. */
.link {
  color: #0071E3; text-decoration: none; font-size: 1.0625rem;
  letter-spacing: -0.014em; display: inline-flex; align-items: center; gap: 3px;
}
.link:hover { text-decoration: underline; }
.link::after { content: "›"; font-size: 1.2em; line-height: 0; transform: translateY(-1px); }
.dark .link { color: #2997FF; }

/* ── nav ───────────────────────────────────────────────────────────
   44px, 12px type, hairline. Apple's global bar is deliberately small
   so it never competes with the page. */

.nav {
  position: sticky; top: 0; z-index: 50; height: 44px;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.nav.stuck { border-bottom-color: rgba(0,0,0,.12); }

.nav-in { display: flex; align-items: center; gap: 28px; height: 44px; }

.brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; margin-right: auto;
}
.brand img { border-radius: 6px; }

.nav-links { display: flex; gap: 26px; }
.nav-links a {
  color: var(--ink); opacity: .85; text-decoration: none;
  font-size: 0.75rem; letter-spacing: -0.005em;
  transition: opacity .16s ease;
}
.nav-links a:hover { opacity: 1; }

@media (max-width: 860px) { .nav-links { display: none; } }

/* ── sections ──────────────────────────────────────────────────────
   One rhythm. Everything is centred; the only decision per section is
   which surface it sits on. */

.sec { padding: clamp(80px, 11vw, 140px) 0; text-align: center; }
.sec.grey  { background: var(--paper-2); }
.sec.dark {
  background: var(--night); color: var(--cream);
  --ring: rgba(255,255,255,.14); --cast: rgba(0,0,0,.7);
}
/* Black on near-black shows nothing, so the device separates by sitting in
   a deeper pool rather than by a shadow nobody can see. */
.sec.dark .phone { --shadow: drop-shadow(0 6px 10px rgba(0,0,0,.5)) drop-shadow(0 34px 48px rgba(0,0,0,.65)); }
.sec.dark .pad   { --shadow: drop-shadow(0 8px 12px rgba(0,0,0,.5)) drop-shadow(0 40px 58px rgba(0,0,0,.65)); }
.sec.dark .watch { --shadow: drop-shadow(0 4px 8px rgba(0,0,0,.5)) drop-shadow(0 20px 30px rgba(0,0,0,.65)); }
.sec.dark h1, .sec.dark h2, .sec.dark h3, .sec.dark h4 { color: var(--cream); }

.head { max-width: 860px; margin: 0 auto; }
.head h2 { margin-bottom: 18px; }
.head .lede { margin-bottom: 0; }

/* Space between a headline block and the thing it introduces. */
.stage { margin-top: clamp(48px, 6vw, 76px); display: flex; justify-content: center; align-items: flex-start; }

/* ── devices ───────────────────────────────────────────────────────
   Real device renders, with the screenshot sitting in the hole.

   Drawing the chassis in CSS was the wrong idea twice over: a rounded
   rect is not an iPhone, and the gradient standing in for aluminium read
   as a band of dirt. These are actual product renders with a transparent
   screen, so the frame supplies its own chassis, its own corner radius
   and its own highlights, and we supply nothing but the picture behind
   it.

   The screen rectangles below were measured, not guessed — flood-filled
   from the centre of each render and expressed as a percentage of the
   frame, so they hold at any size. The holes come out at aspect 0.4593
   (phone) and 0.7492 (iPad) against screenshots of 0.4600 and 0.7500,
   which is how you know the renders match the captures.              */

.device { position: relative; flex: none; line-height: 0; }

/* The frame carries the layout: it is in flow, the screenshot is not. */
.device .frame {
  position: relative; z-index: 2; width: 100%; height: auto; display: block;
  /* Follows the silhouette rather than boxing it, so the shadow falls
     under the device instead of under a rectangle it happens to sit in.

     Tuned per device rather than shared, because a shadow in fixed pixels
     is not the same shadow at two sizes. `0 18px 26px` reads generously
     under a 232px watch and all but vanishes under a 446px phone — the
     offset and blur have to grow with the object casting them. */
  filter: var(--shadow);
}

/* Three layers in the hole, and the middle one is why this looks right.

   The iPhone render's cut-out turned out to be square — measured radius
   0px, against 25px on the iPad and 164px on the watch — so the frame
   masks nothing and a square screenshot showed its own corners inside a
   device that plainly has rounded ones.

   So the screenshot is rounded here instead, to the display's real corner
   radius (55pt on a 402×874pt screen = 13.68% of width, 6.29% of height —
   the two percentages resolve to the same number of pixels, which is what
   keeps it a circle rather than an ellipse at any size). Rounding it alone
   would leave the page showing through the corners, so a square black
   plate sits behind: on a real iPhone those corners are black bezel, and
   now they are here too.                                                */
.device::before,
.device .shot {
  position: absolute;
  left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh);
}
/* The plate is rounded to exactly the same radius as the picture, not left
   square to the hole's bounding box. Left square, its corners stood proud
   of the frame's rounded screen — the render leaves those few corner pixels
   transparent rather than drawing chassis there, so a square plate behind
   showed through as four little black tabs. Sharing one silhouette means
   there is nothing to stand proud of. */
.device::before { content: ""; background: #000; z-index: 0; border-radius: var(--sr); }
.device .shot { z-index: 1; object-fit: cover; border-radius: var(--sr); }

/* Measured from each render, then bled outward under the chassis.

   The first measurement flood-filled for alpha < 8, which finds the
   innermost *fully* clear pixel. A render's edge is antialiased, so
   between that and the opaque chassis sits a ring of part-transparent
   pixels — 2px on the phone, 1px on the iPad — and the page showed
   through it as a hairline down both sides and across the top.

   These numbers come from the outer edge of that ring instead, plus a
   few pixels more so the picture runs *under* the chassis rather than
   stopping politely at it. The frame is drawn on top and is opaque
   there, so the overlap costs nothing and there is no seam left to
   find. */
.phone {
  width: 398px;
  --sl: 9.561%; --st: 9.800%; --sw: 80.877%; --sh: 80.400%;
  --sr: 13.68% / 6.29%;
  --shadow: drop-shadow(0 6px 9px rgba(0,0,0,.16)) drop-shadow(0 30px 40px rgba(0,0,0,.22));
}
.phone.lg { width: 446px; }

.pad {
  width: 100%; max-width: 690px;
  --sl: 5.106%; --st: 3.750%; --sw: 89.788%; --sh: 92.500%;
  --sr: 1.81% / 1.35%;
  --shadow: drop-shadow(0 8px 12px rgba(0,0,0,.14)) drop-shadow(0 38px 52px rgba(0,0,0,.20));
}

/* Fills its hole, like the other two.

   An earlier version inset this one on the theory that the bezel was
   clipping the clock. It was not — the time is three pixels wide at this
   size and simply renders small. Worse, once the black plate behind was
   rounded to match the picture, the inset went with it, so the ring
   between them stopped being black bezel and became the white page: a
   thick halo round the whole face.

   `fill` rather than `cover` because this is the one device whose hole and
   capture disagree on aspect, 0.8167 against 0.8387. A 2.7% squash cannot
   be seen on a watch face; cropping the edges of one can. */
/* Exactly the measured hole, with no bleed — unlike the phone and iPad.
   This render's edge is hard (a 0px antialias ring), so there is no seam
   to cover, and bleeding outward actively hurt: the radius is a
   percentage, so a wider box rounds harder, and the corners curved inside
   the hole leaving four white slivers. Matching the rect exactly makes
   40% / 32.67% resolve to 164px, which is the hole's own radius. */
.watch {
  width: 232px;
  --sl: 15.833%; --st: 23.298%; --sw: 68.333%; --sh: 53.404%;
  --sr: 40% / 32.67%;
  --shadow: drop-shadow(0 18px 26px rgba(0,0,0,.20));   /* unchanged: the one that read right */
}

/* The plate is square here — the exact opposite of the phone, and for the
   opposite reason.

   The phone's render leaves its screen corners transparent, so a square
   plate showed through as four black tabs and had to be rounded. This one
   draws real chassis in the corners (alpha 255 a few pixels in), so the
   frame clips anything that overruns, and a square plate is simply safe.

   Rounding it was actively wrong, because the hole is a *squircle* and
   `border-radius` draws circular arcs. Eighty pixels down the corner, the
   render's own inset is 6px where a circle of the same nominal radius cuts
   23px — so the CSS corner carved away screen the frame never cut, and the
   page showed through as four white arcs. Let the render decide its own
   corner shape; it is the only thing that knows it.

   The picture still insets, so the clock clears the bezel, and the black
   plate fills what it vacates — which on an Ultra is the display border. */
/* Square, and bled a few pixels past the hole on every side.
   Sitting exactly on the measured edge left a hairline along the top where
   the browser rounded the percentage to a sub-pixel and the section's grey
   showed through the difference. There is a wide opaque chassis all round
   this hole, so the overlap is clipped and costs nothing — the safest
   place for a seam is under something solid. */
.watch::before {
  border-radius: 0;
  left: 15.0%; top: 22.6%; width: 70.0%; height: 54.8%;
}
.watch .shot {
  object-fit: fill;
  left: 17.1%; top: 24.5%; width: 65.8%; height: 51.0%;
  border-radius: 12% / 10%;
}

/* Two phones, both whole, side by side, one stepped down. No overlap —
   an overlap always crops one of them, and a cropped device is the thing
   that made the last version look cheap. */
.stage.duo { gap: clamp(8px, 1.6vw, 22px); }
.stage.duo .phone { width: clamp(220px, 27vw, 340px); }
.stage.duo .phone:nth-child(2) { margin-top: clamp(24px, 4vw, 56px); }

/* ── hero ──────────────────────────────────────────────────────── */

.hero { padding: clamp(60px, 8vw, 96px) 0 0; text-align: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 30px; }

.cta-row {
  display: flex; flex-wrap: wrap; gap: 26px;
  align-items: center; justify-content: center; margin-bottom: 20px;
}

/* The device sits below the words and is allowed to be big. It is not
   clipped by anything: the section simply ends after it. */
.hero-stage { margin-top: clamp(52px, 7vw, 86px); display: flex; justify-content: center; }

/* ── trust ─────────────────────────────────────────────────────── */

.trust-band { padding: clamp(52px, 6vw, 76px) 0; }
.trust {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  border-top: 1px solid var(--edge); padding-top: clamp(34px, 4vw, 48px);
  text-align: center;
}
.trust b { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.018em; }
.trust span { color: var(--ink-3); font-size: 0.9375rem; }

/* ── points (the three-up under a feature) ─────────────────────── */

.points {
  list-style: none; margin: clamp(46px, 5vw, 70px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 3vw, 44px); text-align: left;
}
.points h4 { margin-bottom: 8px; }
.points p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.dark .points p { color: #A1A1A6; }
.points li { border-top: 1px solid var(--edge); padding-top: 18px; }
.dark .points li { border-top-color: rgba(255,255,255,.16); }

/* ── routes ────────────────────────────────────────────────────── */

.routes {
  list-style: none; margin: clamp(48px, 5vw, 72px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px) clamp(26px, 3vw, 40px); text-align: left;
}
.routes li { border-top: 1px solid var(--edge); padding-top: 18px; }
.dark .routes li { border-top-color: rgba(255,255,255,.16); }
.routes b {
  display: block; font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -0.018em; margin-bottom: 7px;
}
.routes span { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.dark .routes span { color: #A1A1A6; }

/* ── prompt section ────────────────────────────────────────────── */

.kinds {
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
  margin: clamp(40px, 5vw, 58px) 0 0; padding: 0; list-style: none;
}
.kinds li {
  font-size: 0.9375rem; padding: 9px 17px; border-radius: 980px;
  background: rgba(255,255,255,.08); color: #A1A1A6;
}
.kinds li.on { background: var(--accent); color: var(--night); font-weight: 500; }

.sample {
  max-width: 660px; margin: clamp(34px, 4vw, 48px) auto 0;
  background: var(--night-2); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; overflow: hidden; text-align: left;
}
.sample-bar {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: 0.78rem; color: #86868B;
}
.sample pre {
  margin: 0; padding: 18px; font-family: var(--mono);
  font-size: 0.8125rem; line-height: 1.6; color: #A1A1A6;
  white-space: pre-wrap; word-break: break-word;
}
.sample pre b { color: var(--accent); font-weight: 500; }

/* ── compare ───────────────────────────────────────────────────── */

.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-top: clamp(48px, 5vw, 72px);
  border: 1px solid var(--edge); border-radius: 18px; background: var(--paper);
}
.cmp { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.9375rem; }
.cmp th, .cmp td { padding: 16px 14px; text-align: center; }
.cmp thead th {
  font-weight: 600; font-size: 0.875rem; letter-spacing: -0.012em;
  color: var(--ink-2); border-bottom: 1px solid var(--edge);
  white-space: nowrap; vertical-align: bottom;
}
.cmp thead th.mine { color: var(--ink); font-size: 1rem; }
.cmp tbody th {
  text-align: left; font-weight: 400; color: var(--ink);
  min-width: 264px; letter-spacing: -0.012em;
}
.cmp tbody tr + tr th, .cmp tbody tr + tr td { border-top: 1px solid var(--edge); }
.cmp .mine { background: rgba(255,214,10,.11); }
.cmp thead th.mine { box-shadow: inset 0 3px 0 var(--accent); }

.cmp i, .key i {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  position: relative; vertical-align: middle;
}
.cmp i.y, .key i.y { background: var(--accent); }
.cmp i.y::after, .key i.y::after {
  content: ""; position: absolute; left: 5.5px; top: 3.5px;
  width: 4px; height: 8px; border: solid var(--night);
  border-width: 0 2px 2px 0; transform: rotate(43deg);
}
.cmp i.p, .key i.p { background: var(--edge); }
.cmp i.p::after, .key i.p::after {
  content: ""; position: absolute; left: 4.5px; top: 8px;
  width: 9px; height: 2px; background: #6E6E73; border-radius: 1px;
}
.cmp i.n, .key i.n { box-shadow: inset 0 0 0 1.5px var(--edge); }

.key {
  display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
  margin: 20px 0 0; font-size: 0.875rem; color: var(--ink-3);
}
.key span { display: inline-flex; align-items: center; gap: 7px; }

.honest {
  max-width: var(--text-w); margin: clamp(38px, 4vw, 54px) auto 14px;
  color: var(--ink-2); font-size: 1rem; line-height: 1.6;
}
.honest strong { color: var(--ink); font-weight: 600; }

/* ── privacy label ─────────────────────────────────────────────── */

.label {
  max-width: 480px; margin: clamp(44px, 5vw, 64px) auto 24px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  overflow: hidden; text-align: left;
}
.label div {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 16px 20px; font-size: 0.9375rem;
}
.label div + div { border-top: 1px solid rgba(255,255,255,.1); }
.label span { color: #A1A1A6; }
.label b { color: var(--accent); font-weight: 600; }

/* ── price ─────────────────────────────────────────────────────── */

.price-note { max-width: var(--text-w); margin: 26px auto 0; }
.price-cta { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ── footer ────────────────────────────────────────────────────── */

.foot {
  background: var(--paper-2); color: var(--ink-3);
  padding: 34px 0; font-size: 0.75rem; line-height: 1.5;
}
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.foot-brand {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 600; font-size: 0.8125rem;
  letter-spacing: -0.016em; margin-right: auto;
}
.foot-brand img { border-radius: 5px; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-note { width: 100%; margin: 0; padding-top: 14px; border-top: 1px solid var(--edge); }

/* ── reveal ────────────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── responsive ────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .points, .routes { grid-template-columns: repeat(2, 1fr); }
  .trust { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .points, .routes { grid-template-columns: 1fr; }
  .phone { width: min(330px, 84vw); }
  .phone.lg { width: min(340px, 86vw); }
  .watch { width: 190px; }
  .stage.duo { gap: 4px; }
  .stage.duo .phone { width: min(190px, 46vw); }
  .cta-row { gap: 18px; }
  .foot-in { flex-direction: column; align-items: flex-start; }
}

/* ── document pages (/terms, /privacy) ─────────────────────────────
   One measure, generous leading, no decoration. These are read, not
   scanned, and a legal page dressed up like a landing page reads as
   something trying to be liked rather than understood. */

.doc { padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 9vw, 120px); }
.doc .wrap { max-width: 720px; }

.doc h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); margin-bottom: 10px; }
.doc .updated { color: var(--ink-3); font-size: 0.9375rem; margin-bottom: clamp(36px, 5vw, 54px); }

.doc h2 {
  font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.021em;
  margin: clamp(38px, 4vw, 52px) 0 12px;
}
.doc h2:first-of-type { margin-top: 0; }

.doc p, .doc li { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.65; }
.doc p { margin: 0 0 1em; }
.doc ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.doc li { margin-bottom: .5em; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: #0071E3; }

/* The one thing on these pages that should stop the eye. */
.doc .callout {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 18px; margin: 26px 0;
}
.doc .callout p { margin: 0; color: var(--ink); }

.doc .back { display: inline-block; margin-bottom: 30px; }