/* Independent Seniors website stylesheet, v2 (2026-10-03).
   Design from the Perplexity/Claude page pack; our banner and footer keep their own styles. */
/* ==========================================================================
   Independent Seniors — Stay Safe Series
   Shared stylesheet for the Home and Series content prototypes.

   Brand: navy #14315B, orange #E07A2C, warm off-white #FBF7F1.
   Accessibility targets baked in:
     - body text never below 18px
     - interactive targets never below 44px (buttons use 52px)
     - visible focus styles on every focusable element
     - prefers-reduced-motion respected
     - colour pairs chosen to clear WCAG AA (4.5:1 text, 3:1 large text/UI)

   NOTE (2026-10-03): now served from Cloudflare;: this file is deliberately self-contained
   so the two page prototypes can be reviewed standalone. At merge time the
   tokens below should be folded into the existing global stylesheet and the
   header/footer blocks removed in favour of the site's global loader.
   ========================================================================== */

/* ---------- Fonts -------------------------------------------------------- */
/* Fraunces for headings (warm editorial voice), Source Sans 3 for body
   (large x-height, open apertures — easy reading at 18px+). */
/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* Brand */
  --navy: #14315b;
  --navy-700: #0f2745;
  --navy-900: #0a1b31;
  --orange: #e07a2c;
  --orange-ink: #9a4c12; /* accessible orange for text on light surfaces */
  --orange-soft: #fbeadb;

  /* Surfaces */
  --bg: #fbf7f1;
  --panel: #f4ede4;
  --white: #ffffff;
  --border: #ded3c4;
  --border-strong: #c7b7a1;

  /* Text */
  --ink: #16263c;
  --ink-muted: #47576b;
  --ink-inverse: #fdfaf6;

  /* Status */
  --green-ink: #1c6340;
  --green-soft: #e4f0e8;

  /* Type scale — body floor is 18px on purpose */
  --text-sm: clamp(1.125rem, 1.09rem + 0.15vw, 1.1875rem); /* 18 → 19 */
  --text-base: clamp(1.125rem, 1.06rem + 0.2vw, 1.1875rem); /* 18 → 19 */
  --text-lg: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem); /* 20 → 23 */
  --text-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem); /* 24 → 34 */
  --text-2xl: clamp(2rem, 1.45rem + 2.4vw, 3.125rem); /* 32 → 50 */

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 49, 91, 0.08);
  --shadow-md: 0 6px 18px rgba(20, 49, 91, 0.1);
  --shadow-lg: 0 18px 42px rgba(20, 49, 91, 0.14);

  --wrap: 1160px;
  --measure: 68ch;

  --ease: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---------- Base --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--navy);
}

h1 {
  font-size: var(--text-2xl);
}
h2 {
  font-size: var(--text-xl);
}
h3 {
  font-size: var(--text-lg);
}
h4 {
  font-size: var(--text-base);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0;
}

p,
li {
  text-wrap: pretty;
}

p {
  max-width: var(--measure);
}

a {
  color: var(--navy);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--ease), background var(--ease), border-color var(--ease);
}

a:hover {
  color: var(--orange-ink);
}

ul,
ol {
  padding-left: 1.2em;
}

li + li {
  margin-top: var(--space-2);
}

strong {
  font-weight: 700;
}

/* Focus: navy ring on light surfaces, orange ring inside navy bands. */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.band-navy :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--orange);
}

.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: var(--space-4);
  top: var(--space-2);
  z-index: 100;
  transform: translateY(-160%);
  background: var(--navy);
  color: var(--ink-inverse);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--ink-inverse);
  outline-color: var(--orange);
}

/* ---------- Layout helpers ---------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section {
  padding-block: clamp(2.75rem, 6vw, 5rem);
}

.section--panel {
  background: var(--panel);
  border-block: 1px solid var(--border);
}

.section--white {
  background: var(--white);
  border-block: 1px solid var(--border);
}

.band-navy {
  background: var(--navy);
  color: var(--ink-inverse);
}

.band-navy h2,
.band-navy h3 {
  color: var(--ink-inverse);
}

.band-navy a {
  color: var(--ink-inverse);
}

.band-navy a:hover {
  color: var(--orange-soft);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin-bottom: var(--space-3);
}

.band-navy .eyebrow {
  color: var(--orange);
}

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.section-head p {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  color: var(--ink-muted);
}

.band-navy .section-head p {
  color: #d6e0ee;
}

.lede {
  font-size: var(--text-lg);
  color: var(--ink-muted);
}

.rule {
  width: 72px;
  height: 4px;
  background: var(--orange);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
}

.stack > * + * {
  margin-top: var(--space-4);
}

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.btn--primary {
  background: var(--navy);
  color: var(--ink-inverse);
}

.btn--primary:hover {
  background: var(--navy-700);
  color: var(--white);
}

.btn--secondary {
  background: var(--white);
  border-color: var(--navy);
  color: var(--navy);
}

.btn--secondary:hover {
  background: var(--orange-soft);
  border-color: var(--orange-ink);
  color: var(--navy);
}

/* Orange fill is reserved for navy bands, where dark navy text on orange
   clears AA (5.3:1). Orange + white text would fail, so it is never used. */
.btn--accent {
  background: var(--orange);
  color: var(--navy-900);
}

.btn--accent:hover {
  background: #f18f42;
  color: var(--navy-900);
}

/* Inside a navy band, links inherit the light link colour — buttons must not.
   Dark navy text on orange is the pairing that clears AA (5.3:1). */
.band-navy .btn--accent,
.band-navy .btn--accent:hover {
  color: var(--navy-900);
}

.band-navy .btn--primary,
.band-navy .btn--primary:hover {
  color: var(--ink-inverse);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(253, 250, 246, 0.55);
  color: var(--ink-inverse);
}

