/* ============================================================
   See Me First — design tokens + appended Prototype 10 CSS
   Loaded via Head Markup link; component .css files mirror
   the appended block so the rules apply inside LWCs.
   ============================================================ */

@font-face {
    font-family: 'Mulish';
    src: url('/sfsites/c/resource/smf_font_mulish') format('truetype-variations'),
         url('/sfsites/c/resource/smf_font_mulish') format('truetype');
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

html, body { margin: 0; padding: 0; }

:root {
  --green: #599CD9;
  --green-deep: #3676B5;
  --green-soft: #DBE9F8;

  --ink: #0a0a0a;
  --ink-soft: #1f1f1f;
  --paper: #faf9f5;
  --paper-warm: #f5f4ef;
  --mute: #6b6b6b;
  --mute-light: #c7c5bf;
  --white: #ffffff;
  --line: rgba(10, 10, 10, 0.08);

  --font: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --paul-image:         url('/sfsites/c/resource/smf_paul');
  --mary-image:         url('/sfsites/c/resource/smf_mary');
  --eamonn-video-image: url('/sfsites/c/resource/smf_eamonn');
  --lorraine-image:     url('/sfsites/c/resource/smf_lorraine');
  --dave-lesley-image:  url('/sfsites/c/resource/smf_dave_lesley');

  --paul-cutout:         url('/sfsites/c/resource/smf_paul_cutout');
  --mary-cutout:         url('/sfsites/c/resource/smf_mary_cutout');
  --eamonn-cutout:       url('/sfsites/c/resource/smf_eamonn_cutout');
  --lorraine-cutout:     url('/sfsites/c/resource/smf_lorraine_cutout');
  --dave-lesley-cutout:  url('/sfsites/c/resource/smf_dave_lesley_cutout');

  --smf-lockup:                 url('/sfsites/c/resource/smf_lockup');
  --smf-lockup-dark:            url('/sfsites/c/resource/smf_lockup_dark');
  --smf-mark-dark:              url('/sfsites/c/resource/smf_mark_dark');
  --smf-mark-white:             url('/sfsites/c/resource/smf_mark_white');
  --smf-mark-onblue:            url('/sfsites/c/resource/smf_mark_onblue');
  --smf-mark-onpaper:           url('/sfsites/c/resource/smf_mark_onpaper');
  --smf-tagline-twoline-white:  url('/sfsites/c/resource/smf_tagline_twoline_white');
  --smf-tag-white:              url('/sfsites/c/resource/smf_tag_white');
  --adss-logo:                  url('/sfsites/c/resource/smf_adss_logo');
  --fr-logo:                    url('/sfsites/c/resource/smf_fr_logo');
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
}

/* === PROTOTYPE 10 COMPONENT CSS — APPENDED BY BUILD SCRIPT === */
/* ------------------------------------------------------------------
     SEE ME FIRST — DAW 2026 PROTOTYPE
     Built for ADSS. Designed to translate to Experience Cloud LWCs.
     Each .page block maps to one community page / LWC route.
     ------------------------------------------------------------------ */

  

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font);
    font-weight: 400;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img { max-width: 100%; display: block; }
  button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
  a { color: inherit; text-decoration: none; }

  /* ====================================================================
     UTILITIES & PRIMITIVES
     ==================================================================== */

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

  .eyebrow {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .eyebrow--green { color: var(--green); }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
    border: 2px solid transparent;
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }

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

  .btn--ink { background: var(--ink); color: var(--white); }
  .btn--ink:hover { background: var(--green); }

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

  .btn--ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
  .btn--ghost-light:hover { background: var(--white); color: var(--ink); }

  .btn .arrow { display: inline-block; transition: transform 0.3s var(--ease); }
  .btn:hover .arrow { transform: translateX(4px); }

  /* ====================================================================
     HEADER (sticky, translates to LWC: smfHeader)
     ==================================================================== */

  .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 80;
    padding: 18px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.4s var(--ease), padding 0.3s var(--ease), border-color 0.3s var(--ease);
    border-bottom: 1px solid transparent;
    pointer-events: auto;
  }

  /* v10 — Inner-page nav is colour-themed. The base is-light state handles
     the white logo / nav / blur, but the BACKGROUND colour comes from a
     per-page modifier (is-stories, is-impact, is-action, is-donate, etc.)
     so the header reads as a single coloured band that matches the
     page-identity strip directly below it — no mismatch between the strip
     and the nav.

     Default fallback colour is the brand blue so any new page that doesn't
     yet have its own identity class still renders cleanly. */
  .site-header.is-light {
    background: rgba(89, 156, 217, 0.96);
    backdrop-filter: blur(12px);
    border-bottom-color: transparent;
    color: var(--white);
  }
  .site-header.is-light.is-stories     { background: rgba(240, 112, 32, 0.96); }   /* orange */
  .site-header.is-light.is-impact      { background: rgba(163, 23, 128, 0.96); }   /* purple — sampled from SMF_SeeMeFirstPurple.png */
  .site-header.is-light.is-action,
  .site-header.is-light.is-donate,
  .site-header.is-light.is-newsletter,
  .site-header.is-light.is-thanks      { background: rgba(89, 156, 217, 0.96); }   /* brand blue */
  /* v4 — dark-mode header has NO background and NO blur, so subjects' heads are
     never veiled or smudged. Logo + nav stay legible via text-shadow. */
  .site-header.is-dark  {
    background: transparent;
    backdrop-filter: none;
    color: var(--white);
    border-bottom-color: transparent;
  }
  .site-header.is-dark .smf-logo,
  .site-header.is-dark .site-nav__link,
  .site-header.is-dark .btn--ghost {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7), 0 0 18px rgba(0, 0, 0, 0.45);
  }
  .site-header.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }

  .smf-logo {
    display: flex;
    flex-direction: column;
    line-height: 0.95;
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s var(--ease);
  }
  .smf-logo:hover { transform: translateX(2px); }

  /* v6 — Landing: NO logo top-left. Inner pages: cropped dark mark.
     Sized to comfortably fit the cropped see/dementia/first mark
     (≈1.6:1 aspect) without clipping.
     v10 — Inner-page lock-up swapped for the white-on-colour version
     because the inner-page nav is now brand blue. Aspect ratio of the
     new asset is wider (≈1.33:1) so width is bumped a touch. */
  .smf-logo--lockup {
    background-image: var(--smf-mark-onblue);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    width: 168px;
    height: 96px;
    flex: 0 0 auto;
  }
  .site-header.is-dark .smf-logo--lockup { display: none; }
  @media (max-width: 540px) {
    .smf-logo--lockup { width: 122px; height: 70px; }
  }

  .smf-logo .row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 900;
    letter-spacing: -0.01em;
  }
  .smf-logo .small { font-size: 13px; font-weight: 800; text-transform: lowercase; opacity: 0.85; }
  .smf-logo .word { font-size: 22px; }
  .smf-logo .word .me { color: var(--green); }
  .smf-logo .word .dim { opacity: 0.4; }
  .smf-logo .first { font-size: 13px; font-weight: 800; text-transform: lowercase; opacity: 0.85; }

  .header-right { display: flex; align-items: center; gap: 16px; }

  /* v4 — primary nav, added per ADSS feedback (H1).
     Surfaces Stories + Impact up top so users don't lose them by not scrolling. */
  .site-nav {
    display: flex;
    gap: 28px;
    align-items: center;
    margin-left: auto;
    margin-right: 24px;
  }
  .site-nav__link {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    position: relative;
    padding: 6px 0;
    transition: color 0.3s var(--ease);
  }
  .site-nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }
  .site-nav__link:hover { color: var(--green); }
  .site-nav__link:hover::after { transform: scaleX(1); }
  /* v6 — hide the link to the page you're already on. */
  .site-nav__link.is-current { display: none; }

  @media (max-width: 720px) {
    /* v6 — keep nav visible on mobile per Laura's feedback. Tighten the gap
       and reduce the link size so Stories + Impact + Take Action all fit. */
    .site-nav { gap: 16px; margin-right: 12px; }
    .site-nav__link { font-size: 12px; }
  }

  .site-header.is-dark .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
  .site-header.is-dark .btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

  /* v4 — nav link colour in dark mode (over the landing photo) */
  .site-header.is-dark .site-nav__link { color: var(--white); }
  .site-header.is-dark .site-nav__link:hover { color: var(--green); }

  /* v10 — Inner-page (blue) header: nav links and Take Action sit on a
     coloured background, so they need white text + a hover that doesn't
     fall back to the same blue. The link underline is white and the
     Take Action button switches to a white-bordered ghost that fills
     white on hover. */
  .site-header.is-light .site-nav__link { color: var(--white); }
  .site-header.is-light .site-nav__link::after { background: var(--white); }
  .site-header.is-light .site-nav__link:hover { color: var(--white); opacity: 0.8; }
  .site-header.is-light .btn--ghost {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.6);
    background: transparent;
  }
  .site-header.is-light .btn--ghost:hover {
    background: var(--white);
    color: var(--green-deep);
    border-color: var(--white);
  }

  /* v6 — page-identity coloured strip directly under the header on inner
     pages. Each page gets a distinct accent so the user always knows where
     they are. The strip is fixed below the header. Colours track the
     campaign per-subject palette + the brand blue for Impact.
     v10 — Top offset corrected: the header is 132px tall (96px lock-up +
     2 × 18px padding) on desktop and 106px on mobile, so the strip needs
     to sit at those offsets, not 70px (which left it tucked behind the
     header). On the new brand-blue inner-page header the brand-blue and
     green-deep strips would blend into the header background, so they're
     darkened (Action) or recoloured (Donate / Newsletter / Thanks) to
     keep the page identity visible. */
  .page-identity-strip {
    position: fixed;
    top: 132px;
    left: 0; right: 0;
    height: 4px;
    z-index: 79;
    pointer-events: none;
    transition: background-color 0.4s var(--ease);
    background: transparent;
  }
  /* v10 — Strip colours mirror the per-page header colours exactly so
     the strip reads as a continuous extension of the nav. Stories =
     orange, Impact = cyan, Action / Donate / Newsletter / Thanks =
     brand blue. */
  .page-identity-strip.is-stories { background: #F07020; }      /* orange */
  .page-identity-strip.is-impact  { background: #A31780; }      /* purple — matches the SMF purple lock-up */
  .page-identity-strip.is-action,
  .page-identity-strip.is-donate,
  .page-identity-strip.is-newsletter,
  .page-identity-strip.is-thanks  { background: var(--green); } /* brand blue */
  /* Hidden on landing — the home page is its own thing visually */
  .site-header.is-dark ~ .page-identity-strip { display: none; }
  @media (max-width: 540px) {
    .page-identity-strip { top: 106px; }
  }

  /* ====================================================================
     PAGE SYSTEM
     Each .page is a discrete view. JS toggles .is-active.
     In Experience Cloud each becomes its own community page / LWC.
     ==================================================================== */

  .page {
    display: none;
    min-height: 100vh;
    animation: pageIn 0.6s var(--ease);
  }
  .page.is-active { display: block; }

  @keyframes pageIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ====================================================================
     PAGE 1 — LANDING (smfLanding LWC)
     ==================================================================== */

  .landing {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--ink);
    color: var(--white);
  }

  /* v4 — bg photo and the cutout share the same source image, scaled to ~80%
     width and anchored to the bottom of the section. This gives meaningful
     headroom above each subject (head sits around 32–35% of viewport, well
     clear of the nav) and lets the wordmark phrase sit through the figure's
     midline rather than fighting it for space. */
  .landing__bg {
    position: absolute;
    inset: 0;
    background-image: var(--paul-image);
    background-size: cover;
    background-position: center center;
    z-index: 0;
  }

  /* v4 — atmospheric veil over the photo. */
  .landing__veil {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
    pointer-events: none;
  }

  /* v4 — One stacked phrase: "see / dementia / first" — read top to bottom.
     Two layers (back + front) carry IDENTICAL markup with identical typography
     so every line aligns letter-perfect between them. Per-layer visibility:
       .landing__phrase--back  → only "de" + "ntia" of the dementia line visible
       .landing__phrase--front → "see" + "me" + "first" visible
     The cutout subject slots between them, so the person threads through "me"
     while sitting beneath the small "see" (above) and "first" (below).
     See / dementia / first is the campaign sentence; the person becomes the me. */
  .landing__phrase {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-weight: 900;
    letter-spacing: -0.025em;
    pointer-events: none;
    user-select: none;
    line-height: 0.95;
  }
  .landing__phrase--back  { z-index: 2; }
  .landing__phrase--front { z-index: 4; }

  .landing__phrase-see,
  .landing__phrase-first {
    font-size: clamp(28px, 4vw, 64px);
    font-weight: 900;
  }
  .landing__phrase-see   { margin-bottom: 6px; }
  .landing__phrase-first { margin-top: 6px; }

  .landing__phrase-main {
    font-size: clamp(96px, 19vw, 280px);
    letter-spacing: -0.05em;
    line-height: 0.85;
    white-space: nowrap;
  }

  /* BACK layer: only the bookends of "dementia" show. "see", "me" and "first"
     stay in the DOM as transparent metric placeholders so the line spacing
     matches the front layer perfectly. */
  .landing__phrase--back .landing__phrase-see,
  .landing__phrase--back .landing__phrase-first { visibility: hidden; }
  .landing__phrase--back .me-spacer             { visibility: hidden; }
  .landing__phrase--back .dim                   { color: rgba(255, 255, 255, 0.5); }

  /* FRONT layer: "see", "me" and "first" all rendered in white / brand pink.
     "de" and "ntia" are hidden spacers so the front "me" sits exactly where
     it does in the back layer. */
  .landing__phrase--front .landing__phrase-see,
  .landing__phrase--front .landing__phrase-first { color: var(--white); }
  .landing__phrase--front .dim-spacer            { visibility: hidden; }
  .landing__phrase--front .me                    { color: var(--green); }

  @media (prefers-reduced-motion: no-preference) {
    .landing__phrase--back  { animation: bgWordIn 1.2s 0.3s var(--ease) both; }
    .landing__phrase--front { animation: bgWordIn 1.2s 0.6s var(--ease) both; }
  }

  /* v4 — Subject cutout layer. Sits ABOVE the back wordmark and BELOW the front
     wordmark, so the person threads through the word.
     The CSS variable --landing-cutout is set per page-load by the rotating-hero JS
     (one of --paul-cutout, --mary-cutout, etc.). When no cutout is loaded the var
     resolves to `none` and the layer is invisible — v4 still renders cleanly. */
  .landing__subject {
    position: absolute;
    inset: 0;
    z-index: 3;
    background-image: var(--landing-cutout, none);
    /* MUST match .landing__bg sizing/position so bg + cutout pixel-align. */
    background-size: cover;
    background-position: 75% 30%;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  /* Cutout placeholders — defined here as `none` so the var() lookup resolves
     cleanly. Real cutouts are dropped in via the inline-cutouts pass once
     the PNGs land in images/cutouts/. */
  

  @keyframes bgWordIn {
    from { opacity: 0; transform: translate(0, calc(-50% + 24px)); letter-spacing: -0.02em; }
    to   { opacity: 1; transform: translateY(-50%); letter-spacing: -0.05em; }
  }

  /* v4 layering for the landing hero (bottom → top):
       z 0  .landing__bg          — workshop / scene photo
       z 1  .landing__veil        — top + bottom darkening
       z 2  .landing__word-back   — "de" + "ntia" of the wordmark
       z 3  .landing__subject     — cutout of the subject (the "me")
       z 4  .landing__word-front  — "me" of the wordmark, rendered above the subject
       z 5  .landing__inner       — UI text, CTA, foreground "see / first" mark */
  .landing__inner {
    position: relative;
    z-index: 5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* CTA + credit anchor at bottom */
    padding: 120px var(--gutter) 64px;
    max-width: var(--max);
    margin: 0 auto;
  }

  .landing__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
  }

  .landing__brand {
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
    max-width: 280px;
    line-height: 1.5;
  }
  .landing__brand .green { color: var(--green); }

  .landing__week-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .landing__week-badge::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(0, 166, 81, 0.7);
    animation: pulse 2.4s infinite;
  }

  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 166, 81, 0.7); }
    70%  { box-shadow: 0 0 0 12px rgba(0, 166, 81, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 166, 81, 0); }
  }

  /* v4 — Foreground wordmark is just "see" / "first" now; the giant "dementia"
     centerpiece is split across .landing__word-back and .landing__word-front so
     the subject can thread through it (L5). */
  /* Wordmark wrappers — two identical absolute-positioned layers carrying the
     same v3 wordmark structure with different per-letter visibility, so the
     subject cutout (z-3) can thread between them. */
  .landing__wordmark-wrap {
    position: absolute;
    inset: 0;
    padding: 120px var(--gutter) 64px;
    max-width: var(--max);
    left: 0; right: 0;
    margin: 0 auto;
    pointer-events: none;
  }
  .landing__wordmark-wrap--back  { z-index: 2; }
  .landing__wordmark-wrap--front { z-index: 4; }

  /* Back layer: only "de" + "ntia" of dementia render. Everything else stays
     in the DOM as invisible metric placeholders so the front layer aligns. */
  .wordmark--back .wordmark__see,
  .wordmark--back .wordmark__first,
  .wordmark--back .wordmark__main .me { visibility: hidden; }

  /* Front layer: "see", "me" and "first" render. "de" + "ntia" stay invisible
     to preserve typography metrics. */
  .wordmark--front .wordmark__main .dim { visibility: hidden; }

  /* Wordmark — stacked top-left: see / dementia / first. */
  .wordmark {
    margin-top: clamp(40px, 8vh, 100px);
    line-height: 0.88;
    font-weight: 900;
    letter-spacing: -0.025em;
    position: relative;
  }

  .wordmark__see {
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 900;
    margin-bottom: 8px;
    line-height: 1;
  }

  .wordmark__main {
    font-size: clamp(72px, 14vw, 220px);
    line-height: 0.85;
    letter-spacing: -0.04em;
    display: block;
    white-space: nowrap;
  }
  .wordmark__main .dim { color: var(--mute-light); opacity: 0.55; }
  .wordmark__main .me  { color: var(--green); }

  .wordmark__first {
    font-size: clamp(52px, 10vw, 160px);
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-top: 4px;
    line-height: 1;
  }

  /* Reveal sequence: see → de/ntia ghost in → me pops → first */
  .wordmark__see   { opacity: 0; animation: wordIn 0.7s 0.2s var(--ease) forwards; }
  .wordmark__main .dim:first-child { opacity: 0; animation: dimIn 0.7s 0.5s var(--ease) forwards; }
  .wordmark__main .me  { opacity: 0; transform: scale(0.9); animation: meIn 0.9s 0.7s var(--ease) forwards; }
  .wordmark__main .dim:last-child  { opacity: 0; animation: dimIn 0.7s 0.5s var(--ease) forwards; }
  .wordmark__first { opacity: 0; animation: wordIn 0.7s 0.9s var(--ease) forwards; }

  @keyframes wordIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes dimIn  { from { opacity: 0; transform: translateY(20px); } to { opacity: 0.55; transform: translateY(0); } }
  @keyframes meIn   { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

  .landing__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: clamp(40px, 8vh, 80px);
  }

  /* v4 — Lock-up PNG above the Enter CTA. White-on-transparent so it sits
     cleanly over the photo. drop-shadow gives readability over lighter parts
     of the photo without needing a heavy gradient veil. */
  .landing__bottom-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .landing__lockup {
    background-image: var(--smf-lockup);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    width: clamp(280px, 38vw, 540px);
    height: clamp(110px, 15vw, 210px);
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.55));
  }
  @media (max-width: 720px) {
    .landing__lockup {
      width: clamp(220px, 70vw, 360px);
      height: clamp(86px, 28vw, 140px);
    }
  }

  .landing__credit {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.6;
    align-self: flex-end;
  }

  .landing__cta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
  }

  /* ====================================================================
     v5 LANDING HERO OVERRIDE
     New structure: .landing__photo + .landing__veil-top + .landing__hero-block.
     The old .landing__bg / __inner / __bottom / __lockup / __subject /
     __wordmark-wrap rules above are dead code in v5 — left in place to keep
     the diff readable but not referenced by markup any more.
     ==================================================================== */

  .landing { padding: 0; }  /* .landing already has min-height: 100vh */

  /* Full-bleed photo, anchored RIGHT so the figure sits to the right of the
     lock-up. Cover scaling so it fills the viewport on desktop. */
  .landing__photo {
    position: absolute;
    inset: 0;
    background-image: var(--paul-image);
    background-size: cover;
    background-position: 78% center;
    z-index: 0;
  }

  /* Subtle top tint so the header / heads always read clearly, regardless of
     which subject the rotating hero picks. Bottom gets a softer tint to
     anchor the credit line. */
  .landing__veil-top {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.0) 22%),
      linear-gradient(180deg, rgba(0,0,0,0.0) 70%, rgba(0,0,0,0.55) 100%);
  }

  /* Hero block — big lock-up + tagline + Enter CTA, anchored left of the photo. */
  .landing__hero-block {
    position: absolute;
    z-index: 3;
    left: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    /* v10 — widened so the lock-up + TAG can sit side-by-side on
       desktop. The flex-wrap on .landing__lockup-row handles the
       drop-down when both can't fit. */
    max-width: min(90vw, 880px);
  }

  /* v10 — Lock-up + TAG row. flex-wrap keeps both elements at sensible
     intrinsic sizes and lets the TAG drop below the lock-up when the
     viewport gets narrow, so there's no jarring shrink as the screen
     scales down. */
  .landing__lockup-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 32px;
  }

  /* v6 — Big campaign lock-up. White-on-colour PNG; drop-shadow for
     readability over lighter parts of any rotating photo.
     v10 — Switched to the SMF white-on-colour lock-up that's also used
     in the inner-page nav, and trimmed in size so it pairs with the
     TAG strapline at its right. */
  .landing__lockup-big {
    background-image: var(--smf-mark-onblue);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    width: clamp(220px, 26vw, 320px);
    aspect-ratio: 1.33 / 1;
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
  }

  /* v10 — Tagline strapline. Aligned to the bottom of the lock-up via
     align-items: flex-end on the parent row, so the tag baseline sits
     with the lock-up's "first" line. Drops below the lock-up when the
     row can't fit both side-by-side. */
  .landing__tag {
    background-image: var(--smf-tag-white);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    width: clamp(280px, 34vw, 440px);
    aspect-ratio: 3.76 / 1;
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
  }

  .landing__credit {
    position: absolute;
    z-index: 3;
    right: var(--gutter);
    bottom: clamp(20px, 4vh, 40px);
    color: var(--white);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  /* v6 — Mobile keeps the photo full-bleed and OVERLAYS the lock-up on it,
     same as desktop. */
  @media (max-width: 720px) {
    /* Photo zoomed slightly + anchored to the TOP so the figures sit lower in
       the frame, keeping heads clear of the fixed nav. */
    .landing__photo {
      background-size: auto 130%;
      background-position: center top;
    }
    /* Hero block at bottom-left of photo. */
    .landing__hero-block {
      top: auto;
      bottom: clamp(28px, 6vw, 48px);
      transform: none;
      max-width: calc(100vw - 2 * var(--gutter));
      gap: 20px;
    }
    /* v10 — On mobile, the lock-up + TAG always stack (the row's
       flex-wrap handles this automatically, but we bump both to
       fill the available width so they read as the campaign anchor
       rather than a postage stamp). */
    .landing__lockup-big {
      width: min(72vw, 320px);
      filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.7));
    }
    .landing__tag {
      width: min(86vw, 420px);
      filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.7));
    }
  }

  /* ====================================================================
     PAGE 2 — HERO STORIES (smfStories LWC)
     ==================================================================== */

  .stories {
    padding-top: 100px;
    background: var(--paper);
  }

  .stories__intro {
    /* v6 — bottom padding tightened (was 64px) so there's no oversized gap
       between the intro copy and the carousel below. */
    padding: 80px var(--gutter) 24px;
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: start;
  }

  .stories__intro-title {
    font-size: clamp(42px, 6vw, 88px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.03em;
  }
  .stories__intro-title .me { color: var(--green); }

  .stories__intro-body {
    max-width: 540px;
  }
  .stories__intro-body p {
    font-size: clamp(17px, 1.3vw, 19px);
    line-height: 1.55;
    margin-bottom: 28px;
    color: var(--ink-soft);
  }

  /* Section header pattern */
  .section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 var(--gutter);
    max-width: var(--max);
    margin: 0 auto 40px;
    flex-wrap: wrap;
  }
  /* v6 — minimal section head: just the carousel nav, no eyebrow / title.
     Used on Stories where we dropped "Watch · In their own words." Tightened
     vertical rhythm so there's no big gap above the carousel. */
  .section-head--minimal {
    margin: -16px auto 8px;
    justify-content: flex-end;
    padding-top: 0;
  }
  .section-head--minimal > div:empty { display: none; }
  .section-head h2 {
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1;
  }
  .section-head .meta {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
  }

  /* Carousel */
  .carousel {
    position: relative;
    margin-bottom: 100px;
  }

  .carousel__track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 0 var(--gutter) 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-padding-left: var(--gutter);
  }
  .carousel__track::-webkit-scrollbar { display: none; }

  .carousel__nav {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .carousel__btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
  }
  .carousel__btn:hover { background: var(--green); }
  .carousel__btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
  .carousel__btn:disabled:hover { background: var(--ink); }

  /* Video card */
  .video-card {
    flex: 0 0 clamp(320px, 42vw, 560px);
    scroll-snap-align: start;
    cursor: pointer;
  }
  .video-card__thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--ink);
    overflow: hidden;
    border-radius: 4px;
  }
  .video-card__thumb-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s var(--ease);
  }
  .video-card:hover .video-card__thumb-bg { transform: scale(1.04); }
  .video-card__thumb::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);
  }
  .video-card__play {
    position: absolute;
    bottom: 20px; left: 20px;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
  }
  .video-card:hover .video-card__play { transform: scale(1.06); background: var(--white); color: var(--green); }
  .video-card__play svg { width: 22px; height: 22px; margin-left: 3px; }

  .video-card__duration {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(0,0,0,0.6);
    color: var(--white);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    z-index: 2;
  }

  .video-card__body { padding: 20px 4px 0; }
  .video-card__title { font-size: 22px; font-weight: 800; line-height: 1.2; margin-bottom: 8px; letter-spacing: -0.015em; }
  .video-card__desc { font-size: 15px; color: var(--mute); line-height: 1.5; }

  /* Story card — v4 makes the whole card clickable per feedback C2. */
  .story-card {
    flex: 0 0 clamp(320px, 36vw, 480px);
    scroll-snap-align: start;
    cursor: pointer;
  }
  .story-card[data-story-card] [data-story-body] { display: none; }
  .story-card__photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--paper-warm);
    margin-bottom: 24px;
  }
  .story-card__photo--paul {
    background-image: var(--paul-image);
    background-size: cover;
    background-position: center;
    transition: transform 0.7s var(--ease);
  }
  .story-card:hover .story-card__photo--paul { transform: scale(1.04); }
  .story-card__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
  }
  .story-card:hover .story-card__photo img { transform: scale(1.04); }

  /* v4 — story-card photos rendered as background-image divs (driven by base64
     CSS vars) so the prototype is fully self-contained. */
  .story-card__photo-bg {
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s var(--ease);
  }
  .story-card:hover .story-card__photo-bg { transform: scale(1.04); }

  /* v7 — name/age/location subtitle hidden per Laura's feedback. */
  .story-card__subtitle { display: none; }
  .story-card__subtitle--legacy {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 8px;
  }
  .story-card__title {
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
  }
  .story-card__text {
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 24px;
    max-width: 92%;
  }
  .story-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 4px;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease);
  }
  .story-card__cta:hover { color: var(--green); border-color: var(--green); gap: 14px; }

  /* v4: pull quote shrunk per ADSS feedback (Q1). It was risking that users
     stop scrolling when they hit it. Padding, mark size and text size all
     pulled down. Attribution removed (Q2). */
  .pull-quote {
    background: var(--ink);
    color: var(--white);
    padding: clamp(48px, 8vh, 88px) var(--gutter);
    margin: 32px 0;
    position: relative;
    overflow: hidden;
  }
  .pull-quote__inner {
    max-width: var(--max);
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  /* v7 — speech marks now sit INLINE with the quote text (not stacked above).
     The open mark sits flush left of the first word; the close mark sits
     flush right of the last word. Both styled as oversized accent characters. */
  .pull-quote__mark {
    color: var(--green);
    font-weight: 900;
    font-size: 1.6em;
    line-height: 0;
    letter-spacing: -0.04em;
    vertical-align: -0.18em;
  }
  .pull-quote__mark--open  { margin-right: 0.06em; }
  .pull-quote__mark--close { margin-left: 0.04em; }
  .pull-quote__body { display: inline; }
  .pull-quote__text {
    font-size: clamp(20px, 2.4vw, 32px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 980px;
  }
  .pull-quote__text .green { color: var(--green); }

  /* ====================================================================
     PAGE 3 — ABOUT / LEARN (smfAbout LWC)
     ==================================================================== */

  .about {
    /* v10 — top padding matched to Stories (effective 180px from the
       viewport to first content) so every inner page has the same
       breathing room between the fixed header and the copy. */
    padding: 180px var(--gutter) 100px;
    background: var(--paper);
  }
  .about__inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: start;
  }

  .about__title-wrap {
    /* v10 — Sticky offset matched to the page's content top (180px =
       132px header + 48px breathing buffer) so "Our Impact" pins
       exactly where it starts and never appears to move while the
       right-hand column scrolls. The mobile rule below switches this
       back to position: static so a small viewport doesn't lose
       vertical room to a sticky title. */
    position: sticky;
    top: 180px;
  }

  .about__title {
    font-size: clamp(48px, 7vw, 104px);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.035em;
    margin-bottom: 24px;
  }
  /* v10 — Impact-page accent purple (#A31780, sampled from the SMF
     purple lock-up). Used for the "impact." word, stat numbers,
     webinar eyebrow, webinar hover border, and link-hover state so
     every blue accent on this page now matches the purple header. */
  .about__title .green { color: #A31780; }

  .about__lead {
    font-size: clamp(18px, 1.4vw, 21px);
    font-weight: 500;
    line-height: 1.45;
    color: var(--mute);
    max-width: 380px;
  }

  .about__body h3 {
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    margin-top: 56px;
  }
  .about__body h3:first-child { margin-top: 0; }

  .about__body p {
    font-size: 17px;
    line-height: 1.65;
    margin-bottom: 18px;
    color: var(--ink-soft);
    max-width: 640px;
  }

  .about__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 48px 0;
    padding: 40px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .about__stat-num {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #A31780;
    margin-bottom: 8px;
  }
  .about__stat-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--mute);
  }

  /* v4 — webinar block (A3) */
  .about__webinars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 24px 0 8px;
  }
  .about__webinar {
    display: block;
    background: var(--paper-warm);
    padding: 24px 24px 28px;
    border-radius: 4px;
    border: 1px solid var(--line);
    transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .about__webinar:hover {
    border-color: #A31780;
    background: var(--white);
    transform: translateY(-2px);
  }
  .about__webinar-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #A31780;
    margin-bottom: 8px;
  }
  .about__webinar h4 {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
  }
  .about__webinar p {
    font-size: 14px;
    color: var(--mute);
    margin: 0 0 16px !important;
    line-height: 1.45;
  }
  .about__webinar-link {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
  }
  @media (max-width: 720px) {
    .about__webinars { grid-template-columns: 1fr; }
  }

  /* v4 — ADSS deeper links (A2) */
  .about__links {
    list-style: none;
    padding: 0;
    margin: 16px 0 32px;
    border-top: 1px solid var(--line);
  }
  .about__links li {
    border-bottom: 1px solid var(--line);
  }
  .about__links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 4px;
    font-size: 17px;
    font-weight: 700;
    transition: color 0.3s var(--ease), padding 0.3s var(--ease);
  }
  .about__links a:hover {
    color: #A31780;
    padding-left: 12px;
  }

  /* v10 — Recolour the brand-blue CTA on the Impact page to the page
     accent purple. Scoped to .about so the same button class stays
     brand blue everywhere else (Donate flow, modal CTAs, etc.). */
  .about .btn--green        { background: #A31780; }
  .about .btn--green:hover  { background: #7A1160; }

  /* ====================================================================
     PAGE 4 — TAKE ACTION (smfAction LWC)
     ==================================================================== */

  .action {
    /* v10 — top padding matched to Stories so every inner page has the
       same breathing room between the fixed header and the copy. */
    padding: 180px 0 0;
    background: var(--paper);
  }

  /* v7 — Action hero: image dropped, single-column copy block. */
  .action__hero {
    padding: 0 var(--gutter) 64px;
    max-width: var(--max);
    margin: 0 auto;
  }
  .action__hero-text { max-width: 880px; }
  .action__title {
    font-size: clamp(56px, 9vw, 144px);
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.035em;
  }
  .action__title .green { color: var(--green); }
  .action__title .stroke {
    -webkit-text-stroke: 2px var(--ink);
    color: transparent;
  }

  .action__lead {
    margin-top: 32px;
    max-width: 720px;
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 500;
    line-height: 1.45;
    color: var(--ink-soft);
  }

  .action__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
  }

  /* v5 action cards — CTA button anchored to the top-right of each box so
     the actionable element sits above the fold inside its own card. */
  .action__card {
    padding: 60px var(--gutter) 64px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    row-gap: 24px;
    min-height: 420px;
    position: relative;
    transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
  }
  .action__card-num   { grid-column: 1; grid-row: 1; align-self: center; }
  .action__card-cta   { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
  .action__card-title { grid-column: 1 / -1; grid-row: 2; align-self: end; }
  .action__card-text  { grid-column: 1 / -1; grid-row: 3; }
  .action__card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 3px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
  }
  .action__card:hover::before { transform: scaleX(1); }
  .action__card:last-child { border-right: none; }
  .action__card:hover { background: var(--paper-warm); }

  .action__card--green {
    background: var(--green);
    color: var(--white);
    box-shadow: 0 0 0 0 rgba(0,0,0,0); /* lift on hover */
    transition: background-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  }
  .action__card--green::before { background: var(--white); }
  .action__card--green:hover {
    background: var(--green-deep);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -20px rgba(176, 18, 74, 0.6);
  }

  .action__card-num {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
  }
  .action__card-title {
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .action__card-text {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: auto;
  }
  .action__card .btn { align-self: flex-start; }
  .action__card--green .btn { background: var(--ink); color: var(--white); }
  .action__card--green .btn:hover { background: var(--white); color: var(--ink); }

  /* Donation tiers preview block on the action page */
  .tiers {
    background: var(--green);
    color: var(--white);
    padding: clamp(80px, 12vh, 140px) var(--gutter);
  }
  .tiers__inner {
    max-width: var(--max);
    margin: 0 auto;
  }
  .tiers__title {
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    max-width: 980px;
    margin-bottom: 64px;
  }
  .tiers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .tier {
    border-left: 2px solid rgba(255,255,255,0.5);
    padding-left: 24px;
  }
  .tier__amount {
    font-size: clamp(32px, 3.2vw, 44px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 12px;
  }
  .tier__headline {
    font-size: clamp(15px, 1.1vw, 16px);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
    line-height: 1.3;
  }
  .tier__text {
    font-size: 15px;
    line-height: 1.55;
    opacity: 0.9;
  }

  /* ====================================================================
     FOOTER
     ==================================================================== */

  /* v6 — footer significantly reduced. Padding cut roughly 50%; columns are
     tighter and the bottom strap is a single line. Mobile collapses
     intelligently to avoid the previous full-mobile-screen footer. */
  .site-footer {
    background: var(--ink);
    color: var(--white);
    padding: 40px var(--gutter) 24px;
  }
  .site-footer__inner {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
  }
  .site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  /* v6 — ADSS lock-up sized down per Laura's feedback that the footer logo
     read as too dominant. Roughly half the v5 size. Mobile reduces further. */
  .footer-lockup {
    background-image: var(--adss-logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    width: 120px;
    height: 48px;
    max-width: 100%;
  }
  @media (max-width: 720px) {
    .footer-lockup { width: 92px; height: 36px; }
  }

  .footer-mark {
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.6;
    max-width: 380px;
  }

  .site-footer__col h4 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 20px;
  }
  .site-footer__col ul { list-style: none; }
  .site-footer__col li { margin-bottom: 10px; }
  .site-footer__col a {
    font-size: 15px;
    font-weight: 500;
    transition: color 0.3s var(--ease);
  }
  .site-footer__col a:hover { color: var(--green); }

  .site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    max-width: var(--max);
    margin: 0 auto;
    font-size: 12px;
    opacity: 0.55;
    letter-spacing: 0.06em;
  }

  /* v7 — Fundraising Regulator badge in the footer bottom strap. */
  .footer-fr-logo {
    background-image: var(--fr-logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    width: 110px;
    height: 32px;
    opacity: 0.85;
    transition: opacity 0.2s var(--ease);
  }
  .footer-fr-logo:hover { opacity: 1; }
  @media (max-width: 720px) {
    .footer-fr-logo { width: 88px; height: 26px; }
  }

  .social-row { display: flex; gap: 12px; }
  .social-row a {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
  }
  .social-row a:hover { background: var(--green); border-color: var(--green); color: var(--white); }
  .social-row svg { width: 16px; height: 16px; }

  /* ====================================================================
     MODALS (Video / Donate / Newsletter)
     ==================================================================== */

  .modal {
    position: fixed; inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .modal.is-open { display: flex; animation: fadeIn 0.3s var(--ease); }

  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

  .modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(8px);
  }

  .modal__panel {
    position: relative;
    background: var(--paper);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 4px;
    animation: modalIn 0.4s var(--ease);
  }
  .modal--video .modal__panel {
    max-width: 1100px;
    background: var(--ink);
    color: var(--white);
  }

  .modal__close {
    position: absolute;
    top: 16px; right: 16px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .modal__close:hover { background: var(--green); transform: rotate(90deg); }

  .modal__body { padding: 56px 48px 48px; }

  .modal__eyebrow {
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .modal__title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.025em;
    margin-bottom: 12px;
  }
  .modal__sub { font-size: 16px; color: var(--mute); margin-bottom: 32px; }

  /* v4 — Donate tiers as full-width stacked cards with descriptive copy. */
  .donate-tiers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }
  /* v6 — explicit hide for inactive frequency panel.
     Without this, display:flex on .donate-tiers overrides the [hidden] attribute
     so both the one-off and monthly ask ladders render at the same time. */
  .donate-tiers[hidden] { display: none; }

  .donate-tier {
    display: grid;
    grid-template-columns: clamp(80px, 14%, 110px) 1fr;
    grid-template-rows: auto auto;
    column-gap: 28px;
    row-gap: 6px;
    align-items: start;
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: 6px;
    padding: 22px 26px;
    text-align: left;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
    cursor: pointer;
    width: 100%;
  }
  .donate-tier:hover { border-color: var(--ink); }
  .donate-tier.is-selected {
    border-color: var(--green);
    background: var(--green-soft);
  }
  .donate-tier__amount {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: clamp(32px, 3.6vw, 44px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .donate-tier__headline {
    grid-column: 2;
    grid-row: 1;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.25;
  }
  .donate-tier__text {
    grid-column: 2;
    grid-row: 2;
    font-size: 14px;
    color: var(--mute);
    line-height: 1.5;
    margin: 0;
  }

  /* v9 — "Other" tier sits as the 4th card in each ladder. Same shape as
     the £ tiers but the "amount" cell shows the word "Other" and the
     body row contains either prompt copy (when not selected) or the
     custom-amount input (when selected). The input is part of the card
     itself, not a separate field below the ladder. */
  .donate-tier--other .donate-tier__amount {
    font-size: 28px;
    letter-spacing: -0.01em;
  }

  /* The card uses a div+role=button instead of <button> because an
     <input> inside a <button> is invalid HTML. Match the focus ring
     so keyboard users still get a clear focus indicator. */
  .donate-tier--other:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }

  /* Default text shows when the card is not selected. */
  .donate-tier--other .donate-tier__text--default { display: block; }
  .donate-tier--other.is-selected .donate-tier__text--default { display: none; }

  /* The custom-amount field replaces the default text once the card
     is selected. Sits in the right-hand column under the headline,
     same grid cell as .donate-tier__text. */
  .donate-tier__custom {
    grid-column: 2;
    grid-row: 2;
    display: none;
    align-items: center;
    margin-top: 8px;
    padding: 10px 14px;
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: 4px;
    transition: border-color 0.2s var(--ease);
  }
  .donate-tier--other.is-selected .donate-tier__custom { display: flex; }
  .donate-tier__custom:focus-within { border-color: var(--ink); }
  .donate-tier__custom-sym {
    font-weight: 800;
    color: var(--mute);
    margin-right: 8px;
    font-size: 17px;
  }
  .donate-tier__custom-input {
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    background: transparent;
    font: 600 17px var(--font);
    outline: none;
    color: var(--ink);
    /* hide native number-input spinners so the field looks like the
       rest of our text inputs */
    -moz-appearance: textfield;
  }
  .donate-tier__custom-input::-webkit-outer-spin-button,
  .donate-tier__custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .donate-tier__custom-suffix { font-size: 12px; color: var(--mute); margin-left: 12px; letter-spacing: 0.06em; }

  .donate-freq { display: flex; gap: 8px; margin-bottom: 28px; }

  /* v6 — "/month" suffix sits on its own line UNDER the amount so it can't
     overflow column 1 of the donate-tier grid and crash the body copy. */
  .donate-tier__per {
    display: block;
    font-size: 0.32em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 4px;
    opacity: 0.65;
    line-height: 1;
  }

  /* v5 — Remove the number-input spinner (Laura: "if you catch your thumb on
     it and go up and down it changes the amount"). */
  input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* v4 — Multi-step checkout. */
  .checkout-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    gap: 16px;
    counter-reset: step;
    border-bottom: 1px solid var(--line);
    padding-bottom: 16px;
  }
  .checkout-steps__item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mute);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex: 1;
  }
  .checkout-steps__num {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--line);
    color: var(--mute);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    background: var(--white);
    transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
  }
  .checkout-steps__item.is-active { color: var(--ink); }
  .checkout-steps__item.is-active .checkout-steps__num {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
  }
  .checkout-steps__item.is-complete .checkout-steps__num {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
  }

  .checkout-step { display: none; }
  .checkout-step.is-active { display: block; animation: fadeStep 0.3s var(--ease); }
  @keyframes fadeStep {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .checkout-step__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--mute);
    margin-bottom: 24px;
    cursor: pointer;
  }
  .checkout-step__back:hover { color: var(--ink); }

  .checkout-summary {
    background: var(--paper-warm);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .checkout-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .checkout-summary__label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .checkout-summary__value {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    text-align: right;
  }
  .donate-freq-btn {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--line);
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--white);
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
  }
  .donate-freq-btn.is-active {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--white);
  }

  /* Newsletter form */
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }

  .form-field {
    margin-bottom: 12px;
  }
  .form-field label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 6px;
  }
  .form-field input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--line);
    border-radius: 4px;
    font: 500 16px var(--font);
    background: var(--white);
    transition: border-color 0.2s var(--ease);
    outline: none;
  }
  .form-field input:focus { border-color: var(--ink); }

  /* v7 — inline field validation. Error messages appear below the input,
     red 2px border on the input, and aria-describedby ties them together
     so screen readers announce the error. */
  .form-field.is-invalid input {
    border-color: #d6332b;
    background: #fff5f4;
  }
  .form-field.is-invalid input:focus {
    border-color: #d6332b;
    box-shadow: 0 0 0 3px rgba(214, 51, 43, 0.18);
  }
  .form-field__error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #d6332b;
    line-height: 1.4;
  }
  .form-field__error[hidden] { display: none; }

  /* v10 — Helper text shown under an input (e.g. the Google Places
     address lookup) to explain what's happening without taking up
     a whole sentence's worth of vertical space. */
  .form-field__hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--mute);
    line-height: 1.4;
  }

  /* v10 — "(optional)" tag inside a label so donors can tell at a
     glance which fields they have to fill (most are required on the
     payment step, only County is optional). */
  .form-field__optional {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mute);
    margin-left: 4px;
  }

  .form-privacy {
    font-size: 13px;
    color: var(--mute);
    margin: 16px 0 24px;
    line-height: 1.5;
  }
  .form-privacy a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

  .modal__panel .btn { width: 100%; justify-content: center; }

  /* v4 — Story modal (C2).
     Wider panel, hero image up top, narrative body below. */
  .modal--story .modal__panel--story {
    max-width: 720px;
    background: var(--paper);
  }
  .modal-story__hero {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--paper-warm);
  }
  .modal-story__body {
    padding: 32px 40px 40px;
  }
  .modal-story__copy p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin-bottom: 14px;
  }
  .modal-story__actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
  }
  .modal-story__actions .btn {
    width: auto;
  }
  @media (max-width: 720px) {
    .modal-story__body { padding: 24px 20px 28px; }
  }

  /* Video modal */
  .modal--video .modal__body { padding: 0; }
  .modal__video {
    aspect-ratio: 16 / 9;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .modal__video-meta { padding: 24px 32px 32px; }
  .modal__video-meta h3 { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 6px; }
  .modal__video-meta p { font-size: 14px; opacity: 0.7; }

  /* ====================================================================
     RESPONSIVE
     ==================================================================== */
  @media (max-width: 960px) {
    

    /* v10 — At this breakpoint .stories__intro stops being a 2-col grid
       and becomes a single column. We keep the TOP padding at 80 so the
       header-to-copy gap stays the same as desktop — only shrink it
       further at <540px when the header itself shrinks. The horizontal
       gutter and bottom padding can drop now. */
    .stories__intro {
      grid-template-columns: 1fr;
      gap: 32px;
      padding-bottom: 32px;
    }

    .about__inner {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .about__title-wrap { position: static; }
    .about__stats { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }

    .action__cards { grid-template-columns: 1fr; }
    .action__card { min-height: auto; border-right: none; }

    .tiers__grid { grid-template-columns: 1fr; gap: 32px; }

    .site-footer__inner { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
    .site-footer { padding: 24px 16px 16px; }
    .footer-mark { font-size: 12px; line-height: 1.5; }
    .site-footer__col h4 { margin-bottom: 10px; }
    .site-footer__col li { margin-bottom: 6px; }

    .modal__body { padding: 40px 24px 24px; }

    /* .donate-tiers is already a column flex layout from v4 — no override needed */
    .donate-tier { padding: 16px 18px; column-gap: 16px; }
    .form-row { grid-template-columns: 1fr; }

    .landing__inner { padding-top: 90px; }
    .landing__top { flex-direction: column; gap: 16px; }

    .landing__bg { background-position: center bottom; }
    .landing__veil {
      background:
        linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 100%);
    }

    .pull-quote { padding: 80px 20px; margin: 40px 0; }
  }

  @media (max-width: 540px) {
    .wordmark__main { font-size: 64px; }
    .wordmark__first { font-size: 44px; }
    .wordmark__see { font-size: 24px; }

    .header-right .btn { padding: 10px 16px; font-size: 13px; }
    .smf-logo .word { font-size: 18px; }

    .video-card, .story-card { flex-basis: 84vw; }
  }

  /* Print / accessibility safety */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }

  /* Skip link */
  .skip {
    position: absolute;
    top: -40px; left: 8px;
    background: var(--ink);
    color: var(--white);
    padding: 8px 12px;
    z-index: 200;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
  }
  .skip:focus { top: 8px; }

  /* ===== Form pages (donate + newsletter) ===== */
  /* v6 — Form pages now use plain paper instead of paper-warm so the beige
     no longer dominates the donate / newsletter views. */
  .form-page {
    background: var(--paper);
    min-height: 100vh;
    /* v7 — top padding clears the fixed header (≈132px: 18px + 96px lockup
       + 18px) plus a comfortable buffer so the "Back to take action" link
       isn't squeezed up against the header underline.
       v10 — Bumped from 156px to 180px so donation / newsletter pages
       sit with the same header-to-copy breathing room as Stories. */
    padding: 180px 24px 100px;
  }
  .form-page__inner {
    max-width: 720px;
    margin: 0 auto;
  }
  .form-page--narrow .form-page__inner { max-width: 560px; }
  .form-page__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--mute);
    text-decoration: none;
    margin-bottom: 32px;
    cursor: pointer;
  }
  .form-page__back:hover { color: var(--ink); }
  .form-page__header { margin-bottom: 40px; }
  .form-page__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-deep);
    background: var(--green-soft);
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  .form-page__title {
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
  }
  .form-page__lead {
    font-size: 18px;
    line-height: 1.5;
    color: var(--mute);
    max-width: 520px;
  }
  /* v9 — Body card treatment removed so the form fields, tier buttons and
     step indicator align flush with the H1 + lead text above. The inset
     40px padding was throwing every input 40px to the right of the page
     title; per Laura's feedback, everything now shares the same x-axis. */
  .form-page__body {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .form-page__stripe {
    background: var(--paper-warm);
    border: 1px dashed rgba(10,10,10,0.2);
    padding: 16px 20px;
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--mute);
    margin: 24px 0;
    line-height: 1.5;
  }
  .form-consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 20px 0 8px;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
  }
  .form-consent input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--green);
    flex-shrink: 0;
  }

  /* v10 — Dedication block (revealed when the donor opts to dedicate the
     gift) plus the textarea used for the optional donor message. Radios
     match the existing checkbox accent so the donate page stays visually
     consistent with the rest of the form. The --spaced modifier gives
     the message field room above so its label doesn't crowd the
     dedication checkbox when the reveal panel is collapsed. */
  .form-field--spaced { margin-top: 20px; }
  .dedication-fields {
    margin: 4px 0 16px;
    padding: 16px;
    background: var(--paper-warm);
    border-radius: var(--radius);
  }
  .dedication-fields[hidden] { display: none; }
  .dedication-type {
    border: 0;
    padding: 0;
    margin: 0 0 12px;
  }
  .dedication-type.is-invalid .dedication-type__legend { color: #d6332b; }
  .dedication-type__legend {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 6px;
    padding: 0;
  }
  .dedication-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 20px;
    font-size: 14px;
    cursor: pointer;
  }
  .dedication-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--green);
  }
  .form-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--line);
    border-radius: 4px;
    font: 500 16px var(--font);
    background: var(--white);
    transition: border-color 0.2s var(--ease);
    outline: none;
    resize: vertical;
    min-height: 96px;
  }
  .form-field textarea:focus { border-color: var(--ink); }
  .form-field.is-invalid textarea {
    border-color: #d6332b;
    background: #fff5f4;
  }
  .form-field.is-invalid textarea:focus {
    border-color: #d6332b;
    box-shadow: 0 0 0 3px rgba(214, 51, 43, 0.18);
  }

  .btn--block {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
  /* v10 — Inner-page top-padding mobile rule moved to 540px (the same
     breakpoint at which the header lock-up shrinks 96px → 70px). Above
     540px the header is 132px tall, so all inner pages keep their 180px
     desktop top padding and the 48px header-to-copy gap holds. Below
     540px the header is 106px and we drop to 140px page padding to
     give a comfortable 34px gap on small phones. */
  @media (max-width: 540px) {
    .stories__intro { padding-top: 40px; }
    .about     { padding-top: 140px; }
    .action    { padding-top: 140px; }
    .form-page { padding: 140px 16px 60px; }
  }

  /* Thank-you page */
  .thanks-page {
    text-align: center;
  }
  .thanks-page .form-page__inner { max-width: 640px; }
  .thanks-mark {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
  }
  .thanks-mark svg { width: 36px; height: 36px; }
  .thanks-page__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 13px;
    font-weight: 800;
    color: var(--green-deep);
    margin-bottom: 16px;
  }
  .thanks-page__title {
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
  }
  .thanks-page__lead {
    font-size: 18px;
    color: var(--mute);
    line-height: 1.55;
    margin: 0 auto 32px;
    max-width: 520px;
  }
  .thanks-summary {
    background: var(--paper-warm);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin: 0 0 32px;
    text-align: left;
  }
  .thanks-summary dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 0; }
  .thanks-summary dt { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
  .thanks-summary dd { margin: 0; font-weight: 700; }
  .thanks-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  /* v6 — same display:flex-vs-[hidden] fix as the donate-tiers, so only the
     branch matching ?optin=… renders. Without this, both opt-in branches show. */
  .thanks-actions[hidden] { display: none; }
  .thanks-page__note {
    font-size: 13px;
    color: var(--mute);
    margin-top: 28px;
    line-height: 1.5;
  }