/*
 * AskScripture Web — page layer
 * ---------------------------------------------------------------------------
 * Spec: docs/design/WEB-DESIGN.md (v1) §5 layout, §6 components, §8 motion.
 *
 * This file styles the site's page furniture: masthead, hero, bands, feature
 * grids, screenshot strip, pricing, email capture, article column, FAQ,
 * CTA band, footer.
 *
 * It consumes web-tokens.css and adds no foundations of its own. A literal
 * color value in this file is a bug — WEB-DESIGN.md §10.
 */

/* ===========================================================================
   Utilities
   =========================================================================== */

.stack { display: flex; flex-direction: column; }
.stack--sm { gap: var(--space-xs); }
.stack--md { gap: var(--space-lg); }
.stack--lg { gap: var(--space-xl); }

.lede {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: 1.5;
  max-width: 58ch;
  margin: 0;
}

.muted {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0;
}

.fine {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* Store badges. Both files ship exactly as the vendor publishes them, so the
   rendered size lives here and the artwork is never redrawn or re-proportioned.
   The two boxes are deliberately different heights. Apple's SVG is badge edge
   to edge, so its box height is its badge height. Google's PNG bakes in the
   clear space its brand guidelines mandate — a quarter of the badge height on
   all four sides — so the badge fills only two thirds of the box. Hence the
   `* 1.5`: it makes the two badges optically the same size and leaves Google's
   required margin intact. It is not a fudge factor; do not tune it away.
   Size by height only — `width: auto` takes each vendor's ratio from the
   intrinsic width/height attributes on the <img>. */
.store-badge {
  display: block;
  width: auto;
}

.store-badge--apple { height: var(--store-badge-h); }
.store-badge--play  { height: calc(var(--store-badge-h) * 1.5); }

/* Icons: thin stroke, rounded caps, currentColor — DESIGN.md §8. Never a
   standalone meaning-bearing element; always beside a text label. */
.icon {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The masthead is sticky, so anchor targets must clear it or a TOC jump lands
   with the heading tucked underneath. */
:target,
[id] { scroll-margin-top: 88px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-card);
  z-index: 20;
}

.skip-link:focus {
  left: var(--gutter);
  top: var(--space-xs);
}

/* ===========================================================================
   Masthead (WEB-DESIGN.md §6.1)
   Wordmark in Literata 600, sans links, hairline gilt bottom rule.
   Active link is a gilt underline — never a gilt label.
   =========================================================================== */

.masthead {
  border-bottom: var(--hairline) solid var(--gilt);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
}

.wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark span { color: var(--ink-soft); font-weight: 400; }

.masthead__nav {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.masthead__nav a {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-decoration: none;
  padding-block: var(--space-xxs);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-hover) var(--ease);
}

.masthead__nav a:hover { border-bottom-color: var(--divider); }
.masthead__nav a.is-active { border-bottom-color: var(--gilt); }

@media (max-width: 600px) {
  .masthead__inner { gap: var(--space-md); }
  .masthead__nav { gap: var(--space-md); }
  .masthead__nav a.is-secondary { display: none; }
}

/* ===========================================================================
   Hero — a rendered answer, not a picture of one (WEB-DESIGN.md §7)
   =========================================================================== */

.hero { padding-block: var(--space-4xl) var(--space-3xl); }

/* Width comes from `.container--article`, so the hero sits on exactly the same
   axis as every article band below it. */
.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.hero__q {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

.hero__summary {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: 1.5;
  max-width: 60ch;
  margin: 0;
}

/* The verse card is a block, not a paragraph — it fills the column. Capping it
   at a text measure left it narrower than everything stacked above it. */
.hero__card { max-width: none; }

.hero__pitch {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0;
  padding-top: var(--space-xs);
  border-top: var(--hairline) solid var(--divider);
}

/* ===========================================================================
   Section headers
   =========================================================================== */

/* The head fills its band's content width; only the subhead paragraph narrows,
   and `.muted` already caps itself at 62ch. A block-level cap here gave the
   band a third content width and made every section edge ragged. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* ===========================================================================
   Grids
   =========================================================================== */

.grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

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

@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ===========================================================================
   Feature block — one messaging pillar
   =========================================================================== */

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-md);
  border-top: var(--hairline) solid var(--gilt);
}

