/* ==========================================================================
   Gide design system
   One stylesheet for gidehub.com and every page under it.

   Contents
     1. Tokens
     2. Reset and base elements
     3. Layout primitives
     4. Typography
     5. Buttons and pills
     6. Header and navigation
     7. Hero
     8. Cards and grids
     9. Long-form prose
    10. Forms
    11. Footer
    12. Utilities
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* Brand — official Gide palette.
     Primary #1B2B48 · Secondary #F5F5DC · Tertiary #6F7DBC · Accent #D4AF37 */
  --ink: #1b2b48;
  --ink-soft: #2c4066;
  --periwinkle: #6f7dbc;

  /* Gold is an accent for FILLS, not a text colour: #D4AF37 is 2.1:1 on white
     (fails AA) but 6.7:1 on navy and 7.5:1 behind dark text on a button.
     Use --gold-text for small gold type on light surfaces (4.9:1). */
  --gold: #d4af37;
  --gold-bright: #e0c163;
  --gold-text: #8a6d12;
  --gold-ink: #2b2205;
  --gold-wash: #fbf4de;

  --cream: #f5f5dc;
  --cream-deep: #ebebc7;
  --white: #ffffff;

  /* Per-app accents, from each app's own brand card. */
  --app-guard: #00167a;
  --app-calm: #03424d;
  --app-faith: #590438;
  --app-stride: #17341d;
  --app-legacy: #0a2540;
  --app-roots: #7a3e1a;

  /* Text */
  --text: #16283a;
  --text-muted: #55677a;
  --text-on-dark: #eef3f8;
  --text-on-dark-muted: #a9bccd;

  /* Lines and surfaces */
  --line: #e6dfd1;
  --line-strong: #d6cbb6;
  --line-on-dark: rgba(255, 255, 255, 0.14);

  /* Type scale — six steps, nothing in between */
  --fs-xs: 0.8125rem;   /* 13px  eyebrows, meta */
  --fs-sm: 0.9375rem;   /* 15px  captions, footer */
  --fs-base: 1.0625rem; /* 17px  body */
  --fs-lg: 1.1875rem;   /* 19px  lede */
  --fs-xl: 1.375rem;    /* 22px  card titles */
  --fs-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.375rem);  /* section headings */
  --fs-3xl: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);    /* page display */

  /* Spacing — 4px base */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Shape */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 39, 64, 0.06), 0 2px 8px rgba(15, 39, 64, 0.05);
  --shadow: 0 4px 12px rgba(15, 39, 64, 0.07), 0 12px 32px rgba(15, 39, 64, 0.07);
  --shadow-lg: 0 12px 28px rgba(15, 39, 64, 0.1), 0 28px 60px rgba(15, 39, 64, 0.12);

  --wrap: 1120px;
  --wrap-narrow: 720px;
  --header-h: 68px;
}

/* 2. Reset and base -------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--white);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

a { color: var(--ink); text-decoration-color: rgba(15, 39, 64, 0.28); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 3px solid var(--gold-text);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--sp-4); }

/* 3. Layout primitives ----------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: var(--sp-20); }
.section-tight { padding-block: var(--sp-12); }

/* Alternating surfaces give the page chapters instead of one long scroll. */
.section-cream { background: var(--cream); }
.section-ink {
  background: var(--ink);
  color: var(--text-on-dark);
}
.section-ink h1, .section-ink h2, .section-ink h3 { color: var(--white); }
.section-ink p { color: var(--text-on-dark-muted); }
.section-ink a { color: var(--gold-bright); }

.section-head { max-width: 46rem; margin-bottom: var(--sp-12); }
.section-head.centered { margin-inline: auto; text-align: center; }

/* 4. Typography ------------------------------------------------------------ */

h1, h2, h3, h4 {
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--fs-3xl);
  letter-spacing: -0.015em;
}

h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--fs-2xl);
  letter-spacing: -0.01em;
}

h3 { font-size: var(--fs-xl); font-weight: 600; }
h4 { font-size: var(--fs-base); font-weight: 600; }

p { text-wrap: pretty; }
p + p { margin-top: var(--sp-4); }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--sp-3);
}
.section-ink .eyebrow { color: var(--gold-bright); }

