:root {
  /* ---------- palette ----------
     From Carin's Illustrator logo, 2026-08-08 (D-32). Teal does the
     structural work; orange is display and artwork only; grey is the
     neutral. No navy, no blue. */
  --teal:        #1C6F6F;   /* structural: buttons, links, chrome. 5.91:1 white */
  --teal-deep:   #124A4A;
  --teal-light:  #8FC0C0;
  --teal-soft:   #E2EFEF;
  --teal-wash:   #F3F9F9;

  --orange:      #EF842E;   /* ⚠️ DISPLAY + ARTWORK ONLY — see note below */
  --orange-light:#FBD5B4;

  --ink:         #3A3A38;   /* warm grey, matching the wordmark */
  --ink-soft:    #6B6B68;
  --paper:       #FFFFFF;
  --stone:       #F7F7F5;
  --stone-2:     #EDEDEA;
  --rule:        #E0E4E3;

  /* ⚠️ --orange #EF842E cannot carry text in EITHER direction:
       white on it   2.62:1 WCAG · Lc 56 APCA
       ink on it     5.47:1 WCAG · Lc 48 APCA
     It clears the Lc 45 LARGE-DISPLAY bar at Lc 51, so it is fine as the
     script, the mark and accents — and never as UI, buttons or body copy.
     Teal is the text-and-button colour: white on --teal is 5.91:1 / Lc 85. */

  /* ---------- role layer ----------
     Every colour decision routes through here so the page can be repainted
     without touching component CSS. Add a role; never hardwire a palette
     token further down. */
  --r-hero-ground:  var(--stone);
  --r-hero-tint:    var(--teal-soft);
  --r-hero-accent:  var(--orange);
  --r-eyebrow:      var(--teal);
  --r-link:         var(--teal);
  --r-btn:          var(--teal);
  --r-btn-ink:      var(--paper);
  --r-band:         var(--teal-soft);
  --r-stat-num:     var(--teal);
  --r-panel:        var(--teal-soft);
  --r-panel-rule:   var(--rule);
  --r-card-top:     var(--orange);
  --r-step-num:     var(--orange-light);
  --r-accent-mark:  var(--orange);
  --r-arc:          var(--orange);
  --r-quote-bar:    var(--orange);
  --r-footer:       var(--stone-2);
  --r-frame:        var(--teal);
  --r-field:        var(--teal-wash);
  --r-field-focus:  var(--teal);
  --r-ok:           var(--teal-deep);

  --shadow:       0 1px 2px rgba(58,58,56,.05), 0 12px 34px -18px rgba(58,58,56,.20);
  --shadow-lift:  0 2px 6px rgba(58,58,56,.07), 0 28px 60px -28px rgba(58,58,56,.34);
  --radius:       16px;
  --measure:      72rem;
}

*, *::before, *::after { box-sizing: border-box; }
.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;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.024em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.7rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.012em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
a { color: var(--r-link); text-underline-offset: 2px; }
a:hover { color: var(--teal); }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 650; }

.wrap { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 48rem); margin-inline: auto; }
section { padding: clamp(3.5rem, 7vw, 6rem) 0; }

.eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--r-eyebrow); margin: 0 0 1rem;
}
.lede { font-size: clamp(1.08rem, 2vw, 1.3rem); color: var(--ink-soft); }
.kicker { font-family: Inter, sans-serif; font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.25; letter-spacing: -0.018em; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: 76px; padding-block: .5rem; }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
/* One outlined SVG, so the lockup can never drift from the artwork and
   carries no font dependency. Height-driven; width follows the aspect. */
/* The horizontal lockup has a lot of content across its width, so a header
   sized by height makes the caps illegible — at 46px tall the whole thing is
   130px wide and "THE GREAT RESCUE" is about 6px. Interior pages therefore
   run it larger; the home page uses the mark alone, since its hero already
   carries the name and showing the lockup twice on one screen was the
   duplication Carin flagged. */
.brand .lockup { height: 46px; width: auto; }
.brand .lockup--mark { height: 42px; }
.site-footer .brand .lockup { height: 70px; }   /* +67% — Carin */

.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a { font-size: .93rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
.nav a:hover { color: var(--teal); }

:root { --btn-size: 1.02rem; }
/* No minimum any more. The old --btn-min-size existed solely because white
   on orange needed >=18.66px/700 to reach AA under the large-text rule.
   Buttons are teal now (5.91:1 / Lc 85), which passes at ANY size — so this
   is a design value, not a load-bearing one. */

.btn {
  display: inline-block; background: var(--r-btn); color: var(--r-btn-ink);
  padding: .52rem 1.15rem; border-radius: 999px;
  font-size: var(--btn-size); font-weight: 700; text-decoration: none;
  letter-spacing: -.005em;
  border: 1px solid var(--r-btn); white-space: nowrap; cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
  font-family: inherit;
}
.btn:hover { filter: brightness(.93); color: var(--r-btn-ink); transform: translateY(-1px); }
/* `.nav a` out-specifies `.btn`, so size and weight have to restate here or
   the header CTA silently inherits the nav's 14.9px/500. */
.nav a.btn, .nav a.btn:hover {
  color: var(--r-btn-ink);
  font-size: .95rem; font-weight: 650; padding: .5rem 1.1rem;
}
.btn-ghost { background: transparent; color: var(--teal); border-color: var(--teal-light); }
.btn-ghost:hover { background: var(--teal-soft); color: var(--teal-deep); border-color: var(--r-link); filter: none; }
/* "Large" buys its emphasis with padding and a modest step up in size. */
.btn-lg { padding: .82rem 1.7rem; font-size: 1.09rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.nav-toggle { display: none; }

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

/* The H1 is the lockup as artwork rather than rendered type — it matches the
   logo exactly, needs no per-face kerning fixes, and drops the webfont
   dependency. The alt text carries the name, so the h1 stays semantic. */
.hero-lockup { margin: .2rem 0 1.6rem; line-height: 0; }
.hero-lockup img { width: min(100%, 31.6rem); height: auto; display: block; }
.hero .eyebrow { margin-bottom: 2.3rem; }
/* No eyebrow in the hero. Attribution lives in the footer and in the
   "who's behind it" section, both with more substance than a company name
   in small caps could carry to an audience that doesn't know the name. */

.hero {
  background:
    radial-gradient(680px 300px at 90% -20%, var(--r-hero-tint) 0%, rgba(255,255,255,0) 60%),
    var(--r-hero-ground);
  /* No bottom rule. Sections separate by GROUND TONE — paper, stone, wash —
     which reads as composition; a stray hairline reads as a divider someone
     forgot to remove. */
  padding: clamp(3.6rem, 6.4vw, 5.5rem) 0 clamp(2.5rem, 5vw, 3.75rem);
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 4.5vw, 3.75rem);
  /* stretch, not center: Carin wants the mockups to run the full height of
     the copy column — top above the H1, bottom level with the buttons. */
  align-items: stretch;
}
.hero h1 { margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--r-hero-accent); }
.hero .kicker { color: var(--teal); margin-bottom: .55rem; max-width: 27.5rem; margin-top: 0; }
.hero .lede { max-width: 34.5rem; margin-bottom: .9rem; line-height: 1.42; text-wrap: balance; }
/* "free" sits in the LEDE so it attaches to the rebuild, not the website —
   that is D-22's distinction, and it means compliance no longer depends on
   the kicker and lede staying adjacent. Emphasis follows the word.
   Stays teal rather than going orange: orange at this size is 2.62:1 WCAG,
   which fails even the 3:1 large-text bar and only clears on APCA. That
   trade was worth taking on an 80px script; not at 20px.
   Caps via CSS, not markup — screen readers still read "free", not F-R-E-E. */
.hero .lede em {
  font-style: normal; font-weight: 700; color: var(--teal-deep);
  text-transform: uppercase; letter-spacing: .03em;
}
.hero .flat { font-weight: 650; color: var(--teal); margin-bottom: 1.9rem; }

/* Hero figure — a before/after pair in browser chrome, side by side and
   long enough to read as whole pages rather than two headers. The frame
   echoes the window in the logo mark, and says "websites" before a word is.
   Both panes share --shot-h so they stay honestly comparable. */
.hero-figure {
  --shot-h: clamp(300px, 40vw, 440px);
  position: relative;
  /* Carin's hybrid, 2026-08-08: side by side as in the original layout, but
     heavily asymmetric as in the big-site version — the rebuild dominates and
     the old site is a small reference beside it, rather than the two being
     weighed against each other as equals. Bottom-aligned so the small pane
     sits on the same floor instead of floating. */
  display: block; height: 100%; min-height: clamp(360px, 42vw, 520px);
  /* No top offset: the figure is meant to start above the H1 now. The old
     6.75rem here was from when it needed dropping below the eyebrow, and it
     was displacing the whole figure and overhanging the buttons by the same
     amount. */
}

