/* Second Act — marketing site.
   Tokens are the app's "evening light" system (app/src/theme/palette.ts, SPEC-002):
   warm paper, plum ink, honey for small labels only, cobalt reserved for verification.
   Body never below 17px, text pairs >= 7:1, targets >= 48px. */

:root {
  --paper: #fbf6f1;
  --raised: #ffffff;
  --sunken: #f3eae3;
  --ink: #2a1a24;
  --ink-soft: #574350;
  --line: #ebdfd8;
  --line-strong: #d8c7bf;
  --plum: #5b2346;
  --plum-deep: #3b1530;
  --plum-press: #471a37;
  --plum-tint: #f3e4ec;
  --honey: #f5c27e;
  --cobalt: #1f47a0;
  --on-deep: #fbf1f5;
  --on-deep-soft: #e2c9d5;

  /* Evening light: the register the hero and the closing plate are cut from.
     Painted as a solid first so a slow photograph never flashes a bright frame. */
  --dusk: #1c0e18;
  --dusk-soft: #241521;
  --on-dusk: #fbf1f5;
  --on-dusk-soft: #e9d4df;

  --shadow-1: 0 2px 6px rgba(59, 21, 48, .05);
  --shadow-2: 0 12px 32px rgba(59, 21, 48, .09), 0 2px 6px rgba(59, 21, 48, .05);
  --shadow-3: 0 28px 70px rgba(59, 21, 48, .16), 0 6px 16px rgba(59, 21, 48, .07);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Strong curves; the built-in easings are too weak to read as intentional. */
  --out: cubic-bezier(.23, 1, .32, 1);
  --in-out: cubic-bezier(.77, 0, .175, 1);

  /* A fixed 1240 max turns a 27-inch screen into a narrow ribbon with 660px of
     dead margin either side, which is why the page had to be zoomed to read.
     Everything below keeps scaling with the viewport instead of capping at a
     laptop and stopping. */
  --gutter: clamp(20px, 4.4vw, 104px);
  --max: clamp(1100px, 84vw, 1680px);
  --max-wide: clamp(1180px, 92vw, 2100px);
  --rhythm: clamp(72px, 9vw, 184px);
}

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

/* One tiled turbulence, fixed, never repainted on scroll. A texture, not artwork. */
.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: .42; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .grain { opacity: .28; } }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(17px, .48vw + 15.2px, 19px);
  line-height: 1.65;
  text-wrap: pretty;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; text-wrap: balance; }

.display { font-size: clamp(42px, 6.6vw, 138px); line-height: .96; letter-spacing: -.03em; }
.title { font-size: clamp(32px, 4.3vw, 84px); line-height: 1.02; letter-spacing: -.025em; }
h3 { font-size: clamp(21px, 1.9vw, 34px); line-height: 1.22; letter-spacing: -.012em; font-weight: 600; }

p { margin: 0; }
.lede { font-size: clamp(18px, 1.15vw, 26px); line-height: 1.55; color: var(--ink-soft); max-width: 52ch; }
.note { font-size: clamp(15px, .52vw + 13px, 18px); line-height: 1.55; color: var(--ink-soft); }

a { color: inherit; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--raised); color: var(--ink); padding: 14px 20px; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- buttons -- */
.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: clamp(52px, 3.4vw, 64px); padding: 0 clamp(30px, 2.2vw, 42px);
  border: 1px solid transparent; border-radius: 999px;
  background: var(--btn-bg);
  font: 600 clamp(17px, .6vw + 15px, 20px)/1 var(--sans);
  text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--out), background-color 200ms ease, box-shadow 220ms var(--out), border-color 200ms ease;
}
.btn--primary { --btn-bg: var(--plum); color: #fff; box-shadow: var(--shadow-2); }
.btn--quiet { --btn-bg: var(--raised); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-1); }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { --btn-bg: var(--plum-press); box-shadow: var(--shadow-3); }
  .btn--quiet:hover { background: var(--sunken); border-color: var(--line-strong); }
}