.lede {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--text-muted);
}
.section-ink .lede { color: var(--text-on-dark-muted); }

.section-head h2 + .lede { margin-top: var(--sp-4); }

/* 5. Buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-gold {
  background: var(--gold);
  color: var(--gold-ink);
  box-shadow: var(--shadow-sm);
}
.btn-gold:hover { background: var(--gold-bright); box-shadow: var(--shadow); }

.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: var(--ink-soft); }

.btn-outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-outline:hover { border-color: var(--ink); background: var(--cream); }

.section-ink .btn-outline {
  border-color: var(--line-on-dark);
  color: var(--white);
}
.section-ink .btn-outline:hover { background: rgba(255, 255, 255, 0.08); }

.btn-sm { min-height: 38px; padding: var(--sp-2) var(--sp-4); }
.btn-block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

/* Status pills ------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* Used for the "Free" marker on book cards. */
.pill-available { background: #e7f4ec; color: #1d6b3f; }

/* 6. Header and navigation ------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--ink);
}
.brand-mark { width: 40px; height: 40px; border-radius: 10px; }
.brand-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand-light { color: var(--white); }
.brand-light .brand-name { color: var(--white); }

.nav-desktop ul {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  list-style: none;
  padding: 0;
}
.nav-desktop a {
  display: inline-block;
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
}
.nav-desktop a:hover { color: var(--ink); }
.nav-desktop a.is-current { color: var(--ink); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* The menu button the old site never had. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle-bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle-bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bars i:nth-child(1) { top: 0; }
.nav-toggle-bars i:nth-child(2) { top: 6px; }
.nav-toggle-bars i:nth-child(3) { top: 12px; }

.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-panel {
  border-top: 1px solid var(--line);
  background: var(--white);
  padding-block: var(--sp-6) var(--sp-8);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.nav-panel[hidden] { display: none; }

.nav-panel ul { list-style: none; padding: 0; }
.nav-panel a {
  display: block;
  min-height: 48px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-panel-primary a { font-size: var(--fs-lg); font-weight: 600; }
.nav-panel-secondary { margin-top: var(--sp-4); }
.nav-panel-secondary a { font-size: var(--fs-base); color: var(--text-muted); }
.nav-panel .btn { margin-top: var(--sp-6); }

@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
}

/* 7. Hero ------------------------------------------------------------------ */

/* One headline, one sentence, one action. */
.hero {
  position: relative;
  padding-block: var(--sp-24) var(--sp-20);
  background:
    radial-gradient(60rem 30rem at 70% -10%, var(--gold-wash), transparent 70%),
    linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.hero .wrap { max-width: 52rem; }
.hero h1 { margin-bottom: var(--sp-6); }
.hero .lede { margin-inline: auto; max-width: 40rem; }
.hero .btn-row { justify-content: center; }

.hero-note {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.hero-compact { padding-block: var(--sp-16) var(--sp-12); }

/* Page header for interior pages */
.page-head {
  padding-block: var(--sp-16) var(--sp-12);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.page-head .wrap { max-width: 46rem; }
.page-head .lede { margin-top: var(--sp-4); }

/* 8. Cards and grids ------------------------------------------------------- */

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-8);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card p { color: var(--text-muted); }
.card h3 a { text-decoration: none; }

a.card, .card-link { text-decoration: none; color: inherit; }
a.card:hover, .card:has(a:hover) {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}

.section-ink .card {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-on-dark);
  box-shadow: none;
}

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  margin-bottom: var(--sp-2);
}

/* App cards — each carries its own brand accent from --app-*. */
.app-card,
.app-card-quiet { position: relative; --accent: var(--gold); }
.app-card { border-top: 3px solid var(--accent); }
[data-app="guard"]  { --accent: var(--app-guard); }
[data-app="calm"]   { --accent: var(--app-calm); }
[data-app="faith"]  { --accent: var(--app-faith); }
[data-app="stride"] { --accent: var(--app-stride); }
[data-app="legacy"] { --accent: var(--app-legacy); }
[data-app="roots"]  { --accent: var(--app-roots); }
.app-card-quiet { border-left: 3px solid var(--accent); }
.app-card .card-icon,
.app-card-quiet .card-icon { box-shadow: 0 0 0 1px var(--line); }
.app-card .pill { align-self: flex-start; }
.app-card .btn-row { margin-top: auto; padding-top: var(--sp-6); }

.app-card-quiet {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
}
.app-card-quiet .card-icon { width: 40px; height: 40px; margin: 0; flex: none; }
.app-card-quiet h3 { font-size: var(--fs-base); }
.app-card-quiet p { font-size: var(--fs-sm); }

/* Book cards */
.book-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.book-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.book-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  background: var(--cream-deep);
}
.book-card h3 { font-size: var(--fs-base); }
.book-card p { font-size: var(--fs-sm); color: var(--text-muted); }

