/* ═══════════════════════════════════════════════════════════════
   bible lock — shared web styling

   The palette, type and the extruded CTA are lifted verbatim from the
   app (BibleLockColors.swift / design-reference.html) so the site and
   the product are visibly the same object. A page never invents a
   shade — if something needs a colour, the question is which of these
   it already is.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink: #12332A;          /* deep green — headlines, body, primary CTA */
  --ink-dark: #0A1E18;     /* the extruded edge under a pressed button  */
  --ink-2: #1D4A3C;
  --muted: #5E6F67;        /* secondary copy, never interactive        */

  --accent: #C08A2D;       /* gold. it means you earned something      */
  --accent-soft: #F6EAD4;
  --mint: #DDF0EA;

  --ground: #FFFFFF;
  --paper: #FBF6EA;        /* reading. warm, so scripture is not on a screen */
  --sand: #F2E8D2;
  --well: #F3F5F3;
  --line: rgba(18, 51, 42, .13);
  --on-dark: #FBF8F1;

  --r-cta: 18px;
  --h-cta: 62px;
  --shell: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.55 Outfit, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 20px; }
.acc { color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── the chunky extruded CTA ───────── */

.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--h-cta); padding-inline: 30px;
  border: 0; border-radius: var(--r-cta);
  background: var(--ink); color: #fff;
  font: 700 18px/1 Outfit, sans-serif; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 5px 0 var(--ink-dark);
  transition: transform .1s, box-shadow .1s;
}
.cta:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink-dark); }
.cta.gold { background: var(--accent); box-shadow: 0 5px 0 #8C6318; }
.cta.light { background: var(--on-dark); color: var(--ink); box-shadow: 0 5px 0 #C9C2B1; }
.cta svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ───────── site header ───────── */

.mast {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line);
}
.mast .shell { display: flex; align-items: center; gap: 22px; height: 68px; }
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font: 800 20px/1 Outfit, sans-serif; letter-spacing: -.045em;
  text-decoration: none; color: var(--ink);
}
.wordmark svg { width: 20px; height: 24px; color: var(--ink); }
.mast nav { margin-left: auto; display: flex; gap: 26px; }
.mast nav a {
  font: 600 15px/1 Outfit, sans-serif; color: var(--muted); text-decoration: none;
  transition: color .15s;
}
.mast nav a:hover { color: var(--ink); }
.mast .cta { height: 44px; padding-inline: 20px; font-size: 15.5px; border-radius: 13px; box-shadow: 0 4px 0 var(--ink-dark); }
@media (max-width: 860px) { .mast nav { display: none; } .mast .cta { margin-left: auto; } }

/* ───────── site footer ───────── */

.foot { border-top: 1px solid var(--line); padding-block: 46px 54px; background: var(--ground); }
.foot .shell { display: flex; flex-wrap: wrap; gap: 20px 34px; align-items: center; }
.foot .wordmark { font-size: 17px; }
.foot .links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: auto; }
.foot a.l { font: 500 15px/1.4 Outfit, sans-serif; color: var(--muted); text-decoration: none; }
.foot a.l:hover { color: var(--ink); }
.foot .fine { width: 100%; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

/* ───────── legal + simple prose pages ───────── */

.doc { padding-block: 64px 90px; }
.doc .shell { max-width: 760px; }
.doc .back {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 30px;
  font: 600 15px/1 Outfit, sans-serif; color: var(--muted); text-decoration: none;
}
.doc .back:hover { color: var(--accent); }
.doc h1 {
  font: 800 clamp(34px, 6vw, 50px)/1.05 Outfit, sans-serif;
  letter-spacing: -.035em; text-transform: lowercase; margin-bottom: 10px;
}
.doc h1::after {
  content: ""; display: block; width: 52px; height: 5px; border-radius: 99px;
  background: var(--accent); margin-top: 20px;
}
.doc h2 {
  font: 700 12px/1.35 Outfit, sans-serif; letter-spacing: .17em; text-transform: uppercase;
  color: var(--accent); margin: 48px 0 14px;
  display: flex; align-items: center; gap: 16px;
}
.doc h2::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.doc p { margin-bottom: 16px; color: var(--ink); font-size: 16.5px; line-height: 1.68; }
.doc p.strong { font-weight: 600; }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { text-decoration-thickness: 2px; }
.doc b, .doc strong { font-weight: 700; }
.doc .updated { color: var(--muted); font-size: 15px; margin-bottom: 34px; }
.doc table {
  width: 100%; border-collapse: collapse; margin: 8px 0 26px;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  font-size: 14.5px; line-height: 1.55;
}
.doc thead { background: var(--well); }
.doc th {
  text-align: left; padding: 12px 16px; color: var(--muted);
  font: 700 11.5px/1.3 Outfit, sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
.doc td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.doc td:first-child { color: var(--ink); font-weight: 600; }
.doc .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* An emphasised block in a legal document — the all-caps consent line, the
   "as-is" disclaimer. Loud in the source, so loud here, but not a heading. */
.doc p.callout {
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 0 14px 14px 0;
  padding: 18px 22px;
  margin: 26px 0;
  font-weight: 600;
  color: var(--ink);
}