/* METRIC-MATCHED FALLBACKS — MEASURED, not guessed (Chrome 151, 2026-09-13,
   against the live pages). Georgia sets our prose 5.6% WIDER than Cormorant
   Garamond and the system sans 2.8% NARROWER than DM Sans, so text drawn in the
   substitute wraps to a different number of lines; when the real face arrives
   the page RE-FLOWS. On publifye.org the nav went from two rows to one, dropped
   49px and hauled the whole document up with it — CLS 0.267, past Google's 0.25.
   size-adjust makes the substitute occupy the IDENTICAL space, so the swap moves
   nothing. The webfonts are additionally requested with display=optional.
   These are ratios between two SPECIFIC faces: change a family and re-measure. */
@font-face{font-family:"Cormorant Fallback";src:local("Georgia"),local("Times New Roman"),local("Tinos"),local("Liberation Serif"),local("Noto Serif"),local("Roboto Serif");size-adjust:94.69%;ascent-override:97.16%;descent-override:30.63%;line-gap-override:0%}
@font-face{font-family:"DM Sans Fallback";src:local("Helvetica Neue"),local("Arial"),local("Segoe UI"),local("Roboto"),local("Liberation Sans"),local("Noto Sans");size-adjust:102.85%;ascent-override:96.26%;descent-override:30.14%;line-gap-override:0%}

/* 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", "DM Sans Fallback", 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", "Cormorant Fallback", 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 > [data-testid="lang-switcher"] { margin-left: 2rem; }
@media (max-width: 768px) {
  .nav-inner > [data-testid="lang-switcher"] { margin-left: 1rem; }
  /* LangMenuCSS anchors its open list to the TRIGGER's own right edge
     (right:0;left:auto), which is correct when the trigger sits at the end
     of a wide bar — but here, with .nav-links hidden, the switcher is the
     lone item on ITS OWN WRAPPED LINE and lands at the LEFT of the bar
     (flex-wrap gives a single item nothing to space itself against). A
     panel opening from there runs its right-anchored width straight past
     the left edge of a 375px viewport — measured in a headless browser:
     "English", "Norsk bokmål" and "Español" all clipped, only their tails
     inside the screen. Opening it from the trigger's LEFT edge instead
     keeps the whole list on-screen, since the panel's own width (min
     11.5em) fits comfortably between the trigger and the right edge at
     any phone width this site supports. Specificity (0,3,0) beats the
     library's (0,2,0) regardless of the two <style> blocks' order in
     <head>. */
  .nav-inner .ae-langmenu > .ae-langlist { left: 0 !important; right: auto !important; }
}
/* 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 > [data-testid="lang-switcher"] { 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", "Cormorant Fallback", 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", "Cormorant Fallback", 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", "DM Sans Fallback", 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 menu ───────────────────────────────── */
/* THE MENU RENDERS IN aedit's OWN {{.LangMenuCSS}}, included once in <head>:
   a compact <details class="ae-langmenu"> — globe/flag + code + chevron
   trigger, a vertical flag+endonym list, the current language ticked — the
   same control every anav site already shows. It replaced a hand-built
   .LangLinks loop that this stylesheet used to own outright — a whole family
   of ae-lang-prefixed classes for the link, the current label, the separator
   and the name — and that family is gone with it: LangMenuCSS is self-contained and
   !important-pinned against exactly the kind of nav/details/summary rules
   this stylesheet has, so nothing here needs to restate its box, colour or
   spacing. The current-colour trigger already borrows this bar's text
   colour, and the touch target (40px) and the open list's positioning are
   the library's, not ours.

   FIVE LANGUAGES NO LONGER HAVE TO FIT ON THE BAR SPELLED OUT. The old
   switcher's phone form hid every name below 768px and showed flags only,
   because "English · Norsk bokmål · Español · 中文 · 한국어" is ~330px of text
   next to a logo and a hamburger inside a 375px viewport. The menu trigger is
   already compact — a two-letter code and a chevron — and the flag+endonym
   list only ever appears inside the OPEN dropdown, positioned absolutely and
   out of the row's own flow, so there is no flags-only hack left to
   maintain and no separate phone breakpoint of its own. */

/* ── 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", "Cormorant Fallback", 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", "Cormorant Fallback", 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", "Cormorant Fallback", 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", "Cormorant Fallback", 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", "Cormorant Fallback", 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; }