.tag {
  display: inline-block; background: var(--honey); color: var(--ink);
  font: 500 15px/1 var(--sans); padding: 8px 14px; border-radius: 999px;
}

/* -------------------------------------------------------------------- nav -- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color 300ms ease, box-shadow 300ms ease, backdrop-filter 300ms ease;
}
.nav--stuck {
  background: color-mix(in oklab, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line);
}
/* Over the cinematic plate the nav is light; it inverts to paper once scrolled.
   Applied by main.js only on pages that actually have such a plate, so the
   other pages keep their ink-on-paper nav untouched. */
.nav--over:not(.nav--stuck) { color: var(--on-dusk); }
.nav--over:not(.nav--stuck) .wordmark { color: var(--on-dusk); }
.nav--over:not(.nav--stuck) .nav__links a { color: var(--on-dusk-soft); }
.nav--over:not(.nav--stuck) .nav__links a:hover { color: var(--on-dusk); }
.nav--over:not(.nav--stuck) .nav__cta {
  --btn-bg: color-mix(in oklab, var(--paper) 16%, transparent);
  color: var(--on-dusk); border-color: color-mix(in oklab, var(--paper) 34%, transparent);
  backdrop-filter: blur(10px); box-shadow: none;
}
.nav--over:not(.nav--stuck) .nav__cta:hover { --btn-bg: var(--paper); color: var(--plum-deep); }
.nav__inner {
  max-width: var(--max-wide); margin: 0 auto; padding: 16px var(--gutter);
  display: flex; align-items: center; gap: clamp(20px, 2vw, 44px);
}
.wordmark {
  font-family: var(--serif); font-weight: 600; font-size: clamp(23px, 1.2vw, 30px); letter-spacing: -.02em;
  text-decoration: none; margin-right: auto;
}
.nav__links { display: flex; gap: 6px; }
.nav__links a {
  position: relative; text-decoration: none; padding: 14px 12px; min-height: 48px;
  display: inline-flex; align-items: center; color: var(--ink-soft); font-weight: 500;
  transition: color 200ms ease;
}
.nav__links a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 10px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--ink); }
  .nav__links a:hover::after { transform: scaleX(1); }
}
.nav__cta { min-height: 48px; padding: 0 22px; }
@media (max-width: 880px) { .nav__links { display: none; } }

/* ------------------------------------------------------------------ hero -- */
/* Evening Light. The photograph fills the frame and the words sit inside it like
   a title card, so the page opens on a feeling rather than on a pitch. Legibility
   is held by a real scrim, never by hoping: cream on the darkened plate measures
   past 7:1, and the scrim's base colour is painted before the image arrives. */
.hero--cinematic {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  padding: 0; background: var(--dusk-soft); color: var(--on-dusk); overflow: clip;
  isolation: isolate;
}
.hero__plate {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 64% 38%;
  filter: saturate(.76) contrast(1.07) brightness(.68) sepia(.16);
  will-change: transform;
}
/* Two scrims. The vertical one buys contrast; the warm radial one is the light
   going down, which is the whole reason this direction is called Evening. */
.hero--cinematic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(to top,
      rgba(28,14,24,.95) 0%, rgba(28,14,24,.86) 22%,
      rgba(28,14,24,.46) 56%, rgba(28,14,24,.30) 76%, rgba(28,14,24,.52) 100%),
    radial-gradient(130% 78% at 76% 16%, rgba(245,194,126,.20), transparent 62%);
}
/* A vignette pulls the eye to the lower-left, where the sentence is. */
.hero--cinematic::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(118% 86% at 42% 62%, transparent 42%, rgba(18,8,15,.52) 100%);
}
.hero--cinematic > *:not(.hero__plate) { position: relative; z-index: 2; }

