/* ==========================================================================
   Touch Point Media — "Healthcare's Long Walk Toward the Patient" landing page
   Design tokens, then components. Mobile-first: the base rules describe the
   narrow layout and min-width queries progressively add the wider ones.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

/* Karla — upright 400/700, Latin subset (English content only). Loaded from
   the live touchpoint.health asset host since this file travels standalone. */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('https://touchpoint.health/wp-content/themes/wp-foundation-six/assets/fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Mono — 700, Latin subset. NOTE: the 400-weight file
   (space-mono-400-latin.woff2) was not provided, so mono text set at 400
   (chapter numbers, stat labels, etc.) falls back to the browser's default
   monospace font rather than Space Mono. Send that file over if you want a
   pixel-perfect match there. */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://touchpoint.health/wp-content/themes/wp-foundation-six/assets/fonts/space-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  --color-blue-950: oklch(16% .05 255);
  --color-blue-900: #153151;
  --color-blue-800: oklch(30% .09 255);
  --color-blue-700: oklch(38% .10 255);
  --color-blue-600: oklch(45% .11 255);
  --color-blue-500: oklch(53% .12 255);
  --color-blue-300: oklch(74% .07 255);
  --color-blue-100: oklch(92% .025 255);
  --color-blue-50: oklch(96% .012 255);

  --color-yellow-700: oklch(58% .15 70);
  --color-yellow-600: oklch(68% .16 72);
  --color-yellow-500: #FBA919;
  --color-yellow-300: oklch(88% .10 82);
  --color-yellow-100: oklch(96% .045 85);

  --gray-900: oklch(20% .015 255);
  --gray-800: oklch(28% .014 255);
  --gray-700: oklch(38% .012 255);
  --gray-600: oklch(48% .011 255);
  --gray-500: oklch(58% .010 255);
  --gray-400: oklch(70% .009 255);
  --gray-300: oklch(80% .007 255);
  --gray-200: oklch(88% .006 255);
  --gray-100: oklch(94% .004 255);
  --gray-50: oklch(97% .002 255);
  --white: #ffffff;

  --color-success: oklch(52% .14 148);
  --color-error: oklch(55% .19 27);
  --color-warning: var(--color-yellow-600);
  --color-info: var(--color-blue-500);

  --brand-primary: var(--color-blue-900);
  --brand-accent: var(--color-yellow-500);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-on-brand: var(--white);
  --text-link: var(--color-blue-700);
  --text-link-hover: var(--color-blue-900);

  --surface-page: var(--white);
  --surface-sunken: var(--gray-50);
  --surface-card: var(--white);
  --surface-brand: var(--color-blue-900);
  --surface-overlay: oklch(20% .015 255 / .55);

  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-brand: var(--color-blue-900);
  --border-focus: var(--color-blue-500);

  --font-display: "Space Mono", monospace;
  --font-body: "Karla", -apple-system, Helvetica, Arial, sans-serif;
  --font-mono: "Space Mono", monospace;

  --text-h1: 700 clamp(24px, 4.4vw, 30px)/1.2 var(--font-display);
  --text-h2: 700 clamp(20px, 3.4vw, 24px)/1.25 var(--font-display);
  --text-h3: 700 19px/1.3 var(--font-body);
  --text-h4: 700 16px/1.35 var(--font-body);
  --text-body-lg: 400 clamp(17px, 1.6vw, 19px)/1.55 var(--font-body);
  --text-body: 400 16px/1.55 var(--font-body);
  --text-body-sm: 400 14px/1.5 var(--font-body);
  --text-caption: 500 12px/1.4 var(--font-body);
  --text-caption-upper: 700 11px/1.3 var(--font-body);
  --text-mono: 400 13px/1.5 var(--font-mono);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --container-max: 1180px;
  --content-measure: 68ch;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-thick: 2px;
  --shadow-sm: 0 1px 2px oklch(20% .02 255 / .08);
  --shadow-md: 0 4px 12px oklch(20% .02 255 / .12);
  --shadow-lg: 0 12px 32px oklch(20% .02 255 / .16);
  --ease-standard: cubic-bezier(.2, .7, .3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;

  /* Horizontal page gutter — scales with the viewport instead of a fixed 40px. */
  --gutter: clamp(20px, 4vw, 40px);
  /* Vertical rhythm between major sections. */
  --section-y: clamp(48px, 8vw, 88px);
}

/* --- Base ---------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font: var(--text-body);
  font-family: var(--font-body);
  /* Nothing in this layout is allowed to cause sideways scrolling on a phone. */
  overflow-x: hidden;
}

a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--text-link-hover);
}

img {
  max-width: 100%;
}