.btn--ghost:hover {
  background: rgba(253, 250, 246, 0.12);
  border-color: var(--ink-inverse);
  color: var(--white);
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
}

.link-arrow:hover {
  color: var(--orange-ink);
}

/* ---------- Header ------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 76px;
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  text-decoration: none;
  color: var(--navy);
}

.brand__mark {
  flex: none;
  width: 42px;
  height: 42px;
  color: var(--navy);
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.15;
  display: block;
  white-space: nowrap;
}

.brand__tag {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

/* Header wordmark stays compact (the approved brief calls for a wordmark-only
   header); the full tagline lives in the footer. */
.brand__tag--compact {
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  min-width: 48px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--navy);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.primary-nav li + li {
  margin-top: 0;
}

.primary-nav a,
.nav-books__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  background: none;
  border: none;
  font-family: inherit;
}

.primary-nav a:hover,
.nav-books__button:hover {
  background: var(--orange-soft);
  color: var(--navy);
}

.primary-nav a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* Inline icons inside links and buttons must not be squeezed to zero width by
   the flex row. */
.btn svg,
.link-arrow svg,
.nav-toggle svg,
.nav-books__button svg,
.cta-band__panel li svg {
  flex: none;
}

.nav-books {
  position: relative;
}

/* Selector is scoped to beat `.primary-nav ul` (the horizontal top-level row). */
.primary-nav ul.nav-books__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  gap: 2px;
  min-width: 320px;
  max-width: min(360px, calc(100vw - 2rem));
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0;
}

/* Must out-specify `.primary-nav ul.nav-books__panel` above, or the disclosure
   panel stays painted open on desktop even while `hidden` is set. */
.primary-nav ul.nav-books__panel[hidden] {
  display: none;
}

.nav-books__panel a {
  width: 100%;
  font-size: var(--text-sm);
}

.header-cta {
  min-height: 48px;
  white-space: nowrap;
  padding: var(--space-2) var(--space-5);
}

/* The horizontal nav bar needs about 1254px for brand + seven items + the
   header button. Below that it becomes the Menu disclosure, which also fixes a
   pre-existing defect: at 1001-1144px the six-item bar already pushed the page
   into a horizontal scroll, and the new Apps item widened that range.
   Change this breakpoint and the matching one below together, plus the
   matchMedia query in script.js. */
@media (max-width: 1259px) {
  .header-inner {
    flex-wrap: wrap;
  }

  .primary-nav {
    order: 3;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding-block: var(--space-3);
    border-top: 1px solid var(--border);
  }

  .primary-nav.is-open {
    display: flex;
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  .primary-nav a,
  .nav-books__button {
    min-height: 52px;
    justify-content: flex-start;
    font-size: var(--text-base);
  }

  .primary-nav ul.nav-books__panel {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 0 var(--space-4);
    min-width: 0;
    max-width: none;
  }
}

@media (min-width: 1260px) {
  .nav-toggle {
    display: none;
  }
}

/* ---------- Hero -------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, var(--white) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
  }

  /* Photo column matches the height of the copy column so the hero reads as
     one block rather than a card floating in space. */
  .hero__figure,
  .hero__figure img {
    height: 100%;
  }

  .hero__figure img {
    aspect-ratio: auto;
    min-height: 380px;
  }
}

.hero h1 {
  margin-bottom: var(--space-5);
}

.hero__sub {
  font-size: var(--text-lg);
  color: var(--ink-muted);
  margin-bottom: var(--space-6);
  max-width: 34ch;
}

@media (max-width: 899px) {
  .hero__sub {
    max-width: var(--measure);
  }
}

.trust-line {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: 46ch;
}

.trust-line span {
  white-space: nowrap;
}

.hero__figure {
  margin: 0;
}

/* Series hero: compact "at a glance" panel instead of a photo. */
.hero__aside {
  align-self: center;
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 5px solid var(--orange);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.hero__aside h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}

.hero__aside dl {
  display: grid;
  gap: var(--space-4);
}

.hero__aside dt {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.hero__aside dd {
  margin: var(--space-1) 0 0;
  color: var(--ink);
}

.hero__figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

/* ---------- Cards ------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Four theme tiles must read as a 2x2 map, not a 3+1 row. */
.grid--themes {
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .grid--themes {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card--accent {
  border-top: 5px solid var(--orange);
}

.card p {
  color: var(--ink-muted);
  max-width: none;
}

.card .btn,
.card .link-arrow {
  margin-top: auto;
  align-self: flex-start;
}

.card__icon {
  width: 48px;
  height: 48px;
  color: var(--navy);
}

/* ---------- Book grid --------------------------------------------------- */
.book-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.book-grid > li {
  margin-top: 0;
}

.book-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--ease), transform var(--ease);
}

.book-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.book-card__cover {
  aspect-ratio: 2 / 3;
  width: 100%;
  object-fit: contain;
  background: var(--panel);
  border-radius: var(--radius-sm);
}

.book-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.book-card h3 {
  font-size: var(--text-base);
  font-family: var(--font-display);
  line-height: 1.25;
}

.book-card p {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: none;
}

.book-number {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.badge--now {
  background: var(--green-soft);
  color: var(--green-ink);
  border: 1px solid #b9d7c5;
}

.badge--soon {
  background: #eee9e1;
  color: #55524c;
  border: 1px solid var(--border-strong);
}

/* ---------- Pull quote / testimonials ---------------------------------- */
.pullquote {
  margin: 0;
  padding: var(--space-6);
  background: var(--white);
  border-left: 6px solid var(--orange);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.pullquote p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--navy);
  max-width: 30ch;
}

.quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 3.5rem var(--space-6) var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.quote-card::before {
  content: '\201C';
  position: absolute;
  top: 0.5rem;
  left: var(--space-5);
  font-family: var(--font-display);
  font-size: 4.25rem;
  line-height: 1;
  color: var(--orange);
  pointer-events: none;
}

.quote-card blockquote {
  margin: 0;
}

.quote-card blockquote p {
  max-width: none;
}

.quote-card figcaption,
.quote-card cite {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 700;
  color: var(--navy);
}

.microcopy {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* ---------- Split (text + image) --------------------------------------- */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 880px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--reverse .split__media {
    order: -1;
  }
}

.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* ---------- Proof points / formats ------------------------------------- */
.proof-list {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.proof-list > li {
  margin-top: 0;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.proof-list strong {
  display: block;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

.price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--navy);
}

.price small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-muted);
}

