/* ascentbible.com — homepage
   Static, question-answering layout (docs/tier1-positioning.md §5).
   No JS required; the scroll film lives at /tour with its own
   styles.css. Paper by day, Dusk by night via prefers-color-scheme. */

:root {
  --bg: #FBF8F2;
  --ink: #2B2A26;
  --soft: #6F6A5E;
  --faint: #8A857A;
  --accent: #3E5C50;
  --gold: #8A6A2F;
  --card: #FFFFFF;
  --hairline: rgba(43, 42, 38, 0.14);
  --grad: linear-gradient(92deg, #8A6A2F, #3E5C50);

  /* grammar-view family colors (app/src/study/grammar.js FAMILIES) */
  --gv-ongoing: #3D6E9E;
  --gv-result: #7C55A5;
  --gv-command: #A8433A;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Charter, Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0C10;
    --ink: #E7E4DC;
    --soft: #A6A9B2;
    --faint: #7C808A;
    --accent: #6FA08B;
    --gold: #C8A96A;
    --card: #14161C;
    --hairline: rgba(255, 255, 255, 0.12);
    --grad: linear-gradient(92deg, #C8A96A, #6FA08B);
    --gv-ongoing: #82ABDA;
    --gv-result: #B294D9;
    --gv-command: #E08A7E;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: rgba(200, 169, 106, 0.35); }

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.nav .wrap {
  display: flex; align-items: center; gap: 1.1rem;
  height: 3.25rem; font-size: 0.9rem;
}
.nav .brand { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; text-decoration: none; margin-right: auto; }
.nav a:not(.brand) { text-decoration: none; color: var(--soft); }
.nav a:not(.brand):hover { color: var(--ink); }
/* gold pill: a light, warm gold with dark ink text reads cleanly on
   both the cream and the dark nav (mid-gold + cream was muddy).
   NB: uses `a.nav-cta` to out-specify `.nav a:not(.brand)`, which was
   forcing the label to var(--soft) gray — the real "hard to read". */
.nav a.nav-cta {
  color: #2e2716; background: #d8b75f;
  padding: 0.32rem 0.9rem; border-radius: 999px; font-weight: 650;
}
.nav a.nav-cta:hover { color: #2e2716; filter: brightness(1.05); }
@media (max-width: 40rem) { .nav .nav-links { display: none; } }

/* ---------- hero (S1) ---------- */
.hero { padding: 3.5rem 0 3rem; }
.identity {
  font-size: 0.86rem; letter-spacing: 0.04em; color: var(--soft);
  text-transform: none; margin-bottom: 1.4rem;
}
.identity strong { color: var(--ink); font-weight: 650; }
.hero h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.12;
  letter-spacing: -0.01em; max-width: 20ch;
}
.hero h1 .grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub {
  margin-top: 1.1rem; max-width: 44rem; font-size: 1.05rem; color: var(--soft);
}
.hero-head { text-align: center; }
.hero-head .identity { margin-bottom: 1.3rem; }
.hero-head .sub { margin-left: auto; margin-right: auto; }
.hero h1 { margin-left: auto; margin-right: auto; }
.hero-foot { text-align: center; margin-top: 2.75rem; }
.reassure-beat { max-width: 40rem; margin: 0 auto; color: var(--soft); font-size: 1.02rem; }
.reassure-beat strong { color: var(--ink); }
/* the three layers as descending strata: left-aligned, gold numerals,
   serif titles, hairline dividers stepping deeper (peel-back depth). */
.strata { max-width: 33rem; margin: 1.9rem auto 0; text-align: left; }
.strata-kicker {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
}
/* the fluency statement: three stacked lines, the value prop as a
   small serif poem bridging the reveal and the layers. */
/* the value proposition, decorated as a featured statement: a soft warm
   panel, a small layers glyph (echoing the three layers below), and the
   two value words in gold. */
.value-prop {
  max-width: 40rem; margin: 1.7rem auto 0; padding: 1.9rem 1.8rem 1.7rem;
  border-radius: 1.1rem; text-align: center;
  background: color-mix(in srgb, var(--gold) 7%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--hairline));
}
.vp-glyph { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 0.95rem; }
.vp-glyph i { display: block; width: 2rem; height: 2px; border-radius: 1px; background: var(--gold); }
.vp-glyph i:nth-child(2) { opacity: 0.6; }
.vp-glyph i:nth-child(3) { opacity: 0.32; }
.fluency {
  font-family: var(--serif); font-size: clamp(1.28rem, 3vw, 1.55rem);
  line-height: 1.42; color: var(--ink); max-width: 36rem;
  margin: 0 auto; text-align: center;
}
.fluency span { display: block; }
.fluency em { font-style: normal; color: var(--gold); }
.fluency-sub {
  margin: 1rem auto 0; max-width: 32rem; color: var(--soft);
  font-size: 0.93rem; text-align: center;
}
.strata-list { list-style: none; margin: 1.3rem 0 0; padding: 0; }
.stratum {
  display: flex; gap: 0.85rem; align-items: baseline;
  padding: 0.95rem 0; border-top: 1px solid var(--hairline);
}
.stratum-num {
  flex: none; font-family: var(--serif); font-size: 1.6rem; line-height: 1;
  color: var(--gold); min-width: 1.05em; font-weight: 600;
}
.stratum-title { font-family: var(--serif); font-size: 1.12rem; margin: 0 0 0.15rem; color: var(--ink); }
.stratum-desc { font-size: 0.93rem; color: var(--soft); margin: 0; max-width: 26rem; }
.stratum-tag {
  margin: 0.45rem 0 0; font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
}
.strata-close {
  font-family: var(--serif); font-size: 1.06rem; color: var(--ink);
  margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--hairline);
  text-align: center;
}
.hero-foot .cta-row { flex-direction: column; justify-content: center; }
.pillars { font-size: 0.95rem; color: var(--soft); max-width: 34rem; }
.pillars strong { color: var(--ink); }
.layers {
  margin: 0.9rem 0 0 1.2rem; display: grid; gap: 0.55rem;
  font-size: 0.95rem; color: var(--soft); max-width: 32rem;
}
.layers li::marker { color: var(--gold); font-weight: 700; }
.layers strong { color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-top: 1.5rem; }
.cta {
  display: inline-block; text-decoration: none; font-weight: 650;
  background: #d8b75f; color: #2e2716;
  padding: 0.8rem 1.5rem; border-radius: 999px; font-size: 1rem;
}
.cta:hover { color: #2e2716; filter: brightness(1.05); }
.cta-sub { display: block; font-size: 0.8rem; font-weight: 400; opacity: 0.85; }
.cta-secondary { text-decoration: none; color: var(--soft); font-size: 0.95rem; border-bottom: 1px solid var(--hairline); padding-bottom: 1px; }
.cta-secondary:hover { color: var(--ink); }

/* ---------- specimen cards ---------- */
.specimen-card {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 1.1rem; padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
}
.specimen-card .ref {
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 0.9rem;
}
.specimen-card .ref .pill {
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 0.05rem 0.5rem; margin-left: 0.5rem; letter-spacing: 0.06em;
}
.sp-verse { font-family: var(--serif); font-size: 1.28rem; line-height: 2.05; }
.sp-verse sup { font-family: var(--sans); font-size: 0.62rem; color: var(--faint); margin-right: 0.15rem; }

/* a marked word: the mark is drawn UNDER the word as a small timeline,
   as in the app. The line is the action's duration; an arrowhead at
   its end points the command forward; a dot at its start is the
   completed moment whose effect the line carries on. Glyphs are
   absolutely positioned so they never change text metrics (the lens
   layers must align exactly). Colors match grammar.js families. */
.gm { position: relative; white-space: nowrap; }
.gm::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.24em;
  height: 2px; border-radius: 1px;
}
.gm .glyph {
  position: absolute; font-family: var(--sans); font-weight: 700;
  font-size: 0.5em; line-height: 1; bottom: -0.52em;
}
.gm-ongoing::after { background: var(--gv-ongoing); right: 0.55em; }
.gm-ongoing .glyph { color: var(--gv-ongoing); right: 0; }
.gm-result::after { background: var(--gv-result); left: 0.55em; }
.gm-result .glyph { color: var(--gv-result); left: 0; }
.gm-glow { background: radial-gradient(ellipse at center, color-mix(in srgb, currentColor 0%, transparent), transparent), color-mix(in srgb, var(--gv-result) 13%, transparent); border-radius: 0.3rem; padding: 0 0.2rem 1px; }
.gm-you { font-weight: 700; }
/* command: a solid line with a red bang at its end (present/aorist
   imperative — the imperative mood overrides the ongoing arrow, per
   morphDecor.js). */
.gm-command::after { background: var(--gv-command); right: 0.5em; }
.gm-command .glyph { color: var(--gv-command); right: 0; bottom: -0.5em; font-weight: 800; font-size: 0.62em; }

/* ---------- hero reveal: the John 15 slide, scroll-scrubbed ----------
   A tall track (.reveal) with a sticky phone (.reveal-stage). Scroll
   position drives --reveal 0->1 (set by JS on #lens); the marked image
   is clipped to reveal from the top down. No JS: the track collapses to
   auto height, the phone shows once, and the marked layer defaults to
   fully shown (var fallback = 1). */
.reveal { position: relative; margin-top: 2.5rem; }
html.js .reveal { height: 170vh; }
.reveal-stage {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
html.js .reveal-stage {
  position: sticky; top: 0; height: 100vh; justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { height: auto; }
  html.js .reveal-stage { position: static; height: auto; padding: 1rem 0; }
}

.phone {
  width: min(322px, 84vw); aspect-ratio: 9 / 16;
  background: #0c0d11; border-radius: 2.3rem; padding: 0.5rem;
  box-shadow: 0 32px 72px rgba(0, 0, 0, 0.30), 0 4px 14px rgba(0, 0, 0, 0.18);
}
.phone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 1.9rem; overflow: hidden; background: #FBF8F2;
}
.lens { position: absolute; inset: 0; }
html.js .lens { --reveal: 0; } /* start plain; scroll scrubs the marks in */
.lens img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.lens-marked { clip-path: inset(0 0 calc((1 - var(--reveal, 1)) * 100%) 0); }
html.js .lens::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(var(--reveal, 0) * 100%); height: 26px;
  transform: translateY(-60%); pointer-events: none; opacity: 0.75;
  background: linear-gradient(to bottom, transparent,
    color-mix(in srgb, var(--gold) 55%, transparent), transparent);
}
.reveal-cue {
  font-size: 0.9rem; color: var(--faint); text-align: center;
  letter-spacing: 0.02em; transition: opacity 0.2s;
}
.reveal-cue span { color: var(--gold); font-weight: 600; }
html:not(.js) .reveal-cue { display: none; }

