/* ZOLL Discovery — editorial layout.
   The page renders the discovery agent's answer as a magazine article, not a
   chat reply: huge headline, snowflake sub-headings, alternating image-left /
   image-right sections, ghost text inputs, real Apple-style arrival
   animations. Mono palette; the only colour the audience sees is a small
   uppercase kicker line above each chapter. */

:root {
  --zoll-white: #ffffff;
  --zoll-bg: #fafaf7;
  --zoll-bg-soft: #f1ede4;
  --zoll-cream: #f5efe2;
  --zoll-charcoal: #111418;
  --zoll-charcoal-soft: #2c3138;
  --zoll-grey-deep: #4a5159;
  --zoll-grey: #7a838d;
  --zoll-grey-line: #ebe8e0;
  --zoll-grey-line-strong: #cfcdc4;
  --zoll-blue: #003a6c;
  --zoll-blue-dark: #002a4f;
  --zoll-blue-soft: #e6ecf3;
  --zoll-red: #c8102e;

  /* Audience accent — only used in the kicker + progress bar. Everywhere else
     stays monochrome. */
  --aud-personal:        #2f7d4f;
  --aud-clinician:       #0066b3;
  --aud-first-responder: #c8102e;
  --aud-ems:             #c8102e;
  --aud-fire:            #c8102e;
  --aud-procurement:     #5b3aab;
  --aud-public-access:   #2f7d4f;
  --aud-workplace:       #2f7d4f;
  --aud-patient:         #2f7d4f;
  --aud-non-acute:       #0066b3;
  --aud-military:        #4a5a3c;
  --aud-unknown:         #111418;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Real serif stack, Georgia-first. Used for italic emphasis (spell-
     correction badge, pull-quote headings, footer strap) — Inter italic
     was leaving a clipped-looking slant; Georgia's italic has proper
     serif terminations and reads better at small sizes too. */
  --font-serif: Georgia, "PT Serif", "Iowan Old Style", "Times New Roman", serif;

  --gutter: clamp(20px, 4vw, 64px);
  --stage-max: 1240px;
  --reading-max: 720px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Use the dynamic viewport on browsers that support it so 100dvh works
     for the drawer / hero zone on iOS Safari. */
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--zoll-bg);
  color: var(--zoll-charcoal);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* iOS Safari sometimes shifts the layout viewport when the soft keyboard
     opens, exposing any element that's even a hair wider than the viewport
     and producing a phantom right-side gap. Clamp the page width here so
     no descendant can introduce horizontal scroll. */
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
/* Long unbreakable strings (URLs, model numbers like "RescueNet-EventSummary")
   are a common source of mobile overflow inside the chapter body. Wrap them
   even if it means an in-word break. */
.section-body, .section-heading, .chapter-headline,
.chapter-deck, .related-card-title { overflow-wrap: anywhere; }
/* No 300ms tap delay on legacy iOS; modern browsers ignore this safely. */
button, a, [role="button"] { touch-action: manipulation; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }
input { font: inherit; }

/* ─── Reading-progress bar ─────────────────────────────────────────── */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.progress::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--aud, var(--zoll-charcoal));
  transition: width 0.12s linear, background 0.4s var(--ease-out);
}

/* ─── Topbar ───────────────────────────────────────────────────────── */
.topbar {
  height: 64px;
  background: rgba(250, 250, 247, 0.84);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--zoll-grey-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand { display: flex; align-items: center; gap: 14px; }
/* The official ZOLL wordmark is shipped as a white-on-transparent PNG. We
   render it via mask-image so we can paint it in whatever colour the
   surface demands (brand blue on the topbar, white on the footer band)
   without needing two asset files. PNG aspect is 1034x300 ≈ 3.447:1. */
.brand-logo {
  display: block;
  height: 26px;
  width: 90px;
  background-color: var(--zoll-blue);
  -webkit-mask: url("zoll-logo.png") no-repeat center / contain;
          mask: url("zoll-logo.png") no-repeat center / contain;
}
.brand-wordmark {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--zoll-blue);
}

/* ─── Top-right utility cluster (locale pill + burger) ─────────────── */
.top-utility {
  display: flex;
  align-items: center;
  gap: 10px;
}
.burger {
  position: relative;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 0.15s;
  touch-action: manipulation;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.burger:hover { background: rgba(17, 20, 24, 0.04); }
.burger-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--zoll-charcoal);
  border-radius: 1px;
  transition: transform 0.28s var(--ease-out), opacity 0.18s, width 0.28s var(--ease-out);
}
.burger[aria-expanded="true"] .burger-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
  width: 22px;
}
.burger[aria-expanded="true"] .burger-bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.burger[aria-expanded="true"] .burger-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
  width: 22px;
}