/* ---------- Theme tiles / chooser -------------------------------------- */
.theme-tile {
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 5px solid var(--navy);
  border-radius: var(--radius-lg);
  height: 100%;
}

.theme-tile ul {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
}

.theme-tile li + li {
  margin-top: var(--space-2);
}

.theme-tile a {
  font-weight: 600;
}

.theme-tile p {
  color: var(--ink-muted);
  max-width: none;
}

.chooser {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}

.chooser > li {
  margin-top: 0;
  border-bottom: 1px solid var(--border);
}

.chooser__row {
  display: grid;
  gap: var(--space-2) var(--space-6);
  align-items: baseline;
  min-height: 56px;
  padding: var(--space-4) var(--space-3);
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--radius-md);
}

@media (min-width: 760px) {
  .chooser__row {
    grid-template-columns: 1.15fr 1fr;
  }
}

.chooser__row:hover {
  background: var(--orange-soft);
  color: var(--ink);
}

.chooser__concern {
  font-size: var(--text-base);
}

.chooser__book {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Series: cover band ---------------------------------------- */
.cover-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 860px) {
  .cover-band {
    grid-template-columns: repeat(8, 1fr);
  }
}

.cover-band > li {
  margin-top: 0;
  text-align: center;
}

.cover-band img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.cover-band .is-upcoming img {
  opacity: 0.88;
}

.cover-band figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: #d6e0ee;
}

/* ---------- Series: detailed book entries ----------------------------- */
.book-detail {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
}

@media (min-width: 900px) {
  .book-detail {
    grid-template-columns: 300px 1fr;
    align-items: start;
  }

  /* Alternating rhythm: the cover swaps side without squeezing the text,
     so the column widths swap too. */
  .book-detail--flip {
    grid-template-columns: 1fr 300px;
  }

  .book-detail--flip .book-detail__media {
    order: 2;
  }
}

.book-detail__media img {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: var(--panel);
}

.book-detail h3 {
  font-size: var(--text-xl);
  margin-block: var(--space-2) var(--space-4);
}

.book-detail h4 {
  margin-bottom: var(--space-2);
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-sm);
}

.book-detail__block + .book-detail__block {
  margin-top: var(--space-5);
}

.book-detail__block ul {
  padding-left: 1.15em;
}

.book-detail__block li::marker {
  color: var(--orange);
}

.format-line {
  font-weight: 600;
  color: var(--navy);
}

/* ---------- FAQ -------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--border);
  max-width: 78ch;
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-4) var(--space-2);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--navy);
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--border-strong);
  color: var(--orange-ink);
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1;
}

.faq details[open] summary::after {
  content: '\2013';
}

.faq summary:hover {
  color: var(--orange-ink);
}

.faq details > *:not(summary) {
  padding: 0 var(--space-2) var(--space-5);
}

/* ---------- Checklist CTA band ---------------------------------------- */
.cta-band__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .cta-band__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.cta-band p {
  color: #dbe4f0;
}

.cta-band__panel {
  padding: var(--space-6);
  background: rgba(253, 250, 246, 0.07);
  border: 1px solid rgba(253, 250, 246, 0.3);
  border-radius: var(--radius-lg);
}

.cta-band__panel h3 {
  margin-bottom: var(--space-3);
}

.cta-band__panel ul {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-6);
}

.cta-band__panel li {
  display: flex;
  gap: var(--space-3);
  color: #dbe4f0;
}

.cta-band__panel li svg {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  color: var(--orange);
}

.privacy-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: #c9d5e5;
}

.privacy-note a {
  color: var(--orange-soft);
}

/* ---------- Footer ---------------------------------------------------- */
.site-footer {
  background: var(--navy-900);
  color: #dbe4f0;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.site-footer h2 {
  font-size: var(--text-base);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-4);
}

.footer-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(240px, 1.25fr) repeat(3, minmax(180px, 1fr));
  align-items: start;
}

.site-footer .brand,
.site-footer .brand__mark {
  color: var(--white);
}

.site-footer .brand__tag {
  color: var(--orange);
}

.site-footer p {
  color: #c2cfe0;
  font-size: var(--text-sm);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li + li {
  margin-top: 0;
}

.footer-links a {
  display: block;
  min-height: 44px;
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  color: #dbe4f0;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--orange-soft);
  text-decoration: underline;
}

.footer-utility {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-block: var(--space-3);
  border-block: 1px solid rgba(253, 250, 246, 0.2);
}

.footer-utility ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-6);
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-utility a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #dbe4f0;
  font-size: var(--text-sm);
  text-decoration: none;
}

.footer-utility a:hover {
  color: var(--orange-soft);
  text-decoration: underline;
}

.footer-bottom {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.4fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: var(--space-6);
}

.footer-bottom p {
  color: #b9c7da;
}

.footer-bottom div p + p {
  margin-top: var(--space-1);
}

.footer-bottom a {
  color: var(--orange-soft);
}

.footer-bottom a:hover {
  color: var(--white);
}

@media (max-width: 68rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 44rem) {
  .footer-grid,
  .footer-bottom {
    grid-template-columns: 1fr;
  }

  .footer-utility ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-4);
  }

  .footer-utility a {
    justify-content: flex-start;
  }
}