.feature__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  margin: 0;
}

.feature__body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ===========================================================================
   Source row (inside an insight card) and video row
   =========================================================================== */

.source-row,
.video-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border: var(--hairline) solid var(--divider);
  border-radius: var(--radius-card);
  background: var(--paper-raised);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: border-color var(--dur-hover) var(--ease);
}

.source-row:hover,
.video-row:hover { border-color: var(--gilt); }

.source-row__chev { color: var(--ink-soft); }

.video-card {
  background: var(--paper-raised);
  border: var(--hairline) solid var(--divider);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.video-card__channel {
  font-family: var(--font-serif);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.video-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.4;
  margin: 0;
}

.video-card__stamp {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* ===========================================================================
   Screenshot strip
   =========================================================================== */

.screens { align-items: start; }

/* Featured screen — one large shot beside its explanation.
   Stacks on narrow viewports; side by side from 900px up. */
.screen-feature {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
}

.screen--feature {
  width: 100%;
  max-width: 360px;
}

.screen-feature__body { max-width: var(--measure); }

.screen-feature__title { margin: 0; }

@media (min-width: 900px) {
  .screen-feature {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--space-xl);
    justify-items: stretch;
  }

  .screen--feature { max-width: 440px; justify-self: end; }

  /* Mirrored: explanation left, screen right. Explicit placement rather than
     `order`, so the reading order in the markup stays image-then-text. */
  .screen-feature--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
  .screen-feature--reverse .screen--feature {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }
  .screen-feature--reverse .screen-feature__body {
    grid-column: 1;
    grid-row: 1;
  }
}

.screen {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.screen img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sheet);
  border: var(--hairline) solid var(--divider);
  box-shadow: var(--shadow-card);
  background: var(--paper);
}

.screen figcaption {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ===========================================================================
   Pricing
   =========================================================================== */

.plan {
  background: var(--paper-raised);
  border: var(--hairline) solid var(--divider);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.plan--premium { border-color: var(--gilt); }

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.plan__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-xl);
  margin: 0;
}

.plan__price {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.plan ul {
  margin: 0;
  padding-left: 1.1em;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.plan li + li { margin-top: var(--space-xxs); }

/* ===========================================================================
   Email capture (WEB-DESIGN.md §6.10) — one field, sentence-case button,
   13px consent line. No modal, no exit-intent, no countdown.

   CURRENTLY UNUSED. The section was cut from the home page at launch: Hostinger
   Reach is not provisioned (no subscribe endpoint) and the "40 Hard Questions"
   lead magnet does not exist yet, so there was nothing to submit to and nothing
   to promise. Styles are kept ready for when both land — see README.
   =========================================================================== */

.signup {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 46ch;
}

.signup__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.signup label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.signup input[type="email"] {
  flex: 1 1 16ch;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--ink);
  background: var(--paper-raised);
  border: var(--hairline) solid var(--divider);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  transition: border-color var(--dur-hover) var(--ease);
}

.signup input[type="email"]:hover { border-color: var(--gilt); }

/* ===========================================================================
   Article column (WEB-DESIGN.md §9)
   =========================================================================== */

.article { position: relative; }

.article__col {
  position: relative;
  max-width: calc(var(--w-article) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Gilded page edge (§6.7) — echoes the gilt edge of a fine Bible. Decoration
   only: it carries no text, so the 2.75:1 gilt limit is not in play. */
@media (min-width: 900px) {
  .article__col::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--gilt) 12%, var(--gilt) 88%, transparent);
    opacity: 0.55;
  }
}

.article__meta {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
}

/* :where() so the list keeps the .prose sibling gap above it. */
.prose :where(ul, ol) { padding-left: 1.1em; }
.prose li + li { margin-top: var(--space-xs); }

.prose cite {
  font-style: italic;
  color: var(--ink-soft);
}

