/* Sacred Flame Design System — Publifye.org */

html { font-size: 19px; }

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

:root {
  --bg-primary: #0a0f1a;
  --bg-secondary: #111827;
  --bg-tertiary: #1f2937;
  --bg-card: #141c2b;
  --accent-primary: #c9a227;
  --accent-secondary: #d4af37;
  --accent-muted: rgba(201, 162, 39, 0.15);
  --accent-glow: rgba(201, 162, 39, 0.08);
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --border-color: #2d3748;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 24px rgba(201, 162, 39, 0.06);
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
}

.light {
  --bg-primary: #faf9f7;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f3f4f6;
  --bg-card: #ffffff;
  --accent-primary: #9a7520;
  --accent-secondary: #8b6914;
  --accent-muted: rgba(154, 117, 32, 0.1);
  --accent-glow: rgba(154, 117, 32, 0.05);
  --text-primary: #1a1a2e;
  --text-secondary: #4b5563;
  --border-color: #e5e7eb;
  --border-subtle: rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 24px rgba(154, 117, 32, 0.04);
}

.sepia {
  --bg-primary: #f5f0e8;
  --bg-secondary: #ede4d4;
  --bg-tertiary: #e5dac8;
  --bg-card: #ede4d4;
  --accent-primary: #8b6914;
  --accent-secondary: #6b5010;
  --accent-muted: rgba(139, 105, 20, 0.12);
  --accent-glow: rgba(139, 105, 20, 0.06);
  --text-primary: #3d2b1f;
  --text-secondary: #5c4433;
  --border-color: #d4c4a8;
  --border-subtle: rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 24px rgba(139, 105, 20, 0.04);
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent-primary); text-decoration: none; transition: opacity 150ms ease; }
a:hover { opacity: 0.85; }

h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", Georgia, serif;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ── Focus states (droide required) ─────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
}

/* ── Layout ─────────────────────────────────────── */
.container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
main { flex: 1; }

/* ── Nav ─────────────────────────────────────────── */
nav {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* THE BAR WRAPS RATHER THAN OVERFLOWING. It did not, and between 641px and
   ~1272px it had ALREADY been overflowing horizontally with only two
   languages: eight nav links at a 2rem gap plus the theme toggle plus the logo
   plus the switcher do not fit inside 72rem, and a nowrap flex row does not
   report that — it just pushes the last item off the right edge of the page,
   where the whole document scrolls sideways to reach it. Adding three
   languages made a visible bug out of a latent one. A wrapping row costs a
   second line of bar at those widths and can never strand a control. */
.nav-inner { display: flex; flex-wrap: wrap; row-gap: 0.5rem; align-items: center; justify-content: space-between; padding: 0.875rem 1.5rem; max-width: 72rem; margin: 0 auto; }
.nav-links { display: flex; flex-wrap: wrap; row-gap: 0.5rem; gap: 2rem; align-items: center; }
/* THE SWITCHER IS A DIRECT CHILD OF .nav-inner, not of .nav-links, because it
   must render OUTSIDE the base.nav aedit surface — a block stored on that
   surface replaces the navigation wholesale and used to delete the switcher
   with it. That made .nav-inner a three-item flex row, and space-between would
   have pushed the links into the middle of the bar; margin-left:auto on the
   links absorbs the free space instead, so the logo stays left and the links
   and the switcher stay together at the right, exactly as before. The 2rem gap
   is .nav-links' own gap, restated so the switcher keeps its old spacing from
   the theme toggle. Below 640px .nav-links collapses into the drawer and the
   switcher simply stays on the bar, which is where it is wanted. */
.nav-inner > .nav-links { margin-left: auto; }
.nav-inner > .ae-lang { margin-left: 2rem; }
@media (max-width: 768px) { .nav-inner > .ae-lang { margin-left: 1rem; } }
/* Between the drawer breakpoint and a comfortable desktop the bar carries
   everything at once, and it is the only band where it does. Tightening the
   link gap there is what keeps the wrap to two rows instead of three. */
@media (min-width: 769px) and (max-width: 1100px) {
  .nav-links { gap: 1.25rem; }
  .nav-inner > .ae-lang { margin-left: 1.25rem; }
}
.nav-links a {
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 200ms ease;
}
.nav-links a:hover { color: var(--accent-primary); opacity: 1; }
.nav-logo { display: flex; align-items: center; gap: 0.75rem; }
.nav-logo img { height: 2rem; width: auto; }
.nav-logo span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-variant: small-caps;
  letter-spacing: 0.2em;
  color: var(--accent-primary);
  font-size: 1.25rem;
  font-weight: 600;
}