@media (max-width: 28rem) {
  .footer-utility ul {
    grid-template-columns: 1fr;
  }
}

/* ---------- Motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .book-card:hover {
    transform: none;
  }
}

/* ---------- High contrast / forced colors ----------------------------- */
@media (forced-colors: active) {
  .btn,
  .card,
  .book-card {
    border: 1px solid ButtonText;
  }
}

/* ==========================================================================
   BOOK PAGE COMPONENTS (added for the Books 1–4 replacement pages)
   Additive only: nothing above this line was changed, so the Home and Series
   pages render exactly as before. Every class below is namespaced so it can
   be folded into the live global stylesheet alongside the existing components.
   ========================================================================== */

/* ---------- Book hero (copy + real cover) ------------------------------- */
.book-hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

/* The cover comes first in the markup so it sits above the copy on phones, as
   the approved image plan asks. On desktop it moves to the right-hand column. */
@media (min-width: 900px) {
  .book-hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .book-hero__grid .cover-figure {
    order: 2;
  }
}

/* On phones the cover leads, but it is held small so the title and the price
   line still land in the first screen. */
@media (max-width: 899px) {
  .book-hero__grid .cover-figure {
    max-width: 200px;
    margin-inline: 0;
  }
}

.book-hero__subhead {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  font-style: italic;
  color: var(--orange-ink);
  margin-bottom: var(--space-4);
}

.book-hero__lead {
  font-size: var(--text-lg);
  color: var(--ink-muted);
  max-width: 48ch;
}

.price-line {
  margin-top: var(--space-5);
  font-weight: 700;
  color: var(--navy);
}

/* Trust points: a short list reads better than a run-on line with hanging
   separators, and each point keeps its own line on narrow screens. */
.trust-list {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding-left: 0;
  max-width: 46ch;
}

.trust-list li {
  display: flex;
  gap: var(--space-3);
  margin-top: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.trust-list svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  color: var(--orange-ink);
}

/* Small standing note: emergency number, coming-soon status, source lines. */
.note-line {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 4px solid var(--orange);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: 52ch;
}

.band-navy .note-line {
  color: #d6e0ee;
}

/* ---------- Cover figure (2:3, optional status badge) ------------------- */
.cover-figure {
  display: flex;
  flex-direction: column;
  margin: 0;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
}

.cover-figure--sm {
  max-width: 190px;
}

.cover-figure a,
.cover-figure img {
  display: block;
  border-radius: var(--radius-md);
}

.cover-figure img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

/* Coming-soon titles are shown at full contrast on their own page, and the badge
   states the status in words, never colour alone.
   DEVIATION FROM THE IMAGE PLAN: the plan asked for a badge overlapping the top
   corner of the cover. At every size tested that covered the printed title on the
   real cover art, so the badge sits directly under the cover instead. */
.cover-figure__badge {
  order: 2;
  align-self: flex-start;
  margin-top: var(--space-3);
  box-shadow: var(--shadow-sm);
}

/* ---------- Author note ------------------------------------------------- */
.signoff {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--navy);
}

/* ---------- Standing panel note (the "one honest note" pause) ---------- */
.panel-note {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 6px solid var(--orange);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  max-width: 78ch;
}

.panel-note h3 {
  margin-bottom: var(--space-4);
}

/* ---------- Statistic tiles -------------------------------------------- */
.stat-row {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.stat-row > li {
  margin-top: 0;
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 5px solid var(--navy);
  border-radius: var(--radius-lg);
}

.stat-tile__figure {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: var(--space-2);
}

.stat-tile__source {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--orange-ink);
}

/* ---------- Chapter list (two columns on desktop) ---------------------- */
.chapter-list {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}

@media (min-width: 760px) {
  .chapter-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3rem);
  }
}

.chapter-list > li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-top: 0;
  min-height: 48px;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.chapter-list__num {
  flex: none;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--orange-ink);
  font-variant-numeric: tabular-nums;
}

/* Exactly two columns from the tablet breakpoint up, for sets of four tiles
   that must read as a 2x2 block rather than a 3+1 row. */
.grid--pair {
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .grid--pair {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Two-column outcome panels --------------------------------- */
.outcome-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.outcome-col {
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.outcome-col h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-list li {
  display: flex;
  gap: var(--space-3);
}

.check-list li + li {
  margin-top: var(--space-3);
}

.check-list svg {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 5px;
  color: var(--orange-ink);
}

/* ---------- Format / purchase cards ----------------------------------- */
.format-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.format-grid > li {
  margin-top: 0;
}

.format-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 5px solid var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.format-card--value {
  border-top-color: var(--orange);
}

/* Icon and any card badge share one row, so the headings stay on a common
   baseline across all four cards. */
.format-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
}

/* Distinct from the green "Available now" badge: this one is about value, not
   availability, and must not be read as a status. */
.badge--value {
  background: var(--orange-soft);
  color: var(--orange-ink);
  border: 1px solid #e6c6a4;
}

.format-card__icon {
  width: 40px;
  height: 40px;
  color: var(--navy);
}

.format-card h3 {
  font-size: var(--text-lg);
}

.format-card__price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--navy);
}

.format-card p {
  color: var(--ink-muted);
  max-width: none;
}

.format-card .btn {
  margin-top: auto;
}

/* ---------- Planned price list (coming-soon books) -------------------- */
.price-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 34rem;
  border-top: 1px solid var(--border);
}

.price-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: 0;
  min-height: 56px;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.price-list__format {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  color: var(--navy);
}

.price-list__format svg {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--navy);
}

