/* ALPHA3 Trial theme stylesheet — ported from the Astro build (see the section headers).
   Generated by concatenating the output of scripts/dev/scope-css.mjs. */

/* §1 fonts — self-hosted Poppins (latin), from @fontsource/poppins */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-600-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* §2 tokens — from src/styles/tokens.css */
:root {
  /* color */
  --color-teal: #09686f;
  --color-teal-dark: #042433;      /* button hover/active; production's button-hover rule uses navy, not a darker teal */
  --color-navy: #042433;
  --color-heading: #333333;        /* base (non-accent) H1 text color; see global.css h1 rule */
  --color-text: #000000;
  --color-text-alt: #231f20;       /* production's near-black: the interior pages' hero H1s and
    the /about-dlbcl/ intro paragraph use it instead of --color-text / --color-heading */
  --color-hero-band: #d4cac5;      /* flat interior-page hero background below 981px, where
    production replaces the photo + wash with a solid band */
  --color-hero-wash-start: rgba(255, 255, 255, 0.6); /* interior-page hero wash over the photo */
  --color-hero-wash-mid: rgba(255, 255, 255, 0.7);
  --color-hero-wash-end: rgba(255, 255, 255, 0);
  --color-blurb-border: #e7eaec;   /* "Clinical Trials Make A Difference" icon cards */
  --color-text-muted: rgba(0, 0, 0, 0.7); /* FAQ answer body text: production dims the whole
    answer to opacity:.7, but that also dims its teal links below AA contrast (3.4:1) --
    applied as a text color here instead so links can stay solid teal (6.5:1). See
    task-5-report.md. */
  --color-white: #ffffff;
  --color-band: #f6f4f3;           /* rgba(212,202,197,.2) over white, confirmed in home.styles.json */
  --color-band-tint: rgba(212, 202, 197, 0.2); /* the same band colour UNFLATTENED. Needed wherever a
    decorative background-image is composited with background-blend-mode: soft-light -- blending against
    a 20%-alpha backdrop keeps the artwork visible, blending against the opaque #f6f4f3 washes it out
    almost completely (measured: dots read 216,226,226 on production vs 245,244,243 when flattened). */
  --color-focus: #042433;
  /*
   * The light half of the dual-tone focus ring the dark "Still Have Questions?" band uses,
   * where the navy --color-focus alone measures 1.06:1. See StillHaveQuestions.astro for
   * the sampled numbers.
   */
  --color-focus-inverse: #ffffff;
  --color-field: #f1f1f1;          /* /learn-more/ contact-form input + textarea background */
  /*
   * Production's form controls have no border at all: a #f1f1f1 field on a white section
   * is a 1.1:1 edge, far below the 3:1 WCAG 2.2 1.4.11 asks of a control's boundary. This
   * grey is the minimum addition that clears it against both neighbours (4.45:1 vs the
   * field, 5.02:1 vs the white band). See docs/deviations.md.
   */
  --color-field-border: #6f6f6f;
  --color-step-done: #00ff00;      /* /schedule/ checklist: completed step glyph + progress bar */
  --color-step-todo: #ffff00;      /* /schedule/ checklist: remaining step glyph + progress bar */
  --color-card-border: rgba(170, 170, 170, 0.54); /* home 3-card row column border, production inline CSS */
  --color-video-border: #64656a;   /* home "About the ALPHA3 Clinical Study" video frame, production inline CSS */
  --color-body-muted: rgba(4, 36, 51, 0.7); /* home card body copy */
  --color-cta-overlay: rgba(4, 36, 51, 0.65); /* navy wash over the "Still Have Questions?" background photo */
  --color-footer-divider: rgba(107, 143, 171, 0.15); /* footer bottom-bar top border, measured in home.html inline CSS */
  --shadow-header-scrolled: 0 0 7px rgba(0, 0, 0, 0.1); /* sticky header shadow-on-scroll, measured in home.html inline CSS */
  --shadow-mobile-nav: 0 2px 5px rgba(0, 0, 0, 0.1); /* open mobile-nav dropdown panel shadow, measured in home.html inline CSS */
  --shadow-age-notice: 0 0 30px 0 rgba(2, 2, 2, 1); /* age-notice badge box-shadow, measured in home.html inline CSS */
  --shadow-age-notice-close: 0 0 15px 1px rgba(2, 2, 2, 0.75); /* age-notice close-button box-shadow, measured in home.html inline CSS */
  --shadow-faq-accordion: 0 10px 25px rgba(0, 0, 0, 0.1); /* FAQ accordion container shadow, measured via getComputedStyle on live /faq/ */
  --shadow-blurb: 0 4px 4px 0 rgba(214, 211, 211, 0.25); /* "Clinical Trials Make A Difference" icon cards */
  --shadow-step-icon: 0 0 4px rgba(2, 2, 2, 0.22); /* soft halo production draws around the /schedule/ checklist glyphs */

  /* type */
  --font-body: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
  --fs-body: 1.25rem;              /* 20px */
  --lh-body: 1.7;                  /* 34px */
  --fs-h1: 3.5625rem;              /* 57px */
  --fs-h2: 2.875rem;               /* 46px -- production is 42px; bumped on request, see docs/deviations.md */
  --fs-h3: 1.5rem;                 /* 24px */
  --fs-nav: 1.3125rem;             /* 21px */
  --lh-heading: 1.3;

  /* layout */
  --container: min(90%, 1640px);
  /*
   * The sticky header's own height at >=981px: 24px padding + the 82px logo + 24px
   * padding. It is the tallest the header ever gets (the logo drops to 170px wide below
   * 981px), so it is what a fragment target has to clear.
   */
  --header-height: 130px;
  /* Scroll offset for in-page fragment links, so a target lands under the sticky header. */
  --scroll-offset: calc(var(--header-height) + 10px);
  --section-pad: 80px;
  --section-pad-fluid: 4vw;
  --radius-btn: 7px;
  --bp-tablet: 980px;              /* reference only; media queries can't use vars */
  --bp-phone: 767px;
}

