/* ==================================================================
   SCALING AFRICA — Editorial Stylesheet
   ------------------------------------------------------------------
   Table of contents:
   1. Design tokens
   2. Reset & base
   3. Layout utilities
   4. Type utilities
   5. Buttons & links
   6. Header & navigation
   7. Hero
   8. Thesis / pillars strip
   9. About the book
   10. What's inside (accordion)
   11. Author
   12. Inside the book
   13. Reviews
   14. Interest form
   15. Purchase CTA
   16. Footer
   17. Image fallback placeholders
   18. Scroll reveal & motion
   19. Responsive adjustments
   ================================================================== */

/* ---------- 0. Local fonts ----------
   Ambit is the book's own display typeface (matches the cover
   treatment) — self-hosted from /assets/fonts. Only Regular and Bold
   are supplied, so the display type scale below uses just those two
   weights. */
@font-face {
  font-family: "Ambit";
  src: url("../assets/fonts/Ambit-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ambit";
  src: url("../assets/fonts/Ambit-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Design tokens ----------
   Accent green (#7CBD3F) and ink navy (#041C36) are sampled directly
   from the real book cover, so the site reads as one product with it.
   --color-accent is a deepened, AA-contrast-safe working shade for
   text/borders on light backgrounds; --color-accent-vivid is the true
   cover green, reserved for large fills, icons, and dark-background use
   where its contrast is verified to hold up. */
:root {
  /* Color */
  --color-bg: #f7f6f1;
  --color-bg-alt: #ecebe2;
  --color-surface: #fffefb;
  --color-ink: #0a1d30;
  --color-ink-soft: #47576a;
  --color-ink-faint: #7c8998;
  --color-line: rgba(4, 28, 54, 0.12);
  --color-line-strong: rgba(4, 28, 54, 0.22);
  --color-accent: #4e7a22;
  --color-accent-dark: #3a5c19;
  --color-accent-soft: #9fcb6c;
  --color-accent-vivid: #7cbd3f;
  --color-dark-bg: #071726;
  --color-dark-surface: #102a42;
  --color-dark-ink: #f6f2ea;
  --color-dark-ink-soft: rgba(246, 242, 234, 0.68);
  --color-dark-line: rgba(246, 242, 234, 0.16);
  --color-amazon-orange: #ff9900;
  --color-amazon-orange-dark: #e88a00;
  --color-amazon-ink: #131a22;

  /* Type */
  --font-display: "Ambit", "Century Gothic", "Futura", -apple-system,
    sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;

  /* Layout */
  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Motion */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-base: 0.6s;
}

/* ---------- 2. Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  transition: top 0.2s var(--ease-editorial);
}

.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---------- 3. Layout utilities ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

section {
  position: relative;
}

.section-pad {
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
}

.section-pad-tight {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.grid-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.grid-split--reverse .grid-split__visual {
  order: 2;
}

/* ---------- 4. Type utilities ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.eyebrow::before {
  content: "";
  width: 1.75em;
  height: 1px;
  background: currentColor;
}

.heading-display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
}

.heading-lg {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
}

.heading-md {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
}

.body-lg {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.body-base {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.text-center {
  text-align: center;
}

.section-intro {
  max-width: 46rem;
}

.section-intro--center {
  margin-inline: auto;
  text-align: center;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- 5. Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease-editorial),
    color 0.25s var(--ease-editorial), border-color 0.25s var(--ease-editorial),
    transform 0.25s var(--ease-editorial);
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-bg);
}

.btn--primary:hover {
  background: var(--color-accent-dark);
}

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

.btn--secondary:hover {
  border-color: var(--color-ink);
}

/* The final purchase CTA only — every other "Buy the Book" button
   stays the site's normal btn--primary. --color-amazon-orange is
   Amazon's own brand orange. .btn__icon--amazon traces the real
   Amazon wordmark (see assets/brand/amazon-logo-full-color.svg) but
   flattens it to one currentColor, since the logo's usual orange
   smile would disappear against this button's orange background. */
.btn--amazon {
  background: var(--color-amazon-orange);
  color: var(--color-amazon-ink);
}

.btn--amazon:hover {
  background: var(--color-amazon-orange-dark);
}

.btn__icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.btn__icon--amazon {
  width: 4.8em;
  height: 1.45em; /* matches the icon-amazon symbol's 603:182 viewBox ratio */
  flex-shrink: 0;
}

.btn--small {
  padding: 0.65rem 1.35rem;
  font-size: 0.85rem;
}

.btn--block {
  width: 100%;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--color-line-strong);
  padding-bottom: 0.15rem;
  transition: border-color 0.25s var(--ease-editorial),
    color 0.25s var(--ease-editorial);
}

.text-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ---------- 6. Header & navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 246, 241, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-editorial),
    box-shadow 0.3s var(--ease-editorial);
}

.site-header--scrolled {
  border-color: var(--color-line);
  box-shadow: 0 8px 24px -20px rgba(23, 20, 15, 0.35);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.15rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

/* The header uses the real wordmark artwork (assets/brand/); the
   footer keeps styled text since the artwork's navy half disappears
   against the footer's dark background. */
.wordmark img {
  height: 26px;
  width: auto;
  display: block;
}

.nav {
  display: none;
}

.nav ul {
  display: flex;
  gap: clamp(1.25rem, 2vw, 2.25rem);
}

.nav a {
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-ink-soft);
  transition: color 0.2s var(--ease-editorial);
}

.nav a:hover {
  color: var(--color-ink);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header__actions .btn {
  display: none;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-ink);
  position: relative;
  transition: transform 0.25s var(--ease-editorial);
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle__bars::before {
  top: -7px;
}

.menu-toggle__bars::after {
  top: 7px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

.mobile-nav {
  border-top: 1px solid var(--color-line);
  background: var(--color-bg);
}

.mobile-nav__inner {
  padding: 1.5rem var(--container-pad) 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-decoration: none;
}

body.nav-open,
body.modal-open {
  overflow: hidden;
}

/* ---------- 7. Hero ---------- */
.hero {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.hero__copy {
  max-width: 34rem;
}

.hero__eyebrow {
  margin-bottom: 1.5rem;
}

.hero__heading {
  margin-bottom: 1.75rem;
}

.hero__lede {
  margin-bottom: 2.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Decorative world-dot-map, seated behind the cover. Oversized and
   softened so it reads as ambient texture rather than competing
   with the book — .hero has overflow:hidden to keep it contained. */
.hero__map {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 165%;
  max-width: 900px;
  transform: translate(-50%, -50%);
  opacity: 0.16;
  pointer-events: none;
}

.hero__map img {
  width: 100%;
}

/* Default (safe, no-JS-required) sizing: fill the column's width,
   height follows the image's own aspect ratio. */
.hero__book-primary {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__book-primary img {
  width: 100%;
  height: auto;
  display: block;
}

/* Once main.js has measured the copy column and set an explicit pixel
   height on .hero__visual (see initHeroHeightMatch), switch to sizing
   by height instead, so the cover matches the headline-to-buttons
   block exactly. A CSS-only version of this is not reliable: a grid
   row sized "auto" can't resolve a percentage-height image without
   first knowing the row's height, which is exactly what it's trying
   to compute — browsers fall back to the image's natural size while
   solving that, inflating the whole row to match. flex-shrink:0 and
   no max-width stop the browser from squashing the width back down
   (which would distort the image) to fit the column; any overflow
   grows rightward, away from the text, and .hero's own
   overflow:hidden clips it cleanly if it reaches the section edge. */
.hero__visual--matched .hero__book-primary {
  height: 100%;
  width: auto;
  flex-shrink: 0;
  margin-left: -9rem;
}

.hero__visual--matched .hero__book-primary img {
  height: 100%;
  width: auto;
}

/* ---------- 8. Thesis / pillars strip ---------- */
.thesis {
  background: var(--color-bg-alt);
  border-block: 1px solid var(--color-line);
}

.thesis__intro {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.thesis__intro .heading-lg {
  margin-bottom: 1.25rem;
}

.thesis__intro .body-lg {
  max-width: 44rem;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.pillar {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line-strong);
}

.pillar__index {
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-accent);
  margin-bottom: 0.9rem;
}

.pillar h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.pillar p {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  line-height: 1.6;
}

/* ---------- 9. About the book ---------- */
.about-book__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-book__image {
  position: relative;
  width: 100%;
}

.about-book__image img {
  width: 100%;
  border-radius: 2px;
}

.about-book__copy .heading-display {
  margin: 1rem 0 1.5rem;
}

.about-book__copy p + p {
  margin-top: 1.1rem;
}

.pull-quote {
  margin-top: 2.25rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
}

/* ---------- 10. What's inside (accordion) ---------- */
.discover {
  background: var(--color-surface);
}

.accordion {
  border-top: 1px solid var(--color-line-strong);
}

.accordion-item {
  border-bottom: 1px solid var(--color-line-strong);
}

.accordion-item__trigger {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2rem);
  text-align: left;
}

.accordion-item__number {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-accent);
  flex-shrink: 0;
  width: 2.5rem;
}

.accordion-item__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 700;
  flex: 1;
}

.accordion-item__icon {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.accordion-item__icon::before,
.accordion-item__icon::after {
  content: "";
  position: absolute;
  background: var(--color-ink);
  transition: transform 0.3s var(--ease-editorial);
}

.accordion-item__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.accordion-item__icon::after {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.accordion-item.is-open .accordion-item__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.accordion-item__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease-editorial);
}

.accordion-item__panel-inner {
  padding: 0 0 clamp(1.5rem, 3vw, 2rem) calc(2.5rem + clamp(1rem, 3vw, 2.5rem));
  max-width: 42rem;
}

/* ---------- 11. Author ---------- */
.author {
  background: var(--color-bg-alt);
}

.author__visual {
  position: relative;
}

.author__frame {
  position: relative;
  aspect-ratio: 1080 / 1350; /* matches author-main.png */
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.author__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author__copy .heading-lg {
  margin: 1rem 0 0.4rem;
}

.author__role {
  font-size: 0.95rem;
  color: var(--color-ink-faint);
  font-style: italic;
  margin-bottom: 1.5rem;
}

.author__bio p + p {
  margin-top: 1.1rem;
}

.author__cta {
  margin-top: 2rem;
}

/* ---------- 13. Reviews ---------- */
.reviews {
  background: var(--color-surface);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}

.review-card {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.review-card__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-accent-soft);
}

.review-card__quote {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--color-ink);
}

.review-card__meta {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
}

.review-card__name {
  font-weight: 600;
  font-size: 0.95rem;
}

.review-card__role {
  font-size: 0.85rem;
  color: var(--color-ink-faint);
}

/* ---------- 14. Interest form ---------- */
.interest {
  background: var(--color-bg-alt);
}

.interest__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.interest__intro .heading-lg {
  margin: 1rem 0 1.25rem;
}

/* Sidebar stays in view while the (usually taller) form scrolls past —
   desktop two-column layout only; mobile stacks them in one column,
   where a pinned intro would just eat into limited screen space. */
@media (min-width: 961px) {
  .interest__intro {
    position: sticky;
    top: 6rem;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  row-gap: 2rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
}

.form-field .optional {
  font-weight: 400;
  color: var(--color-ink-faint);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  transition: border-color 0.2s var(--ease-editorial);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-ink);
}

.form-field textarea {
  resize: none;
  min-height: 6rem;
}

.form-counter {
  align-self: flex-end;
  font-size: 0.78rem;
  color: var(--color-ink-faint);
}

.form-counter.is-at-limit {
  color: var(--color-accent);
}

/* Self-built captcha (see initCaptcha in main.js) */
.captcha__code {
  display: inline-flex;
  align-self: flex-start;
  gap: 0.3em;
  padding: 0.4rem 0.75rem;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--color-ink);
  user-select: none;
}

.captcha__code span {
  display: inline-block;
}

.captcha__row {
  display: flex;
  gap: 0.6rem;
}

.captcha__row input {
  flex: 1;
}

.captcha__refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  flex-shrink: 0;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  transition: border-color 0.2s var(--ease-editorial),
    color 0.2s var(--ease-editorial);
}

