/* sacredselah.app. The Will Ruggles kit (brand/BRAND-KIT.md) on the app's own icon:
   deep navy leads, steel blue surfaces, warm white and light gray text, gold for eyebrows,
   borders and the emblem, red for the one button. No cream anywhere as a background
   (Will, 23 October 2026). Dark is primary; light is white and light gray, never cream.
   Montserrat Bold headlines, Inter body, both self-hosted below. Phone first at 375 wide.
   Sizes follow PROTOCOLS/website-build-standard.md and are measured by screenshots/shoot.mjs. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/montserrat-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
}

:root {
  --navy: #0D1B2A;
  --steel: #1B3A4B;
  --warm-white: #F5F0EB;
  --light-gray: #B8C5D0;
  --red: #C1292E;
  --gold: #D4A843;

  /* Dark, the primary mode. */
  --bg: var(--navy);
  --surface: var(--steel);
  --surface-2: #122839;
  --fg: var(--warm-white);
  --fg-soft: var(--light-gray);
  --rule: #2C4A5E;
  --accent: var(--gold);
  --link: #E6C06A;
  --focus: var(--gold);
  --band-bg: var(--navy);
  --band-fg: var(--warm-white);
  --input-bg: #122839;
  --input-fg: var(--warm-white);
  --input-border: #3B5A6E;
  --btn-bg: var(--red);
  --btn-fg: #FFFFFF;

  --head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark light;
}

/* Light, the secondary mode: white and light gray with navy text. No cream. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #FFFFFF;
    --surface: #EEF2F5;
    --surface-2: #F6F8FA;
    --fg: var(--navy);
    --fg-soft: #3E5567;
    --rule: #D3DBE2;
    --accent: #9A7420;
    --link: #1B3A4B;
    --focus: var(--gold);
    --band-bg: var(--navy);
    --band-fg: var(--warm-white);
    --input-bg: #FFFFFF;
    --input-fg: var(--navy);
    --input-border: #9FB0BE;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
/* Inline links in prose: vertical padding on an inline element changes nothing in the
   layout but grows the tap box to 44px. An inline box is the font's content area, about
   22px for 18px type, so 12px top and bottom clears Apple's 44px floor. */
p a, footer div a, li a:not(.nav a):not(.links a) { padding-top: 13px; padding-bottom: 13px; }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 780px; margin: 0 auto; padding: 0 16px; }

/* Header band: navy with the app icon and a gold rule. */
.band {
  background: var(--band-bg);
  color: var(--band-fg);
  border-bottom: 1px solid var(--accent);
}
.band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; padding-top: 10px; padding-bottom: 6px; }
.wordmark {
  color: var(--band-fg);
  text-decoration: none;
  font-family: var(--head);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .12em;
  text-transform: uppercase;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wordmark img { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.nav { display: flex; flex-wrap: wrap; gap: 0 2px; margin: 0 -10px; padding: 0; list-style: none; }
.nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 10px;
  color: var(--band-fg); text-decoration: none;
  font-size: 16px;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }

/* Type. Headlines Montserrat Bold; body Inter. Minimums measured at 375. */
.eyebrow {
  font-family: var(--head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.15; margin: 0 0 16px; letter-spacing: -.01em; }
h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3 { font-size: 21px; margin-bottom: 8px; }
p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 20px; }
.soft { color: var(--fg-soft); }
.note { font-size: 18px; color: var(--fg-soft); }
code { font-family: var(--mono); font-size: 18px; }

/* Sections */
.hero { padding: 28px 0 28px; }
section { padding: 32px 0; border-top: 1px solid var(--rule); }
section:target, .join:target { scroll-margin-top: 16px; }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 22px 20px;
}

/* Scripture */
blockquote.verse {
  margin: 24px 0 0;
  padding: 0 0 0 18px;
  border-left: 3px solid var(--accent);
  font-family: var(--head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
}
blockquote.verse p { margin: 0; }
blockquote.verse cite { display: block; margin-top: 10px; font-family: var(--body); font-weight: 400; font-style: normal; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

/* Screenshots: two across on a phone, four across on a desktop. The width and
   height attributes on each img keep the phone's aspect; nothing is stretched. */
.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.shots figure { margin: 0; }
.shots img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--rule);
  background: var(--navy);
}
.shots figcaption { font-size: 15px; color: var(--fg-soft); margin-top: 8px; line-height: 1.4; }

/* The four steps */
.steps { counter-reset: step; margin: 24px 0 0; padding: 0; list-style: none; }
.steps li { position: relative; padding: 0 0 0 54px; margin: 0 0 22px; counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 700; font-size: 18px;
  color: var(--accent);
}
.steps strong { display: block; font-family: var(--head); font-weight: 700; font-size: 21px; line-height: 1.25; margin-bottom: 6px; }