/* Generic icon button (still used inside dev-menu raw button etc.) */
.icon-btn {
  background: transparent;
  border: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border-radius: var(--radius-md);
  color: var(--zoll-charcoal-soft);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}
.icon-btn:hover { background: var(--zoll-bg-soft); color: var(--zoll-charcoal); }

/* ─── Nav drawer ──────────────────────────────────────────────────── */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 20, 24, 0.42);
  z-index: 70;
  opacity: 0;
  transition: opacity 0.32s var(--ease-out);
}
.nav-backdrop.is-open { opacity: 1; }

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(380px, 100vw);
  height: 100vh;
  height: 100dvh;
  background: var(--zoll-bg);
  border-left: 1px solid var(--zoll-grey-line);
  box-shadow: -24px 0 48px rgba(17, 20, 24, 0.08);
  z-index: 80;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.36s var(--ease-out);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.is-open { transform: translateX(0); }

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--zoll-grey-line);
}
.nav-drawer-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--zoll-grey);
}
.nav-drawer-close {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--zoll-charcoal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}
.nav-drawer-close:hover { background: var(--zoll-bg-soft); }
.nav-drawer-close .material-icons { font-size: 22px; }

.nav-drawer-links {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 8px;
}
.nav-link {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--zoll-charcoal);
  border-bottom: 1px solid var(--zoll-grey-line);
  transition: color 0.15s, padding-left 0.18s var(--ease-out);
  touch-action: manipulation;
}
.nav-link:last-child { border-bottom: 0; }
.nav-link:hover { padding-left: 4px; }
.nav-link-cta {
  margin-top: 6px;
  color: var(--zoll-charcoal);
}
.nav-link-cta::after {
  content: "→";
  margin-left: auto;
  font-weight: 400;
  color: var(--zoll-grey);
  transition: transform 0.18s var(--ease-out), color 0.15s;
}
.nav-link-cta:hover::after {
  color: var(--zoll-charcoal);
  transform: translateX(4px);
}

.nav-drawer-sub {
  display: flex;
  flex-direction: column;
  padding: 16px 24px 0;
  margin-top: 8px;
  border-top: 1px solid var(--zoll-grey-line);
}
.nav-sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  text-align: left;
  font: 500 14px/1.4 var(--font-display);
  color: var(--zoll-charcoal-soft);
  cursor: pointer;
  letter-spacing: -0.005em;
  touch-action: manipulation;
}
.nav-sublink:hover { color: var(--zoll-charcoal); }
.nav-sublink-dev { color: var(--zoll-grey); }