::selection {
  background: var(--color-yellow-300);
  color: var(--gray-900);
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.shell {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: oklch(100% 0 0 / .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-default);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-2);
}

.site-header__logo {
  height: clamp(34px, 6vw, 52px);
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
}

.site-nav a {
  font: var(--text-body-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  /* Vertical padding rather than a taller line-height, so the tap target
     clears ~44px on touch screens without changing the type. */
  padding-block: 10px;
}

.site-nav a:hover {
  color: var(--text-primary);
}

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

.hero {
  background: var(--color-blue-900);
  background-image: radial-gradient(120% 90% at 85% 10%, var(--color-blue-800) 0%, var(--color-blue-900) 55%, var(--color-blue-950) 100%);
  color: var(--text-on-brand);
}

.hero__inner {
  display: grid;
  /* Single column on phones; the artwork is ordered after the pitch so the
     headline and form are the first things reachable on a small screen. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 6vw, 56px);
  align-items: center;
  padding-block: clamp(40px, 7vw, 72px) clamp(32px, 5vw, 40px);
}

.hero__art {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The phone mockup hangs 13% past the book's right edge and 16% below it.
     Reserving that space here is what keeps it on screen at phone widths. */
  padding-right: 12%;
  padding-bottom: clamp(48px, 14vw, 80px);
}

.hero__pitch {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 24px);
  min-width: 0;
}

/* Book + phone mockup */
.mockup {
  position: relative;
  width: min(420px, 100%);
}

.mockup__tablet {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 3px solid var(--color-blue-300);
  border-radius: clamp(20px, 5vw, 30px);
  padding: clamp(13px, 3.4vw, 20px) clamp(11px, 2.8vw, 16px) clamp(24px, 5.8vw, 34px);
  background: transparent;
}

.mockup__screen {
  width: 100%;
  height: 100%;
  border: 1.5px solid oklch(74% .07 255 / .55);
  border-radius: 6px;
  overflow: hidden;
}

.mockup__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.mockup__cam {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--color-blue-300);
}

.mockup__home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(14px, 3.4vw, 20px);
  height: clamp(14px, 3.4vw, 20px);
  border-radius: 50%;
  border: 2px solid var(--color-blue-300);
}

.mockup__phone {
  position: absolute;
  right: -13%;
  bottom: -12%;
  width: 49%;
  border: 3px solid var(--brand-accent);
  border-radius: clamp(18px, 4.6vw, 28px);
  padding: clamp(15px, 3.6vw, 22px) clamp(7px, 1.7vw, 10px) clamp(18px, 4.3vw, 26px);
  background: var(--color-blue-900);
}

.mockup__phone-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 17;
  border: 1.5px solid oklch(88% .10 82 / .5);
  border-radius: 5px;
  overflow: hidden;
  background: var(--color-blue-900);
  display: flex;
  align-items: center;
}

.mockup__phone-screen img {
  display: block;
  width: 100%;
  height: auto;
}

.mockup__phone-speaker {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mockup__phone-speaker span:first-child {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-accent);
}

.mockup__phone-speaker span:last-child {
  width: clamp(20px, 5vw, 34px);
  height: 3px;
  border-radius: 2px;
  background: var(--brand-accent);
  opacity: .7;
}

.mockup__phone-bar {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(30px, 7vw, 52px);
  height: 3px;
  border-radius: 2px;
  background: var(--brand-accent);
  opacity: .7;
}

/* Eyebrow */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.eyebrow__rule {
  width: 28px;
  height: 2px;
  background: var(--brand-accent);
  flex: 0 0 auto;
}

.eyebrow__text {
  font: var(--text-caption-upper);
  letter-spacing: .14em;
  color: var(--brand-accent);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  /* 50px on desktop, but never so large it overflows a 320px phone. */
  font-size: clamp(30px, 7.4vw, 50px);
  line-height: 1.08;
  margin: 0;
  max-width: 18ch;
  text-wrap: pretty;
}

.hero__title em {
  color: var(--brand-accent);
  font-style: normal;
}

.hero__lede {
  font: var(--text-body-lg);
  color: var(--color-blue-100);
  margin: 0;
  max-width: 54ch;
  text-wrap: pretty;
}

/* Host byline */
.byline {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.byline__avatars {
  display: flex;
  flex: 0 0 auto;
}

.byline__avatars span {
  width: clamp(42px, 9vw, 52px);
  height: clamp(42px, 9vw, 52px);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--brand-accent);
  background: var(--color-blue-800);
  display: block;
}

.byline__avatars span + span {
  margin-left: -14px;
}

.byline__avatars img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.byline__name {
  font: var(--text-body-sm);
  font-weight: 700;
  color: var(--white);
}

