/* =====================================================================
   PrayerList Pro — site styles
   "A day of prayer": the page moves from dawn light at the top to an
   evening sky at the final invitation, echoing the app's own
   time-of-day ambience (dawn gold, dusk rose, evening indigo).
   Tokens first; see docs/DESIGN_SYSTEM.md for the rules behind them.
   ===================================================================== */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --paper: #fbf8f2;          /* page */
  --paper-raised: #ffffff;   /* cards */
  --paper-sunk: #f3ede2;     /* quiet bands */
  --dawn: #fbf1df;           /* hero wash */
  --dusk: #f7e9e6;           /* late-day wash */
  --night: #14132a;          /* evening sections */
  --night-raised: #1d1b38;

  /* Text (all ≥ 4.5:1 on --paper, --paper-sunk and white) */
  --ink: #1c1a2e;            /* headings 16.0:1 */
  --text: #3a3550;           /* body 11.0:1 */
  --muted: #5f5874;          /* secondary 6.3:1 */
  --accent: #4a50e0;         /* links, primary button (white on it 6.0:1) */
  --accent-strong: #3a3fc4;  /* hover 7.4:1 */
  --gold: #8a5f12;           /* small gold text 5.3:1 */
  --rose: #a1474a;           /* small rose text 5.6:1 */
  /* Text inside a screenshot's shadow or the dawn glow (measured from pixels): >= 4.5:1 there */
  --muted-deep: #524b66;
  --gold-deep: #7a540f;
  --field-line: #807a90;     /* form field outline, >= 3:1 on white and sunk (WCAG 1.4.11) */

  /* Decorative only (never for text) */
  --brand: #5a61f4;          /* app icon indigo */
  --gold-soft: #e6c47a;
  --rose-soft: #e9b4ad;
  --line: rgba(28, 26, 46, 0.12);
  --line-strong: rgba(28, 26, 46, 0.24);
  --shadow-soft: 0 1px 2px rgba(28, 26, 46, 0.06), 0 8px 24px rgba(28, 26, 46, 0.08);
  --shadow-shot: 0 2px 4px rgba(20, 19, 42, 0.12), 0 24px 48px -12px rgba(20, 19, 42, 0.35);

  /* Evening palette (text on --night) */
  --night-text: #ece9f7;     /* 15.2:1 */
  --night-muted: #b9b4d3;    /* 9.1:1 */
  --night-accent: #a9adff;   /* 8.7:1 */
  --night-gold: #e8c77a;     /* 11.1:1 */

  /* Type */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --step-3: clamp(1.875rem, 1.5rem + 1.7vw, 3rem);
  --step-4: clamp(2.375rem, 1.75rem + 3vw, 4.25rem);
  --measure: 38rem;

  /* Space & shape */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --radius: 1.25rem;
  --radius-sm: 0.75rem;
  --max: 74rem;
  --tap: 2.75rem;            /* 44px minimum target */
  --focus: 0 0 0 3px var(--paper), 0 0 0 6px var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121120;
    --paper-raised: #1f1e35;
    --paper-sunk: #1a1930;   /* distinct from --paper, so the day's bands still read */
    --dawn: #1e1a2e;
    --dusk: #221a2c;
    --night: #0d0c1c;
    --night-raised: #18172e;
    --ink: #f3f1fa;
    --text: #d8d4e8;
    --muted: #aaa4c4;
    --accent: #a9adff;
    --accent-strong: #c7caff;
    --gold: #e8c77a;
    --rose: #f0a6a0;
    --muted-deep: var(--muted);
    --gold-deep: var(--gold);
    --field-line: #7d7896;
    --line: rgba(243, 241, 250, 0.12);
    --line-strong: rgba(243, 241, 250, 0.24);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-shot: 0 2px 4px rgba(0, 0, 0, 0.5), 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  }
}

/* ---------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
  --stick: 6rem;             /* top offset for sticky headings below the header */
}
/* Pages with the sticky "On this page" bar: targets land below header + bar */
html:has(.subnav) {
  scroll-padding-top: calc(5rem + var(--subnav-h, 3rem)); /* site.js sets --subnav-h to the bar's height */
  --stick: calc(5.5rem + var(--subnav-h, 3rem));
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
  text-wrap: balance;
  font-optical-sizing: auto;
}
h1 { font-size: var(--step-4); font-weight: 450; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.25; font-weight: 600; letter-spacing: -0.005em; }
p, ul, ol, dl, blockquote, figure { margin: 0 0 1rem; }
p { text-wrap: pretty; }
em { font-style: italic; }
a {
  color: var(--accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent-strong); }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0.25rem;
}
main:focus { outline: none; }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
abbr[title] { text-decoration: underline dotted; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  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: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--paper); }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2 * var(--gutter), 46rem); }

.icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* ---------------------------------------------------------------------
   3. Header, navigation, language
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.site-header__inner {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--tap);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}
.brand img { border-radius: 0.5rem; }
.brand:hover { color: var(--ink); }

.site-nav { display: flex; align-items: center; gap: 0.25rem 1.25rem; flex-wrap: wrap; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem 1.25rem; flex-wrap: wrap; }
.site-nav a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--text);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
}
.site-nav a:not(.button):hover { color: var(--accent); }
@media (min-width: 58.0625rem) and (max-width: 66rem) {
  .site-nav, .site-nav ul { column-gap: 0.85rem; }
}
.site-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}

/* Small screens: JS collapses the nav behind the toggle. Without JS it stays open. */
@media (max-width: 58rem) {
  .site-header__inner { flex-wrap: wrap; }
  .js .nav-toggle { display: inline-flex; }
  .site-nav { flex-basis: 100%; padding: 0 0 1rem; }
  .site-nav ul { flex-direction: column; width: 100%; gap: 0; }
  .site-nav ul a:not(.button) { width: 100%; font-size: var(--step-0); border-top: 1px solid var(--line); }
  .js .site-nav:not(.is-open) { display: none; }
  .site-nav .button { margin-top: 0.5rem; }
  /* The open menu scrolls inside the header, so every item stays reachable on
     short screens and at 400% zoom (WCAG 1.4.10, 2.4.11); padding keeps focus rings unclipped. */
  .js .site-nav.is-open {
    max-height: calc(100vh - 4.5rem);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.375rem 0.375rem 1rem;
    margin-inline: -0.375rem;
    flex-basis: calc(100% + 0.75rem);
  }
}
@media (min-width: 58.0625rem) {
  .site-nav ul a:not(.button) { min-width: var(--tap); justify-content: center; } /* 44px wide even for "Vrae" */
}
/* Windows under 30rem tall (e.g. 1280×1024 at 400%): the header scrolls away with the page */
@media (max-height: 30rem) {
  .site-header { position: relative; }
  html { scroll-padding-top: 1rem; --stick: 1rem; }
  html:has(.subnav) { scroll-padding-top: calc(1rem + var(--subnav-h, 3rem)); --stick: calc(1rem + var(--subnav-h, 3rem)); }
  .subnav { top: 0; }
  .js .site-nav.is-open { max-height: none; overflow-y: visible; }
}

.lang { position: relative; }
.lang summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--tap);
  padding: 0 0.25rem;
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  border-radius: 0.5rem;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary .icon { width: 1.25rem; height: 1.25rem; }
.lang summary::after {
  content: "";
  width: 0.45em; height: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  margin-left: 0.15rem;
}
.lang[open] summary::after { transform: translateY(0.1em) rotate(225deg); }
.lang__list {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  min-width: 14rem;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  z-index: 60;
}
.lang__list a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  color: var(--text);
  text-decoration: none;
}
.lang__list a:hover { background: var(--paper-sunk); color: var(--ink); }
.lang__list a[aria-current="page"] { font-weight: 700; color: var(--ink); }
.lang__list a[aria-current="page"]::after { content: "✓"; margin-left: auto; color: var(--accent); }
@media (max-width: 58rem) {
  .lang { width: 100%; }
  .lang summary { width: 100%; font-size: var(--step-0); border-top: 1px solid var(--line); border-radius: 0; }
  .lang__list { position: static; box-shadow: none; border: 0; padding: 0 0 0 1.75rem; min-width: 0; background: transparent; }
}

/* Shown by site.js after first paint, so it floats over the page instead of
   pushing it down (no layout shift). While it is open, the page keeps room
   at the bottom and focused elements scroll clear of it (WCAG 2.4.11). */