.nav-drawer-foot {
  margin-top: auto;
  padding: 24px;
  border-top: 1px solid var(--zoll-grey-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nav-drawer-phone {
  font-size: 18px;
  font-weight: 600;
  color: var(--zoll-charcoal);
  letter-spacing: -0.01em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav-drawer-country {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--zoll-grey-deep);
  min-height: 36px;
}
.nav-drawer-country .material-icons {
  font-size: 14px;
  transition: transform 0.18s var(--ease-out);
}
.nav-drawer-country:hover { color: var(--zoll-charcoal); }
.nav-drawer-country:hover .material-icons { transform: translate(2px, -2px); }

/* Body scroll lock — applied while drawer is open. Avoids the iOS Safari
   `overflow:hidden on html` scroll-jump bug by pinning the body in place
   and restoring scrollY on close. Set by zoll.js. */
body.has-drawer {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ─── Stage (wraps prompt + chapters + continue) ──────────────────── */
.stage {
  --aud: var(--aud-unknown);
  width: 100%;
  min-height: calc(100vh - 64px);
  min-height: calc(100dvh - 64px);
}
@media (max-width: 600px) {
  .stage { min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); }
}

/* ─── Prompt zone (pre-query) ─────────────────────────────────────── */
/* In the hero state the prompt has big padding so the input visually sits
   in the middle of the viewport. When `is-compact` is added (on submit),
   the padding collapses, the eyebrow + headline fade away, and the prompt
   becomes sticky under the topbar so the input stays at the top of the
   page while chapters fade in below. No JS-driven scroll — the page grows
   downward naturally. */
.prompt {
  max-width: none;
  margin: 0;
  padding: clamp(80px, 16vh, 200px) var(--gutter) clamp(60px, 10vh, 120px);
  text-align: center;
  position: relative;
  background: var(--zoll-bg);
  transition: padding 0.55s var(--ease-out);
  animation: prompt-in 0.7s var(--ease-out) both;
}
.prompt-form {
  max-width: 720px;
  margin: 0 auto;
}

@keyframes prompt-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Eyebrow + headline collapse together when compact: opacity + transform
   for the fade-up, max-height + margin for the height collapse so the
   input slides up smoothly into the space they leave. overflow:hidden is
   only applied in the compact state — in hero state we leave it visible
   so descenders (y, g) in "Ready when you are." aren't clipped. */
.prompt-eyebrow,
.prompt-headline {
  transition: opacity 0.32s var(--ease-out),
              transform 0.42s var(--ease-out),
              max-height 0.55s var(--ease-out),
              margin 0.55s var(--ease-out);
  max-height: 400px;
}

/* Compact state: symmetric vertical padding (same top + bottom) so the
   input sits visually centred in the band. Also becomes sticky under the
   topbar (64px) so the input stays anchored to the top of the page while
   chapters fade in beneath. Frosted background keeps content scrolling
   underneath legible. */
.prompt.is-compact {
  padding: 14px var(--gutter);
  text-align: center;
  position: sticky;
  top: 64px;
  z-index: 30;
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  /* No bar-bottom border — the ghost-input's own underline below the text
     is enough visual separation from the content below. */
}
@media (max-width: 600px) {
  .prompt.is-compact { top: 56px; }
}
.prompt.is-compact .prompt-eyebrow,
.prompt.is-compact .prompt-headline {
  opacity: 0;
  transform: translateY(-12px);
  max-height: 0;
  margin: 0;
  overflow: hidden;  /* only clip during the collapse animation */
  pointer-events: none;
}
/* The hero rule `prompt-headline + ghost-form { margin-top: 56px }` would
   otherwise leave 56px of dead space above the input once the headline
   collapses — wipe it in compact mode so the input is vertically centred. */
.prompt.is-compact .prompt-headline + .ghost-form {
  margin-top: 0;
}
.prompt.is-compact .prompt-input {
  font-size: clamp(16px, 1.3vw, 19px);
  padding: 10px 0;
  text-align: left;
}

/* Loading state — animate the 2px top progress bar as an indeterminate
   sweep while a request is in flight, AND fade in a "Searching zoll.com"
   row below the compact prompt input. The row only shows when both
   body.is-loading AND prompt.is-compact are set, so it doesn't flash in
   the hero state. A short transition-delay matches the hero collapse
   timing so the dots fade in just after the input reaches the top. */
body.is-loading .progress::after {
  width: 30%;
  background: var(--aud, var(--zoll-charcoal));
  animation: progress-sweep 1.4s ease-in-out infinite;
  transition: none;
}
@keyframes progress-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Loading dots hang BELOW the sticky-bar's border. Absolute positioning
   keeps them out of the bar's layout so toggling them doesn't change the
   bar height (no jump when content arrives). Hidden in hero state and
   only revealed when both body.is-loading AND prompt.is-compact match. */
.prompt-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;        /* just below the bar's border-bottom */
  padding: 26px 0 30px;
  opacity: 0;
  transition: opacity 0.28s var(--ease-out);
}
body.is-loading .prompt.is-compact .prompt-loading {
  opacity: 1;
  transition-delay: 0.18s;  /* let the input settle at the top first */
}
.prompt-loading-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zoll-grey);
  animation: prompt-loading-bounce 1.1s ease-in-out infinite;
}
.prompt-loading-dot:nth-child(2) { animation-delay: 0.15s; }
.prompt-loading-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes prompt-loading-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.35; }
  40%           { transform: scale(1);   opacity: 1; }
}