.price-list__price {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* ---------- Habit tiles (large numerals) ------------------------------ */
.habit-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.habit-grid > li {
  margin-top: 0;
  height: 100%;
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.habit-tile__num {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--orange);
  margin-bottom: var(--space-3);
}

.habit-grid h3 {
  margin-bottom: var(--space-2);
}

.habit-grid p {
  color: var(--ink-muted);
  max-width: none;
}

/* ---------- Two-column bullet list ----------------------------------- */
.list-2col {
  columns: 1;
  padding-left: 1.15em;
  max-width: none;
}

@media (min-width: 820px) {
  .list-2col {
    columns: 2;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
}

.list-2col li {
  break-inside: avoid;
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.list-2col li::marker {
  color: var(--orange);
}

/* ---------- Ranked report table --------------------------------------- */
/* Explicit ARIA roles are set in the markup so the table keeps its semantics
   on small screens, where the rows become stacked cards. */
.rank-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.rank-table caption {
  text-align: left;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  padding-bottom: var(--space-3);
}

.rank-table th,
.rank-table td {
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.rank-table thead th {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 2px solid var(--border-strong);
}

.rank-table tbody tr {
  min-height: 56px;
}

.rank-table tbody th {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--orange-ink);
  width: 3.5rem;
}

.rank-table td[data-label='Reports'],
.rank-table td[data-label='Amount lost'] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .rank-table,
  .rank-table caption,
  .rank-table tbody,
  .rank-table tr,
  .rank-table th,
  .rank-table td {
    display: block;
  }

  .rank-table thead {
    display: none;
  }

  .rank-table tbody tr {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 5px solid var(--orange);
    border-radius: var(--radius-lg);
  }

  .rank-table th,
  .rank-table td {
    border-bottom: none;
    padding: var(--space-1) 0;
    width: auto;
  }

  .rank-table td[data-label]::before {
    content: attr(data-label) ': ';
    font-weight: 700;
    color: var(--navy);
  }
}

/* ---------- Citations ------------------------------------------------- */
.citations {
  padding-left: 1.4em;
  max-width: 78ch;
}

.citations li {
  margin-bottom: var(--space-4);
}

.citations li::marker {
  color: var(--orange-ink);
  font-weight: 700;
}

.citations a {
  overflow-wrap: anywhere;
}

.citations cite {
  font-style: italic;
}

/* ---------- Not-advice line ------------------------------------------- */
.disclaimer {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: 78ch;
}

/* ---------- Notify band (coming-soon pages) --------------------------- */
.notify-band__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .notify-band__grid {
    grid-template-columns: 190px 1fr 1fr;
  }
}

@media (max-width: 899px) {
  .notify-band__grid .cover-figure--sm {
    margin-inline: 0;
  }
}

/* ---------- Motion / forced colors additions -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .format-card,
  .outcome-col,
  .habit-grid > li {
    transition: none;
  }
}

@media (forced-colors: active) {
  .format-card,
  .outcome-col,
  .stat-row > li,
  .habit-grid > li,
  .panel-note,
  .cover-figure img {
    border: 1px solid ButtonText;
  }
}

/* =======================================================================
   BOOK PAGES 5–8 ADDITIONS (coming-soon pages)
   Four small additions only. Everything else on Books 5–8 reuses the
   components above, so a change there still reaches all eight book pages.
   ======================================================================= */

/* Section-head icon: one navy line glyph above the rule, matching .card__icon
   but smaller, so it reads as a label rather than a picture. */
.section-icon {
  width: 40px;
  height: 40px;
  color: var(--navy);
  margin-bottom: var(--space-3);
}

/* "Is this book for you?" rows on a book page are NOT links: the reader is
   already on the page a chooser row would point at. Same rhythm as the Series
   chooser, without the affordances of a link. */
.chooser__row--static {
  cursor: default;
  max-width: none;
  /* One column, not the Series page's concern/book pair: there is no book
     column to fill, so the quote gets the full row at a readable measure. */
  grid-template-columns: minmax(0, 1fr);
}

.chooser__row--static .chooser__concern {
  max-width: 68ch;
}

.chooser__row--static:hover {
  background: transparent;
}

.chooser__row--static .chooser__concern {
  font-weight: 600;
  color: var(--navy);
}

/* "While you wait" carries two cards on a Books 5-8 page, not three. A
   two-column row makes each card wide enough that a full-height cover towers
   over its neighbour, so the row is capped and the cover is held to the width
   it has in a three-card row. */
.book-grid--pair {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 780px;
  /* Cards keep their own height here: stretching a short checklist card to
     match a tall cover card leaves a large void above its button. */
  align-items: start;
}

.book-grid--pair .book-card__cover {
  max-width: 200px;
  margin-inline: auto;
}

/* Cover band on a book page: the current book is outlined and at full
   contrast, the other seven are dimmed but still carry a written status. */
.cover-band--focus a {
  display: block;
  border-radius: var(--radius-sm);
}

.cover-band--focus li:not(.is-current) img {
  opacity: 0.62;
  transition: opacity 160ms ease;
}

.cover-band--focus a:hover img,
.cover-band--focus a:focus-visible img {
  opacity: 1;
}

.cover-band--focus .is-current img {
  opacity: 1;
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.cover-band--focus .is-current figcaption {
  color: var(--white);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .cover-band--focus li:not(.is-current) img {
    transition: none;
  }
}

@media (forced-colors: active) {
  .cover-band--focus li:not(.is-current) img {
    opacity: 1;
  }

  .cover-band--focus .is-current img {
    outline: 3px solid Highlight;
  }
}

/* ---------- Narrow-viewport fixes (Home, Series and all book pages) ------
   Both found during the Books 5–8 QA pass at 320px. Neither is new to these
   pages, so they are fixed once here for every page in the prototype. */

/* 1. Each trust-line point is kept on one line so it never breaks mid-phrase.
   Below about 368px the longest point is wider than the viewport, so the
   nowrap has to give way or the whole page scrolls sideways. */
@media (max-width: 23rem) {
  .trust-line span {
    white-space: normal;
  }
}

/* 2. Cover-band tracks were sized by the widest caption ("1 · Available now"),
   which pushed the eight-cover band 2px past the viewport at 320px. Letting
   the track shrink to 0 lets the caption wrap instead of widening the column. */
.cover-band {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 860px) {
  .cover-band {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/* 3. Outlined buttons on a navy band inherited the band's light link colour,
   which put near-white text on the button's white fill. Only .btn--accent and
   .btn--primary had the override they need; .btn--secondary now has it too.
   The navy bands on Books 5–8 use .btn--ghost, which is built for them. */
.band-navy .btn--secondary,
.band-navy .btn--secondary:hover {
  color: var(--navy);
}

/* 4. Cover-band captions ("1 · Available now") wrapped to three lines in a
   74px column on a phone. A slightly smaller caption holds them to two. */
@media (max-width: 599px) {
  .cover-band figcaption {
    font-size: 0.9375rem;
    line-height: 1.35;
  }
}

/* =======================================================================
   APPS SECTION + APP LANDING PAGES
   Home section 8a ("Tools that stay on your own device") and the two draft
   app landing pages (senior-health-record.html, carer-workbench.html).
   Everything below is additive: no rule above this banner was touched, so
   the ten pages built earlier render exactly as they did before.
   ======================================================================= */

/* Third status label. Same neutral tokens as .badge--soon, because status is
   spelled out in words and never carried by colour: only the label differs,
   so "Coming later" reads as further out than "Coming soon". */
.badge--later {
  background: #eee9e1;
  color: #55524c;
  border: 1px solid var(--border-strong);
}

/* Badge inside a card: keep it to its own content width, above the heading. */
.card__status,
.tile-grid .badge {
  align-self: flex-start;
}

/* One-line "who this is for" role under an app card heading. */
.card__role {
  font-weight: 700;
  color: var(--navy);
}

.card .card__role {
  color: var(--navy);
}

/* ---------- Ticked / excluded lists ------------------------------------
   The glyph is CSS decoration, never content, so a screen reader hears the
   words only. Both marks are drawn with borders rather than a background
   image so they survive forced-colors mode, and the two lists differ by
   SHAPE (tick vs bar), not by colour. */
.tick-list,
.not-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.tick-list > li,
.not-list > li {
  position: relative;
  margin-top: 0;
  padding-left: 2.25rem;
}

.tick-list > li + li,
.not-list > li + li {
  margin-top: var(--space-3);
}

.tick-list > li::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.3em;
  width: 0.5rem;
  height: 0.95rem;
  border-right: 3px solid var(--orange-ink);
  border-bottom: 3px solid var(--orange-ink);
  transform: rotate(45deg);
}

.not-list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 1.15rem;
  border-top: 3px solid var(--navy);
}

.band-navy .tick-list > li::before {
  border-right-color: var(--orange);
  border-bottom-color: var(--orange);
}

/* ---------- Privacy strip (Home section 8a) ---------------------------- */
.privacy-strip {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}

/* One column on a phone, 2 x 2 from a large phone or small tablet, 4 across on
   desktop. The copy document asks for 2 x 2 at phone width, but at 375px each
   of the four promises fell to five or six very short lines, so the two-column
   step starts at 480px instead. */
@media (min-width: 30rem) {
  .privacy-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .privacy-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.privacy-strip > li {
  display: flex;
  gap: var(--space-4);
  margin-top: 0;
}

.privacy-strip svg {
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--navy);
}

.privacy-strip strong {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
  color: var(--navy);
}

.privacy-strip p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: none;
}

/* Limitation copy is body size, never small print: it carries safety meaning. */
.limit-note {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding: var(--space-5);
  background: var(--panel);
  border-left: 5px solid var(--navy);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--ink);
  max-width: 78ch;
}