/* Feature list */
.feature-list { list-style: none; padding: 0; display: grid; gap: var(--sp-6); }
.feature-list li { display: grid; gap: var(--sp-1); }
.feature-list b { font-size: var(--fs-base); color: var(--ink); }
.feature-list span { color: var(--text-muted); }
.section-ink .feature-list b { color: var(--white); }
.section-ink .feature-list span { color: var(--text-on-dark-muted); }

/* Numbered steps */
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { position: relative; padding-left: var(--sp-12); }
.steps li + li { margin-top: var(--sp-6); }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-wash);
  color: var(--gold-text);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* Episode rows */
.episode {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--line);
}
.episode:first-of-type { border-top: 1px solid var(--line); }
.episode-meta { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); }
.episode h3 { font-size: var(--fs-lg); }
.episode p { color: var(--text-muted); }
.episode audio { width: 100%; margin-top: var(--sp-2); }

/* FAQ */
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6);
  background: var(--white);
}
.faq details + details { margin-top: var(--sp-3); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 32px;
  display: flex;
  align-items: center;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; color: var(--gold-text); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { margin-bottom: var(--sp-3); }
.faq p { color: var(--text-muted); }

/* Callout */
.callout {
  padding: var(--sp-8);
  background: var(--gold-wash);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.callout h3 { margin-bottom: var(--sp-2); }
.callout p { color: var(--text-muted); }

/* Final CTA band */
.cta-band { text-align: center; }
.cta-band .wrap { max-width: 44rem; }
.cta-band .btn-row { justify-content: center; }

/* 9. Long-form prose ------------------------------------------------------- */

.prose {
  max-width: 44rem;
  padding-block: var(--sp-16);
}
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 {
  font-size: 1.625rem;
  margin-top: var(--sp-12);
  padding-top: var(--sp-2);
}
.prose h3 { font-size: var(--fs-xl); margin-top: var(--sp-8); }
.prose ul, .prose ol { padding-left: var(--sp-6); }
.prose li + li { margin-top: var(--sp-2); }
.prose a { color: var(--ink); font-weight: 500; }
.prose strong { color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--sp-12); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line); }
.prose .updated { font-size: var(--fs-sm); color: var(--text-muted); }

.toc {
  padding: var(--sp-6);
  background: var(--cream);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.toc ul { list-style: none; padding: 0; columns: 2; column-gap: var(--sp-8); }
.toc li { break-inside: avoid; margin-bottom: var(--sp-2); }
.toc a { font-size: var(--fs-sm); }

/* 10. Forms ---------------------------------------------------------------- */

.form { display: grid; gap: var(--sp-5); max-width: 34rem; }
.field { display: grid; gap: var(--sp-2); }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.field textarea { min-height: 10rem; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--gold-text); }