.sp-captions { margin-top: 1.1rem; display: grid; gap: 0.45rem; }
.sp-cap { font-size: 0.9rem; color: var(--soft); display: flex; gap: 0.55rem; align-items: baseline; }
.sp-cap .key {
  flex: none; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--hairline);
}
.key-ongoing { color: var(--gv-ongoing); }
.key-result { color: var(--gv-result); }
.key-command { color: var(--gv-command); }
.key-you { color: var(--ink); }
.sp-cap strong { color: var(--ink); }

/* ---------- quiet strip (litany under the fold) ---------- */
.quiet-strip {
  border-top: 1px solid var(--hairline);
  padding: 1.6rem 1.25rem; text-align: center;
}
.quiet-strip .litany {
  max-width: none; margin: 0 auto;
  font-size: clamp(1rem, 2.6vw, 1.3rem);
}

/* ---------- generic section chrome ---------- */
section { padding: 3.5rem 0; border-top: 1px solid var(--hairline); }
.kicker {
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.7rem;
}
h2 { font-family: var(--serif); font-size: clamp(1.5rem, 3.5vw, 2.1rem); line-height: 1.2; max-width: 26ch; }
.lede { margin-top: 0.8rem; color: var(--soft); max-width: 40rem; }

/* ---------- S2 beats ---------- */
.beats { display: grid; gap: 1.75rem; margin-top: 2rem; }
@media (min-width: 52rem) { .beats { grid-template-columns: 1fr 1fr; align-items: start; } }
.reassure {
  margin-top: 2rem; font-size: 1rem; color: var(--soft); max-width: 42rem;
}
.reassure strong { color: var(--ink); }
.guardrail {
  margin-top: 1.4rem; padding: 1rem 1.2rem; border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--card) 60%, transparent);
  font-size: 0.95rem; color: var(--soft); max-width: 42rem; border-radius: 0 0.6rem 0.6rem 0;
}
.guardrail strong { color: var(--ink); }