.lang-suggest {
  position: fixed;
  z-index: 45;
  left: var(--gutter);
  right: var(--gutter);
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  margin-inline: auto;
  max-width: 34rem;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(20, 19, 42, 0.08), 0 16px 40px rgba(20, 19, 42, 0.18);
  font-size: var(--step--1);
}
.lang-suggest__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.6rem 0.6rem 0.6rem 1.25rem;
}
.lang-suggest__inner p { margin: 0; flex: 1 1 13rem; }
.lang-suggest__actions { display: flex; align-items: center; gap: 0.25rem; }
.lang-suggest__dismiss {
  min-height: var(--tap);
  padding: 0 0.75rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.lang-suggest__dismiss:hover { color: var(--ink); }
html:has(.lang-suggest:not([hidden])) { scroll-padding-bottom: 9rem; }
body:has(> .lang-suggest:not([hidden])) .site-footer { padding-bottom: 10rem; } /* the end of the page can scroll clear of it */
@media (prefers-color-scheme: dark) {
  .lang-suggest { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.55); }
}

.breadcrumbs { width: min(100% - 2 * var(--gutter), var(--max)); margin: 1.25rem auto 0; font-size: var(--step--1); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; color: var(--muted); }
.breadcrumbs li + li::before { content: "›"; margin: 0 0.4rem 0 0.15rem; }
.breadcrumbs a { color: var(--muted); }
.page-faq .breadcrumbs, .page-privacy .breadcrumbs { width: min(100% - 2 * var(--gutter), 46rem); }

/* ---------------------------------------------------------------------
   4. Buttons & badges
   --------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }
.button--primary { background: #4a50e0; color: #fff; }
.button--primary:hover { background: #3a3fc4; color: #fff; }
.button--quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button--quiet:hover { border-color: var(--ink); color: var(--ink); }
.button--small { padding: 0.4rem 1rem; font-size: var(--step--1); }
.button .icon { width: 1.15rem; height: 1.15rem; }
.store-badge { display: inline-flex; min-height: var(--tap); align-items: center; border-radius: 0.6rem; }
.store-badge img { height: 3.25rem; width: auto; }
.store-badge--sm img { height: 2.75rem; }
.store-badge:focus-visible { outline-offset: 4px; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.cta-note { font-size: var(--step--1); color: var(--muted); margin: 0; text-wrap: balance; }

/* ---------------------------------------------------------------------
   5. Typographic helpers
   --------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--gold);
}
.eyebrow .icon { width: 1.15rem; height: 1.15rem; }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--text); max-width: var(--measure); }
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--step-2); margin-top: 2.5rem; }
.prose h3 { margin-top: 2rem; }
.prose li { margin-bottom: 0.4rem; }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }
.serif { font-family: var(--font-display); }

/* ---------------------------------------------------------------------
   6. Sections and the day's light
   --------------------------------------------------------------------- */
.section { padding-block: var(--section-y); position: relative; }
.section--sunk { background: var(--paper-sunk); }
.section--dawn { background: linear-gradient(180deg, var(--dawn) 0%, var(--paper) 100%); }
.section--dusk { background: linear-gradient(180deg, var(--paper) 0%, var(--dusk) 100%); }
.section--evening {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(90, 97, 244, 0.28), transparent 60%),
    var(--night);
  color: var(--night-text);
}
.section--evening h2, .section--evening h3 { color: #fff; }
.section--evening .eyebrow { color: var(--night-gold); }
.section--evening a:not(.button) { color: var(--night-accent); }
.section--evening .muted, .section--evening .cta-note { color: var(--night-muted); }
.section--evening :focus-visible { outline-color: var(--night-accent); }
.section--evening .button--quiet { color: #fff; border-color: rgba(255, 255, 255, 0.35); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   7. Hero
   --------------------------------------------------------------------- */
.hero {
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3rem, 2rem + 4vw, 5rem);
  background:
    radial-gradient(48rem 28rem at 78% 8%, rgba(230, 196, 122, 0.32), transparent 62%),
    radial-gradient(36rem 22rem at 8% 0%, rgba(90, 97, 244, 0.10), transparent 60%),
    linear-gradient(180deg, var(--dawn), var(--paper));
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .hero {
    background:
      radial-gradient(48rem 28rem at 78% 8%, rgba(230, 196, 122, 0.12), transparent 62%),
      radial-gradient(36rem 22rem at 8% 0%, rgba(90, 97, 244, 0.18), transparent 60%),
      var(--paper);
  }
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  grid-template-areas: "text art" "meta art";
  gap: 0 clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.hero__text { grid-area: text; align-self: end; }
.hero__meta { grid-area: meta; align-self: start; margin-top: 1.75rem; }
.hero h1 { margin-bottom: 1.25rem; }
.hero .eyebrow { color: var(--gold-deep); }
/* Spanish, Portuguese and French headlines run long: a size that keeps them to three lines */
:lang(es) .hero h1, :lang(pt) .hero h1, :lang(fr) .hero h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.6rem); }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lede { margin-bottom: 0; }
.hero__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.hero__facts li { display: inline-flex; align-items: flex-start; gap: 0.4rem; }
.hero__facts .icon { width: 1.1rem; height: 1.1rem; margin-top: 0.2em; color: var(--gold); }
.hero__definition { margin: 1.25rem 0 0; max-width: 34rem; font-size: var(--step--1); color: var(--muted); text-wrap: balance; }
.hero__art { grid-area: art; position: relative; display: grid; justify-items: center; }
.hero__art .shot--phone { width: min(19rem, 72vw); }
@media (max-width: 58rem) {
  .hero__grid { grid-template-columns: 1fr; grid-template-areas: "text" "art" "meta"; row-gap: 2.5rem; }
  .hero__meta { margin-top: 0; }
}
@media (max-width: 40rem) {
  .hero__art .shot--phone { width: min(15rem, 64vw); } /* starts inside the first screen on phones */
}