.shot { position: relative; margin: 0; }

/* Labels sit above the frames as little headers. Pills over the screenshots
   were unreadable against busy page content. */
.shot-label {
  font-size: .66rem; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; margin: 0 0 .5rem .1rem; line-height: 1;
}
.shot--before .shot-label { color: var(--ink-soft); }
.shot--after  .shot-label { color: var(--r-accent-mark); }

.shot-frame {
  border-radius: 11px; overflow: hidden; background: var(--paper);
  border: 1px solid var(--rule); box-shadow: var(--shadow-lift);
}
.chrome {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 9px; background: var(--r-frame);
}
.chrome i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.42); }
.chrome span {
  margin-left: 5px; flex: 1; height: 10px; border-radius: 3px;
  background: rgba(255,255,255,.16);
}

/* Fade the cut rather than chop it — the page obviously continues below. */
.shot-view {
  height: var(--shot-h); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
}
.shot-view img { width: 100%; display: block; }

/* The old site reads smaller and flatter. Tops stay flush so the two are
   plainly the same thing at two moments, not two different objects. */
.shot--before { filter: saturate(.72); opacity: .9; }
.shot--before .chrome { background: var(--ink-soft); }
/* Small enough to read as "what it was", not as half of a comparison. */
.shot--before .shot-view { height: calc(var(--shot-h) * .52); }
.shot--before .shot-frame { border-radius: 8px; }
.shot--before .chrome { padding: 5px 7px; }
.shot--before .chrome i { width: 5px; height: 5px; }

/* The rebuild fills the cell top to bottom — its top sits above the H1 and
   its foot lands level with the buttons. */
.shot--after {
  position: absolute; inset: 0 0 0 24%; z-index: 1;
  display: flex; flex-direction: column;
}
.shot--after .shot-frame { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.shot--after .shot-view { flex: 1; height: auto; min-height: 0; }
.shot--after .shot-view img { height: 100%; width: 100%; object-fit: cover; object-position: top center; }

/* The old site is pinned bottom-left and OVERLAPS the rebuild, as in the
   big-site version — one object with a history rather than two exhibits. */
.shot--before {
  position: absolute; left: 0; bottom: 4%; width: 30%; z-index: 3;
}
.shot--before .shot-view { height: auto; max-height: 42vw; }

/* The swoop lies across both panes: tail at the foot of the old site, head
   in the middle of the new one. z-index because the frames are earlier
   siblings and would otherwise paint over it. */
.hero-arc {
  position: absolute; z-index: 6; pointer-events: none; overflow: visible;
  /* Anchored from the BOTTOM, not the top. The "before" pane is pinned to
     bottom:4% of the figure, so a bottom-anchored arc stays at its foot at
     every viewport size; a top offset drifts away from it as the figure
     grows. Carin wants the swoop down at the foot of the old site. */
  left: 11%; width: 54%; height: auto;
  top: auto; bottom: 0.5rem;
  color: var(--r-arc);
  filter: drop-shadow(0 4px 10px rgba(58,58,56,.22));
}
/* Solid, not a gradient — the fade read as a graphic effect rather than as a
   gesture. Both halves take --r-arc so head and ribbon can never drift. */
.hero-arc-ribbon,
.hero-arc-head { fill: currentColor; }

/* ---------- interior page hero ---------- */

.hero--page { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.hero--page h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: .45em; }
.narrow-hero { width: min(100% - 2.5rem, 50rem); margin-inline: auto; }
.narrow-hero .lede { max-width: 40rem; }

.prose h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-top: 2.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { max-width: 42rem; }
.prose .byline { color: var(--ink-soft); font-size: .92rem; margin-top: 1.6rem; }

/* Portrait on the mission page — "who's behind it" folded in here rather
   than duplicated on the home page, where Carin's quote appeared twice. */
.portrait { margin: 0 0 2.2rem; max-width: 15rem; }
.portrait img { border-radius: var(--radius); box-shadow: var(--shadow); }
.portrait figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: .7rem; }

.ticks { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1rem; }
.ticks li { position: relative; padding-left: 1.9rem; font-size: .99rem; color: var(--ink-soft); }
.ticks li strong { color: var(--ink); font-weight: 650; }
/* Hearts rather than check marks — Carin. A tick is a spec sheet; on a page
   about rescue work a heart is the warmer read, and it's the one place a
   heart earns its keep without tipping twee. */
.ticks li::before {
  content: "\2665"; position: absolute; left: 0; top: -.05em;
  color: var(--orange); font-size: 1.05rem; line-height: 1.5;
}

.runby { margin-top: 2rem; font-size: .93rem; color: var(--ink-soft); }

/* Closing thought under a card set. Plain text on the section ground —
   the tinted box it used to sit in gave a quiet aside the visual weight of
   a callout, which is the opposite of what it is. */
.closing {
  margin-top: 2.5rem; max-width: 46rem;
  font-size: 1.02rem; color: var(--ink-soft);
}
.closing + p { margin-top: 1rem; }

.arrow-link { font-weight: 650; text-decoration: none; }
.arrow-link::after { content: " →"; }
.arrow-link:hover { text-decoration: underline; }

/* ---------- editor mockup ----------
   Markup, not a screenshot — the real editor isn't finished, and this way it
   stays sharp, follows the palette, and is a two-minute fix when it is. */

.chat {
  border-radius: 12px; overflow: hidden; background: var(--paper);
  border: 1px solid var(--rule); box-shadow: var(--shadow-lift);
}
.chat-body { padding: 1.15rem 1.15rem .6rem; display: grid; gap: .7rem; }
.chat .msg {
  margin: 0; font-size: .95rem; line-height: 1.5;
  padding: .7rem .95rem; border-radius: 14px; max-width: 88%;
}
.chat .msg--them {
  background: var(--teal-wash); border: 1px solid var(--rule);
  color: var(--ink); border-bottom-left-radius: 5px; justify-self: start;
}
.chat .msg--you {
  background: var(--r-btn); color: var(--r-btn-ink);
  border-bottom-right-radius: 5px; justify-self: end; font-weight: 500;
}
.chat-input {
  display: flex; align-items: center; gap: .6rem;
  margin: .5rem 1.15rem 1.15rem; padding: .68rem .9rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--teal-wash); color: var(--ink-soft); font-size: .93rem;
}
.chat-input i {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--r-btn); flex: none;
}

/* ---------- site-editor mockup ----------
   Replaced the chat mockup 2026-10-01. One labelled field per thing that
   changes, a Save, and a confirmation — the shape of the real TWS and
   Mission Meow admins, drawn in markup so no client's admin is shown. */

.editor {
  border-radius: 12px; overflow: hidden; background: var(--paper);
  border: 1px solid var(--rule); box-shadow: var(--shadow-lift);
}
.editor-body { padding: 1.2rem 1.25rem 1.3rem; display: grid; gap: 1rem; }
.ed-head { display: flex; align-items: center; justify-content: space-between;
  padding-bottom: .8rem; border-bottom: 1px solid var(--rule); }
.ed-title { font-weight: 700; font-size: 1.05rem; color: var(--ink); letter-spacing: -.01em; }
.ed-live { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--r-ok); display: inline-flex; align-items: center; gap: .4rem; }
.ed-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--r-accent-mark); }
.ed-field { display: grid; gap: .35rem; }
.ed-label { font-size: .8rem; font-weight: 650; color: var(--ink); }
.ed-input {
  display: block; padding: .62rem .85rem; border-radius: 9px;
  background: var(--r-field); border: 1px solid var(--rule);
  font-size: .95rem; color: var(--ink); line-height: 1.4;
}
.ed-input--active { background: var(--paper); border-color: var(--r-field-focus);
  box-shadow: 0 0 0 3px var(--teal-soft); }
.ed-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px;
  vertical-align: -.15em; background: var(--ink); animation: ed-blink 1.1s steps(1) infinite; }
@keyframes ed-blink { 50% { opacity: 0; } }
.ed-seg { display: inline-flex; width: max-content; border: 1px solid var(--rule);
  border-radius: 999px; background: var(--r-field); padding: 3px; gap: 3px; }
.ed-seg b { font-weight: 600; font-size: .86rem; padding: .32rem .9rem; border-radius: 999px; color: var(--ink-soft); }
.ed-seg b.on { background: var(--r-btn); color: var(--r-btn-ink); }
.ed-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: .9rem; border-top: 1px solid var(--rule); }
.ed-done { font-size: .86rem; font-weight: 600; color: var(--r-ok); }
.ed-btn { background: var(--r-btn); color: var(--r-btn-ink); font-weight: 700; font-size: .92rem;
  padding: .5rem 1.3rem; border-radius: 999px; }