.captcha__refresh:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.captcha__refresh .btn__icon {
  width: 1.1em;
  height: 1.1em;
}

.form-field [aria-invalid="true"] {
  border-color: #a13d2b;
}

.form-error {
  font-size: 0.82rem;
  color: #a13d2b;
  min-height: 1.1em;
}

/* Sits beside the captcha field, same grid row — bottom-aligned so the
   button lines up with the captcha's input rather than its label. */
/* form-actions mirrors the captcha field's own label+row structure —
   the spacer keeps the button lined up with the captcha input rather
   than with the label above it. */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-actions__spacer {
  font-size: 0.85rem;
}

.form-submit {
  position: relative;
  width: 100%;
}

.form-submit[data-loading="true"] {
  opacity: 0.75;
  cursor: progress;
}

.form-status {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  min-height: 1.3em;
}

.form-status[data-state="success"] {
  color: #3a6b3f;
}

.form-status[data-state="error"] {
  color: #a13d2b;
}

.form-status[data-state="loading"] {
  color: var(--color-ink-faint);
}

.form-privacy {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--color-ink-faint);
  max-width: 34rem;
}

/* ---------- 15. Purchase CTA ---------- */
.purchase-cta {
  background: var(--color-dark-bg);
  color: var(--color-dark-ink);
  overflow: hidden;
}