.hero__body {
  flex: 1; display: flex; align-items: flex-end;
  /* The top pad is load-bearing on a phone: the copy is taller than the viewport
     there, so without it the eyebrow grows up underneath the fixed nav. */
  padding: clamp(96px, 15vh, 148px) var(--gutter) clamp(52px, 8vh, 96px);
}
.hero__grid {
  width: 100%; max-width: var(--max-wide); margin: 0 auto;
  display: grid; gap: clamp(30px, 4vw, 60px); align-items: end;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
}
.hero__copy { display: grid; gap: clamp(18px, 2.2vw, 26px); }
.hero .display { color: var(--on-dusk); max-width: 13ch; }
.hero .display em { font-style: italic; font-weight: 400; color: #f8dfc7; }
.hero .lede { color: #f0dee7; max-width: 44ch; }
.hero__cta { display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap; }
.hero .note { color: var(--on-dusk-soft); }

.heading-eyebrow--hero { color: var(--honey); }

/* The product, as a small lit object in the dark. It is the proof element, so it
   gets the only pure-white surface on the screen. */
.letter {
  background: color-mix(in oklab, var(--raised) 97%, transparent);
  color: var(--ink); border-radius: 18px; padding: 22px 24px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.22), 0 34px 70px -22px rgba(0,0,0,.66);
  display: grid; gap: 14px;
}
.letter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.letter__title { font-size: 23px; line-height: 1.15; letter-spacing: -.018em; }
.letter__list { display: grid; }
.letter__list li {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--line);
}
.letter__who { font-size: 16px; }
.letter__who strong { font-family: var(--serif); font-weight: 600; font-size: 19px; margin-right: 6px; }
.avatar { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; filter: blur(5px) saturate(.9); }
.verified { color: var(--cobalt); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.letter__foot { padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--ink-soft); }

.scroll-cue {
  position: absolute; left: var(--gutter); bottom: 16px; z-index: 2; margin: 0;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dusk-soft);
}
.scroll-cue::after {
  content: ""; display: block; width: 1px; height: 34px; margin-top: 8px;
  background: linear-gradient(color-mix(in oklab, var(--paper) 60%, transparent), transparent);
}

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  .letter { justify-self: stretch; }
}
@media (max-width: 620px) { .scroll-cue { display: none; } }

/* ------------------------------------------------------------------ week -- */
/* Four beats and the week is over, so the section is set as a numbered sequence
   with hairline rules, not as a row of cards. The numeral lives in the margin the
   way it would in a printed index. Steps dim until you reach them: that is the
   shape of a finite week, which is the argument this product is making. */
.week { padding: var(--rhythm) var(--gutter) clamp(56px, 6vw, 104px); }
.week__head {
  max-width: var(--max-wide); margin: 0 auto clamp(40px, 5vw, 72px);
  display: grid; gap: 20px;
}
@media (min-width: 900px) {
  .week__head { grid-template-columns: minmax(0,1fr) minmax(0,.78fr); align-items: end; gap: 48px; }
}
/* On the rail, at full width. The measure is held by the copy itself (48ch),
   not by squeezing the container, which would pull the numerals off the rail. */
.week__body { max-width: var(--max-wide); margin-inline: auto; }
.week__rail, .week__progress { display: none; }

.steps { display: grid; border-top: 1px solid var(--line-strong); }
.step {
  display: grid; grid-template-columns: clamp(58px, 7vw, 104px) minmax(0, 1fr);
  gap: clamp(16px, 2.6vw, 40px); align-items: start;
  padding: clamp(26px, 3vw, 52px) 0; border-bottom: 1px solid var(--line);
}
/* Dimming whole steps to .42 opacity put the body copy far under the 7:1 floor
   SPEC-002 sets, and read as an unfinished page rather than as sequence. The
   numeral and a rule carry the state instead, and every word stays readable. */