/* Testimonial under the ticks. Quiet: an orange rule and the words, no card. */
.testimonial { margin: 2.2rem 0 0; padding-left: 1.3rem; border-left: 3px solid var(--r-quote-bar); }
.testimonial blockquote { margin: 0 0 .7rem; font-size: 1.12rem; line-height: 1.5;
  font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.testimonial figcaption { font-size: .88rem; color: var(--ink-soft); }
.testimonial figcaption strong { color: var(--ink); }

/* ---------- FAQ ---------- */

.qa {
  border-bottom: 1px solid var(--rule);
}
.qa:first-of-type { border-top: 1px solid var(--rule); }
.qa > summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2.2rem 1.05rem 0;
  font-weight: 650; font-size: 1.02rem; color: var(--ink); position: relative;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--r-link); border-bottom: 2px solid var(--r-link);
  transform: rotate(45deg); transition: transform .18s ease;
}
.qa[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.qa > summary:hover { color: var(--r-link); }
.qa > summary:focus-visible { outline: 2px solid var(--r-link); outline-offset: 3px; border-radius: 4px; }
.qa > p { font-size: .98rem; color: var(--ink-soft); margin: 0 0 1.05rem; max-width: 44rem; }
.qa > p:first-of-type { margin-top: -.15rem; }


/* ── hand-drawn underline — PARKED 2026-08-08 ─────────────────
   Kept, not deleted. Carin, seeing it on mobile: it "reads too much" on top
   of the italics — two emphasis signals on one phrase. The italics stay and
   carry it alone. To bring this back, add class="swoop" to the <em>s in the
   why-it-matters and what-a-refresh headings; nothing else is needed.
   ───────────────────────────────────────────────────────────── 
   Warmth without spending the script. The script means "Refresh" — it's the
   brand's signature, and using it for general emphasis would turn a
   signature into a font. A drawn underline is a separate mark, so it adds
   the same hand-made feel and dilutes nothing.

   It's also ARTWORK rather than text, which is how orange gets to appear
   here at all: --orange can't carry type, but it can draw.

   ⚠️ RULE: at most one per section, never on adjacent sections. Its whole
   effect comes from being rare — used four or five times it stops reading as
   emphasis and becomes a texture. */
/* Both emphasised phrases get the same treatment: italic + the drawn
   underline. Scoping this to #why left the second one upright. */
h2 em { font-style: italic; }

.swoop {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2.5,9.2 C46,3.4 132,2.1 197.5,6.0 C133,7.4 47,9.4 3.4,12.6 Z' fill='%23EF842E'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .32em;
  padding-bottom: .1em;
}

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

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; margin-top: 2.75rem; }
.card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.7rem 1.6rem; box-shadow: var(--shadow); border-top: 3px solid var(--r-card-top);
}

/* Editorial columns, not feature cards. Losing the fill, border, shadow and
   radius is what removes the SaaS signal — adding icons to a card grid makes
   it read MORE like a product page, not less. A rule, a heading and air is
   how print handles a three-up. */
.reasons .card {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 1.4rem 0 0; border-top: 2px solid var(--r-card-top);
}
.reasons .card h3 { margin-bottom: .5rem; }
.reasons .card p { font-size: 1rem; margin-bottom: .8rem; }
/* Lead sentence carries full ink, the follow-up drops back — breaks a
   four-line block into two scannable beats without adding words. */
.reasons .card p.lead { color: var(--ink); font-weight: 500; }
.reason-heart {
  display: block; color: var(--orange); font-size: 1.35rem;
  line-height: 1; margin-bottom: .7rem;
}
.card h3 { margin-bottom: .45rem; }
.card p { font-size: .97rem; color: var(--ink-soft); }

/* "What people never see" — three images under the why-lede. Cropped
   shorter than their 4:5 source so the strip reads as a pause, not a
   gallery. On phones it becomes a swipeable row rather than three stacked
   tall images. */
.unseen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 2.4rem 0 .5rem; }
.unseen figure { margin: 0; }
.unseen img { width: 100%; aspect-ratio: 4 / 3.6; object-fit: cover; border-radius: 12px; }
.unseen figcaption {
  margin-top: .7rem; font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
}
@media (max-width: 680px) {
  .unseen { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1.25rem; padding-inline: 1.25rem;
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none; }
  .unseen figure { scroll-snap-align: start; }
}

/* ---------- stat band ---------- */

.band { background: var(--r-band); color: var(--ink); }
.band h2 { color: var(--ink); }
.band p { color: var(--ink-soft); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem; margin-top: 2.75rem; }
.stat { border-top: 2px solid var(--r-card-top); padding-top: 1.1rem; }
.stat .n {
  font-family: Inter, sans-serif; font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3rem); line-height: 1; display: block; color: var(--r-stat-num);
}
.stat .l { font-size: .95rem; color: var(--ink-soft); margin-top: .6rem; display: block; }
.stat .src { font-size: .78rem; color: var(--ink-soft); margin-top: .7rem; display: block; }

/* ---------- before / after slider ---------- */

/* A scroll viewport. Both images are the same height so the panes stay
   registered as it scrolls. */
.compare {
  position: relative;
  height: clamp(380px, 62vh, 620px);
  overflow-y: auto; overflow-x: hidden;
  border-radius: var(--radius); border: 1px solid var(--rule);
  box-shadow: var(--shadow); background: var(--paper);
  overscroll-behavior: contain;   /* don't scroll the page past the ends */
}
.compare-track { position: relative; }
.compare img { display: block; width: 100%; }

/* The pane is anchored RIGHT and narrows leftward — so the image inside must
   be anchored right too. Left-anchored, it showed the LEFT of the new site
   inside the RIGHT of the frame, so the two pages never lined up and sliding
   all the way across never revealed the full width. Pinning the image's
   right edge to the frame's right edge keeps both pages registered at every
   position, and 100% reveals the whole rebuild. */
.compare .after-pane {
  position: absolute; inset: 0 0 0 auto; width: 50%; overflow: hidden;
}
.compare .after-pane img {
  position: absolute; top: 0; right: 0;
  width: var(--frame-w, 100%); max-width: none;
}

/* The handle is the only thing in the frame that takes pointer events, which
   is what lets drag-to-compare and scroll-to-read coexist. */
.handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: var(--r-accent-mark); transform: translateX(-50%);
  z-index: 4; cursor: ew-resize; touch-action: none;
}
.handle::before {           /* widened hit area, invisible */
  content: ""; position: absolute; inset: 0 -14px;
}
/* Sticky, not absolute-50%: .handle spans the FULL track height (the whole
   tall screenshot), so top:50% put the grip halfway down the page image —
   below the fold of the 380-620px frame. Only the line was visible. Sticky
   keeps it just inside the top edge AND reachable while scrolling, which is
   what the hint text ("scroll inside the frame") already promises. */
.handle-grip {
  position: sticky; top: 84px; left: 1.5px;   /* 1.5px = centre of the 3px line */
  transform: translateX(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--r-accent-mark); color: var(--paper);
  box-shadow: 0 2px 10px rgba(58,58,56,.35);
  display: grid; place-items: center;
}
.handle-grip::after {
  content: "\2194"; font-size: 1.1rem; font-weight: 700; color: var(--ink);
}
.handle:focus-visible { outline: none; }
.handle:focus-visible .handle-grip { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--teal); }
.handle.is-dragging .handle-grip { transform: translateX(-50%) scale(1.08); }
/* Labels sit ABOVE the frame rather than inside it. Sticky-positioned tags
   inside a scroll container were fragile, and pills over busy screenshots
   were unreadable — the same conclusion the hero reached. */
.compare-labels {
  display: flex; justify-content: space-between;
  margin: 2.5rem 0 .5rem;
}
.compare-labels .shot-label { color: var(--ink-soft); margin: 0; }
.compare-labels .shot-label--after { color: var(--r-accent-mark); }

.compare-hint { margin-top: .8rem; font-size: .88rem; color: var(--ink-soft); }

/* ---------- steps ---------- */

.steps { display: grid; gap: 1.4rem; margin-top: 2.75rem; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: start;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.6rem 1.7rem; box-shadow: var(--shadow);
}
.step .num {
  font-family: Inter, sans-serif; font-weight: 800; font-size: 1rem;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--r-step-num); color: var(--ink);
  display: grid; place-items: center;
}
.step h3 { margin-bottom: .35rem; }
.step p { font-size: .98rem; color: var(--ink-soft); margin: 0; }

/* ---------- panels ---------- */