/* the lead teaching specimen (Matthew 7:7), full width above the beats */
.lead-specimen { max-width: 40rem; margin: 2rem auto 0; }

/* layer 3: the interlinear, image beside copy */
.layer3 { display: grid; gap: 1.5rem; margin-top: 2.5rem; align-items: center; }
@media (min-width: 52rem) { .layer3 { grid-template-columns: 320px 1fr; gap: 2.75rem; } }
.layer3-shot img {
  display: block; margin: 0 auto; width: 100%; max-width: 300px;
  border: 1px solid var(--hairline); border-radius: 1rem;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.09);
}
.layer3-copy .kicker { margin-bottom: 0.4rem; }
.layer3-copy h3 { font-family: var(--serif); font-size: clamp(1.25rem, 3vw, 1.5rem); line-height: 1.2; }
.layer3-copy p { margin-top: 0.7rem; color: var(--soft); max-width: 32rem; }
.layer3-copy strong { color: var(--ink); }

/* ---------- word specimens (S2): three John 15 words, marks drawn
   on as each scrolls into view (JS adds .drawn). No JS / reduced-motion:
   marks simply shown. Ported from the tour's spec mechanic. ---------- */
.specimens { margin-top: 2.25rem; display: grid; gap: 2.5rem; }
@media (min-width: 52rem) {
  .specimens { grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: start; }
}
.spec { margin: 0; }
.spec-ref {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 0.55rem;
}
.spec-word {
  position: relative; display: inline-block; font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1.12; color: var(--ink);
  padding: 0 0.7em 0.4em 0.08em;
}
.spec-word.is-plural .sw { font-weight: 700; }
.spec-word .mk { position: absolute; left: 0.05em; right: 0.05em; bottom: 0.02em; height: 0.5em; }
.spec-word .mk-line {
  position: absolute; bottom: 0.16em; height: 4px; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.7s ease;
}
.spec-word .mk-glyph {
  position: absolute; bottom: 0.02em; font-family: var(--sans);
  font-style: normal; /* <i> would italicize the bang, tilting it */
  font-size: 0.4em; font-weight: 800; line-height: 1; opacity: 0;
  transition: opacity 0.3s ease 0.45s;
}
.spec.drawn .mk-line { transform: scaleX(1); }
.spec.drawn .mk-glyph { opacity: 1; }
/* per family: color + which end carries the glyph */
.spec-command .mk-line { background: var(--gv-command); left: 0; right: 0.5em; }
.spec-command .mk-bang { color: var(--gv-command); right: 0; font-size: 0.5em; bottom: -0.04em; }
.spec-perfect .mk-line { background: var(--gv-result); left: 0.55em; right: 0; }
.spec-perfect .mk-dot { color: var(--gv-result); left: 0; font-size: 0.32em; bottom: 0.05em; transition-delay: 0s; }
.spec-ongoing .mk-line { background: var(--gv-ongoing); left: 0; right: 0.4em; }
.spec-ongoing .mk-arrow { color: var(--gv-ongoing); right: 0; font-size: 0.44em; bottom: 0.08em; }
/* no-JS fallback: show the marks statically */
html:not(.js) .mk-line { transform: scaleX(1); }
html:not(.js) .mk-glyph { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .spec-word .mk-line, .spec-word .mk-glyph { transition: none; }
}
/* a small snippet of the verse around the specimen word, for context */
.spec-context {
  font-family: var(--serif); font-size: 0.92rem; line-height: 1.5;
  color: var(--faint); margin: 0.15rem 0 0.7rem; max-width: 22rem;
}
.spec-context b { color: var(--ink); font-weight: 700; }
.spec-caps { margin-top: 0.5rem; display: grid; gap: 0.5rem; max-width: 22rem; }
/* the uniting line under Remain: caption-consistent, not a serif italic */
.spec-land { color: var(--soft); font-size: 0.9rem; margin-top: 0.35rem; }
.spec-land strong { color: var(--ink); }