.prompt-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--zoll-grey);
  font-size: 11px;
  font-weight: 600;
  margin: 0 0 24px;
}
.prompt-headline {
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 0 22px;
  color: var(--zoll-charcoal);
}
.prompt-deck {
  color: var(--zoll-grey-deep);
  font-size: clamp(18px, 1.6vw, 22px);
  margin: 0 auto 56px;
  max-width: 640px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.prompt-headline + .ghost-form {
  /* When there's no deck between the headline and the form, give the form
     more breathing room so the layout doesn't feel cramped. */
  margin-top: 56px;
}

/* ─── Ghost form (used in prompt + continue) ──────────────────────── */
.ghost-form {
  display: flex;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  border: 0;
  background: transparent;
  border-bottom: 1px solid var(--zoll-grey-line-strong);
  transition: border-color 0.25s var(--ease-out);
  transform-origin: center;
}
.ghost-form:focus-within {
  border-bottom-color: var(--zoll-charcoal);
  animation: input-pulse 0.55s var(--ease-out);
}
@keyframes input-pulse {
  0%   { transform: scaleX(1); }
  45%  { transform: scaleX(1.006); }
  100% { transform: scaleX(1); }
}
.ghost-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-weight: 500;
  color: var(--zoll-charcoal);
  padding: 18px 0;
  letter-spacing: -0.01em;
}
.prompt-input {
  font-size: clamp(20px, 1.8vw, 28px);
  text-align: left;
}
.continue-input {
  font-size: clamp(18px, 1.4vw, 22px);
  text-align: left;
}
.ghost-input::placeholder {
  color: var(--zoll-grey);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.ghost-submit {
  background: transparent;
  border: 0;
  padding: 10px;
  margin-left: 8px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--zoll-grey);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.2, 0, 0, 1),
              color 0.15s,
              transform 0.22s cubic-bezier(0.2, 0, 0, 1);
  transform: translateX(-4px);
  touch-action: manipulation;
}
.ghost-form.has-text .ghost-submit,
.ghost-form:focus-within .ghost-submit {
  opacity: 1;
  transform: translateX(0);
}
.ghost-submit:hover { color: var(--zoll-charcoal); }
.ghost-submit .material-icons { font-size: 22px; }

.prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: center;
  margin-top: 40px;
}
.ghost-chip {
  background: transparent;
  border: 0;
  padding: 8px 2px;
  font: 500 15px/1.4 var(--font-display);
  color: var(--zoll-grey-deep);
  cursor: pointer;
  letter-spacing: -0.005em;
  position: relative;
  transition: color 0.15s;
}
.ghost-chip::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 4px;
  height: 1px;
  background: var(--zoll-charcoal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}
.ghost-chip:hover { color: var(--zoll-charcoal); }
.ghost-chip:hover::after { transform: scaleX(1); }

/* ─── Chapters container ──────────────────────────────────────────── */
.chapters {
  display: flex;
  flex-direction: column;
}

/* ─── Chapter article ─────────────────────────────────────────────── */
.chapter {
  --aud: var(--aud-unknown);
  /* Top padding is small now because .chapter-query supplies symmetric
     vertical breathing room above the kicker. Bottom padding unchanged. */
  padding: clamp(20px, 3vh, 40px) 0 clamp(48px, 8vh, 120px);
  position: relative;
  animation: chapter-in 0.7s var(--ease-out) both;
  /* Clear BOTH the sticky topbar (64px) AND the compact sticky prompt
     below it (~76px) so scrollIntoView lands the chapter top flush with
     the prompt's bottom border. */
  scroll-margin-top: 140px;
}
@media (max-width: 600px) {
  .chapter { scroll-margin-top: 124px; }   /* mobile topbar is 56px */
}
/* Inter-chapter spacing handled by .chapter-divider injected from JS. */
.chapter[data-audience="personal"]        { --aud: var(--aud-personal); }
.chapter[data-audience="clinician"]       { --aud: var(--aud-clinician); }
.chapter[data-audience="first-responder"] { --aud: var(--aud-first-responder); }
.chapter[data-audience="ems"]             { --aud: var(--aud-ems); }
.chapter[data-audience="fire"]            { --aud: var(--aud-fire); }
.chapter[data-audience="procurement"]     { --aud: var(--aud-procurement); }
.chapter[data-audience="public-access"]   { --aud: var(--aud-public-access); }
.chapter[data-audience="workplace"]       { --aud: var(--aud-workplace); }
.chapter[data-audience="patient"]         { --aud: var(--aud-patient); }
.chapter[data-audience="non-acute"]       { --aud: var(--aud-non-acute); }
.chapter[data-audience="military"]        { --aud: var(--aud-military); }

@keyframes chapter-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chapter-head {
  max-width: var(--stage-max);
  margin: 0 auto clamp(48px, 8vh, 96px);
  padding: 0 var(--gutter);
}
.chapter-kicker {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--aud);
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 18px;
}
.chapter-headline {
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--zoll-charcoal);
  max-width: 14ch;
}
.chapter-deck {
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--zoll-grey-deep);
  margin: 0 0 16px;
  max-width: 36ch;
  font-weight: 400;
}
/* Echoed question above each chapter — Georgia italic in soft grey, no
   quotes. Symmetric vertical margins so it sits visually centred between
   the sticky-bar bottom line and the kicker / chapter content below. */
