/* 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);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.5rem; max-width: 72rem; margin: 0 auto; }
.nav-links { display: flex; gap: 2rem; align-items: center; }
.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 */
.mobile-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.5rem; cursor: pointer; }
@media (max-width: 640px) {
  .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); }

/* ── 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; }