/* ---------- S3 the door hero: one calm reading + a glyph step-strip ---------- */
.door-hero {
  margin-top: 2rem;
  border: 1px solid var(--hairline); border-radius: 1rem;
  background: var(--card);
  padding: 1.5rem; display: grid; gap: 1.5rem; align-items: center;
}
@media (min-width: 44rem) {
  .door-hero { grid-template-columns: minmax(0, 14rem) 1fr; gap: 2.25rem; padding: 1.75rem 2rem; }
}
.door-photo {
  border: 1px solid var(--hairline); border-radius: 0.7rem;
  overflow: hidden; background: var(--bg); aspect-ratio: 3 / 4;
  max-width: 18rem; width: 100%; margin: 0 auto;
}
.door-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.door-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.35rem;
}
.door-steps h3 {
  font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; color: var(--ink);
  margin-bottom: 1.1rem;
}
.door-arc { list-style: none; display: grid; gap: 0.9rem; }
.door-step { display: flex; gap: 0.85rem; align-items: flex-start; }
.door-chip {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); color: var(--ink);
}
.door-chip--open {
  color: var(--gold); border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, var(--card));
}
.door-chip--heart {
  color: var(--gold); border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, var(--card));
}
.door-step-text { font-size: 0.9rem; color: var(--soft); line-height: 1.5; }
.door-step-text strong { color: var(--ink); display: block; margin-bottom: 0.1rem; }
.door-note {
  margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--hairline);
  font-size: 0.86rem; color: var(--faint); line-height: 1.55;
}