/* §3 reset — from src/styles/reset.css */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* §4 global — from src/styles/global.css */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

/*
 * Heading colors, measured from reference/home.html + home.styles.json:
 * - h2/h3/h4 base color is navy (rgb(4, 36, 51) === #042433) in every heading checked.
 * - h1 is NOT the same navy. Home's only <h1> ("What if you could predict...") has its
 *   non-accent text inline-styled `color:#333` (its accent span, `.banner-blueText`,
 *   resolves to #09686f = --color-teal). Five of the other six pages' hero-title <h1>s
 *   use a different near-black, #231f20, at 70px (a distinct hero-banner module/size not
 *   covered by this token set) -- but the literal --fs-h1 (57px) above matches home's H1,
 *   so the base h1 color here is calibrated to that same instance (#333) rather than to
 *   the hero-banner variant. --color-heading holds that value; --color-navy remains for
 *   h2/h3/h4. Production's teal accent span is reproduced with the .accent class below.
 */
h1, h2, h3, h4 { font-weight: 700; line-height: var(--lh-heading); color: var(--color-navy); }
/*
 * overflow-wrap only takes effect when a single word cannot fit on a line at all, which
 * on production's 57px h1 (it never shrinks below 981px) happens under ~360px wide and
 * pushes the whole page sideways. Nothing changes at 375px and up.
 */
h1 { font-size: var(--fs-h1); color: var(--color-heading); overflow-wrap: break-word; }
/*
 * h2 line-height is 1.31, not the 1.3 that h1/h3 use -- measured on production at all
 * three viewports (42/55.02, 38/49.78, 30/39.3 in reference/home.styles.json; the same
 * ratio holds on about-dlbcl and faq). h1 (57/74.1) and h3 (24/31.2) are exactly 1.3.
 */