.panel { background: var(--r-panel); }
.band  { background: var(--stone); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* The form is much taller than its copy, so centring left it floating. */
#nominate .split { align-items: start; }
.split-tight { grid-template-columns: .72fr 1.28fr; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }

.quote {
  border-left: 3px solid var(--r-quote-bar); padding-left: 1.4rem;
  font-family: Inter, sans-serif; font-size: 1.12rem;
  line-height: 1.5; color: var(--teal); letter-spacing: -0.01em;
}
.quote + .byline { font-size: .9rem; color: var(--ink-soft); margin-top: 1rem; }

.note {
  background: var(--teal-soft); border: 1px solid var(--teal-light);
  border-radius: var(--radius); padding: 1.3rem 1.5rem; font-size: .96rem; color: var(--ink);
}

/* ---------- tally ---------- */

.tally { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.6rem 1.8rem; margin-top: 2rem; box-shadow: var(--shadow); }
.tally .n { font-family: Inter, sans-serif; font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--r-stat-num); }
.tally p { font-size: .96rem; color: var(--ink-soft); margin: 0; }

/* ---------- form ---------- */

.form-card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--shadow);
}
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .88rem; font-weight: 650; margin-bottom: .38rem; }
.field .hint { font-weight: 400; color: var(--ink-soft); }
.field .hint--under { display: block; margin: .35rem 0 0; font-size: .82rem; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .75rem .95rem;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--teal-wash); color: var(--ink);
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--r-accent-mark); outline-offset: 1px;
  border-color: var(--r-accent-mark); background: var(--paper);
}
.field.choice { border: 0; padding: 0; margin: 0 0 1.15rem; min-width: 0; }
.field.choice legend { font-size: .88rem; font-weight: 650; margin-bottom: .5rem; padding: 0; }
.field.choice label {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem;
  font-size: .97rem; font-weight: 500; margin: 0 0 .45rem; cursor: pointer;
}
.field.choice label .hint { font-size: .85rem; }
.field.choice input { accent-color: var(--r-btn); width: 1.05rem; height: 1.05rem; margin: 0; transform: translateY(2px); }
.field [hidden], .field[hidden] { display: none; }
.form-card button[disabled] { opacity: .7; cursor: progress; transform: none; }
.form-error { margin: 1rem 0 0; color: #9B2C1B; font-size: .93rem; font-weight: 600; }
.form-thanks h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.form-thanks:focus { outline: none; }
.hp { position: absolute; left: -9999px; }
.preview-note {
  margin-top: 1.1rem; padding: .95rem 1.15rem; background: var(--stone);
  border: 1px solid var(--rule); border-radius: 10px; font-size: .93rem;
}

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

.site-footer { background: var(--r-footer); color: var(--ink-soft); border-top: 1px solid var(--rule); padding: clamp(3rem, 6vw, 4rem) 0 2rem; font-size: .95rem; }
.site-footer a { color: var(--r-link); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a:hover { color: var(--ink); }
.site-footer h4 { font-family: Inter, sans-serif; color: var(--ink); font-size: 1rem; margin: 0 0 .85rem; font-weight: 700; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 2.5rem; }

/* The mark, not a text heading — Carin, 2026-08-07. Reuses .brand so the
   lockup can never drift from the header's. */
.footer-brand .brand { margin: 0 0 .9rem; }
.footer-brand .brand .mark { width: 44px; height: 44px; }
.footer-brand p { max-width: 24rem; font-size: .93rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.legal { border-top: 1px solid var(--rule); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .85rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  /* Stack order: copy, then the before/after, then the buttons. The figure
     is the proof and the buttons are the ask — asking after the evidence
     beats asking before it. display:contents lifts the copy's children into
     the same flex flow so the figure can sit between them. */
  /* gap: 0 — with display:contents every copy element is a flex item in its
     own right, so a container gap ADDS to the margin each one already has.
     That doubled every vertical space in the hero. Let the margins do it. */
  .hero-grid { display: flex; flex-direction: column; gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy > * { order: 1; }
  .hero .eyebrow { margin-bottom: 1.1rem; }
  .hero-lockup { margin-bottom: .9rem; }
  .hero .flat { margin-bottom: 0; }
  .hero-figure { order: 2; margin: 1.5rem 0 1.7rem; min-height: clamp(320px, 78vw, 460px); }
  .hero .cta-row { order: 3; }
  .hero-figure { padding-left: 1.6rem; padding-bottom: 1.8rem; }
  .hero .lede { max-width: none; }
}
@media (max-width: 900px) {
  .split, .split-tight { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .nav { display: none; }
  .nav.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: .5rem 1.25rem 1.25rem; }
  .nav.open a { padding: .8rem 0; border-bottom: 1px solid var(--rule); }
  /* Bare bars — the outlined box was clutter next to the mark. Still a
     44x44 hit target; only the border is gone. */
  .nav-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    background: none; border: 0; cursor: pointer;
  }
  .nav-bars, .nav-bars::before, .nav-bars::after {
    content: ""; display: block; width: 22px; height: 2.5px;
    background: var(--teal); border-radius: 2px;
  }
  .nav-bars { position: relative; }
  .nav-bars::before { position: absolute; top: -6px; }
  .nav-bars::after  { position: absolute; top: 6px; }
  /* The CTA inherited the list item's padding and lost its pill shape. */
  .nav.open a.btn {
    margin-top: .9rem; padding: .75rem 1.2rem; text-align: center;
    border-bottom: 1px solid var(--r-btn); border-radius: 999px;
  }
  .footer-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: .9rem; }
  .tally { grid-template-columns: 1fr; gap: .8rem; text-align: left; }
  .shot--before { width: 54%; }
  /* The arc's visible ink ends around 67% of its box, so at this width the
     arrowhead was landing inside the old site rather than pointing into the
     rebuild. Shift it right by roughly half the arrow's own width. */
  .hero-arc { left: 34%; width: 56%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } .ed-caret { animation: none; } }

/* Anything awaiting sign-off (e.g. a testimonial before its author has
   approved it) carries data-dev-only: hidden on the deployed site, shown
   by _dev/palette.css, which only the local dev server injects. */
[data-dev-only] { display: none !important; }

/* =====================================================================
   Home #why — "the website is the rescue" (V4 of the 2026-10-01 rounds,
   chosen by Carin). The behind-the-scenes scene, then each reason fused
   with its own image, all copy kept, then the "turn" beat. Ported from
   _dev/home/options.css; the V5 selectors ride along harmlessly.
   ===================================================================== */
/* ================= shared: the phone ================= */

#why .phone {
  --pw: 236px;
  position: relative; flex: none;
  width: var(--pw); height: calc(var(--pw) * 2.06);
  padding: 8px; border-radius: 40px;
  background: var(--r-phone-bezel);
  box-shadow: 0 2px 4px rgba(58,58,56,.10), 0 30px 60px -26px rgba(58,58,56,.45),
              inset 0 0 0 1.5px rgba(255,255,255,.08);
}
#why .phone--lg { --pw: 258px; }
#why .phone-screen {
  position: relative; height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: 32px; background: var(--r-phone-screen);
  color: var(--ink); font-size: 11px; line-height: 1.35; letter-spacing: 0;
}
#why .phone-screen p { margin: 0; }

#why .ph-status {
  flex: none; height: 32px; display: flex; align-items: center; justify-content: space-between;
  padding: 2px 20px 0 24px; font-size: 11px; font-weight: 650;
}
#why .ph-island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 21px; border-radius: 12px; background: var(--r-phone-bezel);
}
#why .ph-icons { display: flex; align-items: flex-end; gap: 2px; }
#why .ph-icons i { width: 3px; background: var(--ink); border-radius: 1px; }
#why .ph-icons i:nth-child(1) { height: 4px; }
#why .ph-icons i:nth-child(2) { height: 6px; }
#why .ph-icons i:nth-child(3) { height: 8px; }
#why .ph-icons b {
  margin-left: 5px; width: 19px; height: 9px; border-radius: 2.5px;
  border: 1.2px solid var(--ink); position: relative;
  background: linear-gradient(90deg, var(--ink) 70%, transparent 70%) 1.5px 1.5px / calc(100% - 3px) calc(100% - 3px) no-repeat;
}

#why .ph-bar {
  flex: none; display: flex; align-items: center; gap: 7px;
  padding: 5px 14px 9px; border-bottom: 1px solid var(--r-phone-line);
}
#why .ph-bar b { flex: 1; font-size: 11.5px; font-weight: 750; letter-spacing: -.005em; }
#why .ph-logo { width: 20px; height: 20px; color: var(--r-phone-ui); flex: none; }
#why .ph-menu {
  width: 15px; height: 11px; flex: none;
  background: linear-gradient(var(--ink) 0 0) 0 0 / 100% 1.6px no-repeat,
              linear-gradient(var(--ink) 0 0) 0 50% / 100% 1.6px no-repeat,
              linear-gradient(var(--ink) 0 0) 0 100% / 100% 1.6px no-repeat;
}