.purchase-cta__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.purchase-cta__eyebrow {
  color: var(--color-accent-vivid);
}

.purchase-cta__eyebrow::before {
  background: var(--color-accent-vivid);
}

.purchase-cta .heading-display {
  color: var(--color-dark-ink);
  margin: 1.25rem 0 1.5rem;
}

.purchase-cta__lede {
  color: var(--color-dark-ink-soft);
  margin-bottom: 2.5rem;
  max-width: 32rem;
}

.purchase-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.purchase-cta__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.purchase-cta__image {
  position: relative;
  width: 100%;
}

.purchase-cta__image img {
  width: 100%;
  border-radius: 2px;
}

/* ---------- 16. Footer ---------- */
.site-footer {
  background: var(--color-ink);
  color: rgba(247, 244, 238, 0.72);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid rgba(247, 244, 238, 0.14);
  margin-bottom: 1.75rem;
}

.footer__brand .wordmark {
  color: var(--color-bg);
}

.footer__tagline {
  margin-top: 0.75rem;
  max-width: 22rem;
  font-size: 0.92rem;
  color: rgba(247, 244, 238, 0.6);
}

.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
}

.footer__nav a {
  text-decoration: none;
  font-size: 0.92rem;
  color: rgba(247, 244, 238, 0.72);
  transition: color 0.2s var(--ease-editorial);
}