/* Mobile nav */
/* 768px, NOT 640px. Between 641px and 768px the eight links, the theme toggle,
   the logo and the switcher all shared one bar and did not fit — the document
   scrolled sideways there long before a third, fourth and fifth language were
   added. Collapsing the links into the drawer at the tablet breakpoint is the
   fix, and it is also where the flags-only switcher below takes over, so the
   two decisions are one breakpoint rather than two that can drift. */
.mobile-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.5rem; cursor: pointer; }
@media (max-width: 768px) {
  .mobile-toggle { display: block; }
  .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); padding: 1rem 1.5rem; gap: 1rem; }
  .nav-links.open { display: flex; }
}

/* ── Buttons ─────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: var(--accent-primary);
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 200ms ease;
  box-shadow: 0 2px 8px rgba(201, 162, 39, 0.2);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201, 162, 39, 0.3); color: #ffffff; opacity: 1; }

.btn-outline {
  display: inline-block;
  padding: 0.875rem 2rem;
  border: 1.5px solid var(--border-color);
  color: var(--text-primary);
  font-weight: 500;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.btn-outline:hover { border-color: var(--accent-primary); background-color: var(--accent-muted); color: var(--text-primary); opacity: 1; }

/* ── Cards ───────────────────────────────────────── */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
  border-color: var(--accent-muted);
}

/* Card content classes (replace inline styles) */
.card-title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--accent-primary);
}
.card-text {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.8;
}
.card-link {
  color: var(--accent-primary);
  font-size: 1rem;
  display: block;
  margin-top: 0.75rem;
}
.card-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.card-label {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 0.75rem;
}
.card-hint {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-top: 1.25rem;
}

/* FAQ list */
.faq-list .card { transition: border-color 200ms ease; }
.faq-list .card:hover { border-color: var(--accent-primary); }
.faq-list .card-title { margin-bottom: 0.5rem; }

/* Section heading (h2 inside cards/sections) */
.section-heading {
  font-size: 1.625rem;
  margin-bottom: 1rem;
}

/* ── Hero ────────────────────────────────────────── */
.hero {
  text-align: center;
  padding: 6rem 1.5rem 5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 30%, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
}
.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 1.25rem;
  position: relative;
  color: var(--text-primary);
}
.hero p {
  color: var(--text-secondary);
  font-size: 1.1875rem;
  max-width: 38rem;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  position: relative;
}
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; }
.hero-logo { margin: 0 auto 1.5rem; display: block; width: auto; }
/* One line, not a second hero. The fold is the scarce thing here: the band says
   the second half of what we are — services your own assistant signs in to —
   and hands over one link. Anything taller pushes the CTAs off the screen
   again, which is the very fault this sits above. */
.hero .hero-connect {
  display: flex;
  gap: 0.5rem 0.75rem;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  max-width: 44rem;
  margin: 1.5rem auto 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.hero-connect-link { color: var(--accent-primary); font-weight: 600; white-space: nowrap; text-decoration: none; }
.hero-connect-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .hero { padding: 3.5rem 1.5rem 3rem; }
  .hero h1 { font-size: 2.25rem; }
}

/* ── Grid ────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 768px) { .grid-3 { grid-template-columns: 1fr; } }
@media (min-width: 769px) and (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 768px) { .grid-4 { grid-template-columns: 1fr; } }
@media (min-width: 769px) and (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }

.card-compact { padding: 1.5rem; }

/* ── Section ─────────────────────────────────────── */
.section { padding: 4.5rem 0; }
.section-title {
  font-size: 2.25rem;
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}
.section-title::after {
  content: '';
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--accent-primary);
  margin: 0.75rem auto 0;
  border-radius: 1px;
}