/* Pull-verse: gilt rail, Literata, redletter only when quoting Scripture. */
.pull-verse {
  border-left: var(--rail) solid var(--gilt);
  padding-left: var(--space-lg);
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: 1.45;
  color: var(--redletter);
  margin: 0;
}

.toc {
  border-top: var(--hairline) solid var(--divider);
  border-bottom: var(--hairline) solid var(--divider);
  padding-block: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.toc a {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--ink-soft);
}

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

/* "For parents" aside — cedar rail, addressed to the parent, never the child. */
.aside-parent {
  border-left: var(--rail) solid var(--cedar);
  background: var(--cedar-tint);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.aside-parent__body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0;
}

/* Licence notice and the AI-honesty line are separate statements and are set
   as separate paragraphs. `--measure` is in ch, so a 13px note wraps at ~66
   characters rather than running the full article column. */
.disclosure {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
}

.disclosure + .disclosure {
  margin-top: var(--space-sm);
}

/* Related questions */
.related {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--hairline) solid var(--divider);
}

.related li { border-bottom: var(--hairline) solid var(--divider); }

.related a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  text-decoration: none;
}

.related a[aria-disabled="true"] {
  color: var(--ink-soft);
  cursor: default;
}

.related__chev { color: var(--ink-soft); font-size: var(--fs-sm); }

/* ===========================================================================
   FAQ accordion (WEB-DESIGN.md §6.11) — open by default, chevron rotates.
   =========================================================================== */

.faq { display: flex; flex-direction: column; }

.faq__item { border-bottom: var(--hairline) solid var(--divider); }

.faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 500;
}

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

.faq__chev {
  color: var(--ink-soft);
  transition: transform var(--dur-accordion) var(--ease);
  flex: none;
}

.faq__item[open] .faq__chev { transform: rotate(180deg); }

.faq__body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  padding-bottom: var(--space-md);
  max-width: 66ch;
}

/* ===========================================================================
   CTA band + footer — ink ground, paper text (WEB-DESIGN.md §6.8, §6.12)
   =========================================================================== */

.band--ink { color: var(--on-ink); }
.band--ink h2 { color: var(--on-ink); }
.band--ink a { color: var(--on-ink); }
.band--ink .eyebrow { color: var(--on-ink-faint); }
.band--ink .btn--primary { background: var(--on-ink); color: var(--ink); }
.band--ink .btn--primary:hover { background: var(--paper-raised); }

.cta__body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  color: var(--on-ink-soft);
  max-width: 58ch;
  margin: 0;
}

/* Thin inset gilt keyline, mirroring the app's primary footer action. */
.band--cta {
  box-shadow: inset 0 1px 0 var(--gilt), inset 0 -1px 0 var(--gilt);
}

.footer {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: var(--space-3xl);
}

.footer__inner { display: flex; flex-direction: column; gap: var(--space-lg); }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}

.footer__links a { color: var(--on-ink); }

/* Fine-print links (the Lockman notice) must not fall back to the page's
   ink-on-paper link color — on the ink footer that renders invisible. */
.footer__fine a { color: inherit; }

.footer__fine {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--on-ink-faint);
  line-height: 1.6;
  max-width: 70ch;
  margin: 0;
}

/* AI honesty, the Lockman licence notice, and the LLC line are separate
   statements; running them together made the licence notice hard to find. */
.footer__fine + .footer__fine {
  margin-top: var(--space-sm);
}

.footer hr {
  border: 0;
  border-top: var(--hairline) solid var(--on-ink-divider);
  margin: 0;
}

/* ===========================================================================
   Motion (WEB-DESIGN.md §8) — fade-and-rise once on first scroll into view.
   =========================================================================== */

/* Scoped to .js so that a blocked or failed script leaves the page fully
   visible rather than blank — content is never hidden behind JavaScript. */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}