#why .ph-photo { flex: none; width: 100%; height: 128px; object-fit: cover; display: block; border-radius: 0; }
#why .ph-photo--short { height: 104px; }
#why .ph-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 26px; min-height: 0; }
#why .ph-kicker { font-size: 9px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--r-label-strong); margin-bottom: -4px !important; }
#why .ph-h { font-size: 16px; font-weight: 750; line-height: 1.15; letter-spacing: -.015em; color: var(--ink); }
#why .ph-p { font-size: 11px; color: var(--ink-soft); }
#why .ph-label { font-size: 10px; font-weight: 650; color: var(--ink-soft); margin-top: 2px !important; }

#why .ph-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#why .ph-chips span {
  border: 1.5px solid var(--r-phone-line); border-radius: 10px;
  padding: 8px 0; text-align: center; font-weight: 700; font-size: 13px;
}
#why .ph-chips span.on { border-color: var(--r-phone-ui); background: var(--r-phone-ui-soft); color: var(--r-phone-ui-deep); }

#why .ph-check { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 550; }
#why .ph-check i { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid var(--ink-soft); }

#why .ph-tags { display: flex; flex-wrap: wrap; gap: 5px; }
#why .ph-tags span {
  border: 1.5px solid var(--r-phone-line); border-radius: 999px;
  padding: 4px 9px; font-size: 10.5px; font-weight: 650;
}
#why .ph-tags span.on { border-color: var(--r-phone-ui); background: var(--r-phone-ui-soft); color: var(--r-phone-ui-deep); }
#why .ph-field {
  display: block; border: 1.5px solid var(--r-phone-line); border-radius: 9px;
  padding: 8px 10px; font-size: 11px; color: var(--ink-soft); background: var(--r-phone-tint);
}

#why .ph-btn {
  position: relative; display: block; margin-top: auto;
  background: var(--r-phone-ui); color: var(--r-phone-ui-ink);
  border-radius: 12px; padding: 11px 0; text-align: center;
  font-size: 13px; font-weight: 700;
}
#why .ph-btn--ghost {
  margin-top: 0; background: var(--r-phone-screen); color: var(--r-phone-ui);
  border: 1.5px solid var(--r-phone-ui); padding: 9.5px 0;
}

#why .ph-fresh {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 14px; background: var(--r-phone-ui-soft); color: var(--r-phone-ui-deep);
  font-size: 10px; font-weight: 650;
}
#why .ph-fresh i { width: 6px; height: 6px; border-radius: 50%; background: var(--r-phone-ui); }
#why .ph-badge { position: relative; display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 650; }
#why .ph-badge i {
  width: 13px; height: 13px; border-radius: 50%; background: var(--r-phone-ui); flex: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3.2 6.2l1.9 1.9 3.8-4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
#why .ph-event {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--r-phone-line); border-radius: 10px; padding: 6px 8px;
}
#why .ph-event b {
  flex: none; width: 30px; text-align: center; border-radius: 6px; padding: 5px 0;
  background: var(--r-phone-ui-soft); color: var(--r-phone-ui-deep); font-size: 9px; letter-spacing: .06em;
}
#why .ph-event span { font-size: 10px; color: var(--ink-soft); line-height: 1.3; }
#why .ph-event strong { display: block; font-size: 11px; color: var(--ink); font-weight: 700; }
#why .ph-links { display: flex; gap: 12px; margin-top: auto !important; font-size: 10.5px; font-weight: 650; color: var(--r-phone-ui); }
#why .ph-links span { text-decoration: underline; text-underline-offset: 2px; }

#why .ph-home {
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%);
  width: 84px; height: 4px; border-radius: 3px; background: var(--ink); opacity: .85;
}


/* ================= V4 / V5 · Combined =================
   V2's scene (the trapping print behind the phone, numbered 1/2/3), then
   V3's three images with each reason fused onto its picture: the number
   and heading sit on a soft ink scrim at the top of the image; the copy
   follows underneath. V5 is the same with only heading + lead sentence.
   The shared phone rules above (#why .phone …) apply unchanged; the V2
   rules are re-declared here under the new scopes, not edited. */

:is(#why.why-v4, #why.why-v5) {
  --r-phone-bezel:   var(--ink);
  --r-phone-screen:  var(--paper);
  --r-phone-ui:      var(--teal);
  --r-phone-ui-ink:  var(--paper);
  --r-phone-ui-soft: var(--teal-soft);
  --r-phone-ui-deep: var(--teal-deep);
  --r-phone-line:    var(--rule);
  --r-phone-tint:    var(--teal-wash);
  --r-stage:         var(--stone);
  --r-num:           var(--teal);
  --r-num-ink:       var(--paper);
  --r-num-halo:      var(--paper);
  --r-label:         var(--ink-soft);
  --r-label-strong:  var(--teal);
  --r-scrim:         var(--ink);     /* text-on-photo ground, never a flat band */
  --r-on-image:      var(--paper);
  --r-copy-lead:     var(--ink);
  --r-copy:          var(--ink-soft);
  --r-close-rule:    var(--rule);
}