.byline__role {
  font: var(--text-caption);
  color: var(--color-blue-300);
  margin-top: 3px;
}

/* Benefit ticks */
.ticks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font: var(--text-body);
  color: var(--color-blue-100);
}

.ticks li::before {
  content: "✓";
  color: var(--brand-accent);
  font-weight: 700;
  flex: 0 0 auto;
}

.ticks strong {
  color: var(--white);
}

/* --- Form card ----------------------------------------------------------- */

.card {
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: clamp(20px, 4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--text-primary);
}

.card__title {
  font: var(--text-h2);
  font-size: clamp(19px, 3.4vw, 22px);
  color: var(--text-primary);
  margin: 0 0 6px;
}

.card__subtitle {
  font: var(--text-body-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* Two-up on anything wider than a small phone, stacked below. */
.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

@media (min-width: 420px) {
  .field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field__label {
  font: var(--text-caption);
  font-weight: 600;
  color: var(--text-secondary);
}

.field input {
  font-family: var(--font-body);
  /* 16px keeps iOS Safari from zooming the page when a field is focused. */
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
  min-height: 48px;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.field input::placeholder {
  color: var(--text-tertiary);
}

.field input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px oklch(53% .12 255 / .18);
}

.field input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.field__error {
  font: var(--text-caption);
  color: var(--color-error);
  min-height: 0;
}

.field__error:empty {
  display: none;
}

.checkbox-row {
  border-top: 1px solid var(--border-default);
  padding-top: 14px;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* Comfortable tap target on touch screens. */
  min-height: 44px;
  padding-block: 10px;
  cursor: pointer;
  font: var(--text-body-sm);
  color: var(--text-secondary);
}

.checkbox input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--color-blue-600);
  cursor: pointer;
}

.btn {
  font: var(--text-body);
  font-weight: 700;
  padding: 15px 24px;
  min-height: 50px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  letter-spacing: .01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: filter var(--duration-fast) var(--ease-standard);
}

.btn:hover:not([disabled]) {
  filter: brightness(.94);
}

.btn[disabled] {
  opacity: .6;
  cursor: progress;
}

.btn--accent {
  border: 1px solid var(--brand-accent);
  background: var(--brand-accent);
  color: var(--color-blue-950);
}

.btn--primary {
  border: 1px solid var(--brand-primary);
  background: var(--brand-primary);
  color: var(--text-on-brand);
}

.btn--primary:hover {
  color: var(--text-on-brand);
}

.btn--ghost {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-primary);
}

.btn--ghost:hover {
  color: var(--text-primary);
}

.fineprint {
  font: var(--text-caption);
  color: var(--text-tertiary);
  margin: 0;
  text-align: center;
}

.form-error {
  font: var(--text-body-sm);
  color: var(--color-error);
  background: oklch(55% .19 27 / .08);
  border: 1px solid oklch(55% .19 27 / .3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0;
}

/* Success state */
.success__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.success__badge {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-success);
  color: var(--white);
  font: var(--text-caption);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.success__title {
  font: var(--text-h3);
  color: var(--text-primary);
  margin: 0;
}

.success__link {
  font: var(--text-body-sm);
  font-weight: 600;
  text-align: center;
}

[hidden] {
  display: none !important;
}

/* --- Stat bar ------------------------------------------------------------ */

.statbar {
  border-top: 1px solid oklch(100% 0 0 / .16);
}

.statbar__grid {
  display: grid;
  /* 2×2 on phones, 4-across from tablet up. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.statbar__item {
  padding: clamp(16px, 3vw, 26px) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

/* On the 2-col layout the divider belongs on odd cells only. */
.statbar__item:nth-child(even) {
  padding-left: clamp(16px, 4vw, 32px);
  border-left: 1px solid oklch(100% 0 0 / .12);
}

.statbar__item:nth-child(n + 3) {
  border-top: 1px solid oklch(100% 0 0 / .12);
}

.statbar__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 5vw, 30px);
  color: var(--white);
}

.statbar__num--accent {
  color: var(--brand-accent);
}

.statbar__label {
  font: var(--text-caption-upper);
  letter-spacing: .12em;
  color: var(--color-blue-300);
}

/* --- Generic section furniture ------------------------------------------ */

.section {
  padding-block: var(--section-y);
}

.section--sunken {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.section--brand {
  background: var(--color-blue-900);
  color: var(--text-on-brand);
}

.kicker {
  font: var(--text-caption-upper);
  letter-spacing: .14em;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}

.kicker--accent {
  color: var(--brand-accent);
}

.section__heading {
  font: var(--text-h1);
  color: var(--text-primary);
  margin: 0;
  text-wrap: pretty;
}

.section--brand .section__heading {
  color: var(--white);
}

.section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: clamp(24px, 4vw, 36px);
}