.footer__nav a:hover {
  color: var(--color-bg);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: rgba(247, 244, 238, 0.5);
}

.footer__social {
  display: flex;
  gap: 1.25rem;
}

.footer__social-link {
  text-decoration: none;
  color: rgba(247, 244, 238, 0.72);
  font-size: 0.82rem;
  transition: color 0.2s var(--ease-editorial);
}

.footer__social-link:hover {
  color: var(--color-bg);
}

/* ---------- 17. Image fallback placeholders ---------- */
[data-fallback-label] {
  position: relative;
}

[data-fallback-label].is-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    135deg,
    rgba(23, 20, 15, 0.04),
    rgba(23, 20, 15, 0.04) 10px,
    rgba(23, 20, 15, 0.07) 10px,
    rgba(23, 20, 15, 0.07) 20px
  );
  border: 1px dashed var(--color-line-strong);
  min-height: 220px;
  border-radius: var(--radius-md);
}

[data-fallback-label].is-missing::before {
  content: "SA";
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-ink-faint);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -140%);
}

[data-fallback-label].is-missing::after {
  content: attr(data-fallback-label);
  font-size: 0.78rem;
  color: var(--color-ink-faint);
  text-align: center;
  max-width: 80%;
  padding: 0 1rem;
}

.purchase-cta [data-fallback-label].is-missing,
[data-fallback-label].is-missing.is-on-dark {
  background: repeating-linear-gradient(
    135deg,
    rgba(246, 242, 234, 0.05),
    rgba(246, 242, 234, 0.05) 10px,
    rgba(246, 242, 234, 0.08) 10px,
    rgba(246, 242, 234, 0.08) 20px
  );
  border-color: var(--color-dark-line);
}

