/* BibleFolio home (the store front): the navy header of the sales page, a list of guides,
   and the three promises every purchase carries. One guide today; more cards drop into .guides. */
:root {
  --navy-950: #001B35; --navy-900: #022B4F; --ink: #0F2747; --text: #3C4859; --muted: #5F6B7B;
  --gold: #FFCB4F; --gold-light: #FFDA78; --gold-deep: #E7A93A; --gold-text: #F4C04C;
  --cream: #FFFBF4; --cream-2: #FEF6EA; --cream-3: #FEF1DA; --card: #FFFDF8; --line: #EBDDBB;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--text); font: 400 1.0625rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  border: 1px solid #D99B2C; border-radius: 6px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 45%, var(--gold-deep));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 2px 6px -2px rgb(120 80 10 / 0.45);
  color: var(--ink); font: 700 1.08rem/1.1 var(--sans); text-decoration: none;
  transition: filter 160ms ease;
}
.btn:hover { filter: brightness(1.05); }

/* Header */
.top {
  position: relative; isolation: isolate; padding: 22px var(--gutter) clamp(40px, 6vw, 64px); text-align: center; color: #fff;
  background: radial-gradient(115% 85% at 50% 30%, #11426F 0%, #062F57 45%, var(--navy-950) 100%);
}
.top__logo { margin-bottom: clamp(26px, 5vw, 44px); font: 700 1.6rem/1 var(--serif); letter-spacing: -0.01em; }
.top__eyebrow { margin-bottom: 12px; font: 700 0.8rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); }
.top__title { max-width: 16ch; margin: 0 auto; font: 700 clamp(2.2rem, 1.2rem + 4vw, 4rem)/1.05 var(--serif); letter-spacing: -0.022em; text-wrap: balance; }
.top__lede { max-width: 54ch; margin: 16px auto 26px; font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.22rem); line-height: 1.5; color: rgb(255 255 255 / 0.9); text-wrap: pretty; }

/* Guides */
.guides { max-width: 1060px; margin: 0 auto; padding: clamp(40px, 7vw, 72px) var(--gutter) clamp(28px, 4vw, 40px); }
.guides__title { margin-bottom: 22px; font: 700 clamp(1.85rem, 1.3rem + 2vw, 2.6rem)/1.1 var(--serif); color: var(--ink); text-align: center; }
.guide { display: grid; gap: 22px; padding: clamp(18px, 3vw, 30px); border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 18px 40px -26px rgb(15 39 71 / 0.45); }
.guide__media { position: relative; display: block; min-height: 240px; border-radius: 8px; background: radial-gradient(110% 90% at 50% 35%, #11426F, var(--navy-950)); overflow: hidden; }
.guide__page { position: absolute; right: 5%; top: 9%; width: 62%; rotate: 3deg; border-radius: 3px; box-shadow: 0 16px 30px -12px rgb(0 0 0 / 0.65); }
.guide__binder { position: absolute; left: 7%; bottom: 6%; width: 38%; filter: drop-shadow(0 14px 16px rgb(0 0 0 / 0.5)); }
.guide__kind { font: 700 0.78rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); }
.guide__name { margin: 8px 0 10px; font: 700 clamp(1.5rem, 1.25rem + 1vw, 2rem)/1.15 var(--serif); }
.guide__name a { color: var(--ink); text-decoration: none; }
.guide__name a:hover { text-decoration: underline; }
.guide__text { max-width: 52ch; font: 400 1.08rem/1.5 var(--serif); }
.guide__prices { margin: 16px 0 20px; color: var(--ink); }
.guide__prices b { margin-right: 6px; font: 700 2rem/1 var(--serif); letter-spacing: -0.02em; }
.guide__prices span { display: block; margin-top: 4px; color: var(--muted); }
@media (min-width: 820px) {
  .guide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 36px; }
  .guide__media { min-height: 340px; }
}
.guides__more { margin-top: 18px; color: var(--muted); text-align: center; font-style: italic; font-family: var(--serif); }

/* Promises */
.promises { display: grid; gap: 14px; max-width: 1060px; margin: 0 auto clamp(40px, 6vw, 64px); padding: 0 var(--gutter); list-style: none; }
.promises li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream-2); }
.promises svg { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--cream-3); color: var(--gold-deep); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.promises b { display: block; font: 700 1.02rem/1.3 var(--sans); color: var(--ink); }
.promises span { font-size: 0.97rem; color: var(--text); }
@media (min-width: 820px) { .promises { grid-template-columns: repeat(3, 1fr); } }