.section__note {
  font: var(--text-body-sm);
  color: var(--text-tertiary);
}

/* "What it is" — sidebar heading + body */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.split__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.split__lede {
  font: var(--text-body-lg);
  color: var(--text-primary);
  margin: 0 0 clamp(20px, 3vw, 28px);
  max-width: 62ch;
  text-wrap: pretty;
}

.points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--border-default);
  padding-top: clamp(20px, 3vw, 28px);
}

.points__num {
  font: var(--text-mono);
  color: var(--brand-accent);
  margin-bottom: 10px;
}

.points p {
  font: var(--text-body);
  color: var(--text-secondary);
  margin: 0;
}

/* --- Chapters ------------------------------------------------------------ */

.chapters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 56px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.chapters li {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 2.5vw, 20px);
  padding: 18px 0;
  border-bottom: 1px solid var(--border-default);
}

.chapters__num {
  font: var(--text-mono);
  color: var(--text-tertiary);
  min-width: 52px;
  letter-spacing: .06em;
  flex: 0 0 auto;
}

.chapters__title {
  font: var(--text-h4);
  font-size: clamp(15px, 2.6vw, 17px);
  color: var(--text-primary);
}

/* --- Guests -------------------------------------------------------------- */

.guests {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 0 40px;
  border-top: 1px solid var(--border-default);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guests li {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid var(--border-default);
}

.guests__name {
  font: var(--text-h4);
  font-size: 15px;
  color: var(--text-primary);
}

.guests__role {
  font: var(--text-caption);
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* --- Hosts --------------------------------------------------------------- */

.hosts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.host {
  border: 1px solid oklch(100% 0 0 / .16);
  border-radius: var(--radius-md);
  padding: clamp(18px, 3vw, 24px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 18px);
}

.host__portrait {
  position: relative;
  width: clamp(88px, 22vw, 132px);
  height: clamp(88px, 22vw, 132px);
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--brand-accent);
  background: transparent;
}

.host__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.host__portrait img.is-reed {
  object-position: 50% 12%;
  transform: scale(1.12);
  transform-origin: 50% 18%;
}

.host__portrait img.is-chris {
  object-position: 50% 10%;
  transform: scale(1.3);
  transform-origin: 50% 16%;
}

.host__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 3vw, 20px);
  color: var(--white);
}

.host__role {
  font: var(--text-body-sm);
  color: var(--color-blue-300);
  margin-top: 6px;
}

.hosts-intro {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vw, 40px);
}

/* --- Episodes CTA -------------------------------------------------------- */

.cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 56px);
}

.cta__copy {
  max-width: 60ch;
}

.cta__heading {
  font: var(--text-h2);
  color: var(--text-primary);
  margin: 0 0 10px;
}

.cta__copy p {
  font: var(--text-body);
  color: var(--text-secondary);
  margin: 0;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  width: 100%;
}

.cta__actions .btn {
  font: var(--text-body-sm);
  font-weight: 600;
  padding: 12px 20px;
  flex: 1 1 auto;
  white-space: nowrap;
}

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

.site-footer {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-default);
}

.site-footer__inner {
  padding-block: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

.site-footer span,
.site-footer a {
  font: var(--text-body-sm);
  color: var(--text-tertiary);
}

.site-footer a {
  text-decoration: none;
  padding-block: 10px;
}

.site-footer a:hover {
  color: var(--text-primary);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) 20px;
}

/* ==========================================================================
   Wider viewports
   ========================================================================== */

/* Tablet */
@media (min-width: 640px) {
  .statbar__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .statbar__item:nth-child(n + 3) {
    border-top: 0;
  }

  .statbar__item:not(:first-child) {
    padding-left: clamp(16px, 3vw, 32px);
    border-left: 1px solid oklch(100% 0 0 / .12);
  }

  .points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chapters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hosts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta__actions {
    width: auto;
  }

  .cta__actions .btn {
    flex: 0 0 auto;
  }

  .section__head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
  }

  .section__head > div {
    min-width: 0;
  }
}

/* Desktop — restore the original two-column hero and split sections */
@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: minmax(280px, 460px) minmax(0, 1fr);
    padding-block: 72px 40px;
  }

  .hero__art {
    order: 0;
    min-height: 560px;
    /* Full 420px mockup restored; the overhang now falls into the grid gap. */
    padding-right: 0;
    padding-bottom: 0;
  }

  .hero__pitch {
    order: 0;
  }

  .split {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}