/* ── Trust signals ───────────────────────────────── */
.trust-bar {
  display: flex;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
  padding: 3rem 0;
  border-top: 1px solid var(--border-color);
}
.trust-item { text-align: center; min-width: 8rem; }
.trust-item .number {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-primary);
  display: block;
  line-height: 1.2;
}
.trust-item .label { font-size: 1rem; color: var(--text-secondary); letter-spacing: 0.03em; text-transform: uppercase; margin-top: 0.25rem; }

/* ── Footer ──────────────────────────────────────── */
footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}
.footer-top {
  max-width: 72rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}
.footer-brand { max-width: 24rem; }
.footer-brand .nav-logo { margin-bottom: 0.75rem; display: inline-flex; }
.footer-tagline { color: var(--text-secondary); font-size: 1rem; line-height: 1.7; }
.footer-nav { display: flex; gap: 4rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col-title {
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  letter-spacing: 0;
}
.footer-col a { color: var(--text-secondary); font-size: 1rem; transition: color 200ms ease; }
.footer-col a:hover { color: var(--accent-primary); opacity: 1; }
.footer-bottom {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
}
.footer-bottom p { color: var(--text-secondary); font-size: 1rem; }
@media (max-width: 640px) {
  .footer-top { flex-direction: column; gap: 2rem; padding: 2rem 1.5rem 1.5rem; }
  .footer-nav { gap: 3rem; }
}

/* ── Form ────────────────────────────────────────── */
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-size: 1rem; font-weight: 500; color: var(--text-secondary); }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-muted);
}
.form-group textarea { min-height: 8rem; resize: vertical; }

/* ── Theme toggle ────────────────────────────────── */
.theme-toggle {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.375rem 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 200ms ease, color 200ms ease;
}
.theme-toggle:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

/* ── Language switcher ───────────────────────────── */
/* THE SWITCHER RENDERS IN THIS STYLESHEET, not aedit's: the library ships the
   class hooks (.ae-lang, .ae-lang__link, .ae-lang__cur, .ae-lang__sep) and no
   CSS at all, exactly like the staff edit control, because a fragment that
   lands inside someone else's cascade has to be styled by the host or it
   inherits whatever that host happens to say about <a> and <nav>.

   It sits with the nav links, so it borrows their colours rather than
   restating them — one accent change moves both. The current language is a
   <span>, not a link, and is deliberately dimmer: it is a label for where you
   are, not an offer to go there. */
.ae-lang { display: flex; align-items: center; gap: 0.25rem; font-size: 0.9375rem; }
.ae-lang__link {
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 200ms ease;
}
.ae-lang__link:hover { color: var(--accent-primary); opacity: 1; }
.ae-lang__cur { color: var(--text-tertiary, var(--text-secondary)); opacity: 0.65; font-weight: 500; }
.ae-lang__sep { color: var(--border-color); }
/* The flag is an 18x12 inline SVG the library emits inside the link, followed
   by a plain space. aedit ships it with an INLINE style="border-radius:2px;
   vertical-align:middle", and an inline declaration beats a stylesheet one, so
   restating either here would be a no-op that reads like a setting. Only the
   two things the library leaves to the host are set: the gap that holds the
   flag off its language name, and an edge, because the white field of the
   Norwegian cross otherwise dissolves into a light background. */
.ae-flag { margin-right: 0.35em; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }
.ae-lang__name { white-space: nowrap; }

/* FIVE LANGUAGES DO NOT FIT ON A PHONE BAR, and the switcher is a direct child
   of .nav-inner precisely so it STAYS on the bar when .nav-links collapses into
   the drawer at 640px. Spelled out, "English · Norsk bokmål · Español · 中文 ·
   한국어" is ~330px of text next to a logo and a hamburger inside a 375px
   viewport: the bar overflowed horizontally and the last language was
   unreachable.
   Below 768px the switcher therefore shows FLAGS ONLY — five 18x12 rectangles,
   ~120px including gaps, which fits beside the logo with room to spare. The
   name is hidden with the visually-hidden idiom rather than display:none, so
   every link keeps its accessible name and a screen reader still reads
   "Español"; a flag alone would announce as an empty link. The separator goes
   with the names — five flags in a row read as a set without dots between
   them — and the flag's own right margin is dropped in favour of the flex gap
   so the row is evenly spaced.

   768px is the SAME breakpoint the nav links collapse into the drawer at, on
   purpose: the two together are what keep the bar to one row on a phone or a
   portrait tablet, and a switcher compacting at a different width than the
   links collapse at leaves one arrangement nobody looked at. */
