/* First Faith — marketing site. Styled from the app's design tokens
   (spec/first-faith-design-tokens.md): warm parchment + gold-leaf, serif for the
   Word, sans for the interface. Deliberately NOT the competitor's bright orange. */

:root {
  /* Neutrals & surfaces (light) */
  --canvas: #F7F2E8;
  --surface: #FFFEFB;
  --surface-subtle: #EFE7D6;
  --border: #E4DAC6;
  /* Text (ink) */
  --text-primary: #2A2620;
  --text-secondary: #6E6557;
  --text-tertiary: #857A69;      /* AA-corrected */
  /* Gold */
  --gold: #C2A04C;               /* fill only — never text on light */
  --gold-deep: #836527;          /* AA-corrected; gold text/links on light */
  --gold-soft: #F0E6C9;
  --on-gold: #2A2210;
  /* Semantic (muted) */
  --success: #5E7B49;
  --info: #4F6E80;

  /* Type */
  --serif: "Lora", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Spacing scale (4-pt) */
  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s20: 20px;
  --s24: 24px; --s32: 32px; --s40: 40px; --s48: 48px; --s64: 64px;

  /* Radius */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  --shadow-card: 0 2px 16px rgba(42, 38, 32, 0.06);
  --maxw: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #1A1813;
    --surface: #241F18;
    --surface-subtle: #2D2820;
    --border: #39332A;
    --text-primary: #F1E8D6;
    --text-secondary: #B4AB97;
    --text-tertiary: #837A68;
    --gold: #D8B65E;
    --gold-deep: #E0C173;          /* luminous gold reads as gilding on dark */
    --gold-soft: #332C1C;
    --on-gold: #1F1B12;
    --success: #86A86A;
    --info: #7BA0B4;
    --shadow-card: none;
  }
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--canvas);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s24); }

/* ---------- Type ---------- */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-deep);
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; color: var(--text-primary); }
.serif { font-family: var(--serif); }
.gold-text { color: var(--gold-deep); }
.muted { color: var(--text-secondary); }
.tertiary { color: var(--text-tertiary); }

/* ---------- Buttons / badges ---------- */
.btn-primary {
  display: inline-flex; align-items: center; gap: var(--s8);
  background: var(--gold); color: var(--on-gold);
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  padding: 14px 24px; border-radius: var(--r-md); text-decoration: none;
  border: none; transition: filter .15s ease;
}
.btn-primary:hover { filter: brightness(0.96); }

/* App Store badge — approximation; replace with Apple's official asset before launch */
.appstore-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #111; color: #fff; text-decoration: none;
  padding: 10px 18px; border-radius: var(--r-md); min-width: 200px;
}
.appstore-badge svg { width: 26px; height: 26px; fill: #fff; flex: none; }
.appstore-badge .small { font-size: 11px; line-height: 1; opacity: .9; display: block; }
.appstore-badge .big { font-size: 21px; line-height: 1.15; font-weight: 600; }

.cross { color: var(--gold); font-weight: 700; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 0.5px solid var(--border); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.brand .name { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); }

/* ---------- Hero ---------- */
.hero { padding: var(--s64) 0; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s48); align-items: center; }
.hero h1 { font-size: clamp(40px, 6vw, 68px); letter-spacing: -0.01em; }
.hero .sub { margin-top: var(--s20); font-size: clamp(17px, 2.2vw, 21px); color: var(--text-secondary); max-width: 30ch; }
.hero .cta-row { margin-top: var(--s32); display: flex; align-items: center; gap: var(--s16); flex-wrap: wrap; }
.hero .android-note { margin-top: var(--s12); font-size: 13px; color: var(--text-tertiary); }