.purchase-cta [data-fallback-label].is-missing::before,
[data-fallback-label].is-missing.is-on-dark::before,
.purchase-cta [data-fallback-label].is-missing::after,
[data-fallback-label].is-missing.is-on-dark::after {
  color: var(--color-dark-ink-soft);
}

/* ---------- 18. Scroll reveal & motion ----------
   Progressive enhancement: [data-reveal] elements are only ever hidden
   once the "js" class confirms main.js is running and will be the one
   to reveal them. If JS is blocked, slow, or errors, content is never
   hidden in the first place — it just renders normally, unanimated. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease-editorial),
    transform 0.8s var(--ease-editorial);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* The fade variant never gets a transform at all, in either state —
   not even the visually-identity translateY(0) above, since ANY
   non-"none" transform value (matrix or otherwise) makes an element
   establish its own containing block, which silently breaks
   position:sticky on itself or on any descendant. Used on
   .interest__intro, which needs to stick while its section scrolls. */
.js [data-reveal="fade"],
.js [data-reveal="fade"].is-visible {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 19. Responsive adjustments ---------- */
@media (min-width: 900px) {
  .nav {
    display: block;
  }

  .header__actions .btn {
    display: inline-flex;
  }

  .menu-toggle {
    display: none;
  }

  .mobile-nav {
    display: none;
  }
}

@media (max-width: 1080px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }

  .reviews-grid {
    grid-template-columns: 1fr;
    max-width: 34rem;
    margin-inline: auto;
  }
}

@media (max-width: 960px) {
  .hero__inner,
  .grid-split,
  .interest__inner,
  .purchase-cta__inner {
    grid-template-columns: 1fr;
  }

  .grid-split__visual,
  .grid-split--reverse .grid-split__visual {
    order: -1;
  }

  .hero__copy {
    max-width: none;
  }

  .interest__intro {
    max-width: none;
  }

  .purchase-cta__visual {
    order: -1;
  }
}

@media (max-width: 720px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-submit {
    width: 100%;
    min-width: 0;
  }

  .footer__top {
    flex-direction: column;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .pillars {
    grid-template-columns: 1fr;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

/* ---------- 20. "Coming Soon" modal ----------
   Shown instead of navigating to Amazon while AMAZON_BOOK_URL is a
   placeholder — see initAmazonModal in main.js. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 28, 54, 0.6);
  opacity: 0;
  transition: opacity 0.25s var(--ease-editorial);
}

.modal--open .modal__backdrop {
  opacity: 1;
}

.modal__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: 0 40px 80px -20px rgba(4, 28, 54, 0.4);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.3s var(--ease-editorial),
    transform 0.3s var(--ease-editorial);
}

.modal--open .modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .modal__backdrop,
  .modal__dialog {
    transition: none;
  }
}

.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--color-ink-soft);
  transition: background-color 0.2s var(--ease-editorial),
    color 0.2s var(--ease-editorial);
}

.modal__close:hover {
  background: var(--color-bg-alt);
  color: var(--color-ink);
}

.modal__close .btn__icon {
  width: 1.1em;
  height: 1.1em;
}

.modal__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__visual img {
  width: 100%;
  max-width: 200px;
  border-radius: 3px;
  box-shadow: 0 24px 48px -16px rgba(4, 28, 54, 0.3);
}

.modal__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  padding-top: 1.5rem;
}

.modal__copy .heading-lg {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

@media (max-width: 640px) {
  .modal__dialog {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .modal__visual img {
    max-width: 150px;
  }

  .modal__copy {
    padding-top: 0;
    align-items: center;
  }
}