@media (max-width: 768px) {
  .ae-lang { gap: 0.5rem; }
  .ae-lang__sep { display: none; }
  .ae-lang .ae-flag { margin-right: 0; }
  .ae-lang__name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ── Alert ───────────────────────────────────────── */
.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  font-size: 1rem;
}
.alert-success { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #22c55e; }
.alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; }

/* ── Page header ─────────────────────────────────── */
.page-header { margin-bottom: 3rem; padding-top: 1rem; }
.page-header h1 { font-size: 2.75rem; margin-bottom: 0.75rem; }
.page-header p { color: var(--text-secondary); font-size: 1.125rem; max-width: 36rem; line-height: 1.7; }
.page-header.text-center p { margin-left: auto; margin-right: auto; }

/* ── About page ──────────────────────────────────── */
.about-mission-card {
  text-align: center;
  padding: 3rem 2.5rem;
  border-color: var(--accent-muted);
}
.about-lead {
  font-size: 1.1875rem;
  line-height: 1.9;
  max-width: 40rem;
  margin: 0 auto;
}

/* Every paragraph in a centred card shares ONE measure. .about-lead used to
   clamp only the first paragraph to 40rem while its siblings ran the card's
   full ~72rem, so the founder card held two different column widths stacked on
   top of each other. The width belongs to the card, not to whichever paragraph
   happens to be first. */
.about-mission-card .card-text,
.about-norway-card .card-text {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

/* Centred text is for one to three lines; past that both edges move and it
   reads as a ragged ribbon, and these slots are EDITABLE — the founder bio went
   from three lines to nine without anyone touching CSS. The bucket comes from
   aedit's .Len, wired onto these paragraphs in about.html; 180 runes is four
   lines at this 40rem measure, which is where centring stops working. */
.about-mission-card .card-text[data-ae-len="long"],
.about-norway-card  .card-text[data-ae-len="long"] {
  text-align: left;
  text-wrap: pretty;
}

/* auto-fit, not repeat(4, 1fr): the count is CONTENT, and a fifth stat under a
   hardcoded four orphans onto its own row.

   THE BREAKPOINT IS 880px AND IT IS LOAD-BEARING, not a round number. Root is
   19px (see html above), so minmax(9.5rem) is 180.5px and four of them plus
   three 1.5rem gaps need 807.5px. A 768px viewport gives the container only
   768 - (2 x 28.5) = 711px, so auto-fit drops to THREE columns and orphans the
   fourth tile on its own row — worse than the repeat(4, 1fr) it replaced, which
   never orphaned because 1fr shrinks below content. The old query switched to
   two columns only at 640px, leaving 641-863px broken, iPad portrait included.
   At 881px the container is 824px and four columns fit with room to spare.

   Recompute this if the root size, the gap, the floor or the container padding
   moves. Any of the four invalidates it. */
.about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1.5rem;
  max-width: 48rem;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); }
}
.about-stat {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
.about-stat-number {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--accent-primary);
  display: block;
  line-height: 1.2;
}
.about-stat-label {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-top: 0.375rem;
  display: block;
  letter-spacing: 0.02em;
  /* Two-word labels wrap unevenly across the row — "Bible Translations" breaks
     while "Languages" does not — so the tiles read ragged even though the grid
     equalises their heights. balance splits a wrapped label across its lines
     instead of filling the first. */
  text-wrap: balance;
}
@media (max-width: 640px) {
  /* The two-column switch now happens at 880px, above — see the arithmetic
     there. Only the padding belongs at this breakpoint. */
  .about-mission-card { padding: 2rem 1.5rem; }
}
.about-norway-card {
  text-align: center;
  padding: 3rem 2.5rem;
}
@media (max-width: 640px) {
  .about-norway-card { padding: 2rem 1.5rem; }
}