h2 { font-size: var(--fs-h2); line-height: 1.31; }
h3 { font-size: var(--fs-h3); }
p + p { margin-top: 1em; }
a { text-decoration-thickness: from-font; text-underline-offset: 0.15em; }

.accent { color: var(--color-teal); }

/*
 * /about-dlbcl/'s text modules declare their line-height as 1.67em on production, one
 * notch above the 1.66 --lh-body drops to below 981px. It is ~0.2px per line, which
 * accumulates visibly over that page's long paragraphs (4.4px over the intro's 23 phone
 * lines). Shared by AboutIntro, PotentialBenefits and MakeADifference so the value lives
 * in one place rather than being copied into each component's own tablet breakpoint.
 */
@media (max-width: 980px) {
  .about-copy p { line-height: 1.67; }
}

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/*
 * The header is sticky, so an in-page fragment link (the home page's footnote <sup>s)
 * would otherwise drop its target underneath it. --scroll-offset is the header's own
 * height plus a little air; #main carries it for the skip link.
 */
#main { scroll-margin-top: var(--scroll-offset); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  padding: 12px 20px; background: var(--color-navy); color: var(--color-white);
  border-radius: var(--radius-btn);
}
.skip-link:focus { top: 16px; }

/*
 * line-height: 1 (not the body's 1.7) -- production's inline CSS forces line-height:1
 * on every button (both the header cta's own dedicated button rule and a separate
 * global rule covering every other button), which is what keeps a button's box exactly
 * padding-block*2 + font-size tall. Confirmed against the footer "More Info" button's
 * own computed box in reference/home.styles.json: padding 18.5px + font-size 18px +
 * padding 18.5px = 55px, matching its measured height exactly.
 */
.btn {
  display: inline-block; padding: 23.5px 40px;
  background: var(--color-teal); color: var(--color-white);
  font-size: 1.25rem; font-weight: 700; line-height: 1;
  text-decoration: none; border-radius: var(--radius-btn);
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.07); /* every production button carries this soft shadow (computed on live) */
  transition: background-color 0.2s;
}
/*
 * Hover color measured from reference/home.html's inline <style> blocks: production's
 * button-hover rules all set color:#fff and background-color:#042433 (navy), regardless
 * of which specific button instance is hovered. Production's button hover is navy
 * (#042433), not a darkened teal -- --color-teal-dark is set to that same value in
 * tokens.css.
 */
.btn:hover { background: var(--color-teal-dark); }
.btn--wide { padding-inline: 61px; }
.btn--sm { font-size: 1.125rem; padding: 18.5px 30px; }

/*
 * Tablet/phone sizes measured from reference/home.styles.json (also cross-checked against
 * about-dlbcl.styles.json, which matches exactly for h2 and body p):
 *   h2   desktop 42px/55.02px -> tablet 38px/49.78px -> mobile 30px/39.3px
 *   body desktop 20px/34px    -> tablet 18px/29.88px -> mobile 16px/26.56px
 * h1 and h3 do NOT change size at these breakpoints on home (57px and 24px at all three
 * viewports), so they are left unset here. --lh-heading/--lh-body are unitless ratios and
 * recompute automatically against the new --fs-h2/--fs-body, landing within ~1px of the
 * measured line-heights above (e.g. 38 * 1.3 = 49.4 vs measured 49.78).
 */
/*
 * Button sizes also step down, measured on every production button at all three
 * viewports (e.g. home's "Visit the Full FAQ Page": 306x67 @20px -> 264x54 @18px ->
 * 241x48 @16px; the footer "More Info" .btn--sm: 146x55 @18px -> 146x54 -> 136x48).
 * .btn--wide keeps its own wider inline padding so its existing callers are unchanged.
 */