.step__n { position: relative; transition: color 500ms var(--out); }
.step__n::after {
  content: ""; position: absolute; left: 0; top: 2.1em; width: 26px; height: 2px;
  background: var(--plum); transform: scaleX(0); transform-origin: left;
  transition: transform 520ms var(--out);
}
.step.is-active .step__n { color: var(--plum-deep); }
.step.is-active .step__n::after { transform: scaleX(1); }
@media (min-width: 900px) {
  .step { grid-template-columns: clamp(58px, 5vw, 92px) minmax(0, .62fr) minmax(0, 1fr); }
  /* The figure takes its own row across the copy columns. Parked inside one cell
     it left the other columns empty for its whole height, whichever cell it was
     in — the hole simply moved side to side. */
  .step__media { grid-column: 2 / -1; }
}
.step__n {
  font: 600 13px/1.9 var(--sans); font-variant-numeric: tabular-nums;
  letter-spacing: .14em; color: var(--plum);
}
.step h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.16; letter-spacing: -.014em; }
.step__when {
  display: block; margin-top: 7px;
  font: 500 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.step p:not(.step__n):not(.step__when) { color: var(--ink-soft); max-width: 48ch; }
.step__media { margin-top: clamp(18px, 1.8vw, 30px); border-radius: 4px; overflow: hidden; }
.step__media img { aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(.9) contrast(1.02) sepia(.06); }

/* ---------------------------------------------------------------- unblur -- */
/* The product's central mechanic, demonstrated instead of described: a face
   resolves as you scroll, exactly as it does when two people have both said
   hello. Two stacked photographs crossfading on opacity — the blur is baked
   into the lower layer once and never animated, because animating a filter
   repaints every frame. */
.unblur {
  position: relative; border-radius: 6px; overflow: hidden; background: var(--sunken);
  /* A portrait crop is right for a face, but the step's text column is wide; left
     uncapped a 4:5 ratio renders it over a thousand pixels tall. */
  /* Full row width, held to a band so the row never towers over its neighbours. */
  max-width: none;
}
.unblur img { height: clamp(240px, 24vw, 380px); width: 100%; object-fit: cover; object-position: 50% 44%; }
.unblur__soft { filter: blur(18px) saturate(.88); transform: scale(1.06); }
.unblur__sharp {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: saturate(.92) contrast(1.02) sepia(.06); opacity: 1;
}
.js .unblur__sharp { opacity: 0; }
.unblur__cap {
  position: absolute; left: 18px; bottom: 18px; width: max-content; max-width: calc(100% - 36px);
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in oklab, var(--raised) 93%, transparent);
  backdrop-filter: blur(10px); border-radius: 999px; padding: 11px 16px;
  font: 600 15px/1.2 var(--sans); color: var(--plum-deep);
}
.unblur__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cobalt); flex: none; }

/* ---------------------------------------------------------------- verify -- */
.verify { padding: 0 var(--gutter); }
.verify__inner {
  max-width: var(--max-wide); margin: 0 auto; background: var(--plum-deep); color: var(--on-deep);
  border-radius: 32px; padding: clamp(48px, 7vw, 96px);
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(36px, 6vw, 80px); align-items: center;
}
.verify__copy { display: grid; gap: 26px; }
.verify .lede { color: var(--on-deep-soft); }
.facts { display: grid; gap: 22px; margin-top: 6px; }
.facts h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; }
.facts p { color: var(--on-deep-soft); font-size: 17px; }
.verify__media { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-3); }
.verify__media img { aspect-ratio: 4 / 5; object-fit: cover; }
.seal {
  position: absolute; left: 20px; bottom: 20px; right: 20px;
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in oklab, var(--raised) 94%, transparent);
  color: var(--cobalt); font-weight: 600; font-size: 17px;
  padding: 12px 16px; border-radius: 999px; backdrop-filter: blur(8px);
}
.seal svg { width: 28px; height: 28px; flex: none; stroke: var(--cobalt); }
.seal__ring, .seal__tick { stroke-dasharray: 130; stroke-dashoffset: 0; }

@media (max-width: 900px) {
  .verify__inner { grid-template-columns: 1fr; border-radius: 24px; }
  .verify__media img { aspect-ratio: 4 / 3; }
}

/* -------------------------------------------------------------- not-here -- */
.not-here { padding: var(--rhythm) var(--gutter); max-width: calc(var(--max-wide) + 2 * var(--gutter)); margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 44px); }
.strikes { display: grid; }
.strikes li {
  position: relative; padding: 22px 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: clamp(24px, 3.2vw, 40px); line-height: 1.2; letter-spacing: -.015em;
}
.strikes li span { position: relative; display: inline-block; }
.strikes li span::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px;
  background: var(--plum); transform: scaleX(0); transform-origin: left;
}
.strikes li.is-struck span::after { transform: scaleX(1); transition: transform 620ms var(--in-out); }