.timeline {
  border-left: 2px solid var(--border-color);
  padding-left: 2.5rem;
  margin: 2.5rem 0;
  max-width: 48rem;
}
.timeline-item {
  margin-bottom: 2.5rem;
  position: relative;
  padding-bottom: 0.25rem;
}
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -2.85rem;
  top: 0.45rem;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--accent-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--bg-primary), 0 0 0 5px var(--accent-muted), 0 0 12px var(--accent-muted);
}
.timeline-item h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.timeline-item p { color: var(--text-secondary); font-size: 1.1875rem; line-height: 1.8; }

/* ── Darash page ──────────────────────────────────── */
.scripture-quote {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.8;
  color: var(--text-primary);
  max-width: 42rem;
  margin: 0 auto 1rem;
  position: relative;
}
.scripture-ref {
  font-size: 1rem;
  color: var(--accent-primary);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
}
.darash-subtitle {
  color: var(--text-secondary);
  font-size: 1.125rem;
  max-width: 36rem;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  position: relative;
}

/* ── Apps page ───────────────────────────────────── */
.apps-page {
  --br-blue: #5DADE2;
  --br-blue-deep: #338AC7;
  --br-blue-dark: #1a5276;
  --br-blue-muted: rgba(93, 173, 226, 0.15);
}
.app-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.app-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--br-blue-muted);
  color: var(--br-blue);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}
.app-hero {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 3rem;
}
.app-hero-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.app-hero-info .app-header { margin-bottom: 0.25rem; }
.app-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 1.125rem;
  flex-shrink: 0;
}
.app-icon-lg {
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 1.375rem;
}
.btn-appstore {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: var(--br-blue-deep);
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 200ms ease;
  box-shadow: 0 2px 8px rgba(51, 138, 199, 0.25);
  text-decoration: none;
}
.btn-appstore:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(51, 138, 199, 0.35);
  color: #ffffff;
  opacity: 1;
}
.apps-page .section-title::after { background: var(--br-blue); }
.apps-page .card-title { color: var(--br-blue); }
.apps-page .trust-item .number { color: var(--br-blue); }
.apps-page .phone-frame { border-color: rgba(93, 173, 226, 0.3); }
.apps-page .phone-frame:hover { box-shadow: var(--shadow-lg), 0 0 24px rgba(93, 173, 226, 0.1); }
.app-cta-card { border-color: rgba(93, 173, 226, 0.25); }
@media (max-width: 640px) {
  .app-hero { padding: 1.5rem; }
  .app-hero-info { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .app-icon { width: 4rem; height: 4rem; }
  .app-icon-lg { width: 5rem; height: 5rem; }
}

/* Screenshot strip */
.screenshot-strip {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 3rem 0 4rem;
  overflow-x: auto;
  padding: 1rem 0;
}
.phone-frame {
  flex-shrink: 0;
  width: 200px;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--border-color);
  background: #000;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.phone-frame:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-lg), 0 12px 40px rgba(0, 0, 0, 0.3);
}
.phone-frame img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .screenshot-strip { gap: 1rem; justify-content: flex-start; padding: 1rem; }
  .phone-frame { width: 160px; border-radius: 1.25rem; }
}
@media (max-width: 480px) {
  .phone-frame { width: 140px; border-radius: 1rem; }
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.feature-list li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent-primary);
  border-radius: 50%;
}

/* ── Modal ───────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-box {
  position: relative;
  max-width: 26rem;
  width: 90%;
  animation: modalIn 200ms ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-title { font-size: 1.25rem; margin-bottom: 0.75rem; }
.modal-text { color: var(--text-secondary); font-size: 1rem; margin-bottom: 1.5rem; }
.modal-actions { display: flex; gap: 1rem; }
.confirm-code {
  font-family: "Cormorant Garamond", Georgia, monospace;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-primary);
  letter-spacing: 0.4em;
  display: inline-block;
}
.confirm-input { text-align: center; letter-spacing: 0.2em; font-weight: 600; }

/* ── Support code display ───────────────────────── */
.support-code-card { padding: 1rem 0; }
.support-code-value {
  font-family: "Cormorant Garamond", Georgia, monospace;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-primary);
  letter-spacing: 0.15em;
  padding: 1rem;
  background: var(--accent-muted);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-md);
  display: inline-block;
  user-select: all;
}