/* ---- the head: copied from V2 ---- */
:is(#why.why-v4, #why.why-v5) :is(.v4-head, .v5-head) {
  display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 3rem; align-items: center;
}
:is(#why.why-v4, #why.why-v5) :is(.v4-text, .v5-text) h2 { font-size: 2.55rem; }
:is(#why.why-v4, #why.why-v5) :is(.v4-text, .v5-text) .lede { max-width: none !important; }
:is(#why.why-v4, #why.why-v5) :is(.v4-scene, .v5-scene) {
  position: relative; height: 610px; background: var(--r-stage); border-radius: 22px;
}
:is(#why.why-v4, #why.why-v5) figure { margin: 0; }
:is(#why.why-v4, #why.why-v5) :is(.v4-scene, .v5-scene) figcaption {
  font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; line-height: 1;
}
:is(#why.why-v4, #why.why-v5) :is(.v4-unseen, .v5-unseen) {
  position: absolute; left: 42px; top: 92px; width: 262px; transform: rotate(-3deg);
}
:is(#why.why-v4, #why.why-v5) :is(.v4-unseen, .v5-unseen) img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border: 7px solid var(--paper); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(58,58,56,.08), 0 14px 30px -18px rgba(58,58,56,.35);
  filter: grayscale(.85) contrast(.88) brightness(1.06); opacity: .78;
}
:is(#why.why-v4, #why.why-v5) :is(.v4-unseen, .v5-unseen) figcaption { margin-top: .9rem; color: var(--r-label); }
:is(#why.why-v4, #why.why-v5) :is(.v4-seen, .v5-seen) {
  position: absolute; right: 64px; top: 34px; display: flex; flex-direction: column; align-items: center;
}
:is(#why.why-v4, #why.why-v5) :is(.v4-seen, .v5-seen) figcaption {
  order: -1; margin-bottom: .9rem; color: var(--r-label-strong); align-self: flex-start; margin-left: .2rem;
}
:is(#why.why-v4, #why.why-v5) [data-n] { position: relative; }
:is(#why.why-v4, #why.why-v5) [data-n]::after {
  content: attr(data-n);
  position: absolute; top: 50%; right: -46px; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--r-num); color: var(--r-num-ink);
  font: 700 12px/1 Inter, sans-serif; letter-spacing: 0;
  box-shadow: 0 0 0 4px var(--r-stage);
}
:is(#why.why-v4, #why.why-v5) .phone-screen { overflow: visible; }
:is(#why.why-v4, #why.why-v5) .ph-trust { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--r-phone-line); }
:is(#why.why-v4, #why.why-v5) .ph-fresh--inline { background: none; padding: 0; color: var(--r-phone-ui-deep); }
:is(#why.why-v4, #why.why-v5) .ph-btn { margin-top: 6px; }
:is(#why.why-v4, #why.why-v5) .ph-btn--ghost { margin-top: 0; }

/* ---- the reasons, fused with their images ---- */
#why.why-v4 .v4-reasons,
#why.why-v5 .v5-reasons {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3.5rem;
}
#why.why-v5 .v5-reasons { gap: 1.5rem; margin-top: 3rem; }

:is(#why.why-v4, #why.why-v5) :is(.v4-media, .v5-media) {
  display: grid; position: relative; overflow: hidden; border-radius: 14px;
  aspect-ratio: 4 / 4.4;
}
#why.why-v5 .v5-media { aspect-ratio: 4 / 5; }
:is(#why.why-v4, #why.why-v5) :is(.v4-media, .v5-media) > * { grid-area: 1 / 1; }
:is(#why.why-v4, #why.why-v5) :is(.v4-media, .v5-media) img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
:is(#why.why-v4, #why.why-v5) .v4-reason--foster img,
:is(#why.why-v4, #why.why-v5) .v5-reason--foster img { object-position: 50% 62%; }
:is(#why.why-v4, #why.why-v5) .v4-reason--trust img,
:is(#why.why-v4, #why.why-v5) .v5-reason--trust img { object-position: 50% 70%; }

/* The scrim is the overlay's own background, so it grows with the heading.
   Contrast: the text block ends where the scrim is still 76% ink. Worst case
   (pure white photo beneath) that blends to ~#69, and white on it is
   5.5:1; at the top (88%) it is 7.9:1. The last 4.5rem fades to clear and
   carries no text. */
:is(#why.why-v4, #why.why-v5) :is(.v4-over, .v5-over) {
  align-self: start; z-index: 1;
  padding: 1.15rem 1.3rem 4.5rem;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--r-scrim) 88%, transparent) 0,
    color-mix(in srgb, var(--r-scrim) 76%, transparent) calc(100% - 4.5rem),
    color-mix(in srgb, var(--r-scrim) 0%, transparent) 100%);
  color: var(--r-on-image);
}
:is(#why.why-v4, #why.why-v5) :is(.v4-tag, .v5-tag) {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem;
  font-size: .82rem; font-weight: 650; letter-spacing: .005em; line-height: 1;
  color: var(--r-on-image);
}
:is(#why.why-v4, #why.why-v5) :is(.v4-num, .v5-num) {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--r-num); color: var(--r-num-ink);
  box-shadow: 0 0 0 2px var(--r-num-halo);
  font-size: 13px; font-weight: 700; letter-spacing: 0;
}
:is(#why.why-v4, #why.why-v5) :is(.v4-over, .v5-over) h3 {
  margin: 0; color: var(--r-on-image);
  font-size: 1.36rem; line-height: 1.16; max-width: 15em;
}
#why.why-v5 .v5-over h3 { font-size: 1.5rem; }

/* V4: all the copy, tighter. Lead sentence carries ink + weight; the
   follow-up drops back a size and a shade. */
#why.why-v4 .v4-copy { padding: 1.05rem .15rem 0; }
#why.why-v4 .v4-copy p { margin: 0; }
#why.why-v4 .v4-copy p.lead {
  font-size: 1rem; line-height: 1.45; font-weight: 600; color: var(--r-copy-lead); letter-spacing: -.004em;
}
#why.why-v4 .v4-copy p + p {
  margin-top: .5rem; font-size: .9rem; line-height: 1.5; color: var(--r-copy);
}

/* V5: one sentence per reason. */
#why.why-v5 .v5-copy { padding: 1rem .15rem 0; }
#why.why-v5 .v5-copy p.lead {
  margin: 0; font-size: 1.04rem; line-height: 1.45; font-weight: 550; color: var(--r-copy-lead);
}

/* Closing: V4 keeps the page's normal treatment; V5 makes it a quiet
   footnote row with the link set to the right. */
#why.why-v4 .v4-close .closing { margin-top: 3rem; }
#why.why-v5 .v5-close {
  display: flex; align-items: baseline; justify-content: space-between; gap: 3rem;
  margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--r-close-rule);
}
#why.why-v5 .v5-close .closing {
  margin: 0; max-width: 50rem; font-size: .92rem; line-height: 1.55; color: var(--r-copy);
}
#why.why-v5 .v5-close .closing + p { margin: 0; flex: none; font-size: .95rem; }


/* ---- 2026-10-01 refinements (Carin, on V4) ---- */
/* Shorter images: the photo sets the mood, the words carry the case. */
#why.why-v4 .v4-media { aspect-ratio: 4 / 3; }
#why.why-v4 .v4-over { padding: 1rem 1.2rem 2.8rem; }
/* Number and headline on one line — the phone-part labels were cut (Carin). */
#why.why-v4 .v4-over h3 { display: flex; align-items: flex-start; gap: .6rem; }
#why.why-v4 .v4-over h3 .v4-num { margin-top: .12em; }
/* Crops: show the lower part of these two so the cats sit up in the frame, clear of the heading scrim (Carin). */
#why.why-v4 .v4-reason--give img { object-position: 50% 95%; }
#why.why-v4 .v4-reason--foster img { object-position: 50% 92%; }

/* The turn: after three reasons it matters, the honest admission that most
   sites don't deliver it — and that this isn't the rescue's fault. A beat
   of its own, not a footnote. Contained, light, one orange rule. */
#why .turn {
  margin-top: clamp(3rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
  background: var(--r-turn, var(--stone)); border-radius: calc(var(--radius) + 4px);
  padding: clamp(1.9rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3.25rem);
}
#why .turn h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.18; letter-spacing: -.022em;
  margin: 0; padding-top: 1.1rem; border-top: 3px solid var(--r-card-top); max-width: 22em;
}
#why .turn p { margin: 0 0 1.1rem; font-size: 1.02rem; color: var(--ink-soft); }
#why .turn p strong { color: var(--ink); font-weight: 650; }
#why .turn .arrow-link { font-size: 1rem; }

/* Reveal: as each reason scrolls in, its heading and then its copy rise
   into place, staggered left to right, so the eye reads image → heading →
   explanation. Only when JS has marked the page (.js-reveal) and motion is
   allowed — otherwise everything is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal #why .v4-over,
  .js-reveal #why .v4-copy,
  .js-reveal #why .turn { opacity: 0; transform: translateY(14px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .js-reveal #why .v4-copy { transition-delay: .18s; }
  .js-reveal #why .v4-reason:nth-child(2) :is(.v4-over, .v4-copy) { transition-delay: .22s; }
  .js-reveal #why .v4-reason:nth-child(2) .v4-copy { transition-delay: .4s; }
  .js-reveal #why .v4-reason:nth-child(3) .v4-over { transition-delay: .44s; }
  .js-reveal #why .v4-reason:nth-child(3) .v4-copy { transition-delay: .62s; }
  .js-reveal #why .is-in :is(.v4-over, .v4-copy),
  .js-reveal #why .turn.is-in { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  #why .v4-head { grid-template-columns: 1fr !important; }
  #why .v4-reasons { grid-template-columns: 1fr !important; gap: 2.2rem; }
  #why .turn { grid-template-columns: 1fr; }
}


/* =====================================================================
   .ink — the marker-swipe underline, borrowed from Mission Meow and set in
   orange (Carin, 2026-10-01: "borrow the underlines that we used on Mission
   Meow and just make them the orange"). One geometry everywhere: a ragged,
   slightly tilted band .22em thick whose top edge sits on the letters'
   baseline, so letters rest on it and only descenders cross it. Proportional
   to the word, so it looks the same under a stat and under a headline.
   Orange as ARTWORK: no text sits on it (the letters sit above it).
   Draws in once, left to right, when it scrolls into view (.js-ink), and is
   simply there under reduced motion or without JS.
   ===================================================================== */
:root {
  --r-ink-mark: var(--orange);
  --ink-shape: polygon(0% 16%, 3% 3%, 21% 11%, 47% 2%, 73% 10%, 96% 3%, 100% 21%, 99% 80%, 97% 97%, 71% 88%, 45% 98%, 20% 89%, 4% 97%, 0% 76%);
}
.ink { position: relative; display: inline-block; line-height: 1; padding-inline: .04em; isolation: isolate; white-space: nowrap; }
.ink::after {
  --h: clamp(5px, .2em, 22px);
  content: ""; position: absolute; z-index: -1; left: -.07em; right: -.07em;
  /* Inter at line-height 1: the baseline sits ~.1em above the box bottom (measured). */
  bottom: calc(.08em - var(--h)); height: var(--h);
  background: var(--r-ink-mark); clip-path: var(--ink-shape);
  transform: rotate(-1.2deg); transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .js-ink .ink::after { transform: rotate(-1.2deg) scaleX(0); transition: transform .7s cubic-bezier(.6,.05,.25,1) .15s; }
  .js-ink .ink.is-in::after { transform: rotate(-1.2deg) scaleX(1); }
}


/* =====================================================================
   Why this exists — final layout, 2026-10-01 (option D, refined).
   Split hero (nothing over the cat), three overview cards with option F's
   text, compact chapters, a crisp capacity line, and a closing note that
   carries the page's only photo of Carin. Elegant, not casual: no tilted
   prints, white photo borders or scribbles — the one hand-made mark is the
   .ink swipe. Colour routes through the --r-d-* roles.
   ===================================================================== */
.why-d {
  --r-d-panel:      var(--stone);
  --r-d-card:       var(--paper);
  --r-d-card-rule:  var(--rule);
  --r-d-card-num:   var(--orange);     /* display numeral: artwork */
  --r-d-stat:       var(--teal-wash);
  --r-d-stat-num:   var(--teal);
  --r-d-muted:      #A3A39F;           /* "competence", deliberately faded */
  --r-d-strike:     var(--orange);
  --r-d-key:        var(--teal);
  --r-d-statement:  var(--teal-wash);
  --r-d-alt:        var(--teal-wash);
  --r-d-num:        var(--orange);
  --r-d-close:      var(--stone);
  --r-d-note:       var(--paper);
  --head-offset:    96px;
}
.why-d section, .why-d [id] { scroll-margin-top: var(--head-offset); }

/* hero */
.d-hero { display: grid; grid-template-columns: 55% 45%; min-height: 480px; background: var(--r-d-panel); }
.d-hero-photo { position: relative; overflow: hidden; }
.d-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 55% 30%; }
.d-hero-panel { display: flex; align-items: center;
  padding: 3.25rem max(1.25rem, calc((100vw - var(--measure)) / 2)) 4.5rem clamp(2.5rem, 4.5vw, 4.25rem); }
.d-hero-copy { max-width: 30rem; }
.d-hero h1 { font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1.16; margin-bottom: .7em; }
.d-hero h1 em, .d-statement em, .d-note-quote em { font-style: italic; }
.d-hero .lede { font-size: 1.12rem; line-height: 1.5; margin: 0; }

/* overview cards — text only */
.d-overview { position: relative; z-index: 2; margin-top: -2.75rem; padding-bottom: clamp(2.25rem, 4vw, 3rem); }
.d-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.d-card { position: relative; display: flex; flex-direction: column; background: var(--r-d-card);
  border: 1px solid var(--r-d-card-rule); border-radius: var(--radius); padding: 1.5rem 1.6rem 1.4rem;
  box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; }
.d-card:hover, .d-card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.d-card-num { font-size: 1.4rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--r-d-card-num); margin-bottom: .65rem; }
.d-card-title { font-size: 1.22rem; line-height: 1.2; letter-spacing: -.018em; margin: 0 0 .5rem; }
.d-card p { font-size: 1rem; line-height: 1.5; margin: 0 0 1.1rem; color: var(--ink-soft); }
.d-card-link { margin-top: auto; font-weight: 650; font-size: .9rem; text-decoration: none; color: var(--r-link); }
.d-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.d-card-link:focus-visible { outline: none; }
.d-card:has(.d-card-link:focus-visible) { outline: 2px solid var(--r-link); outline-offset: 3px; }

/* stats */
.d-stats { padding: 0 0 clamp(3rem, 5vw, 4rem); }
.d-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.d-stat { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.75rem; align-items: center;
  background: var(--r-d-stat); border-radius: var(--radius); padding: 1.9rem 2rem; }
.d-stat-n { display: block; font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.045em;
  color: var(--r-d-stat-num); white-space: nowrap; padding-bottom: .2rem; }
.d-stat-unit { font-size: .52em; letter-spacing: -.02em; font-weight: 700; }
.d-stat-text { border-left: 1px solid var(--teal-light); padding-left: 1.5rem; }
.d-stat-l { font-size: .95rem; line-height: 1.5; color: var(--ink); margin: 0 0 .55rem; }
.d-stat-l strong { display: block; font-size: 1.04rem; font-weight: 650; line-height: 1.35; margin-bottom: .2rem; }
.d-stat-src { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* chapters */
.d-chapter { padding: clamp(3rem, 5vw, 4.25rem) 0; border-top: 1px solid var(--rule); }
.d-chapter--alt { background: var(--r-d-alt); border-top: 0; }
.d-chapter-grid { display: grid; grid-template-columns: 17rem minmax(0, 40rem); gap: clamp(2.5rem, 5vw, 4.5rem);
  justify-content: center; align-items: start; }
.d-chapter-side { position: sticky; top: var(--head-offset); }
.d-num { display: block; font-size: 2.2rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--r-d-num); margin-bottom: .5rem; }

.d-side-media { margin: 0; }
.d-side-media img { width: 100%; border-radius: 12px; object-fit: cover; aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.d-copy { padding-top: .3rem; }
.d-copy p { font-size: 1.075rem; }
.d-back { display: inline-block; margin-top: 1.2rem; font-size: .85rem; font-weight: 600; text-decoration: none; }
.d-back:hover { text-decoration: underline; }

/* the capacity line — a clean strike and the swipe, nothing scribbled */
.d-statement { background: var(--r-d-statement); padding: clamp(3rem, 5.5vw, 4.25rem) 0; text-align: center; }
.d-statement-text { margin: 0 auto; font-size: clamp(1.75rem, 2.8vw, 2.35rem); font-weight: 750;
  line-height: 1.4; letter-spacing: -.03em; color: var(--ink); }
.d-line { display: block; }
.d-struck { color: var(--r-d-muted); font-weight: 600; text-decoration: line-through;
  text-decoration-color: var(--r-d-strike); text-decoration-thickness: .07em; }
.d-key { color: var(--r-d-key); }

/* close — the mission, with her photo, contained and unfussy */
.d-close { background: var(--r-d-close); padding: clamp(3.5rem, 6vw, 5rem) 0; }
.d-note { margin: 0 auto; max-width: 54rem; display: grid; grid-template-columns: 11rem minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 2.75rem); align-items: center;
  background: var(--r-d-note); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow);
  padding: clamp(1.75rem, 3.5vw, 2.6rem); }
/* Square, not a full-height strip — Carin: the tall crop "feels too tall and skinny". */
.d-note-photo { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: 50% 16%;
  border-radius: var(--radius); align-self: start; margin-top: 2.6rem; }
.d-note-body { padding: 0; }
.d-note-quote { margin: 0; position: relative; padding-top: 2.4rem; }
.d-note-quote::before { content: "\201C"; position: absolute; top: -.6rem; left: -.15rem;
  font-size: 5rem; font-weight: 800; line-height: 1; color: var(--r-d-num); }
.d-note-quote p { font-size: clamp(1.45rem, 2.2vw, 1.8rem); font-weight: 650; line-height: 1.3;
  letter-spacing: -.022em; color: var(--ink); margin: 0; text-wrap: pretty; }
.d-note-sign { display: flex; flex-direction: column; margin: 1.2rem 0 1.7rem; font-size: .9rem; color: var(--ink-soft); line-height: 1.4; }
.d-note-sign strong { color: var(--ink); font-size: 1rem; }
.d-note .btn-ghost { background: var(--paper); }

@media (max-width: 900px) {
  .d-hero { grid-template-columns: 1fr; }
  .d-hero-photo { aspect-ratio: 3 / 2; }
  .d-hero-panel { padding: 2rem 1.25rem 4rem; }
  .d-cards, .d-stats-grid { grid-template-columns: 1fr; }
  .d-stat { grid-template-columns: 1fr; gap: 1rem; }
  .d-stat-text { border-left: 0; padding-left: 0; }
  .d-chapter-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .d-chapter-side { position: static; }
  .d-side-media { max-width: 26rem; }
  .d-note { grid-template-columns: 1fr; }
  .d-note-photo { width: 8rem; margin-top: 0; }
}

/* Stats variants (2026-10-01 option round; dev toggle in _dev/why/switch.js).
   Default = the teal panels above. */
.why-d[data-stats="rule"] .d-stats-grid { gap: clamp(2rem, 4vw, 3.5rem); }
.why-d[data-stats="rule"] .d-stat { background: none; border-radius: 0; padding: 1.4rem 0 0;
  border-top: 2px solid var(--r-card-top); grid-template-columns: 1fr; gap: .8rem; }
.why-d[data-stats="rule"] .d-stat-n { font-size: 3.4rem; }
.why-d[data-stats="rule"] .d-stat-text { border-left: 0; padding-left: 0; }
.why-d[data-stats="rule"] .d-stat-l { font-size: 1rem; max-width: 30rem; }
.why-d[data-stats="rule"] .d-stats { padding-top: .5rem; }

/* "In the hero": the facts become a quiet row under the lede. */
.d-hero-copy .d-stats { padding: 1.6rem 0 0; margin-top: 1.6rem; border-top: 1px solid var(--rule); }
.d-hero-copy .d-stats .wrap { width: auto; }
.d-hero-copy .d-stats-grid { gap: 1.4rem; }
.d-hero-copy .d-stat { background: none; padding: 0; grid-template-columns: 1fr; gap: .45rem; align-items: start; }
.d-hero-copy .d-stat-n { font-size: 1.9rem; }
.d-hero-copy .d-stat-text { border-left: 0; padding-left: 0; }
.d-hero-copy .d-stat-l { font-size: .84rem; line-height: 1.45; margin-bottom: .35rem; }
.d-hero-copy .d-stat-l strong { font-size: .88rem; display: inline; }
.d-hero-copy .d-stat-src { font-size: .6rem; }
.why-d[data-stats="hero"] .d-hero { min-height: 560px; }
.why-d[data-stats="hero"] .d-overview { padding-bottom: clamp(3rem, 5vw, 4rem); }


/* =====================================================================
   Chapter headings — full width, with an orange marker (Carin, 2026-10-01:
   headings wrapping in a narrow side column didn't read as headings). Used
   on Why this exists and How it works. The marker is artwork: a short
   orange bar beside the text, never under it.
   ===================================================================== */
.d-chapter-grid > .d-chapter-head { grid-column: 1 / -1; }
.d-chapter-head {
  display: flex; align-items: center; gap: .55em;
  font-size: clamp(1.75rem, 2.8vw, 2.3rem); line-height: 1.15; letter-spacing: -.024em;
  margin: 0 0 .4rem;
}
.d-chapter-head::before {
  content: ""; flex: none; width: .2em; height: .9em; border-radius: 99px; background: var(--r-accent-mark);
}

/* How it works — built from option B, "Answer the real questions" (2026-10-01). Options in _dev/hiw/.
   Built on the Why page's .why-d / .d-* system; this file only adds what
   the four-question structure needs. Colour routes through --r-b-* roles. */

.hiw-b {
  --r-b-answer:     var(--ink);
  --r-b-step-num:   var(--teal);
  --r-b-step-ring:  var(--teal-light);
  --r-b-fee:        var(--paper);
  --r-b-fee-rule:   var(--rule);
  --r-b-tick:       var(--teal);
  --r-b-label:      var(--ink-soft);
  --r-b-more:       var(--paper);
  --r-b-close:      var(--stone);
  --r-b-card:       var(--paper);
}

.hiw-b .d-hero { min-height: 440px; }

/* four overview cards instead of three */
.hiw-b .b-cards { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.hiw-b .b-cards .d-card { padding: 1.4rem 1.4rem 1.3rem; }
.hiw-b .b-cards .d-card-title { font-size: 1.12rem; }
.hiw-b .b-cards .d-card p { font-size: .96rem; }

.hiw-b .d-chapter { padding: clamp(2.75rem, 4.5vw, 3.75rem) 0; }

/* the editor needs a wider side column than a photo does */
.hiw-b .b-grid--wide-side { grid-template-columns: 22rem minmax(0, 35rem); }
.hiw-b .editor { max-width: 22rem; }

/* the short answer that opens every chapter */
.hiw-b .b-answer { font-size: 1.32rem; font-weight: 650; line-height: 1.35;
  letter-spacing: -.016em; color: var(--r-b-answer); margin-bottom: 1.1rem; text-wrap: pretty; }

/* the three steps — the one place numbers earn their keep */
.hiw-b .b-steps { list-style: none; margin: 1.4rem 0 .4rem; padding: 0; counter-reset: b-step;
  display: grid; gap: 1.15rem; }
.hiw-b .b-steps li { counter-increment: b-step; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr);
  column-gap: 1rem; }
.hiw-b .b-steps li::before { content: counter(b-step); grid-row: 1 / span 2;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--r-b-step-ring);
  display: grid; place-items: center; font-weight: 700; font-size: .95rem; color: var(--r-b-step-num); }