.section--panel .limit-note {
  background: var(--white);
}

/* ---------- Tile grid (record sections, workbench areas) --------------- */
.tile-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.tile-grid > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  margin-top: 0;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 5px solid var(--orange);
  border-radius: var(--radius-md);
}

.tile-grid h3 {
  font-size: var(--text-lg);
}

.tile-grid p {
  margin: 0;
  color: var(--ink-muted);
  max-width: none;
}

/* ---------- Numbered step list ---------------------------------------- */
.step-list {
  display: grid;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
}

.step-list > li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-top: 0;
}

.step-list__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--ink-inverse);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.step-list h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.step-list p {
  margin: 0;
  color: var(--ink-muted);
}

@media (max-width: 26rem) {
  .step-list > li {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ---------- Flow diagram band (the weekly loop) -----------------------
   The SVG is decoration: the same five steps sit directly below it as real
   text, so the diagram is aria-hidden and simply hidden on small screens
   rather than shrunk until its labels are unreadable. */
.flow-figure {
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.flow-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 47.5rem) {
  .flow-figure {
    display: none;
  }
}

/* ---------- Structure diagrams (what the app prints / shows) ----------
   Built from real HTML text, not a picture of an interface: field LABELS
   only, no demonstration values, and never a facsimile of the app's UI. */
.diagram-figure {
  margin: 0;
}

.diagram-figure figcaption {
  margin-top: var(--space-4);
  max-width: 52ch;
}

.diagram-label {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--panel);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #55524c;
}

.paper {
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.paper + .paper {
  margin-top: var(--space-5);
}

.paper--card {
  border-top: 6px solid var(--navy);
}

.paper--page {
  border-top: 6px solid var(--orange);
}

.paper h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.paper__foot {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-strong);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.field-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.field-list > li {
  margin-top: 0;
  padding-block: var(--space-2);
  border-top: 1px dashed var(--border);
  font-size: var(--text-sm);
}

.field-list > li:first-child {
  border-top: 0;
  padding-top: 0;
}

.field-list strong {
  color: var(--navy);
}

/* Four questions the daily view answers. Questions only: no counts, because
   any number here would be invented. */
.question-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 30rem) {
  .question-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.question-grid > li {
  margin-top: 0;
  padding: var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--navy);
}

/* ---------- Image slot (no mock-ups, ever) ----------------------------
   An empty, clearly labelled slot with the asset brief in real text. Nothing
   is drawn that could be mistaken for a screenshot of the app. */
.media-slot {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--panel);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}