/* ---------------------------------------------------------------------
   8. Screenshots — real captures, rounded like a screen; never a drawn device
   --------------------------------------------------------------------- */
.shot { display: block; }
.shot img {
  width: 100%;
  border-radius: var(--shot-radius, var(--radius));
  box-shadow: var(--shadow-shot);
  outline: 1px solid var(--line);
  outline-offset: -1px;
  background: #000;
}
.shot--phone { --shot-radius: clamp(1.5rem, 9%, 2.6rem); max-width: 19rem; }
.shot--tablet { --shot-radius: clamp(0.9rem, 3%, 1.6rem); }
.shot--wide { --shot-radius: clamp(0.9rem, 3%, 1.6rem); }
.shot--plain img { box-shadow: var(--shadow-soft); }
.figure { margin: 0; }
.figure figcaption {
  margin-top: 0.9rem;
  font-size: var(--step--1);
  color: var(--muted);
  max-width: 34rem;
  text-wrap: balance;
  color: var(--muted-deep);
}
.figure--center { display: grid; justify-items: center; text-align: center; }
.figure--center figcaption { margin-inline: auto; }
/* Wide screenshots that support a section, rather than lead it */
.figure--medium { max-width: 52rem; margin-inline: auto; }
.section--evening .figure figcaption { color: var(--night-muted); }
/* Screenshots hold their space before they load (no 0×0 picture that grows
   by ~900px under a reader or a just-focused link). --slot is the width the
   img's own sizes attribute names at this window width, so keep these in
   step with the sizes passed in pages/*.php. */
.figure:has(> .shot > img[sizes="(min-width: 58rem) 19rem, 72vw"]) { --slot: 72vw; }
.figure:has(> .shot > img[sizes="(min-width: 58rem) 17rem, 70vw"]) { --slot: 70vw; }
.figure:has(> .shot > img[sizes="(min-width: 58rem) 26rem, 80vw"]) { --slot: 80vw; }
.figure:has(> .shot > img[sizes="(min-width: 58rem) 30rem, 92vw"]),
.figure:has(> .shot > img[sizes="(min-width: 58rem) 34rem, 92vw"]),
.figure:has(> .shot > img[sizes="(min-width: 74rem) 74rem, 92vw"]),
.figure:has(> .shot > img[sizes="(min-width: 58rem) 52rem, 92vw"]) { --slot: 92vw; }
@media (min-width: 58rem) {
  .figure:has(> .shot > img[sizes="(min-width: 58rem) 19rem, 72vw"]) { --slot: 19rem; }
  .figure:has(> .shot > img[sizes="(min-width: 58rem) 17rem, 70vw"]) { --slot: 17rem; }
  .figure:has(> .shot > img[sizes="(min-width: 58rem) 26rem, 80vw"]) { --slot: 26rem; }
  .figure:has(> .shot > img[sizes="(min-width: 58rem) 30rem, 92vw"]) { --slot: 30rem; }
  .figure:has(> .shot > img[sizes="(min-width: 58rem) 34rem, 92vw"]) { --slot: 34rem; }
  .figure:has(> .shot > img[sizes="(min-width: 58rem) 52rem, 92vw"]) { --slot: 52rem; }
}
@media (min-width: 74rem) {
  .figure:has(> .shot > img[sizes="(min-width: 74rem) 74rem, 92vw"]) { --slot: 74rem; }
}
.figure > .shot { width: min(100%, var(--slot)); }
/* In the media column the figure would shrink to its (still empty) picture,
   so give it the column (centred figures) or the slot (the others). */