.hiw-b .b-steps h3 { font-size: 1.1rem; margin: .3rem 0 .3rem; }
.hiw-b .b-steps p { font-size: 1rem; color: var(--ink-soft); margin: 0; }

/* before / after thumbnails, cropped to the top of each page */
.hiw-b .b-ba { margin: 0; }
.hiw-b .b-ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.hiw-b .b-ba-pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0;
  border-radius: 10px; box-shadow: var(--shadow); border: 1px solid var(--rule); }
.hiw-b .b-ba figcaption { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .55rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--r-b-label); }

/* the line the editor section lands on */
.hiw-b .b-pull { font-size: 1.32rem; font-weight: 650; letter-spacing: -.016em; line-height: 1.4;
  color: var(--ink); margin-top: 1.6rem; }
.hiw-b .b-pull em { font-style: italic; }

/* what the fee covers — a quiet list, not a feature grid */
.hiw-b .b-fee { background: var(--r-b-fee); border: 1px solid var(--r-b-fee-rule); border-radius: var(--radius);
  padding: 1.3rem 1.4rem; box-shadow: var(--shadow); }
.hiw-b .b-fee-head { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--r-eyebrow); margin: 0 0 .7rem; }
.hiw-b .b-fee ul { list-style: none; margin: 0; padding: 0; }
.hiw-b .b-fee li { position: relative; padding: .42rem 0 .42rem 1.6rem; font-weight: 600; font-size: .98rem;
  border-top: 1px solid var(--r-b-fee-rule); }