.section--panel .media-slot,
.section--white .media-slot {
  background: var(--bg);
}

.media-slot__label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.media-slot p + p {
  margin-top: var(--space-3);
}

.media-slot p {
  color: var(--ink-muted);
  max-width: 62ch;
}

.media-slot strong {
  color: var(--navy);
}

/* ---------- Country row ----------------------------------------------- */
.country-row {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-weight: 700;
  color: var(--navy);
  max-width: none;
}

/* ---------- Footer Apps column ---------------------------------------- */
.footer-apps {
  margin-top: var(--space-6);
}

@media (forced-colors: active) {
  .tile-grid > li,
  .paper,
  .media-slot,
  .flow-figure,
  .question-grid > li,
  .limit-note {
    border: 1px solid ButtonText;
  }
}

/* App landing hero: the structure diagram is taller than the copy beside it, so
   the copy column is centred against it rather than stretched to the top. */
@media (min-width: 900px) {
  .hero--app .hero__grid {
    align-items: center;
  }
}

/* Panel title inside a hero diagram. Styled like an h3 but not a heading: a
   real <h3> straight after the page <h1> would skip a level, and an <h2> in
   the hero would announce as a top-level section of the page. */
.paper__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy);
}

/* Stacked paragraphs inside a does/does-not or two-column panel need a gap:
   the base stylesheet zeroes paragraph margins and relies on .stack elsewhere. */
.outcome-col p + p,
.outcome-col p + ul,
.media-slot p + p {
  margin-top: var(--space-4);
}

/* ==========================================================================
   v2 additions (2026-10-03): Cloudflare site, Part 2.
   - our retained banner and footer sit around these pages unchanged
   - a navigation bar under the banner (the demo header's menu, without its logo)
   - plain content pages (about, contact, policies) in the same style
   - mailto forms
   ========================================================================== */

/* Our banner and footer carry their own inline styles. Keep the page reset
   from touching them. */
#ss-static-banner a, #ss-static-footer a { text-decoration: none; }
#ss-static-footer p { margin: 0; }

/* ---- Navigation bar under the banner ---- */
.site-nav { position: sticky; top: 0; z-index: 50; background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.site-nav .header-inner { min-height: 60px; justify-content: center; }
@media (max-width: 1259px) {
  .site-nav .header-inner { justify-content: flex-start; }
}
@media (min-width: 1100px) {
  /* Without the logo the menu fits from 1100px, so show it as a bar there. */
  .site-nav .nav-toggle { display: none; }
  .site-nav .header-inner { flex-wrap: nowrap; justify-content: center; }
  .site-nav .primary-nav { order: 0; width: auto; display: flex; flex-direction: row; align-items: center; padding: 0; border: 0; }
  .site-nav .primary-nav ul { flex-direction: row; align-items: center; }
  .site-nav .primary-nav a, .site-nav .nav-books__button { min-height: 44px; font-size: var(--text-sm); }
  .site-nav .primary-nav ul.nav-books__panel { position: absolute; box-shadow: var(--shadow-lg); border: 1px solid var(--border); padding: var(--space-3); min-width: 320px; }
}

/* ---- Plain content pages ---- */
.page-hero { background: linear-gradient(180deg, var(--white) 0%, var(--bg) 100%); border-bottom: 1px solid var(--border); padding-block: clamp(2rem, 4vw, 3.25rem); }
.page-hero h1 { font-size: var(--text-2xl); margin-top: var(--space-2); }
.page-hero .lede { margin-top: var(--space-4); max-width: var(--measure); }
.page-hero .updated { margin-top: var(--space-3); color: var(--ink-muted); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-10); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-8); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--space-2); }
.prose a { overflow-wrap: anywhere; }
.prose code { font-size: 0.95em; background: var(--panel); padding: 1px 6px; border-radius: var(--radius-sm); }
.legal-callout { background: var(--white); border: 1px solid var(--border); border-left: 6px solid var(--navy); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); }
.legal-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); }
.legal-card p + p { margin-top: var(--space-2); }
.legal-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); }
.legal-table { border-collapse: collapse; width: 100%; min-width: 560px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.legal-table th { background: var(--panel); color: var(--navy); }
.legal-small { color: var(--ink-muted); }

.author-card { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 760px) { .author-card { grid-template-columns: 220px 1fr; } }
.author-card img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 220px; max-width: 100%; }

.app-shot { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-3); }
.app-shot img { border-radius: var(--radius-md); width: 100%; height: auto; }
.app-shot figcaption { margin-top: var(--space-3); color: var(--ink-muted); }

/* ---- Forms that open the visitor's email program ---- */
.mail-form { display: grid; gap: var(--space-5); max-width: 560px; }
.mail-form label { display: block; font-weight: 700; color: var(--navy); margin-bottom: var(--space-2); }
.mail-form .hint { display: block; font-weight: 400; color: var(--ink-muted); }
.mail-form input, .mail-form select, .mail-form textarea { width: 100%; min-height: 52px; padding: var(--space-3) var(--space-4); font: inherit; font-size: max(18px, 1rem); color: var(--ink); background: var(--white); border: 2px solid var(--border-strong); border-radius: var(--radius-md); }
.mail-form textarea { min-height: 140px; }
.mail-form input:focus-visible, .mail-form select:focus-visible, .mail-form textarea:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.mail-form .check { display: flex; gap: var(--space-3); align-items: flex-start; }
.mail-form .check input { width: 28px; height: 28px; min-height: 0; flex: none; margin-top: 2px; }
.mail-form .check label { font-weight: 400; color: var(--ink); margin: 0; }
.mail-form-status { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--green-soft); color: var(--green-ink); }
.mail-form-status[hidden] { display: none; }