@media (max-width: 980px) {
  :root {
    --fs-h2: 2.625rem;   /* 42px (production 38px) */
    --fs-body: 1.125rem; /* 18px */
    --lh-body: 1.66;     /* production drops body line-height from 1.7 to 1.66 below 981px */
  }
  .btn, .btn--sm { font-size: 1.125rem; padding-block: 18px; padding-inline: 30px; }
  .btn--wide { padding-inline: 61px; }
}
@media (max-width: 767px) {
  :root {
    --fs-h2: 2.0625rem;  /* 33px (production 30px) */
    --fs-body: 1rem;     /* 16px */
  }
  .btn, .btn--sm { font-size: 1rem; padding-block: 16px; padding-inline: 30px; }
  .btn--wide { padding-inline: 61px; }
}

/* §5 Header — from src/components/header/Header.astro */
/*
 * Measured from reference/home.styles.json + home.html's inline <style> (desktop
 * viewport, 1350-1660px builder breakpoint): header box 1440x130, logo box 220x82 at
 * (72,24) -- 24px padding-block above/below the logo defines the header's height.
 * The nav's cta link is production's ".contact_btn a": background teal, white text,
 * 7px radius, 21px/700 type, padding 20.5px 51.2px at this breakpoint.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  padding-block: 24px;
  transition: box-shadow 0.2s ease;
}
.site-header[data-scrolled] { box-shadow: var(--shadow-header-scrolled); }
/* The header template part's wrapper must not box the sticky header in: sticky only holds within its parent. */
.site-header-part { display: contents; }
/* Signed in: stick below WordPress's admin bar (fixed above 600px, scrolls away on phones). */
body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 600px) { body.admin-bar .site-header { top: 0; } }
.site-header__inner {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  /*
   * Production's header row is `align-items: stretch` with the nav's <ul> sitting at
   * the TOP of it (inline-block, y=24 -- the same y as the logo), not vertically
   * centred: the nav links get their vertical position from a 24px padding-top on the
   * <a> itself and the cta button from a 6.5px baseline offset. Centring instead put
   * every nav item ~3px too low. Below 981px the row is logo + hamburger and is
   * centred, so that breakpoint keeps `center`.
   */
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.site-header__logo { display: block; line-height: 0; min-width: 0; }
/* 220px wide -> 81.55px tall from the 1821x675 source, matching production exactly.
   astro:assets <Image> spreads the component's scope attribute onto the <img> it
   renders, so a plain scoped `img` selector reaches it -- the idiom used site-wide. */
.site-header__logo img { width: 220px; max-width: 100%; height: auto; display: block; }

/*
 * The row is `space-between`, which with logo + nav alone pinned the nav to the right
 * edge. The language selector is a third item, and `space-between` would then centre the
 * nav between the two; `margin-left: auto` keeps the old behaviour instead -- it eats all
 * the free space, so the nav and the selector stay together at the right and the nav
 * simply moves left by the selector's width. That shift is the one intended visual change
 * to the English pages (docs/deviations.md).
 */
.site-header__nav { margin-left: auto; }

/*
 * Live's menu items are `display:inline-block` <li>s with 11px of padding each side and
 * links 24px above and below the text (computed on live, 1440px): the row is flush with
 * the container's right edge, so the cta button ends 11px inside it. The cta is centred
 * on the row (live's baseline alignment lands it 0.5px higher). Between items live has
 * the 5.35px a whitespace text node leaves between inline-blocks, reproduced as a flex gap.
 *
 * :not(.btn) below matters too: Astro's per-component CSS scoping raises the
 * specificity of every selector in this block (via an added attribute selector),
 * which would otherwise beat the plain ".btn" class from global.css and silently
 * strip the white text / bold weight / teal background off the cta link.
 */
.site-header__nav ul { display: flex; align-items: center; gap: 5.35px; }
.site-header__nav li { padding-inline: 11px; }
.site-header__nav a:not(.btn) {
  position: relative;
  display: inline-block;
  font-size: var(--fs-nav);
  font-weight: 400;
  line-height: 1.34; /* 28.14px at 21px, measured */
  color: var(--color-text);
  text-decoration: none;
  /* measured on live: 24px above and below the text (a 76.1px box) */
  padding-block: 24px;
}
.site-header__nav a:not(.btn):hover { color: var(--color-teal); }
.site-header__nav a:not(.btn)[aria-current='page'] { color: var(--color-teal); }
/*
 * Production's active/hover underline is NOT a text-decoration: it is a 2px teal bar
 * pinned to the BOTTOM of the <a>'s own box, which grows from 0 to 100% width over
 * 0.3s. Measured on reference/about-dlbcl--desktop.png: the "About" link's glyphs
 * occupy rows 54-68 while the teal bar is 63px wide across rows 84-85 -- i.e. the full
 * link width, 16px below the text, where the link's 10px bottom padding ends. A
 * text-decoration underline sat ~12px too high and was only as wide as the word.
 */
.site-header__nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 14px; /* 16px below the text, as before the link's bottom padding grew to 24px */
  width: 0;
  height: 2px;
  background: var(--color-teal);
  transition: width 0.3s ease-in;
}
.site-header__nav a:not(.btn):hover::after,
.site-header__nav a:not(.btn)[aria-current='page']::after { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .site-header__nav a:not(.btn)::after { transition: none; }
}