/* ── Honeypot ───────────────────────────────────── */
.honeypot { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; overflow: hidden; }

/* ── Card lists (privacy, terms) ─────────────────── */
.card-text ul, .card-text ol {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}
.card-text li {
  margin-bottom: 0.5rem;
  line-height: 1.8;
  font-size: 1.0625rem;
}

/* ── Isac page ───────────────────────────────────── */
.isac-page {
  --isac-violet: #8B5CF6;
  --isac-violet-deep: #7C3AED;
  --isac-violet-muted: rgba(139, 92, 246, 0.15);
}
.isac-page .section-title::after { background: var(--isac-violet); }
.isac-page .card-title { color: var(--isac-violet); }
.isac-page .trust-item .number { color: var(--isac-violet); }
.btn-isac {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: var(--isac-violet-deep, #7C3AED);
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 200ms ease;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
  text-decoration: none;
}
.btn-isac:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
  color: #ffffff;
  opacity: 1;
}
.isac-page .isac-subtitle {
  color: var(--text-secondary);
  font-size: 1.125rem;
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
  position: relative;
}
.isac-page code {
  background: var(--bg-tertiary);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}

/* ── Utility ─────────────────────────────────────── */
.text-gold { color: var(--accent-primary); }
.text-center { text-align: center; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-4 { margin-left: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }

/* ── Home: the free-Bibles band ──────────────────── */
/* One wide, quiet call to action between the fold and the catalogue. It is a
   link element, so the whole strip is the target on a phone. */
.band {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.75rem 2rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
.band:hover { border-color: var(--accent-primary); box-shadow: var(--shadow-md); opacity: 1; }
.band-main { display: block; flex: 1; }
.band-title {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  color: var(--accent-primary);
  margin-bottom: 0.25rem;
}
.band-text { display: block; color: var(--text-secondary); font-size: 1.0625rem; line-height: 1.7; }
.band-go { color: var(--accent-primary); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
  .band { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.5rem; }
}

/* ── Home: product families ──────────────────────── */
/* Each family is a labelled break in the product grid — "to read", "to study",
   "to make" — so the page reads as one shelf of tools rather than a list. */
.family { margin: 3rem 0 1.5rem; }
.family:first-of-type { margin-top: 0; }
.family-eyebrow {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}
.family-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.75rem;
  color: var(--text-primary);
  margin: 0;
}

/* The host + one hard fact under a product card's prose. */
.card-meta {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin-top: 0.75rem;
  opacity: 0.85;
}

/* Intro paragraph under a section title. */
.section-lead {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.8;
  max-width: 46rem;
  margin: -1.5rem auto 2.5rem;
  text-align: center;
}

/* ── Home: the platform list ─────────────────────── */
/* Dense on purpose: this is an inventory, not a set of offers, so it must not
   look like the product cards above it. */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 2.5rem;
}
@media (max-width: 768px) { .platform-grid { grid-template-columns: 1fr; } }
.platform-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.platform-name { color: var(--text-primary); font-weight: 600; font-size: 1.0625rem; }
.platform-role { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; }

/* Company facts under the trust bar. */
.trust-note {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.8;
  max-width: 46rem;
  margin: 1.5rem auto 0;
  text-align: center;
}

/* A second lead paragraph under a section title — the platform offer follows
   the inventory description, so it needs its own top margin and a little more
   presence than the line above it. */
.section-lead + .section-lead {
  margin-top: -1.5rem;
  margin-bottom: 2.5rem;
  color: var(--text-primary);
}
.section-lead strong { color: var(--accent-primary); }
.section-lead a { color: var(--accent-primary); white-space: nowrap; }

/* Checkbox row on the contact form — the label wraps the box and its text, so
   it needs to sit on one line rather than stacking like the other fields. */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 400;
  color: var(--text-secondary);
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] { width: auto; margin: 0; }