.split__media > .figure--center:has(> .shot) { width: 100%; }
.split__media > .figure:not(.figure--center):has(> .shot) { width: min(100%, var(--slot)); }
.shots-pair { display: flex; justify-content: center; align-items: flex-end; gap: clamp(1rem, 3vw, 2rem); }
.shots-pair .shot--phone { width: min(15rem, 42vw); }
.shots-pair > :nth-child(2) { margin-bottom: 2.5rem; }
/* A quiet aside under a screenshot (home: praying together) */
.together { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1rem; max-width: 34rem; font-size: var(--step--1); }
.together .card__icon { margin: 0; }
.together p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   9. Layout patterns
   --------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.split--reverse > :first-child { order: 2; }
.split__media { display: grid; justify-items: center; }
@media (max-width: 58rem) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
}
.split + .split { margin-top: var(--section-y); }
@media (min-width: 58.0625rem) {
  .sticky-head { position: sticky; top: var(--stick); }
}

.grid { display: grid; gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
/* Even rows (no 4 + 2 or 3 + 1 orphans): one column, then two, then three */
.grid--even-3, .grid--even-2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .grid--even-3, .grid--even-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .grid--even-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.card h3 { margin-bottom: 0.4rem; }
.card--wide { grid-column: 1 / -1; }
.card--wide p { max-width: var(--measure); }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card__icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.9rem;
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--accent);
}
.section--evening .card { background: var(--night-raised); border-color: rgba(255, 255, 255, 0.1); color: var(--night-text); }
.section--evening .card__icon { background: rgba(169, 173, 255, 0.14); color: var(--night-accent); }

.checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
.checklist li { display: flex; gap: 0.65rem; align-items: flex-start; margin-bottom: 0.7rem; }
.checklist .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.2em; color: var(--accent); }
.section--evening .checklist .icon { color: var(--night-accent); }

/* Walkthrough steps (intercession) */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 1.5rem 0 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.5rem 3.5rem;
  border-left: 1px solid var(--line-strong);
  margin-left: 1.125rem;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: -1.125rem; top: -0.1rem;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--gold-soft);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 600;
}
.steps h3 { margin-bottom: 0.25rem; font-size: var(--step-0); font-family: var(--font-text); font-weight: 650; }
.steps p { margin: 0; color: var(--text); }

/* Founder's philosophy */
.philosophy { text-align: center; }
.philosophy blockquote {
  margin: 0 auto 1.5rem;
  max-width: 50rem;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}
.philosophy blockquote p { margin: 0; }
.philosophy blockquote p::before { content: "\201C"; color: var(--gold-soft); }
.philosophy blockquote p::after { content: "\201D"; color: var(--gold-soft); }
:lang(fr) .philosophy blockquote p::before { content: "«\00a0"; }
:lang(fr) .philosophy blockquote p::after { content: "\00a0»"; }
.philosophy figcaption { font-size: var(--step--1); color: var(--muted); }
.philosophy figcaption strong { color: var(--ink); font-weight: 600; }
.principles { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); text-align: left; }
@media (max-width: 40rem) {
  .philosophy { text-align: left; }
  .philosophy .section-head--center { text-align: left; }
  .philosophy .lede { margin-inline: 0; }
  .philosophy figure, .philosophy blockquote { text-align: center; }
  .philosophy .cta-row.justify-center { justify-content: flex-start; }
}