.site-header__nav a.btn {
  padding: 23.5px 35px;
  font-size: var(--fs-nav);
}

/*
 * The hamburger only does anything once shell.js has wired it up, so both halves of the
 * collapse are gated on the `js` class Base.astro sets in <head>: without JS the nav
 * stays in the header (as the same panel, permanently open) and no dead button shows.
 */
.site-header__toggle {
  display: none;
  flex: none;
  color: var(--color-teal);
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

@media (max-width: 980px) {
  .site-header__inner { align-items: center; }
  /*
   * The row now carries three items -- logo, language selector, hamburger -- and at 320px
   * the 90% container is only 288px wide, 2px less than the three of them want. A wrapped
   * row would make the sticky header taller and push every page down, so two things give:
   * the column gap (only the column gap -- the ROW gap is what separates this row from the
   * nav panel that opens under it), and the logo, which is taken out of the wrap decision
   * with a flex-basis of 0 so the line always "fits" and grows back to its usual 170px
   * wherever there is room. Below ~340px the logo ends up a pixel or two narrower instead.
   * The selector and the hamburger never give: both carry a control (`flex: none`).
   */
  .site-header__logo { flex: 1 1 0; max-width: 170px; }
  .site-header__logo img { width: 170px; }
  html.js .site-header__toggle { display: inline-flex; }
  .site-header__inner { flex-wrap: wrap; column-gap: 12px; row-gap: 32px; }
  .site-header__nav {
    margin-left: 0;
    flex-basis: 100%;
    background: var(--color-white);
    border-top: 3px solid var(--color-teal);
    box-shadow: var(--shadow-mobile-nav);
    margin-top: 24px;
    padding: 5%;
  }
  html.js .site-header__nav { display: none; }
  html.js .site-header__nav[data-open] { display: block; }
  .site-header__nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .site-header__nav li { width: 100%; padding-inline: 0; }
  .site-header__nav li:not(:last-child) { border-bottom: 1px solid var(--color-band); }
  .site-header__nav a:not(.btn) { display: block; padding: 16px 0; }
  /*
   * <=980px cta: production's cascade at this breakpoint (two !important rules in
   * home.html's inline CSS, later one wins on overlap) resolves to
   * padding:14.5px 30px + font-size:18px.
   */
  .site-header__nav a.btn {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 14.5px 30px;
    font-size: 18px;
    text-align: center;
    box-sizing: border-box;
  }
}

/* The last of the room, at the width where the row above runs out of it. */
@media (max-width: 480px) {
  .site-header__inner { column-gap: 8px; }
}

/* §6 Footer — from src/components/footer/Footer.astro */
/*
 * Every number below is measured on production at 1440/768/375, from
 * reference/home.styles.json plus a live getComputedStyle probe of the footer's own
 * modules (the .styles.json capture only reaches as far as the column boxes).
 *
 *                          desktop        tablet         phone
 *   main padding-block     60 / 30        50 / 20        30 / 20
 *   top row                4 columns      2 x 2          1 column
 *   column widths          321/399/165/295 (x 72/432/869/1073), 38.67px gutters
 *   column row gap         --             30             30
 *   logo image             220 wide       150 + 15 below 150 + 15 below
 *   section heading        28px/1.28      28px/1.28      25px/1.28
 *   heading margin-bottom  15             10             10
 *   contact email          19px/1.57 navy at every viewport
 *   resources links        20/1.7         18/1.66        16/1.66  (no gap between them)
 *   cta button             right-aligned  left           left; 30px below it always
 *   bottom bar             1px hairline + 25px padding-block at every viewport
 *   copyright              19px/1.57      17px/1.57      15px/1.57
 *   legal links            19px/1.57 at every viewport; 55px apart, 25px below 981px
 *   bar margin-bottom      25             20             20   (space under the footer)
 */
.site-footer { background: var(--color-white); }

.site-footer__main {
  width: var(--container);
  margin-inline: auto;
  padding: 60px 0 30px;
  display: grid;
  grid-template-columns: 321fr 399fr 165fr 295fr;
  column-gap: 38.67px;
  align-items: start;
}
.site-footer__logo { display: block; line-height: 0; }
.site-footer__logo img { width: 220px; height: auto; display: block; }

.site-footer__heading {
  font-size: 1.75rem; /* 28px */
  line-height: 1.28;  /* 35.84px */
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 15px;
}
.site-footer__contact { font-size: 1.1875rem; line-height: 1.57; } /* 19px / 29.83px, as live's wrapping paragraph */
.site-footer__contact a {
  display: inline; /* live's email is an inline link: a 27px-tall box as wide as the address */
  color: var(--color-navy);
  text-decoration: none;
}
.site-footer__contact a:hover { color: var(--color-teal); text-decoration: underline; }

/*
 * Production renders the two Resources links as two lines of a single paragraph, so
 * they are exactly one line-height apart with no extra gap (measured: the whole block
 * is 68px tall at desktop for two 34px lines).
 */
.site-footer__resources ul { display: block; }
.site-footer__resources a {
  font-size: 1.25rem; /* 20px */
  color: var(--color-teal);
  text-decoration: none;
}
.site-footer__resources a:hover { text-decoration: underline; }

.site-footer__cta { justify-self: end; margin-bottom: 30px; }

/*
 * /schedule/ variant (live's /learn-more/ now has the default footer). Measured on production at 1440/768/375:
 *   main padding-block   60 / 85      50 / 40      40 / 25
 *   top row              3 x 1/3      1 column     1 column   (3% gutters)
 *   logo image           200          150          120        (no margin below it)
 *   resources links      20px/1.57    18px/1.66    16px/1.66
 * Everything else -- headings, email, bottom bar -- is identical to the main template.
 */
.site-footer--compact .site-footer__main {
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3%;
  padding: 60px 0 85px;
}
.site-footer--compact .site-footer__resources ul { line-height: 1.57; }

.site-footer__bar {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-block: 25px;
  /* Production leaves this much white space under the footer; it collapses out of the
     footer's own box, exactly as it does on production. */
  margin-bottom: 25px;
  border-top: 1px solid var(--color-footer-divider);
  color: var(--color-navy);
}
.site-footer__bar a,
.site-footer__bar button {
  color: var(--color-navy);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
/* A button's box is the whole 29.83px line; live's inline link box is 27px, starting 1px into it. Same glyph rows either way. */
.site-footer__bar button { line-height: 27px; vertical-align: top; position: relative; top: 1px; }
.site-footer__bar a:hover,
.site-footer__bar button:hover { color: var(--color-teal); text-decoration: underline; }
.site-footer__copyright {
  margin: 0;
  order: 0;
  font-size: 1.1875rem; /* 19px */
  line-height: 1.57;
}
/*
 * Production's legal links aren't a flex list with a uniform gap -- they're plain
 * inline text where every link after the first is wrapped in a span with an explicit
 * margin-left of 55px (25px at <=980px). Reproduced as `column-gap` so the spacing
 * matches exactly while keeping our markup a real <ul> for a11y. It has to be a gap
 * and not `li + li { margin-left }`: below 767px the list wraps onto two lines, and a
 * left margin on the first item of the second line pushes that line off centre (it
 * measured 12.5px right of centre at 320/375px, where production centres both lines).
 * `row-gap` stays at flex's default 0 so the wrapped block keeps its measured 59.7px.
 */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  order: 1;
  column-gap: 55px;
  font-size: 1.1875rem; /* 19px, unchanged at every viewport on production */
  line-height: 1.57;
}

@media (max-width: 980px) {
  .site-footer__main {
    grid-template-columns: 1fr 1fr;
    column-gap: 38.4px;
    row-gap: 30px;
    padding: 50px 0 20px;
  }
  .site-footer__logo { margin-bottom: 15px; }
  .site-footer__logo img { width: 150px; }
  .site-footer__heading { margin-bottom: 10px; }
  .site-footer__cta { justify-self: start; }
  .site-footer__bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    margin-bottom: 20px;
    /* padding-block stays 25px at every breakpoint -- confirmed in home.styles.json
       (the bottom-bar row's computed paddingTop/Bottom is "25px" at all 3 viewports). */
  }
  .site-footer__legal { order: 0; justify-content: center; column-gap: 25px; margin-bottom: 16px; }
  .site-footer__copyright { order: 1; font-size: 1.0625rem; align-self: center; } /* 17px; shrink-wrapped and centred, as live's */
  .site-footer__resources a { font-size: 1.125rem; } /* 18px */

  .site-footer--compact .site-footer__main {
    grid-template-columns: 1fr;
    padding: 50px 0 40px;
  }
  .site-footer--compact .site-footer__logo { margin-bottom: 0; }
  .site-footer--compact .site-footer__resources ul { line-height: var(--lh-body); }
}
@media (max-width: 767px) {
  .site-footer__main { grid-template-columns: 1fr; padding-top: 30px; }
  .site-footer__heading { font-size: 1.5625rem; } /* 25px */
  .site-footer__copyright { font-size: 0.9375rem; } /* 15px */
  .site-footer__resources a { font-size: 1rem; } /* 16px */

  .site-footer--compact .site-footer__main { padding: 40px 0 25px; }
  .site-footer--compact .site-footer__logo img { width: 120px; }
}