.chapter-query {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.5vw, 20px);
  font-style: italic;
  color: rgba(17, 20, 24, 0.42);
  margin: clamp(28px, 4vh, 56px) 0;
  line-height: 1.4;
}

/* Per-chapter "Listen to this answer" button. Sits absolutely at the
   top-right corner of the chapter so it doesn't disrupt the editorial
   flow. Reads the full chapter aloud (headline + deck + sections) via
   Cloud TTS Chirp 3 HD British female voice. Toggles pause/resume so
   you can stop, scroll, then continue from where you left off. */
.chapter-listen {
  position: absolute;
  top: clamp(16px, 2vh, 32px);
  right: var(--gutter);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--zoll-white);
  border: 1px solid var(--zoll-grey-line-strong);
  border-radius: var(--radius-pill);
  color: var(--zoll-charcoal-soft);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
  touch-action: manipulation;
}
.chapter-listen:hover {
  border-color: var(--zoll-charcoal);
  color: var(--zoll-charcoal);
  box-shadow: 0 2px 8px rgba(17, 20, 24, 0.06);
}
.chapter-listen .material-icons { font-size: 22px; }
.chapter-listen.is-loading .material-icons {
  animation: mic-pulse 1.1s ease-in-out infinite;
}
.chapter-listen.is-playing,
.chapter-listen.is-paused {
  color: var(--zoll-red);
  border-color: var(--zoll-red);
  background: color-mix(in srgb, var(--zoll-red) 8%, var(--zoll-white));
}

/* Mic button — sits inside each ghost-form next to the submit arrow.
   Click to dictate the question with the browser's Web Speech API; while
   listening a red dot pulses to signal the field is hot. Hidden in
   browsers without SpeechRecognition (JS doesn't insert the button). */
.ghost-mic {
  background: transparent;
  border: 0;
  padding: 10px;
  margin-right: 2px;
  cursor: pointer;
  color: var(--zoll-grey);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  transition: color 0.15s, background 0.15s;
  touch-action: manipulation;
}
.ghost-mic:hover { color: var(--zoll-charcoal); background: rgba(17, 20, 24, 0.04); }
.ghost-mic .material-icons { font-size: 20px; }
.ghost-form.is-listening .ghost-mic {
  color: var(--zoll-red);
  background: color-mix(in srgb, var(--zoll-red) 10%, transparent);
}
.ghost-form.is-listening .ghost-mic .material-icons {
  animation: mic-pulse 1.1s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}

/* ─── Sections ────────────────────────────────────────────────────── */
.chapter-sections {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 10vh, 140px);
}

.chapter-section {
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.section-heading {
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--zoll-charcoal);
  max-width: 22ch;
}
.section-body {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.68;
  letter-spacing: -0.005em;
  color: var(--zoll-charcoal-soft);
  margin: 0;
  max-width: 38ch;
}
.section-cta {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--zoll-charcoal);
  border-bottom: 1px solid var(--zoll-charcoal);
  padding-bottom: 2px;
  letter-spacing: -0.005em;
  transition: color 0.15s, border-color 0.15s, gap 0.2s var(--ease-out);
}
.section-cta:hover { gap: 12px; }
.section-cta .material-icons { font-size: 18px; }

.section-figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--zoll-bg-soft);
  aspect-ratio: 4 / 3;
  /* Soft bottom mat — images blend into the page rather than sitting in a
     hard rectangle. Excluded for full-bleed (already edge-to-edge). */
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.chapter-section[data-layout="full-bleed"] .section-figure {
  -webkit-mask-image: none;
          mask-image: none;
}
.section-figure-link {
  display: block;
  width: 100%;
  height: 100%;
}
.section-figure-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(22px);
  transform: scale(1.06);
  opacity: 0;
  transition: filter 700ms var(--ease-out),
              transform 900ms var(--ease-out),
              opacity 420ms var(--ease-out);
}
.section-figure-img.is-loaded {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
}
.section-figure-cap {
  display: none;
}

/* Layout variants */
.chapter-section[data-layout="text-only"] {
  grid-template-columns: minmax(0, var(--reading-max));
  justify-content: center;
  text-align: left;
}
.chapter-section[data-layout="text-only"] .section-figure { display: none; }
.chapter-section[data-layout="text-only"] .section-heading,
.chapter-section[data-layout="text-only"] .section-body { max-width: var(--reading-max); }

.chapter-section[data-layout="image-left"] {
  grid-template-columns: 6fr 5fr;
}
.chapter-section[data-layout="image-left"] .section-figure { order: 0; }
.chapter-section[data-layout="image-left"] .section-copy { order: 1; }