/* ------------------------------------------------------------ membership -- */
.membership { padding: var(--rhythm) var(--gutter); background: var(--sunken); }
.membership__head { max-width: var(--max-wide); margin: 0 auto clamp(36px, 5vw, 64px); display: grid; gap: 18px; }
.plans { max-width: min(var(--max-wide), 1400px); margin: 0 auto 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 1.6vw, 30px); align-items: start; }
.plan {
  background: var(--raised); border-radius: 22px; padding: clamp(26px, 3vw, 38px);
  display: grid; gap: 14px; box-shadow: var(--shadow-1);
  transition: transform 320ms var(--out), box-shadow 320ms var(--out);
}
@media (hover: hover) and (pointer: fine) {
  .plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
}
.plan__price { font-size: 17px; color: var(--ink-soft); }
.plan__price span { font-family: var(--serif); font-size: clamp(38px, 4vw, 52px); line-height: 1; color: var(--ink); margin-right: 8px; }
.plan .btn { margin-top: 6px; justify-self: start; }
.plan--free { background: transparent; box-shadow: none; border: 1px solid var(--line-strong); }
.plan--free ul { display: grid; gap: 10px; }
.plan--free li { position: relative; padding-left: 26px; color: var(--ink-soft); }
.plan--free li::before {
  content: ""; position: absolute; left: 4px; top: 10px; width: 10px; height: 6px;
  border-left: 2px solid var(--plum); border-bottom: 2px solid var(--plum); transform: rotate(-45deg);
}
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- faq -- */
.faq { padding: var(--rhythm) var(--gutter); max-width: calc(var(--max-wide) + 2 * var(--gutter)); margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 48px); }
.faq__list { display: grid; }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px;
  padding: 26px 0; min-height: 48px;
  font-family: var(--serif); font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary span { flex: 1; }
.qa summary::after {
  content: ""; width: 14px; height: 14px; flex: none; margin-right: 4px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform 260ms var(--out);
}
.qa[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.qa__body { display: grid; grid-template-rows: 1fr; }
.qa__body p { padding-bottom: 28px; color: var(--ink-soft); max-width: 68ch; }

/* --------------------------------------------------------------- closing -- */
.closing { position: relative; min-height: min(92vh, 860px); display: grid; align-items: end; overflow: clip; }
.closing__media { position: absolute; inset: 0; }
.closing__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.closing__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(15deg, rgba(42, 26, 36, .88) 12%, rgba(42, 26, 36, .55) 46%, rgba(42, 26, 36, .18) 78%);
}
.closing__copy {
  position: relative; max-width: var(--max-wide); width: 100%; margin: 0 auto;
  padding: var(--gutter) var(--gutter) clamp(56px, 9vw, 104px);
  display: grid; gap: 24px; justify-items: start; color: #fff;
}
.closing__copy .lede { color: rgba(255, 255, 255, .88); }
.closing .btn--primary { background: #fff; color: var(--plum-deep); }
@media (hover: hover) and (pointer: fine) { .closing .btn--primary:hover { background: var(--plum-tint); } }

/* ------------------------------------------------------------------ foot -- */
.foot { padding: clamp(40px, 6vw, 72px) var(--gutter); }
.foot__inner {
  max-width: var(--max-wide); margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
}
.foot .note { max-width: 70ch; }
@media (max-width: 760px) {
  .foot__inner { grid-template-columns: 1fr; justify-items: start; }
}

/* ---------------------------------------------------------------- motion -- */
/* Starting states are only applied once JS is running, so the page is complete
   and readable with JavaScript unavailable. */
.js [data-fade] { opacity: 0; transform: translateY(14px); }
.js [data-split] .word { display: inline-block; }
.js [data-split] .word > span { display: inline-block; opacity: 0; }
.js [data-split] .word { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.js [data-reveal] img { clip-path: inset(0 0 100% 0); }
.js .seal__ring, .js .seal__tick { stroke-dashoffset: 130; }

@media (prefers-reduced-motion: reduce) {
  .js [data-fade], .js [data-split] .word > span, .js [data-reveal] img { opacity: 1; transform: none; clip-path: none; }
  .js .seal__ring, .js .seal__tick { stroke-dashoffset: 0; }
  .step { opacity: 1; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.qa__body { overflow: hidden; }

/* ------------------------------------------------------------ inner pages -- */
.page-head { padding: clamp(112px, 16vh, 184px) var(--gutter) clamp(32px, 5vw, 56px); }
.page-head__inner { max-width: var(--max-wide); margin: 0 auto; display: grid; gap: clamp(18px, 2.5vw, 28px); }
.page-head .lede { max-width: 62ch; }

/* A band of short, equal points. Not a bento grid: one row of facts, no boxes. */
.strip { padding: var(--rhythm) var(--gutter); background: var(--sunken); }
.strip__inner { max-width: var(--max-wide); margin: 0 auto; display: grid; gap: clamp(32px, 5vw, 56px); }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 48px); }
.cols > div { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.cols p { color: var(--ink-soft); }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

.prose-section { padding: var(--rhythm) var(--gutter); }
.prose { max-width: 74ch; margin: 0 auto; display: grid; gap: 22px; }
.prose .title { margin-top: clamp(28px, 4vw, 48px); }
.prose .title:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); font-size: 18px; line-height: 1.7; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--plum); text-underline-offset: 3px; }