/* §7 AgeNotice — from src/components/AgeNotice.astro */
.age-notice {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 90;
  max-width: min(320px, calc(100vw - 20px));
  padding: 10px;
  background: var(--color-white);
  border: 2px solid var(--color-teal);
  border-radius: 3px;
  box-shadow: var(--shadow-age-notice);
}
.age-notice p {
  margin: 0;
  font-size: 0.9375rem; /* 15px, measured in reference/*.styles.json at tablet/phone */
  line-height: 1.4;
  text-align: center;
  color: var(--color-text);
}
.age-notice__close {
  position: absolute;
  top: -13px;
  /*
   * -12px, not the -13px production uses. An absolutely-positioned child is offset from
   * its container's PADDING box, which here is 2px inside the badge's 2px border, so a
   * -13px offset puts the circle's right edge at 10 (the badge's own offset) - 2 - 13 =
   * 1px PAST the viewport, clipping it at every width. -12px lands it exactly flush.
   * The badge itself does not move, and compare.mjs hides it either way.
   */
  right: -12px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--color-teal);
  color: var(--color-white);
  border: 2px solid var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-age-notice-close);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
@media (min-width: 768px) {
  .age-notice p { font-size: 1.25rem; } /* 20px, measured at desktop */
}

/* §8 PageHero — from src/components/PageHero.astro */
.hero {
  position: relative;
  padding-block: 120px;
  background-color: var(--color-hero-band);
  overflow: hidden;
}
.hero__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* reset.css clamps every img to max-width:100%; this one is sized by `inset` instead. */
  max-width: none;
  object-fit: cover;
  object-position: var(--hero-focus);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    5deg,
    var(--color-hero-wash-start) 0,
    var(--color-hero-wash-mid) var(--hero-wash-stop),
    var(--color-hero-wash-end) 100%
  );
}
/*
 * ::after is generated as .hero's LAST child, so at z-index:auto it would paint over
 * the heading (measured: the H1 came out visibly washed out against live). The explicit
 * stacking context puts the copy above both the photo and the wash.
 */