.chapter-section[data-layout="image-right"] {
  grid-template-columns: 5fr 6fr;
}
.chapter-section[data-layout="image-right"] .section-figure { order: 1; }
.chapter-section[data-layout="image-right"] .section-copy { order: 0; }

.chapter-section[data-layout="full-bleed"] {
  display: block;
  padding: 0;
  max-width: none;
}
.chapter-section[data-layout="full-bleed"] .section-figure {
  border-radius: 0;
  aspect-ratio: 16 / 7;
  max-height: 86vh;
}
.chapter-section[data-layout="full-bleed"] .section-copy {
  max-width: var(--reading-max);
  margin: clamp(32px, 5vh, 72px) auto 0;
  padding: 0 var(--gutter);
  text-align: left;
}
.chapter-section[data-layout="full-bleed"] .section-heading,
.chapter-section[data-layout="full-bleed"] .section-body {
  max-width: var(--reading-max);
}

.chapter-section[data-layout="pull-quote"] {
  grid-template-columns: minmax(0, 900px);
  justify-content: center;
  text-align: center;
  padding-top: clamp(24px, 4vh, 56px);
  padding-bottom: clamp(24px, 4vh, 56px);
}
.chapter-section[data-layout="pull-quote"] .section-figure { display: none; }
.chapter-section[data-layout="pull-quote"] .section-heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--zoll-charcoal);
  margin: 0 auto;
  max-width: 22ch;
}
.chapter-section[data-layout="pull-quote"] .section-body {
  margin: 24px auto 0;
  color: var(--zoll-grey-deep);
  max-width: 40ch;
  font-size: clamp(15px, 1.2vw, 17px);
}
.chapter-section[data-layout="pull-quote"] .section-cta { display: none; }

/* ─── Section reveal animation ───────────────────────────────────── */
.chapter-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.chapter-section.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Word-by-word fade for snowflake headings & bodies */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
  will-change: opacity, transform;
}
.word.is-on {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Explore zone (single related-pages grid above the site footer) ── */
.explore {
  max-width: var(--stage-max);
  margin: 0 auto;
  /* No bottom padding: the trailing card border becomes the visual
     boundary with the footer dark band immediately below. */
  padding: clamp(20px, 3vh, 36px) var(--gutter) 0;
  border-top: 1px solid var(--zoll-grey-line);
  animation: continue-in 0.6s var(--ease-out) both;
}
/* Strip the trailing horizontal line under the last card — it sits too
   close to the section's top border and the footer's top edge, looking
   crowded. The footer band itself terminates the section visually. */
.explore .related-card:last-child {
  border-bottom: none;
}
.explore-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--zoll-grey);
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 22px;
}
.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
}
.related-card {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--zoll-grey-line);
  color: var(--zoll-charcoal);
  transition: padding-left 0.18s var(--ease-out);
}
.related-card:hover { padding-left: 6px; }
.related-card-media {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background-color: var(--zoll-cream);
  background-size: cover;
  background-position: center;
  filter: grayscale(0.85) sepia(0.04) brightness(0.97);
  transition: filter 0.28s var(--ease-out);
}
.related-card:hover .related-card-media,
.related-card:focus-visible .related-card-media {
  filter: grayscale(0) sepia(0) brightness(1);
}
.related-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.related-card-family {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zoll-grey);
}
.related-card-family:empty { display: none; }
.related-card-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--zoll-charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.related-card-chevron {
  color: var(--zoll-grey);
  font-size: 18px;
  transition: transform 0.18s var(--ease-out), color 0.18s;
}
.related-card:hover .related-card-chevron {
  color: var(--zoll-charcoal);
  transform: translateX(4px);
}

/* ─── Continue zone ───────────────────────────────────────────────── */
.continue {
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: clamp(60px, 10vh, 120px) var(--gutter) clamp(80px, 12vh, 160px);
  text-align: center;
  border-top: 1px solid var(--zoll-grey-line);
  animation: continue-in 0.6s var(--ease-out) both;
}
@keyframes continue-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Form sits at the top of the .continue zone now (just under the last
   chapter); chips live below it. The generous margin-top on the eyebrow
   creates the visual break between "reply here" and "or pick one of these". */
.continue-form {
  margin-bottom: clamp(48px, 7vh, 96px);
}
.continue-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--zoll-grey);
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 22px;
}
.continue-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin-bottom: 0;
}