.ticks { display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink-soft); font-size: 18px; line-height: 1.7; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 11px; width: 11px; height: 6px;
  border-left: 2px solid var(--plum); border-bottom: 2px solid var(--plum); transform: rotate(-45deg);
}

.callout {
  background: var(--plum-tint); border-radius: var(--radius-lg, 20px); padding: clamp(20px, 3vw, 28px);
  display: grid; gap: 10px;
}
.callout h2 { font-family: var(--sans); font-size: 17px; font-weight: 600; }
.callout p { color: var(--ink); }

.heading-eyebrow {
  font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-soft); margin-top: clamp(32px, 4vw, 52px);
}
.faq .heading-eyebrow:first-of-type { margin-top: 0; }

.cta-band { padding: var(--rhythm) var(--gutter); background: var(--plum-deep); color: var(--on-deep); }
.cta-band__inner { max-width: var(--max-wide); margin: 0 auto; display: grid; gap: 22px; justify-items: start; }
.cta-band .lede { color: var(--on-deep-soft); }
.cta-band .btn--primary { background: #fff; color: var(--plum-deep); }
@media (hover: hover) and (pointer: fine) { .cta-band .btn--primary:hover { background: var(--plum-tint); } }

/* Footer grows a link row on the inner pages. */
.foot__inner--wide { grid-template-columns: 1fr auto; align-items: start; row-gap: 20px; }
.foot__brand { display: grid; gap: 6px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: flex-end; }
.foot__links a {
  min-height: 44px; display: inline-flex; align-items: center; text-decoration: none;
  color: var(--ink-soft); font-weight: 500; transition: color 200ms ease;
}
.foot__links a[aria-current="page"], .nav__links a[aria-current="page"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .foot__links a:hover { color: var(--ink); } }
.foot__credits { grid-column: 1 / -1; max-width: 80ch; }
@media (max-width: 760px) {
  .foot__inner--wide { grid-template-columns: 1fr; }
  .foot__links { justify-content: flex-start; }
}

/* Headings inside a reading column are smaller than section headings. */
.prose .title { font-size: clamp(27px, 3.2vw, 40px); line-height: 1.12; }
/* A list of things deliberately not built: a dash, never a tick. */
.ticks--minus li::before {
  width: 13px; height: 0; top: 17px; background: none;
  border-left: none; border-bottom: 2px solid var(--plum); transform: none;
}