/* 11. Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--text-on-dark-muted);
  padding-block: var(--sp-16) var(--sp-8);
  font-size: var(--fs-sm);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) 2.4fr;
  gap: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--line-on-dark);
}
.footer-tagline { margin-top: var(--sp-4); color: var(--white); font-weight: 600; }
.footer-blurb { margin-top: var(--sp-1); }
.footer-email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--sp-2);
  color: var(--gold);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--sp-8);
}
.footer-col h2 {
  font-family: Inter, sans-serif;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col a {
  color: var(--text-on-dark-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* Padding rather than margin, so the tap area is the spacing. */
  min-height: 40px;
  padding-block: var(--sp-2);
}
.footer-col a:hover { color: var(--white); text-decoration: underline; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-8);
  font-size: var(--fs-xs);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.footer-legal a {
  color: var(--text-on-dark-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.footer-legal a:hover { color: var(--white); text-decoration: underline; }

/* 12. Utilities ------------------------------------------------------------ */

.centered { text-align: center; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-6 > * + * { margin-top: var(--sp-6); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .section { padding-block: var(--sp-16); }
  .hero { padding-block: var(--sp-16) var(--sp-12); }
  .footer-top { grid-template-columns: 1fr; gap: var(--sp-10); }
  .toc ul { columns: 1; }
  .btn-row .btn { flex: 1 1 100%; }
}

/* Book detail ------------------------------------------------------------- */

.book-detail {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
}
.book-detail-cover { position: sticky; top: calc(var(--header-h) + var(--sp-8)); }
.book-detail-body > * + * { margin-top: var(--sp-4); }
.book-detail-body h3 { margin-top: var(--sp-8); }
.book-format { display: flex; align-items: center; gap: var(--sp-3); }

.check-list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.check-list li { position: relative; padding-left: var(--sp-8); color: var(--text-muted); }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}

.infographic {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--cream);
}

@media (max-width: 780px) {
  .book-detail { grid-template-columns: 1fr; gap: var(--sp-8); }
  .book-detail-cover { position: static; max-width: 14rem; }
}

/* ==========================================================================
   13. Visual treatment
   The layout above is deliberately plain; this section is what gives the
   pages something to look at. Product screenshots and each app's own brand
   colour do the work, so nothing here is decoration for its own sake.
   ========================================================================== */

/* Split hero with product art ---------------------------------------------- */

.hero-split { text-align: left; padding-block: var(--sp-20) var(--sp-16); }
.hero-split .wrap { max-width: var(--wrap); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-16);
  align-items: center;
}
.hero-split .lede { margin-inline: 0; max-width: 34rem; }
.hero-split .btn-row { justify-content: flex-start; }
.hero-split h1 { letter-spacing: -0.025em; }

/* A fanned cluster of real screens, rather than a stock illustration. */
.hero-art {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
}
.hero-art img {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-lg);
  background: var(--white);
}
.hero-art img:nth-child(1) { transform: rotate(-5deg) translateY(14px); }
.hero-art img:nth-child(2) { transform: translateY(-14px) scale(1.06); z-index: 2; }
.hero-art img:nth-child(3) { transform: rotate(5deg) translateY(14px); }

/* Gold rule under a display heading, instead of another plain block of text. */
.rule-top { position: relative; padding-top: var(--sp-6); }
.rule-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--gold);
}
.centered.rule-top::before { left: 50%; transform: translateX(-50%); }

/* App cards carrying their own colour ------------------------------------- */

.app-card {
  padding: 0;
  overflow: hidden;
  border-top: 0;
  gap: 0;
}

/* The coloured band is the app's identity, so it gets real estate rather
   than a hairline. --accent comes from the [data-app] rules above. */
.app-card-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  min-height: 104px;
  background:
    radial-gradient(18rem 10rem at 85% -30%, rgba(255, 255, 255, 0.28), transparent 70%),
    linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, #000) 100%);
}
.app-card-head img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  padding: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.app-card-head h3 {
  color: #fff;
  font-size: var(--fs-xl);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}

.app-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  flex: 1;
}
.app-card-body .btn-row { margin-top: auto; padding-top: var(--sp-4); }

/* Screens band ------------------------------------------------------------- */

.screens-band { overflow: hidden; }
.screens-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9.5rem, 1fr);
  gap: var(--sp-6);
  align-items: center;
}
.screens-strip img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--line-on-dark);
  box-shadow: var(--shadow-lg);
}
.screens-strip img:nth-child(even) { transform: translateY(-18px); }

/* Books on a dark band so the covers carry the section ---------------------- */

.book-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-6);
  align-items: end;
}
.book-showcase a { text-decoration: none; display: block; }
.book-showcase img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  transition: transform 0.2s ease;
}
.book-showcase a:hover img { transform: translateY(-6px); }
.book-showcase span {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .hero-art { max-width: 26rem; margin-inline: auto; }
}
@media (max-width: 720px) {
  .screens-strip { grid-auto-columns: minmax(8rem, 1fr); }
  .screens-strip img:nth-child(even) { transform: none; }
}