.plain-list { list-style: none; padding: 0; margin-block: var(--space-4); }
.plain-list li + li { margin-top: var(--space-3); }
.card h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.card > * + * { margin-top: var(--space-3); }
.hero__figure .app-shot { align-self: center; }
.prose, .page-hero { overflow-wrap: break-word; } .prose h2, .prose h3, .page-hero h1 { overflow-wrap: anywhere; }

.hero__figure .app-shot img { aspect-ratio: auto; object-fit: contain; border: 0; box-shadow: none; }
.shot-grid { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 820px) { .shot-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.format-grid + .btn-row, .check-list + .btn-row, .tile-grid + .microcopy { margin-top: var(--space-6); }
.btn-row + .microcopy { margin-top: var(--space-4); }
.cta-band h2 + p { margin-top: var(--space-3); }
.cta-band p + .btn-row { margin-top: var(--space-6); }

/* ---- Health Record pages (2026-10-06) ---------------------------------- */
/* The four Health Record pages as tabs, under a bold "Health Record" title (Ed, 2026-10-08). */
.page-tabs { background: var(--white); padding-top: var(--space-5); }
.page-tabs__title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.2; color: var(--navy); }
.page-tabs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; border-bottom: 3px solid var(--navy); }
.page-tabs__list li { margin: 0; }
.page-tabs__list a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 10px 20px; border: 2px solid var(--navy); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--panel); color: var(--navy); font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
.page-tabs__list a:hover { background: var(--orange-soft); }
.page-tabs__list a[aria-current="page"] { background: var(--navy); color: var(--white); }
@media (max-width: 700px) {
  .page-tabs__list { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-bottom: 0; padding-bottom: var(--space-4); }
  .page-tabs__list a { height: 100%; padding: 8px 10px; border-bottom: 2px solid var(--navy); border-radius: var(--radius-md); }
}
/* The main menu marks the drop-down that holds the current page. */
.nav-books__button.is-current { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 5px; }
/* Picture on the left in a reversed split (the pack's rule only covers .split__media). */
@media (min-width: 880px) { .split--reverse > .app-shot, .split--reverse > .shot-stack { order: -1; } }
.split > .app-shot, .split > .shot-stack { align-self: start; }
.shot-stack { display: grid; gap: var(--space-5); }
.app-shot--narrow { max-width: 520px; width: 100%; justify-self: center; }
.section-head + .app-shot, .app-shot + .shot-grid { margin-top: var(--space-6); }
/* The three parts of the Health Record, each with a picture and a link. */
.part-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.part-card { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); background: var(--white); border: 1px solid var(--border); border-top: 5px solid var(--orange); border-radius: var(--radius-lg); padding: var(--space-5); }
.part-card .app-shot { box-shadow: none; padding: 0; border: 0; }
.part-card .app-shot img { max-height: 340px; object-fit: cover; object-position: top; border: 1px solid var(--border); }
.part-card h3 a { color: var(--navy); }
.part-card p { margin: 0; }
.hook { background: var(--panel); border-left: 6px solid var(--orange); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.section--panel .hook { background: var(--white); }
.edition-note { margin-top: var(--space-6); max-width: none; }
.check-list--2col { display: grid; gap: var(--space-3) var(--space-8); }
.check-list--2col li + li { margin-top: 0; }
@media (min-width: 820px) { .check-list--2col { grid-template-columns: 1fr 1fr; } }

/* Standard view or dyslexia-friendly view (Ed, 2026-10-08). Each sample is set the way that
   edition of the app sets it: Arial, or OpenDyslexic (SIL Open Font License, self-hosted). */
@font-face { font-family: 'OpenDyslexic'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/opendyslexic-regular.woff2') format('woff2'); }
@font-face { font-family: 'OpenDyslexic'; font-weight: 700; font-style: normal; font-display: swap; src: url('/assets/fonts/opendyslexic-bold.woff2') format('woff2'); }
.view-samples { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.view-sample { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.view-sample h3 { margin: 0; }
.view-sample > p { margin: 0; }
.view-sample__screen { background: #ffffff; color: #1b2430; border: 1px solid var(--border-strong); border-top: 5px solid var(--navy); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-size: 21px; }
.view-sample__screen p { margin: 0; max-width: none; color: #1b2430; }
.view-sample__screen .view-sample__h { margin-bottom: var(--space-2); font-size: 23px; font-weight: 700; color: #14315B; }
.view-sample__screen--standard { font-family: Arial, Helvetica, 'Segoe UI', sans-serif; line-height: 1.6; }
.view-sample__screen--standard p { font-family: inherit; }
.view-sample__screen--dyslexic, .view-sample__screen--dyslexic p { font-family: 'OpenDyslexic', Verdana, 'Trebuchet MS', Arial, sans-serif; line-height: 1.75; letter-spacing: 0.02em; }

/* Back to top (Ed, 2026-10-08): appears once the page has been scrolled, on every page. */
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; border: 2px solid var(--white); border-radius: var(--radius-pill); background: var(--navy); color: var(--white); font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(10, 27, 49, 0.25); }
.to-top:hover { background: var(--navy-700); }
.to-top[hidden] { display: none; }
@media print { .to-top { display: none !important; } }

/* "Also in the app, ready to print", under the Health Record benefits (Ed, 2026-10-08). */
.print-ready { margin-top: var(--space-8); background: var(--panel); border-left: 6px solid var(--navy); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); }
.print-ready h3 { margin: 0 0 var(--space-3); }