/* Facts list (free, private) */
.facts { display: grid; gap: 0; margin: 0; }
.facts > div { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 0.5rem 1.5rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 650; color: var(--ink); }
.facts dd { margin: 0; }
@media (max-width: 40rem) { .facts > div { grid-template-columns: 1fr; } }
.section--evening .facts > div { border-color: rgba(255, 255, 255, 0.12); }
/* A quieter list of dates beside a story (Our story: how it has grown) */
.timeline .facts { font-size: var(--step--1); }
.timeline .facts > div { grid-template-columns: minmax(7rem, 9rem) 1fr; padding: 0.8rem 0; }
.section--evening .facts dt { color: #fff; }

/* Languages: the welcome screen in each language (wide screens only), then a card per language */
.welcome-strip {
  list-style: none; padding: 0; margin: 0 0 clamp(2rem, 1rem + 3vw, 3.5rem);
  display: grid; gap: clamp(0.75rem, 2vw, 1.5rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.welcome-strip li { text-align: center; font-size: var(--step--1); color: var(--muted-deep); }
.welcome-strip figure { margin: 0; display: grid; justify-items: center; gap: 0.6rem; }
.welcome-strip .shot--phone { width: 100%; max-width: 9.5rem; --shot-radius: clamp(0.75rem, 9%, 1.4rem); }
@media (max-width: 40rem) { .welcome-strip { display: none; } }
.languages { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.language {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
/* Rows line up from card to card: name, greeting, Bible, links */
@supports (grid-template-rows: subgrid) {
  .language { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.5rem; }
}
.language__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); font-weight: 600; line-height: 1.2; }
.language__region { display: block; margin-top: 0.15rem; font: 500 var(--step--1)/1.3 var(--font-text); color: var(--muted); }
.language__greeting { font-family: var(--font-display); font-style: italic; color: var(--muted); }
.language__bible { font-size: var(--step--1); color: var(--text); padding-top: 0.6rem; border-top: 1px solid var(--line); }
.language__bible strong { color: var(--ink); }
.language__actions { display: grid; justify-items: start; align-content: end; gap: 0.35rem; margin-top: auto; padding-top: 0.25rem; font-size: var(--step--1); }
.language__actions a { font-weight: 600; }

/* Reviews */
.reviews { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.review { margin: 0; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; }
.review blockquote { margin: 0 0 1rem; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.4; color: var(--ink); }
.review blockquote p { margin: 0; }
.review figcaption { margin-top: auto; font-size: var(--step--1); color: var(--muted); }
.stars { color: var(--gold); letter-spacing: 0.1em; }
.rating-line { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); color: var(--muted); margin: 0 0 1.5rem; }

/* Platform journeys */
.journeys { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.journey { border-top: 2px solid var(--gold-soft); padding-top: 1rem; }
.journey h3 { font-size: var(--step-0); font-family: var(--font-text); font-weight: 650; margin-bottom: 0.3rem; }
.journey p { margin: 0; font-size: var(--step--1); }
.journey__devices { display: block; font-size: var(--step--1); letter-spacing: 0.01em; color: var(--gold); font-weight: 650; margin-bottom: 0.4rem; }

/* Callout / note */
.note {
  border-left: 3px solid var(--gold-soft);
  background: var(--paper-sunk);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--step--1);
}
.note p:last-child { margin-bottom: 0; }
.section--evening .note { background: var(--night-raised); color: var(--night-text); }
.section--dusk .note { background: color-mix(in srgb, var(--paper-raised) 55%, transparent); }

/* Final invitation */
.invite { text-align: center; }
.invite h2 { font-size: var(--step-4); font-weight: 400; }
.invite .lede { margin-inline: auto; color: var(--night-muted); }
.invite .cta-row { justify-content: center; }
.invite__mark { width: 4.5rem; height: 4.5rem; margin: 0 auto 1.5rem; border-radius: 1.1rem; box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 12px 40px rgba(90, 97, 244, 0.45); }

/* Page intro for sub-pages */
.page-intro { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem); background: linear-gradient(180deg, var(--dawn), var(--paper)); }
.page-intro h1 { font-size: var(--step-4); max-width: 22ch; }
.page-intro .lede { margin-bottom: 0; }
.page-intro .checklist { margin-top: 1.25rem; }

/* "On this page" bar for long pages (features, accessibility): it follows
   the intro and stays under the header while you read. Scrolls sideways on
   phones; site.js marks the section in view with aria-current. */
.subnav {
  position: sticky;
  top: calc(4rem + 1px);
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-block: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .subnav { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.subnav__inner { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; display: flex; align-items: center; gap: 0.5rem 1rem; }
.subnav__title { flex: none; margin: 0; font-size: var(--step--1); font-weight: 650; color: var(--ink); }
.subnav ol {
  list-style: none; margin: 0; padding: 0.25rem;
  display: flex; gap: 0 0.25rem;
  overflow-x: auto; white-space: nowrap;
  scrollbar-width: thin;
}
.subnav a {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: 0 0.6rem;
  border-radius: 999px;
  color: var(--text); font-size: var(--step--1); font-weight: 500; text-decoration: none;
}
.subnav a:hover { color: var(--accent); }
.subnav a[aria-current="true"] { color: var(--ink); background: var(--paper-sunk); box-shadow: inset 0 -2px 0 var(--gold-soft); }
/* Wide screens show every item (two rows where the labels run long); phones scroll the row sideways */
@media (min-width: 58.0625rem) { .subnav ol { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 58rem) { .subnav__title { display: none; } }

/* Prose sections: heading on the left, text on the right (wide screens) */
@media (min-width: 58.0625rem) {
  .prose-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
  .prose-split > .section-head { position: sticky; top: var(--stick); margin-bottom: 0; }
  .prose-split > .section-head .lede { font-size: var(--step-0); }
  .prose-split > :not(.section-head) { grid-column: 2; }
  .prose-split > .section-head { grid-row: 1 / span 4; }
}

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--tap);
  padding: 1.1rem 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  text-wrap: balance;
}
.faq summary::-webkit-details-marker { display: none; }
/* The +/− marker stays out of the question's name ("Why is it free? plus"); the open state already says it */
.faq summary::after { content: "+"; content: "+" / ""; font-family: var(--font-text); font-size: 1.5rem; line-height: 1; color: var(--accent); flex: none; }
.faq details[open] summary::after { content: "−"; content: "−" / ""; }
.faq .answer { padding: 0 0 1.25rem; max-width: var(--measure); }
.faq .answer p:last-child { margin-bottom: 0; }
.faq-group + .faq-group { margin-top: 3rem; }
.faq-group h2 { font-size: var(--step-2); }

/* Tables */
.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink); font-weight: 650; background: var(--paper-sunk); }
tr:last-child td { border-bottom: 0; }

/* Keyboard keys */
kbd { font-family: var(--font-text); font-size: 0.85em; padding: 0.1em 0.45em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 0.35em; background: var(--paper-raised); white-space: nowrap; }

/* ---------------------------------------------------------------------
   10. Forms
   --------------------------------------------------------------------- */
.form { display: grid; gap: 1.25rem; max-width: 36rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 600; color: var(--ink); }
.field .hint { font-size: var(--step--1); color: var(--muted); margin: 0; }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: max(1rem, var(--step-0));
  color: var(--ink);
  background: var(--paper-raised);
  border: 1.5px solid var(--field-line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  min-height: var(--tap);
  width: 100%;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: var(--rose); }
.field .error { color: var(--rose); font-size: var(--step--1); font-weight: 600; margin: 0; }
.form-status { padding: 1rem 1.25rem; border-radius: var(--radius-sm); background: var(--paper-sunk); border: 1px solid var(--line); }
.form-status--ok { border-color: #3f6b4a; }
.form-status--error { border-color: var(--rose); }
.form__note { margin: 0; } /* privacy note above Send; the form grid spaces it */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------
   11. Footer
   --------------------------------------------------------------------- */
.site-footer { background: var(--night); color: var(--night-muted); padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 2rem; font-size: var(--step--1); }
.site-footer a { color: var(--night-text); text-decoration-color: rgba(236, 233, 247, 0.35); }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: var(--night-accent); }
.site-footer h2 { font-family: var(--font-text); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-gold); font-weight: 650; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 2.25rem; }
.site-footer__inner {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
}
.site-footer__name { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.35rem; color: #fff; margin-bottom: 0.75rem; }
.site-footer__name img { border-radius: 0.45rem; }
.site-footer__brand p { max-width: 24rem; }
.site-footer__legal {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__legal p { margin-bottom: 0.6rem; }
.site-footer .verse { font-family: var(--font-display); font-size: var(--step-0); color: var(--night-text); }
.site-footer .verse cite { font-style: normal; font-family: var(--font-text); font-size: var(--step--1); color: var(--night-muted); white-space: nowrap; }
.site-footer .fine { font-size: 0.8125rem; color: #9b96b8; }
@media (max-width: 52rem) { .site-footer__inner { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 20rem) { .site-footer__inner { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Dark mode: light screenshots and the night sections. Until dark captures
   exist, light ones are dimmed a little so they don't glare on the dark page
   (tone comes from tools/build-images.py). The evening sky and the footer
   keep a visible edge against the dark page.
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .shot--light img { filter: brightness(0.82); }
  .hero__art .shot img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 80px -20px rgba(90, 97, 244, 0.35); }
  .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .section--evening {
    background:
      radial-gradient(60rem 30rem at 85% -10%, rgba(90, 97, 244, 0.42), transparent 60%),
      #0b0a18;
  }
}

/* ---------------------------------------------------------------------
   12. Motion — only where it clarifies; none when reduced motion is on
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   13. Forced colors & print
   --------------------------------------------------------------------- */
@media (forced-colors: active) {
  .button, .card, .language, .review, .lang__list, .lang-suggest { border: 1px solid CanvasText; }
  .subnav a[aria-current="true"] { outline: 1px solid CanvasText; }
  .shot img { outline: 1px solid CanvasText; }
  .section--evening, .site-footer { forced-color-adjust: auto; }
}
@media print {
  .site-header, .lang-suggest, .subnav, .site-footer__langs, .store-badge, .nav-toggle { display: none !important; }
  .section--evening, .site-footer { background: none !important; color: #000 !important; }
  a { color: #000; }
}

/* ---------------------------------------------------------------------
   14. Small utilities (the CSP forbids inline style attributes)
   --------------------------------------------------------------------- */
.mx-auto { margin-inline: auto; }
.center { text-align: center; }
.justify-center { justify-content: center; }
.align-start { align-items: start; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-block { margin-top: clamp(2.5rem, 1.5rem + 3vw, 5rem); }
.measure { max-width: 46rem; }
.invite__verse { color: var(--night-gold); font-size: var(--step--1); }
.invite__verse span { font-family: var(--font-display); font-style: italic; font-size: var(--step-0); }
.invite__verse cite { font-style: normal; white-space: nowrap; }
.philosophy .lede { margin-inline: auto; }
.shot--compact { max-width: 26rem; }

/* ---------------------------------------------------------------------
   FAQ page (pages/faq.php): topic links under the intro
   --------------------------------------------------------------------- */
.faq-jump { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.faq-jump a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------------------------------------------------------------------
   Privacy page (pages/privacy.php): "On this page" list and policy body
   --------------------------------------------------------------------- */
.toc { margin: 2rem 0 0; padding: 1.25rem 1.5rem; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.toc__title { font-weight: 650; color: var(--ink); margin: 0 0 0.75rem; }
.toc ol { margin: 0; padding-left: 1.25rem; columns: 2 15rem; column-gap: 2.5rem; }
.toc li { margin-bottom: 0.45rem; break-inside: avoid; }
.policy > section:first-child > h2 { margin-top: 0; }
.policy .facts { margin-bottom: 1.5rem; }
.policy .note { margin-top: 1rem; }

/* ---------------------------------------------------------------------
   Accessibility page (pages/accessibility.php): how-to step lists in cards
   (the "On this page" box reuses .toc from the privacy page)
   --------------------------------------------------------------------- */
.howto ol { padding-left: 1.25rem; }
.howto li { margin-bottom: 0.5rem; }
.howto ol:last-child { margin-bottom: 0; }


/* ---------------------------------------------------------------------
   Features page (pages/features.php): the app's own line in a quote card,
   device cards with the requirement pinned to the bottom
   (the "On this page" box reuses .toc from the privacy page)
   --------------------------------------------------------------------- */
.app-quote {
  margin: 0;
  max-width: 26rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.app-quote blockquote { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: var(--step-2); font-style: italic; line-height: 1.3; color: var(--ink); }
.app-quote blockquote p { margin: 0; }
.app-quote figcaption { font-size: var(--step--1); color: var(--muted); }
.device-card { display: flex; flex-direction: column; }
.device-card__req { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--line); }



/* ---------------------------------------------------------------------
   Accessibility page (pages/accessibility.php): keyboard shortcut tables.
   The shortcut in each row is its row header (th scope="row") so screen
   readers name the row; it keeps the look of an ordinary cell.
   --------------------------------------------------------------------- */
.shortcuts tbody th { background: transparent; font-weight: inherit; color: inherit; }
.shortcuts tr:last-child th { border-bottom: 0; }
.shortcuts thead th:first-child { width: 9.5rem; } /* same column line in all three tables */