.hiw-b .b-fee li:first-child { border-top: 0; }
.hiw-b .b-fee li::before { content: ""; position: absolute; left: .15rem; top: .95rem; width: .55rem; height: .3rem;
  border-left: 2px solid var(--r-b-tick); border-bottom: 2px solid var(--r-b-tick); transform: rotate(-45deg); }
.hiw-b .b-fee-foot { margin: .9rem 0 0; padding-top: .9rem; border-top: 1px solid var(--r-b-fee-rule);
  font-size: .92rem; color: var(--ink-soft); line-height: 1.45; }
.hiw-b .b-fee-foot strong { color: var(--ink); }

/* "Can we leave?" — bold lead-ins so it scans */
.hiw-b .b-facts { margin: 1.4rem 0 0; display: grid; gap: 0; }
.hiw-b .b-facts > div { padding: 1rem 0; border-top: 1px solid var(--rule); }
.hiw-b .b-facts > div:last-child { border-bottom: 1px solid var(--rule); }
.hiw-b .b-facts dt { font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em; color: var(--ink); margin-bottom: .3rem; }
.hiw-b .b-facts dt em { font-style: italic; }
.hiw-b .b-facts dd { margin: 0; font-size: 1rem; color: var(--ink-soft); }

/* other questions */
.hiw-b .b-more { background: var(--r-b-more); border-top: 1px solid var(--rule);
  padding: clamp(2.75rem, 4.5vw, 3.75rem) 0; }
.hiw-b .b-more .d-chapter-side { position: static; }
.hiw-b .b-qa .qa > summary { font-size: 1.04rem; }

/* close — a contained card on a light section */
.hiw-b .b-close { background: var(--r-b-close); padding: clamp(3rem, 5.5vw, 4.5rem) 0; }
.hiw-b .b-close-card { max-width: 61.5rem; margin: 0 auto; background: var(--r-b-card);
  border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow);
  padding: clamp(1.75rem, 3.5vw, 2.6rem) clamp(1.75rem, 3.5vw, 2.8rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.hiw-b .b-close-card h2 { font-size: clamp(1.5rem, 2.2vw, 1.85rem); margin-bottom: .4rem; }
.hiw-b .b-close-card p { color: var(--ink-soft); margin: 0; max-width: 32rem; }
.hiw-b .b-close-card .btn-ghost { background: var(--paper); }

@media (max-width: 1100px) {
  .hiw-b .b-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hiw-b .b-cards, .hiw-b .b-grid--wide-side { grid-template-columns: 1fr; }
  .hiw-b .b-close-card { grid-template-columns: 1fr; }
}


/* How it works hero photo: keep the screen and the cat in frame. */
.hiw-b .d-hero-photo img { object-position: 55% 45%; }
/* The grid's column gap also spaced the heading row away from its content. */
.d-chapter-grid { row-gap: 1.5rem; }

/* Bigger hero headlines (Carin, 2026-10-01). How it works' H1 is short, so
   it can carry real size; Why this exists splits its H1 into a teal lead-in
   sentence and a large punchline at the same size. */
.hiw-b .d-hero h1,
.why-d .d-hero h1.d-h1-big { font-size: clamp(2.3rem, 3.6vw, 3.25rem); line-height: 1.08; letter-spacing: -.03em; }
.d-hero .d-h1-lead { display: block; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 650; line-height: 1.3;
  letter-spacing: -.012em; color: var(--teal); margin-bottom: .55rem; }
/* Why hero has no lede now (Carin): the headline ends the panel. */
.why-d .d-hero h1.d-h1-big { margin-bottom: 0; }