.hero__inner {
  position: relative;
  z-index: 1;
  width: var(--container);
  margin-inline: auto;
}
.hero__text {
  padding-top: var(--hero-space-above, 40px);
  text-align: center;
}
.hero__title {
  margin: 0;
  font-size: 4.375rem; /* 70px */
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-alt);
}

@media (min-width: 981px) and (max-width: 1350px) {
  .hero__title { font-size: 3.75rem; } /* 60px */
}
@media (min-width: 981px) and (max-width: 1250px) {
  .hero { padding-block: 100px; }
}

@media (max-width: 980px) {
  .hero { padding-block: 50px; }
  .hero::after { content: none; }
  .hero__photo {
    position: static;
    width: var(--container);
    height: auto;
    margin-inline: auto;
    object-fit: fill;
  }
  .hero__text {
    padding-top: var(--hero-space-above-small, var(--hero-space-above, 40px));
    padding-bottom: var(--hero-space-below-small, 20px);
  }
  .hero__title { font-size: 3.125rem; } /* 50px */
}
@media (max-width: 767px) {
  .hero { padding-block: 30px; }
  .hero__text { padding-bottom: var(--hero-space-below-small, 15px); }
  .hero__title { font-size: 2.1875rem; } /* 35px */
}

/* §9 Section — from src/components/Section.astro */
.section--white { background: var(--color-white); }
.section--band { background: var(--color-band); }
.section--tint { background-color: var(--color-band-tint); }
.section--pad-standard { padding-block: var(--section-pad); }
.section__inner { width: var(--container); margin-inline: auto; }

.section--dots {
  background-image: var(--section-shape);
  background-repeat: no-repeat;
  background-size: 15vw auto;
}
.section--dots-left-top { background-position: left 0 top 0; }
.section--dots-right-top { background-position: right 0 top 0; }
.section--dots-right-bottom { background-position: right 0 bottom 0; }

/*
 * Standard section padding measured per-viewport in reference/home.styles.json
 * (paddingTop/paddingBottom on a full-width band): 80px desktop -> 50px tablet
 * (<=980px) -> 40px phone (<=767px).
 */
@media (max-width: 980px) {
  .section--pad-standard { padding-block: 50px; }
  .section--dots {
    background-size: var(--section-dots-size-small, 15vw) auto;
  }
}
@media (max-width: 767px) {
  .section--pad-standard { padding-block: 40px; }
}

/* §10 404 — from src/pages/404.astro */
.nf {
  padding-block: var(--section-pad-fluid);
  display: grid;
  justify-items: center;
  gap: 40px;
  text-align: center;
}
.nf p { margin: 0; }

@media (max-width: 980px) {
  .nf { padding-block: 40px; gap: 30px; }
}
@media (max-width: 767px) {
  .nf { padding-block: 30px; }
}