/* The one call to action: an email field and the one red button (beta mode, in the hero;
   launch mode, down in "Hear about updates first" with a quiet button, see the end). */
.join { margin-top: 22px; }
.hero-after { margin-top: 30px; }
form.signup { display: flex; flex-direction: column; gap: 12px; margin: 0; }
form.signup[hidden] { display: none; }
.vis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
form.signup input[type="email"] {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  font: 18px/1.3 var(--body);
  color: var(--input-fg);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
}
form.signup input[type="email"]::placeholder { color: var(--fg-soft); opacity: 1; }
form.signup input[type="email"]:focus { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
form.signup button, .cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 52px; padding: 0 24px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 0;
  border-radius: 12px;
  font: 700 18px/1.2 var(--head);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
}
form.signup button:hover, .cta:hover { filter: brightness(1.08); }
form.signup button:disabled { opacity: .7; cursor: wait; }
form.signup button:focus-visible, .cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.form-ok {
  margin-top: 4px;
  padding: 16px 18px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  font-weight: 600;
}
.form-err {
  margin-top: 4px;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  color: var(--fg);
  font-weight: 600;
}
.form-note { margin-top: 12px; font-size: 18px; color: var(--fg-soft); }
.form-note code, .mailcopy code {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--fg);
  user-select: all;
  -webkit-user-select: all;
  padding: 2px 6px;
  border: 1px dashed var(--accent);
  border-radius: 6px;
}
.mailcopy { margin-top: 14px; font-size: 18px; color: var(--fg-soft); }
.mailcopy code { display: inline-block; margin-top: 6px; padding: 8px 10px; }

/* Launch mode. The Worker sets html[data-site-mode="launch"] and keeps only the
   data-mode="launch" markup: the store badges in the hero under one red "Get the app"
   button, a "What it costs" section, and the signup form moved down to "Hear about updates
   first". Badge rules: Apple's black badge and Google's black badge, unaltered, 50px tall
   (the official minimum is 40px), equal heights side by side, clear space of at least a
   quarter of the badge height on every side (16px gaps, 16px page gutter, 16px above). */
.get { margin-top: 22px; }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 16px 0 0; }
.badges a { display: inline-flex; padding: 0; line-height: 0; border-radius: 8px; text-decoration: none; }
.badges a:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: 10px; }
.badges a[aria-disabled="true"] { cursor: default; }
.badges img { height: 50px; width: auto; max-width: none; display: block; }
.store-note { margin-top: 14px; font-size: 18px; color: var(--fg-soft); }
/* The list's button in launch mode is quiet (steel and gold) so the red stays on "Get the app". */
html[data-site-mode="launch"] form.signup button { background: var(--surface-2); color: var(--fg); border: 1px solid var(--accent); }
html[data-site-mode="launch"] form.signup button:hover { background: var(--surface); filter: none; }

/* FAQ */
.faq h2 { font-size: 24px; margin-top: 28px; }
.faq h2:first-of-type { margin-top: 0; }

/* Footer */
footer { border-top: 1px solid var(--rule); padding: 28px 0 44px; font-size: 16px; color: var(--fg-soft); }
footer .links { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 6px -10px 0; padding: 0; list-style: none; }
footer .links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 16px; }
footer .small { font-size: 15px; margin-top: 6px; }

@media (min-width: 720px) {
  .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  form.signup { flex-direction: row; align-items: stretch; }
  form.signup input[type="email"] { flex: 1 1 auto; }
  form.signup button { width: auto; flex: none; }
  .cta { width: auto; }
  .get .cta { min-width: 220px; }
}

@media (min-width: 768px) {
  body { font-size: 19px; }
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  h3 { font-size: 23px; }
  .lead { font-size: 22px; }
  .note, .form-note, .mailcopy, .store-note { font-size: 19px; }
  .hero { padding: 56px 0 40px; }
  section { padding: 44px 0; }
  .card { padding: 28px 30px; }
  blockquote.verse { font-size: 26px; }
  .steps strong { font-size: 23px; }
  .faq h2 { font-size: 28px; }
  .wordmark { font-size: 20px; }
  .nav a { font-size: 17px; }
}

@media (min-width: 1200px) {
  body { font-size: 20px; }
  h1 { font-size: 56px; }
  h2 { font-size: 36px; }
  h3 { font-size: 24px; }
  .lead { font-size: 24px; }
  .note, .form-note, .mailcopy, .store-note { font-size: 20px; }
  .steps strong { font-size: 24px; }
  .faq h2 { font-size: 30px; }
}