/* ---------- S3 frames ---------- */
.frames {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.25rem; margin-top: 1.5rem;
}
.frame {
  flex: 1 1 13rem; max-width: 19rem;
  border: 1px solid var(--hairline); border-radius: 0.9rem;
  overflow: hidden; background: var(--card); display: flex; flex-direction: column;
}
/* a frame that is a doorway to its own page (the Scripture writing
   spoke): the whole tile is the link, with a gold trailing cue */
.frame-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.frame-more { display: block; margin-top: auto; padding-top: 0.45rem; color: var(--gold); font-weight: 600; }
.frame-link:hover .frame-more { text-decoration: underline; }
.frame .shot-wrap { aspect-ratio: 3 / 4; overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Margin tile only: raise the % to bring the screenshot up (show a lower slice). */
.frame--margin img { object-position: 50% 6%; }
.frame figcaption {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 0.85rem 0.9rem 1rem; font-size: 0.85rem; color: var(--soft);
}
.frame figcaption strong {
  display: block; margin-bottom: 0.3rem;
  font-family: var(--serif); font-size: 1.08rem; line-height: 1.2;
  font-weight: 600; color: var(--gold);
}

/* ---------- S4 trust ---------- */
.litany { font-family: var(--serif); font-size: clamp(1.15rem, 3vw, 1.6rem); line-height: 1.5; max-width: 34ch; }
.litany .free { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.trust-cols { display: grid; gap: 1.5rem; margin-top: 1.8rem; }
@media (min-width: 52rem) { .trust-cols { grid-template-columns: 1fr 1fr; } }
.trust-cols h3 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.trust-cols p { font-size: 0.95rem; color: var(--soft); }

/* ---------- S5 FAQ ---------- */
.faq { max-width: 46rem; margin-top: 1.6rem; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer; list-style: none; padding: 0.95rem 0;
  font-weight: 600; font-size: 1rem; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--faint); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq .a { padding: 0 0 1.1rem; font-size: 0.95rem; color: var(--soft); max-width: 40rem; }
.faq .a p + p { margin-top: 0.6rem; }
.faq .a strong { color: var(--ink); }
.faq .a ol { margin: 0.5rem 0 0 1.2rem; }

/* ---------- close + footer ---------- */
.close { text-align: center; padding: 4.5rem 0 3rem; }
.close h2 { margin: 0 auto; }
.close .cta { margin-top: 1.5rem; }
.close .cta-secondary { display: inline-block; margin-top: 1.1rem; }
footer {
  border-top: 1px solid var(--hairline); padding: 2rem 0 2.5rem;
  /* --soft, not --faint: the footer line and the colophon are reading
     text, and --faint fails WCAG AA on both themes (3.46:1 on Paper).
     website-page-style.md §5 reserves --faint for decoration. */
  font-size: 0.82rem; color: var(--soft);
}
footer .links { margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 1.1rem; }
footer a { color: var(--soft); text-decoration: none; border-bottom: 1px solid var(--hairline); }
footer a:hover { color: var(--ink); }
footer .colophon { margin-top: 0.9rem; max-width: 46rem; line-height: 1.55; }