/* ─── Dev menu (unchanged behaviour, lighter visual) ─────────────── */
.dev-menu {
  position: fixed;
  top: 70px;
  right: var(--gutter);
  width: 320px;
  background: var(--zoll-white);
  border: 1px solid var(--zoll-grey-line);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 32px rgba(17, 20, 24, 0.10);
  padding: 16px 18px;
  z-index: 40;
  font-size: 13px;
}
.dev-menu-section { padding: 8px 0; }
.dev-menu-section + .dev-menu-section { border-top: 1px solid var(--zoll-grey-line); }
.dev-menu-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--zoll-grey);
  margin-bottom: 10px;
  font-weight: 700;
}
.dev-menu-models { display: flex; gap: 6px; }
.dev-menu-model-btn {
  flex: 1;
  background: var(--zoll-white);
  border: 1px solid var(--zoll-grey-line);
  border-radius: 6px;
  padding: 6px 10px;
  font: 500 12px var(--font-display);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--zoll-charcoal-soft);
}
.dev-menu-model-btn.is-active {
  background: var(--zoll-charcoal);
  border-color: var(--zoll-charcoal);
  color: var(--zoll-white);
}
.dev-menu-timing {
  font-family: SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  color: var(--zoll-charcoal);
  font-size: 12px;
  white-space: pre-line;
}
.dev-menu-toggle-raw {
  background: transparent;
  border: 0;
  color: var(--zoll-blue);
  font: 500 12px var(--font-display);
  cursor: pointer;
  padding: 4px 0;
}
.dev-raw {
  max-height: 280px;
  overflow: auto;
  font-family: SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  background: var(--zoll-bg-soft);
  border: 1px solid var(--zoll-grey-line);
  border-radius: 6px;
  padding: 10px;
  margin: 8px 0 0;
  white-space: pre-wrap;
}