.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ===========================================================================
   Answer adaptation — the same child question, rendered for two different
   children. Parent-mode answers come back as headed bullet points rather than
   prose (ParentSection = { heading, points[] }), so these cards mirror the
   app's own shape rather than inventing a layout for the web.

   Copy inside these cards is addressed to the PARENT, never to the child
   (Apple 2.3.8 / 5.1.4(b), WEB-DESIGN pre-ship checklist).
   =========================================================================== */

.adapt {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  max-width: var(--w-article);
}

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

.adapt__card {
  background: var(--paper-raised);
  border: var(--hairline) solid var(--divider);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* The profile that produced this answer: age range, then learning style. */
.adapt__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.adapt__summary {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-prose);
  color: var(--ink);
  margin: 0;
}

.adapt__heading {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.adapt__points {
  margin: 0;
  padding-left: 1.15em;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.adapt__points li {
  font-size: var(--fs-sm);
  line-height: var(--lh-prose);
  color: var(--ink-soft);
}

/* Quoted words a parent can actually say out loud. Serif, because it is
   speech rather than interface. */
.adapt__say {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: var(--lh-prose);
  color: var(--ink);
  border-left: var(--rail) solid var(--gilt);
  padding-left: var(--space-md);
  margin: 0;
}

/* ===========================================================================
   Crisis help block (/crisis/, and the inline block on the anxiety page).

   CONTRAST HERE IS A SAFETY PROPERTY, NOT A STYLE PREFERENCE. The reader may
   be in distress, so this block is the highest-contrast, most scannable thing
   on the page: ink on paper-raised (16.17:1) with ink-filled buttons carrying
   paper labels (15.11:1). Gilt appears only as the inset keyline on those
   buttons and never as text — gilt is 2.75:1 on paper and cannot be read.

   It also carries NO reveal class, no accordion, and no JS dependency: it must
   be readable on load, without scrolling past an explanation and without
   opening anything. Do not wrap it in `.reveal` and do not turn it into a
   `<details>`.

   The rail is CEDAR rather than `--error`, matching the app's own referral
   card: red is this system's destructive/quota colour, and dressing a support
   offer as an error frames the person as a problem.
   =========================================================================== */

.help-now {
  background: var(--paper-raised);
  border: var(--hairline) solid var(--divider);
  border-left: 4px solid var(--cedar);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Sans, because this is the interface speaking, not the page. */
.help-now__title {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--ink);
  margin: 0;
}

/* Full ink, never ink-soft: this is the copy that must be read first. */
.help-now__body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  color: var(--ink);
  max-width: var(--measure);
  margin: 0;
}

.help-now__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.help-now__actions .btn {
  text-decoration: none;
}

.help-now__note {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
}

/* Short codes and numbers read as numbers. */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   2026-09-10 site-audit additions: hero trust line, crisis callout, plan
   highlight, comparison table. Tokens only — no raw hex (web-tokens.css rule).
   =========================================================================== */

.hero__trust {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

/* Callout: gilt rail, same grammar as .pull-verse, but sans prose. */
.callout {
  border-left: var(--rail) solid var(--gilt);
  padding-left: var(--space-lg);
  max-width: var(--measure);
}
.callout p { margin: 0; }
.callout p + p { margin-top: var(--space-xs); }
.callout__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-xs);
}

.plan--recommended { border-color: var(--gilt); }

/* Comparison table: scrolls sideways on narrow screens, page never does. */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.compare caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  padding-bottom: var(--space-xs);
}
.compare th,
.compare td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-sm);
  border-bottom: var(--hairline) solid var(--divider);
}
.compare thead th {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}
.compare tbody th { font-weight: 500; color: var(--ink-soft); }
.compare td { color: var(--ink); }
.compare td.is-quiet { color: var(--ink-soft); }
.compare .is-recommended { background: var(--gilt-tint); }

/* Four-link nav on a phone: tighter gap and smaller type so it fits at 400px. */
@media (max-width: 480px) {
  .masthead__nav { gap: var(--space-sm); }
  .masthead__nav a { font-size: var(--fs-xs); }
}

/* Parent line under the hero: one sentence for the beachhead reader. */
.hero__parents {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: var(--measure);
}