/* ---------- Phone mockup (CSS rendering of the morning shield) ---------- */
.device { justify-self: center; width: 300px; max-width: 78vw;
  border-radius: 44px; padding: 12px;
  background: linear-gradient(160deg, #2c2720, #15130f);
  box-shadow: 0 30px 70px rgba(42,38,32,0.28); }
.device .screen { border-radius: 34px; overflow: hidden; background: var(--canvas);
  aspect-ratio: 9 / 19.5; display: flex; flex-direction: column;
  border: 1px solid rgba(0,0,0,0.15); position: relative; }
.device .notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px; background: #15130f; border-radius: var(--r-full); z-index: 2; }
.shield { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 22px 26px; gap: 16px; }
.shield .mark { font-size: 26px; color: var(--gold); }
.shield .eyebrow { font-size: 10px; }
.shield .prompt { font-size: 13px; color: var(--text-secondary); }
.shield .verse { font-family: var(--serif); font-size: 17px; line-height: 1.45; color: var(--text-primary); }
.shield .ref { font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.04em; }
.shield .spacer { flex: 1; }
.shield .ipray { width: 100%; background: var(--gold); color: var(--on-gold);
  font-weight: 600; font-size: 13px; padding: 12px; border-radius: var(--r-md); }
.shield .notyet { font-size: 12px; color: var(--text-tertiary); }

/* ---------- Sections ---------- */
section.band { padding: var(--s64) 0; }
section.band.subtle { background: var(--surface-subtle); border-top: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border); }
.section-head { text-align: center; max-width: 40ch; margin: 0 auto var(--s40); }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); }
.section-head p { margin-top: var(--s12); color: var(--text-secondary); font-size: 18px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s24); }
.card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s32); box-shadow: var(--shadow-card); }
.card .num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: var(--r-full); background: var(--gold-soft); color: var(--gold-deep);
  font-weight: 700; font-family: var(--serif); margin-bottom: var(--s16); }
.card h3 { font-size: 20px; margin-bottom: var(--s8); }
.card p { color: var(--text-secondary); font-size: 15px; }

/* Verse showcase */
.verse-card { max-width: 760px; margin: 0 auto; text-align: center; }
.verse-card .scripture { font-family: var(--serif); font-size: clamp(22px, 3.4vw, 32px); line-height: 1.45; color: var(--text-primary); }
.verse-card .ref { margin-top: var(--s16); color: var(--gold-deep); font-weight: 600; letter-spacing: 0.04em; font-size: 14px; }

/* Feature rows */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s24); max-width: 880px; margin: 0 auto; }
.feature { display: flex; gap: var(--s16); padding: var(--s20); }
.feature .ic { font-size: 22px; color: var(--gold); flex: none; }
.feature h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.feature p { color: var(--text-secondary); font-size: 15px; }

/* Final CTA */
.final { text-align: center; }
.final h2 { font-size: clamp(30px, 5vw, 52px); }
.final .tagline-2 { color: var(--gold-deep); }
.final .cta-row { margin-top: var(--s32); display: flex; justify-content: center; gap: var(--s16); flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { padding: var(--s40) 0; border-top: 0.5px solid var(--border); text-align: center; }
.site-footer nav { display: flex; gap: var(--s16); justify-content: center; flex-wrap: wrap; margin-bottom: var(--s12); }
.site-footer a { color: var(--text-secondary); text-decoration: none; font-size: 14px; }
.site-footer a:hover { color: var(--gold-deep); }
.site-footer .copy { color: var(--text-tertiary); font-size: 13px; }
.site-footer .dot { color: var(--border); }

/* ---------- Legal pages ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: var(--s48) 0 var(--s64); }
.legal h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: var(--s8); }
.legal .updated { color: var(--text-tertiary); font-size: 14px; margin-bottom: var(--s32); }
.legal .note { background: var(--gold-soft); border: 0.5px solid var(--border); border-radius: var(--r-md);
  padding: var(--s16); font-size: 14px; color: var(--text-secondary); margin-bottom: var(--s32); }
.legal h2 { font-family: var(--sans); font-size: 20px; font-weight: 600; margin: var(--s32) 0 var(--s12); color: var(--text-primary); }
.legal p, .legal li { color: var(--text-secondary); font-size: 16px; margin-bottom: var(--s12); }
.legal ul { padding-left: var(--s24); margin-bottom: var(--s12); }
.legal a { color: var(--gold-deep); }
.legal .back { display: inline-block; margin-top: var(--s32); color: var(--gold-deep); text-decoration: none; font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; text-align: center; }
  .hero .sub { margin-left: auto; margin-right: auto; }
  .hero .cta-row { justify-content: center; }
  .device { order: -1; }
  .steps { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
}