/* ─── Image-search page (kept compact — out of scope for this redesign) ─ */
.imgsearch-wrap {
  max-width: 880px;
  margin: 64px auto;
  padding: 0 var(--gutter);
}
.imgsearch-card {
  background: var(--zoll-white);
  border: 1px solid var(--zoll-grey-line);
  border-radius: var(--radius-lg);
  padding: 36px;
  text-align: center;
}
.imgsearch-card h1 {
  font-size: 28px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.imgsearch-card p { color: var(--zoll-grey); margin: 0 0 24px; }
.imgsearch-uploader {
  border: 2px dashed var(--zoll-grey-line-strong);
  border-radius: var(--radius-lg);
  padding: 36px;
  cursor: pointer;
  transition: all 0.15s;
}
.imgsearch-uploader:hover {
  border-color: var(--zoll-charcoal);
  background: var(--zoll-bg-soft);
}
.imgsearch-uploader input { display: none; }
.imgsearch-results {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

/* ─── Mobile / narrow ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .chapter-section[data-layout="image-left"],
  .chapter-section[data-layout="image-right"] {
    grid-template-columns: 1fr;
  }
  .chapter-section[data-layout="image-left"] .section-figure,
  .chapter-section[data-layout="image-right"] .section-figure {
    order: 0;
    aspect-ratio: 4 / 3;
  }
  .chapter-section[data-layout="image-left"] .section-copy,
  .chapter-section[data-layout="image-right"] .section-copy {
    order: 1;
  }
  .chapter-headline { max-width: none; }
  .chapter-deck { max-width: none; }
}

@media (max-width: 600px) {
  /* Topbar */
  .topbar { height: 56px; padding: 0 14px; }

  /* Prompt zone */
  .prompt { padding: clamp(48px, 10vh, 96px) 18px clamp(40px, 6vh, 64px); }
  .prompt.is-compact { padding: 18px 14px; }
  .prompt.is-compact .prompt-input { font-size: 16px; padding: 8px 0; }

  /* Chapter typography — drop the max-width ch caps so headlines don't
     break awkwardly at small widths */
  .chapter-headline { max-width: none; }
  .chapter-deck { max-width: none; }
  .section-heading { max-width: none; }
  .section-body { max-width: none; line-height: 1.6; }

  /* Full-bleed sections at phone widths: a 16:7 strip is too short to be
     a hero; use 4:3 with a cap so it reads as an image, not a banner. */
  .chapter-section[data-layout="full-bleed"] .section-figure {
    aspect-ratio: 4 / 3;
    max-height: 60vh;
  }
  .chapter-section[data-layout="full-bleed"] .section-copy {
    margin-top: 24px;
  }

  /* Pull-quote: clamp so a long LLM sentence doesn't wrap to 5 lines */
  .chapter-section[data-layout="pull-quote"] .section-heading {
    max-width: 18ch;
  }

  /* Touch-target bumps for buttons that were sub-44 on mobile */
  .ghost-mic { padding: 12px; }
  .related-card { padding: 22px 0; }
  .ghost-chip { padding: 12px 4px; }   /* taller tap row */

  /* Dev menu / drawer / footer */
  .dev-menu { right: 12px; left: 12px; width: auto; top: 64px; }
  .site-footer { padding: 48px 18px 28px; }
  .site-footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .site-footer-col h3 { margin-bottom: 8px; }
  .site-footer-col a { padding: 10px 0; line-height: 1.4; }
  .site-footer-bottom {
    flex-direction: column;
    gap: 14px;
    text-align: center;
    align-items: center;
  }
  .site-footer-copy { margin-right: 0; }
  .site-footer-legal { flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
  .nav-drawer { width: 100vw; border-left: 0; }
  .nav-drawer-head { padding: 14px 18px; }
  .nav-drawer-links { padding: 18px 18px 8px; }
  .nav-drawer-sub { padding: 14px 18px 0; }
  .nav-drawer-foot { padding: 18px; }
}

/* Landscape phones — the prompt zone needs to fit without internal scroll */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .prompt {
    padding-top: clamp(28px, 6vh, 56px);
    padding-bottom: clamp(20px, 4vh, 40px);
  }
  .prompt-headline { font-size: clamp(32px, 5vw, 48px); }
}

/* ─── Editorial chapter divider (between chapters 2+) ────────────── */
.chapter-divider {
  max-width: var(--stage-max);
  margin: clamp(40px, 8vh, 96px) auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 16px;
  animation: chapter-in 0.7s var(--ease-out) both;
}
.chapter-divider-rule {
  flex: 1;
  height: 1px;
  background: var(--zoll-grey-line);
}
.chapter-divider-mono {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--zoll-grey-deep);
}
.chapter-divider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--zoll-red);
  opacity: 0.9;
}
.chapter-divider-n {
  font-family: SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--zoll-grey);
  letter-spacing: 0.06em;
  min-width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Site footer ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--zoll-charcoal);
  color: rgba(255, 255, 255, 0.78);
  padding: 80px var(--gutter) 32px;
  /* No top margin — the .explore zone flows directly into the footer
     band so there's no big gap between the last related card and the
     dark band beginning. */
  font-family: var(--font-display);
}
.site-footer-grid {
  max-width: var(--stage-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 2fr 2fr 2fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.site-footer-logo {
  display: block;
  height: 22px;
  width: 76px;
  max-width: 96px;
  background-color: var(--zoll-white);
  -webkit-mask: url("zoll-logo.png") no-repeat center / contain;
          mask: url("zoll-logo.png") no-repeat center / contain;
}
.site-footer-strap {
  margin: 0;
  font-size: 15px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
  max-width: 24ch;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.site-footer-col {
  display: flex;
  flex-direction: column;
}
.site-footer-col h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zoll-white);
  margin: 0 0 18px;
}
.site-footer-col a {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  line-height: 2;
  letter-spacing: -0.005em;
  display: block;
  transition: color 0.15s, padding-left 0.18s var(--ease-out);
  touch-action: manipulation;
}
.site-footer-col a:hover {
  color: var(--zoll-white);
  padding-left: 3px;
}
.site-footer-bottom {
  max-width: var(--stage-max);
  margin: 0 auto;
  padding-top: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}
.site-footer-locale {
  font-weight: 600;
  letter-spacing: 0.08em;
}
.site-footer-copy {
  margin-right: auto;
}
.site-footer-legal {
  display: flex;
  gap: 4px 18px;
  align-items: center;
}
.site-footer-legal a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 0;
  transition: color 0.15s;
  touch-action: manipulation;
}
.site-footer-legal a:hover { color: var(--zoll-white); }

/* iPad portrait: keep 4 cols but trim the gap so it doesn't crush */
@media (max-width: 900px) and (min-width: 601px) {
  .site-footer-grid { gap: 32px; grid-template-columns: 3fr 2fr 2fr 2fr; }
}

/* ─── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .word { opacity: 1; transform: none; }
  .section-figure-img { filter: none; transform: none; opacity: 1; }
  .chapter-section { opacity: 1; transform: none; }
  /* Drawer + input-pulse: snap, don't slide. */
  .nav-drawer, .nav-backdrop { transition: none !important; }
  .ghost-form:focus-within { animation: none !important; }
}