/* Bible Reading Companion — marketing one-pager.
   Palette mirrors the app: BrcRed 0xFF9C1F1B, BrcGreen 0xFF38B84E. */

:root {
  --red: #9C1F1B;
  --red-deep: #7C1512;
  --green: #38B84E;
  --green-dark: #036500;
  --paper: #FAF6F4;
  --ink: #2B2220;
  --ink-soft: #6E605C;
  --pink-tint: #F7E9E8;
  --green-tint: #E9F6EC;
  --warm-tint: #F3EADF;
  --display: "Fraunces", Georgia, serif;
  --body: "Public Sans", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
}

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

a { color: var(--red); }

/* ---------- Header ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px min(6vw, 64px);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}

.roundel {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1px solid #EADDD9;
  border-radius: 50%;
}
.roundel img { width: 30px; height: 30px; }

.wordmark-text { display: flex; flex-direction: column; line-height: 1.2; }
.wordmark-text strong { font-size: 17px; letter-spacing: 2px; color: var(--red); }
.wordmark-text span:last-child { font-size: 11.5px; color: var(--ink-soft); }

.signin {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--red);
  border: 1.5px solid var(--red);
  border-radius: 22px;
  padding: 8px 22px;
  transition: background .15s, color .15s;
}
.signin:hover, .signin:focus-visible { background: var(--red); color: #fff; }

/* ---------- Hero ---------- */

.hero {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 90px) 24px 56px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--green-dark);
}

.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(38px, 7vw, 68px);
  line-height: 1.05;
  color: var(--red-deep);
  letter-spacing: -0.5px;
}
.hero h1 em { font-style: italic; font-weight: 400; color: var(--ink); }

.lede {
  max-width: 560px;
  margin: 22px auto 30px;
  font-size: 17.5px;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 58px;
}

.cta {
  display: inline-block;
  background: var(--green);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15.5px;
  padding: 14px 34px;
  border-radius: 28px;
  box-shadow: 0 6px 18px rgba(56, 184, 78, .35);
  transition: transform .15s, box-shadow .15s;
}
.cta:hover, .cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(56, 184, 78, .4);
}

.platforms-note { font-size: 13px; color: var(--ink-soft); letter-spacing: 1px; }

/* ---------- Signature: tracking grid ---------- */

.tracker {
  margin: 0 auto;
  max-width: 560px;
  background: #fff;
  border: 1px solid #EFE4E0;
  border-radius: 18px;
  padding: 22px 26px 18px;
  box-shadow: 0 14px 40px rgba(124, 21, 18, .07);
  text-align: left;
}

.tracker-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.tracker-book {
  font-weight: 700;
  font-size: 15px;
  color: var(--red);
  letter-spacing: .5px;
}
.tracker-chapters {
  font-size: 12.5px;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tracker-badge {
  margin-left: auto;
  background: var(--green);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 14px;
  padding: 3px 14px;
}

.tracker-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 7px;
}

.pill {
  height: 16px;
  border-radius: 5px;
  background: #E5DCD8;
  animation: fill-in .3s ease-out forwards;
  animation-delay: calc(.35s + var(--i) * .045s);
}

@keyframes fill-in {
  to { background: var(--green); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill { animation: none; background: var(--green); }
  .cta, .signin { transition: none; }
}

.tracker-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ---------- Features ---------- */

.features {
  max-width: 980px;
  margin: 0 auto;
  padding: 30px 24px 10px;
}

.features h2, .phone-strip h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(26px, 4vw, 36px);
  text-align: center;
  margin: 0 0 46px;
}
.features h2 { color: var(--ink); }

.feature {
  display: grid;
  grid-template-columns: minmax(240px, 5fr) minmax(280px, 7fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  margin-bottom: 72px;
}
.feature:nth-child(odd of .feature) { direction: rtl; }
.feature:nth-child(odd of .feature) > * { direction: ltr; }

.feature-copy h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 10px;
  color: var(--red-deep);
}
.feature-copy p { margin: 0; color: var(--ink-soft); }

.feature-shot {
  border-radius: 18px;
  padding: clamp(16px, 3vw, 32px);
  box-shadow: 0 10px 30px rgba(43, 34, 32, .08);
}
.feature-shot img { border-radius: 10px; }
.tint-green { background: var(--green-tint); }
.tint-pink  { background: var(--pink-tint); }
.tint-warm  { background: var(--warm-tint); padding: 0; overflow: hidden; }
.tint-warm img { border-radius: 18px; }

.also {
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin: 0 0 30px;
}

/* ---------- Platforms strip ---------- */

.phone-strip {
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 64px 24px 72px;
  border-radius: 48px 48px 0 0;
}
.phone-strip h2 { color: #fff; margin-bottom: 16px; }
.phone-strip p {
  max-width: 520px;
  margin: 0 auto 30px;
  color: #F3D9D7;
}
.cta-light {
  background: #fff;
  color: var(--red);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.cta-light:hover, .cta-light:focus-visible { box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }

/* ---------- Footer ---------- */

footer {
  background: var(--red-deep);
  color: #E9C9C6;
  text-align: center;
  padding: 36px 24px 42px;
  font-size: 13px;
}
.footer-logo {
  width: min(260px, 70vw);
  margin: 0 auto 14px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 18px;
}
footer a { color: #fff; }

.maker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  text-decoration: none;
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #E9C9C6;
  opacity: .85;
}
.maker:hover, .maker:focus-visible { opacity: 1; }
.maker img { height: 22px; width: auto; }

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  .feature { grid-template-columns: 1fr; margin-bottom: 56px; }
  .feature:nth-child(odd of .feature) { direction: ltr; }
  .wordmark-text span:last-child { display: none; }
}