:root {
  --pb-ink: #071B39;
  --pb-muted: #52749A;
  --pb-brand: #0B2345;
  --pb-paper: #FCFCFA;
  --pb-surface: #F4F6F8;
  --pb-line: #E0E5EA;
  --pb-accent: #126CA8;
  --pb-accent-dark: #0B2A50;
  --pb-accent-soft: #EAF4FA;
  --pb-accent-soft-line: #D5E4F0;
  --pb-field-line: #CCD8E5;
  --pb-field-placeholder: #8AA0B8;
  --pb-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --pb-script-font: "Caveat", cursive;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--pb-paper);
  color: var(--pb-ink);
  font-family: var(--pb-font);
  -webkit-font-smoothing: antialiased;
}

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

.pb-container { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
.pb-container.hero { max-width: 1200px; }
@media (max-width: 767px) { .pb-container { padding: 0 20px; } }

.pb-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--pb-muted);
  text-transform: uppercase;
}

.pb-button {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  gap: 10px;
  background: var(--pb-accent-dark);
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
/* Same specificity as the class rule above, and author-origin CSS always
   beats the UA stylesheet's own [hidden] rule regardless of source order --
   so `.pb-button` alone would keep rendering a button whose `hidden`
   property JS has set to true. This is what actually hides it. */
.pb-button[hidden] { display: none; }
.pb-button:hover { background: var(--pb-accent); }
.pb-button:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; }
.pb-button span { display: inline-block; transition: transform .15s ease; }
.pb-button:hover span { transform: translateX(3px); }

/* header */
.header { height: 82px; display: flex; align-items: center; }
.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
/* the CTA is a single dense pill next to a two-line (wordmark + tagline)
   block, so true geometric centering reads slightly high against the
   heavier wordmark — nudge it down a couple px to optically balance */
.header-inner .pb-button { margin-top: 2px; }

.header-actions { display: flex; align-items: center; gap: 18px; }
.header-link { font-size: 15px; font-weight: 500; color: var(--pb-muted); text-decoration: none; white-space: nowrap; }
.header-link:hover { color: var(--pb-ink); }
@media (max-width: 700px) { .header-actions .header-link { display: none; } }

/* "Start with a question": the latest rider questions, written into
   index.html by make_articles.py so it is plain HTML for crawlers. */
.questions-teaser h2 { font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -.025em; margin: 8px 0 10px; }
.questions-teaser .questions-intro { max-width: 640px; font-size: 17px; line-height: 1.5; margin: 0 0 24px; }
.q-teaser-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.q-teaser-list a { display: block; color: inherit; text-decoration: none; }
.q-teaser-list img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--pb-line); margin-bottom: 10px; }
.q-teaser-list span { font-size: 17px; font-weight: 600; line-height: 1.35; }
.q-teaser-list a:hover span { text-decoration: underline; }
.questions-all { font-weight: 600; color: var(--pb-accent); text-decoration: none; }
.questions-all:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .q-teaser-list { grid-template-columns: 1fr; }
  .questions-teaser h2 { font-size: 32px; }
}

/* Sign-in: deliberately just text, not a button -- this sits next to the
   "Get access" pill and must read as secondary to it. Clicking it opens
   the centered #signin-modal-overlay (see below), kept visually and
   structurally separate from the hero/nav rather than as an inline
   dropdown, so authentication reads as a focused step, not a newsletter
   signup competing with the header. */
.signin-wrap { position: relative; }

.signin-trigger {
  background: none;
  border: none;
  padding: 4px 2px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--pb-muted);
  cursor: pointer;
}
.signin-trigger:hover { color: var(--pb-ink); }
.signin-trigger:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; border-radius: 4px; }

/* Signed-in + entitled listener: the header narrows to one clear action
   instead of the public "Get access" buy button -- see Signed-In Header UX
   Update. Sized deliberately smaller than a bare .pb-button since it's
   paired with an account control, not standing alone. */
.signed-in-course-cta {
  min-width: 140px;
  height: 48px;
  padding: 0 22px;
  font-size: 16px;
  justify-content: center;
}

/* Account control: replaces the "Signed in as / Sign out" readout once the
   listener has course access, so the email drops out of the header itself
   and into this popover instead. Icon-only trigger keeps it visually
   secondary to the course CTA. */
.account-wrap { position: relative; }
.account-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--pb-muted);
  cursor: pointer;
}
.account-trigger:hover,
.account-trigger[aria-expanded="true"] { color: var(--pb-ink); background: var(--pb-surface); }
.account-trigger:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; }

.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  min-width: 220px;
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 16px 40px rgba(11, 35, 69, .18);
}
.account-menu[hidden] { display: none; }
.account-menu-email { margin: 0 0 10px; font-size: 13px; color: var(--pb-muted); word-break: break-all; }
.account-menu-signout {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--pb-ink);
  text-decoration: underline;
  cursor: pointer;
}

/* Sign-in modal: dimmed overlay + centered card. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 27, 57, .55);
}
.modal-overlay[hidden] { display: none; }

.modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px 28px;
  box-shadow: 0 24px 60px rgba(11, 35, 69, .25);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
  color: var(--pb-muted);
  cursor: pointer;
}
.modal-close:hover { color: var(--pb-ink); background: var(--pb-surface); }
.modal-close:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; }

.modal-title { margin: 0 0 8px; font-size: 21px; font-weight: 700; color: var(--pb-ink); }
.modal-desc { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--pb-muted); }
.modal-desc strong { color: var(--pb-ink); font-weight: 600; }
/* Tightens the gap when a second .modal-desc follows (the spam-folder nudge
   on the "Check your inbox" screen) so the two read as one block. */
.modal-desc-tight { margin-bottom: 8px; }

.modal-form { display: flex; flex-direction: column; gap: 12px; }
.modal-form input {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--pb-field-line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  color: var(--pb-ink);
  outline: none;
}
.modal-form input::placeholder { color: var(--pb-field-placeholder); }
.modal-form input:focus { border-color: var(--pb-accent); }
.modal-form button[disabled] { opacity: .6; cursor: default; }

.modal-submit { width: 100%; justify-content: center; font-size: 15px; padding: 13px 20px; }

.modal-helper { margin: 14px 0 0; font-size: 12px; color: var(--pb-muted); text-align: center; }

.modal-success-actions { display: flex; gap: 18px; margin-top: 18px; }
.modal-link-action {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--pb-accent);
  text-decoration: underline;
  cursor: pointer;
}

.signin-note { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--pb-muted); }
.signin-note.is-error { color: #B4472F; }
.signin-note.is-success { color: var(--pb-accent); }

/* Full-episode access note inside a player -- appears in place of the
   preview note once a signed-in, entitled listener's audio has swapped
   to the full file. Same visual weight as .ep-preview-note, different color
   so the two states are distinguishable at a glance while scanning. */
.ep-full-note { color: var(--pb-accent); font-weight: 500; }
.brand { font-size: 31px; color: var(--pb-brand); }
/* lowercase wordmark: "physiology" regular, ".bike" bold (dot included) — no
   wide tracking, unlike the eyebrow/tagline labels elsewhere on the page */
.wordmark { font-weight: 400; letter-spacing: normal; text-transform: none; }
.wordmark-bold { font-weight: 700; }
.footer-wordmark { color: var(--pb-ink); }
.tag { font-size: 12px; font-weight: 500; color: var(--pb-muted); letter-spacing: .32em; margin-top: 1px; text-transform: uppercase; }

/* hero — one contained card, aligned with the rest of the page; copy sits on top of the photo behind a scrim */
.section.hero { padding-top: 0; padding-bottom: 0; }
.hero-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 560px;
  overflow: hidden;
}
.hero-visual { position: absolute; inset: 0; z-index: 0; }
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  filter: saturate(.92) contrast(.97) brightness(1.02);
}
.hero-rider {
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 4%;
  height: 88%;
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(11, 19, 36, .3));
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(4, 10, 22, .66) 0%,
    rgba(4, 10, 22, .46) 30%,
    rgba(4, 10, 22, .15) 54%,
    rgba(4, 10, 22, 0) 70%);
}
.hero-copy { position: relative; top: 12px; z-index: 2; max-width: 650px; padding: 56px 40px; color: #fff; }
/* Typography spec calls for #071B39 headline / #142B4A body here, but this copy sits
   directly on the hero photo — kept white/near-white for legibility against the scrim. */
.hero h1 { font-size: clamp(40px, 4.2vw, 60px); font-weight: 700; line-height: 1; letter-spacing: -.03em; margin: 0 0 24px; text-wrap: balance; }
.hero p {
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 10px;
  max-width: 570px;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.hero p strong { color: #fff; }

/* Spec color for handwritten accents is #4D7092; kept white here too, same reason as above. */
.scribble {
  font-family: var(--pb-script-font);
  font-weight: 600;
  line-height: 1.08;
}
.corner-note {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 26px;
  color: #fff;
  font-size: 24px;
  text-align: right;
  text-shadow: 0 1px 3px rgba(0, 20, 50, .2);
  transform: rotate(4deg);
}

/* partner strip */
.partner {
  border-top: 1px solid var(--pb-line);
  border-bottom: 1px solid var(--pb-line);
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.partner img { height: 86px; width: auto; }


/* let's connect — a quiet personal bridge between the hero story and the
   series. Deliberately lighter than the hero: no photo, no dark ground, and
   a heading that stays a step under the section headings below it. */
.connect {
  position: relative;
  overflow: hidden;
  padding: 30px 0;
  background: linear-gradient(90deg, rgba(239, 247, 253, .96), rgba(249, 252, 254, .98));
}
.connect-inner {
  position: relative;
  z-index: 2;
  display: grid;
  /* copy | linkedin | zwift | handwritten note */
  grid-template-columns: minmax(360px, 1.25fr) minmax(210px, .58fr) minmax(210px, .58fr) auto;
  align-items: center;
  gap: 18px;
}
.connect-copy { min-width: 0; }
.connect-heading {
  margin: 7px 0 8px;
  font-size: clamp(30px, 2.9vw, 38px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.025em;
  /* Deliberately not --pb-ink/--pb-accent: this headline carries a two-tone
     treatment of its own, and the accent half needs to read brighter and more
     saturated than the page accent (#126CA8) to stay clearly distinct from the
     navy beside it. Same pair on every breakpoint. */
  color: #062D59;
  text-wrap: balance;
}
.connect-heading .accent { color: #1976B9; }
.connect-body {
  margin: 0;
  max-width: 540px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--pb-muted);
}

/* profile cards, not sales buttons — soft ground, no border, no hard shadow */
.connect-card {
  min-width: 0;
  min-height: 76px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 13px;
  border-radius: 14px;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.connect-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 39, 78, .08); }
.connect-card:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 3px; }
.linkedin-card { background: linear-gradient(135deg, rgba(230, 243, 253, .98), rgba(246, 250, 253, .98)); }
.zwift-card { background: linear-gradient(135deg, rgba(255, 240, 230, .98), rgba(255, 249, 245, .98)); }
.connect-card-icon { width: 46px; height: 46px; object-fit: contain; }
.connect-card-title { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--pb-ink); }
.connect-card-arrow { font-size: 22px; line-height: 1; transition: transform .16s ease; }
.connect-card:hover .connect-card-arrow { transform: translateX(3px); }
.linkedin-card .connect-card-arrow { color: #0A66C2; }
.zwift-card .connect-card-arrow { color: #FF5F19; }

/* the arrow sits left of the note so it points back at the Zwift card */
.connect-note { display: flex; align-items: flex-end; gap: 2px; }
.connect-note-arrow { width: 46px; height: auto; flex: none; margin-bottom: 5px; }
.connect-handwritten {
  font-size: 21px;
  color: var(--pb-accent);
  white-space: nowrap;
  transform: rotate(-4deg);
}

.connect-contours {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: -8px;
  width: 230px;
  opacity: .24;
  pointer-events: none;
}
.connect-mountain {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 2px;
  width: 150px;
  opacity: .35;
  pointer-events: none;
}

/* The four-column row needs ~1105px to hold its minimums. Below that the note
   is the one piece that can go without losing anything functional, so it is
   dropped first and the cards keep their full width. */
@media (max-width: 1119px) {
  .connect-inner { grid-template-columns: minmax(320px, 1.2fr) minmax(200px, .6fr) minmax(200px, .6fr); }
  .connect-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .connect-card, .connect-card-arrow { transition: none; }
  .connect-card:hover, .connect-card:hover .connect-card-arrow { transform: none; }
}

.section { padding-top: 48px; padding-bottom: 48px; }

/* episode series */
.section.series { padding-top: 30px; padding-bottom: 16px; }
#access { padding-top: 16px; padding-bottom: 24px; }
.series-head { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: start; }
.series-aside { margin-top: 22px; }
.series h2, .early h2 { font-weight: 700; line-height: 1.05; letter-spacing: -.025em; margin: 8px 0 10px; text-wrap: balance; }
.series h2 { font-size: 40px; }
.early h2 { font-size: 36px; }
.meta { color: var(--pb-muted); font-size: 17px; }
#series-meta { color: #435F7E; }
.meta.series-aside { color: #486688; }
.early-copy { color: var(--pb-ink); font-size: 16px; line-height: 1.45; }
/* 6px, not the 36px this used to carry: the free-episode card sits between
   the series head and the episode list and supplies that gap with its own
   margin. */
.dots { display: flex; gap: 10px; margin: 14px 0 6px; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--pb-line); }
.dot.on { background: var(--pb-accent); }

.episodes { border-top: 1px solid #DCE3E9; }
.ep-item { border-bottom: 1px solid #DCE3E9; }
.ep {
  min-height: 58px;
  display: grid;
  grid-template-columns: 46px 28px 1fr 110px 34px 24px;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.ep-num { color: var(--pb-muted); }
.status { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #6d86a4; }
.status.on { background: var(--pb-accent); border-color: var(--pb-accent); }
.ep-title {
  background: none;
  border: none;
  padding: 17px 0;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--pb-ink);
  cursor: pointer;
}
.ep-title:hover { color: var(--pb-accent); }
/* Every value ends in "min", so a plain right-aligned cell puts the unit in
   the same place on every row; tabular-nums keeps the digits from drifting. */
.dur {
  color: var(--pb-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ep-planned .dur { color: #718FAA; }

.play-btn {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: none;
  background: var(--pb-accent-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex: none;
}
.play-btn:hover { background: var(--pb-accent); }

.chev-btn { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; }
.chev { width: 16px; height: 16px; transition: transform .15s ease; opacity: .7; }
.ep-item.expanded .chev { transform: rotate(180deg); }

/* expanded content — animates as part of the row via a 0fr/1fr grid-rows trick,
   so the divider (on .ep-item) always lands after whatever is currently visible */
.ep-detail-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease;
}
.ep-detail { overflow: hidden; min-height: 0; opacity: 0; transition: opacity 180ms ease; }
.ep-item.expanded .ep-detail-wrap { grid-template-rows: 1fr; }
.ep-item.expanded .ep-detail { opacity: 1; }

/* Indent via margin, not padding, so the separator rule below starts level
   with the text instead of running back under the episode number. max-width
   drops to 590px to keep the same measure the 680px/90px-padding pair gave. */
.ep-desc {
  /* No top margin: .ep-title's own 17px padding inside a 58px row already
     leaves ~19px under the title text, so any margin here stacks on top of
     that and makes the gap above the text visibly larger than the one below.
     Everything below matches that inherited ~19px instead. */
  margin: 0 0 0 90px;
  padding-bottom: 18px;
  max-width: 590px;
  color: var(--pb-muted);
  font-size: 14px;
  line-height: 1.5;
}
/* Only when a player follows. A planned episode has no player, so the rule
   would otherwise sit a few px above the row divider and read as a double
   line. */
.ep-desc:not(:last-child) { border-bottom: 1px solid var(--pb-line); }

.ep-player {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 18px 90px;
  max-width: 590px;
}
.ep-player .play-btn { width: 28px; height: 28px; }

/* Sits directly under the player and aligned with it, so "this is only ten
   minutes" is read together with the transport rather than as body copy. */
.ep-preview-note {
  margin: -8px 0 18px 90px;
  max-width: 590px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pb-muted);
}
.ep-time {
  font-size: 12px;
  color: var(--pb-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.ep-seek {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--pb-accent) 0%, #E0E5EA 0%);
  cursor: pointer;
}
.ep-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pb-accent-dark);
  cursor: pointer;
}
.ep-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--pb-accent-dark);
  cursor: pointer;
}
.ep-speed {
  flex: none;
  background: none;
  border: 1px solid var(--pb-line);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  color: var(--pb-muted);
  cursor: pointer;
}
.ep-speed:hover { border-color: var(--pb-accent); color: var(--pb-accent); }

/* early access panel */
.early {
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
  border-radius: 20px;
  padding: 32px 40px;
  display: grid;
  /* fr, not %, so the 48px gap comes out of the free space instead of
     overflowing a 55+45=100% track pair */
  grid-template-columns: 55fr 45fr;
  gap: 44px;
  /* top-aligned, not centred: the right column has a strong starting point in
     the price, and centring the left against it left the headline floating */
  align-items: start;
}
.early-intro > * { margin-top: 0; }

/* right column: three groups, 22px apart, 8px within */
.early-buy { display: flex; flex-direction: column; gap: 22px; }
.early-group > * { margin: 0; }
.early-group > * + * { margin-top: 8px; }

.price { font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.buy { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* one size for every supporting line; colour carries the hierarchy instead.
   text-wrap:pretty keeps a single word off the last line (the price note
   otherwise orphans "complete."); it is a no-op in browsers without it. */
.early-line, .early-note {
  font-size: 15px;
  line-height: 1.45;
  text-wrap: pretty;
}
.early-line { color: var(--pb-ink); }
.early-line.muted, .early-note { color: var(--pb-muted); }

.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;
}

.series-description, .series-frequency { margin: 0; }
.series-frequency { margin-top: 1em; }

/* Free-episode offer -- the first rung of the ladder (free episode, then the
   course). A real card so it is found, but held a step under the pricing card:
   pale accent ground instead of the grey surface, a 26px title against the
   pricing card's 36px h2, and no price-sized type anywhere. Copy left, form
   right; stacks below 820px. */
.free-ep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: center;
  gap: 36px;
  margin: 22px 0 20px;
  padding: 26px 30px;
  background: var(--pb-accent-soft);
  border: 1px solid var(--pb-accent-soft-line);
  border-radius: 16px;
}
.free-ep[hidden] { display: none; }
.free-ep-eyebrow { color: var(--pb-accent); }
.free-ep-title {
  margin: 8px 0 10px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--pb-brand);
}
.free-ep-episode { margin: 0; font-size: 15px; color: var(--pb-ink); }
.free-ep-blurb {
  margin: 4px 0 0;
  max-width: 460px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--pb-muted);
  text-wrap: pretty;
}

/* "The science behind the ride" -- one heading and one paragraph under the
   episode list. Deliberately plain: body-copy size, no card, so it reads as
   a note on method rather than another offer competing with the pricing card. */
.approach { max-width: 680px; margin: 36px 0 0; }
.approach-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--pb-brand);
}
.approach p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--pb-ink); text-wrap: pretty; }
.approach .approach-sources { margin-top: 8px; font-size: 14px; color: var(--pb-muted); }
@media (max-width: 767px) {
  .approach { margin-top: 28px; }
  .approach p { font-size: 15px; }
}

/* The form is shared by the section and the end-of-preview card. */
.free-form-row { display: flex; gap: 8px; }
.free-form input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--pb-field-line);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--pb-ink);
  outline: none;
}
.free-form input[type="email"]::placeholder { color: var(--pb-field-placeholder); }
.free-form input[type="email"]:focus { border-color: var(--pb-accent); }
.free-form-submit { height: 46px; padding: 0 18px; font-size: 15px; }
.free-form-submit[disabled] { opacity: .6; cursor: default; }

.free-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pb-ink);
  cursor: pointer;
}
.free-form-consent input {
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--pb-accent-dark);
}
.free-form-helper { margin: 6px 0 0 23px; font-size: 12px; color: var(--pb-muted); }
.free-form-error { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: #B4472F; }

.free-sent-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--pb-brand); }
.free-sent-copy { margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: var(--pb-ink); }
.free-sent-copy strong { font-weight: 600; word-break: break-word; }
.free-sent-muted { color: var(--pb-muted); }
.free-sent .modal-link-action { margin-top: 6px; }
.free-member .free-sent-copy { margin-bottom: 14px; }
.free-member-listen { font-size: 15px; padding: 12px 20px; }

/* Hero CTA: white on the photo's dark scrim at desktop widths; below 900px
   the hero copy drops onto the paper ground and it reverts to the navy pill
   (see the max-width: 900px block). */
.hero-cta {
  margin-top: 18px;
  background: #fff;
  color: var(--pb-ink);
  font-size: 16px;
  padding: 13px 22px;
}
.hero-cta:hover { background: var(--pb-accent-soft); }

/* "Free" / "Free with email" next to an episode title. Inside the title
   button, so it is part of the click target and wraps with the title. */
.ep-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--pb-accent-soft-line);
  border-radius: 999px;
  background: var(--pb-accent-soft);
  color: var(--pb-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.5;
  vertical-align: 2px;
  white-space: nowrap;
}
.ep-badge[hidden] { display: none; }

/* Episode rows are scrolled to (after a sign-in link, from "Listen now"); keep
   the row off the very top edge of the viewport. */
.ep-item { scroll-margin-top: 24px; }

/* End-of-preview card: appears in the episode's detail area when its preview
   plays out. Same column as the player and its note. */
.ep-end-card {
  margin: 0 0 18px 90px;
  max-width: 590px;
  padding: 18px 20px;
  background: var(--pb-accent-soft);
  border: 1px solid var(--pb-accent-soft-line);
  border-radius: 12px;
}
.ep-end-card[hidden] { display: none; }
.ep-end-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--pb-brand); }
.ep-end-copy { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--pb-muted); text-wrap: pretty; }
.ep-end-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.ep-end-buy { font-size: 15px; padding: 11px 18px; }
.ep-end-secondary { font-size: 13px; color: var(--pb-accent); }

/* Account menu: the new-episode email toggle, between the address and Sign out. */
.account-menu-sub {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 0;
  border-top: 1px solid var(--pb-line);
  border-bottom: 1px solid var(--pb-line);
  font-size: 13px;
  line-height: 1.4;
  color: var(--pb-ink);
  cursor: pointer;
}
.account-menu-sub input { margin: 1px 0 0; flex: none; accent-color: var(--pb-accent-dark); }

@media (max-width: 820px) {
  .free-ep { grid-template-columns: 1fr; gap: 18px; padding: 22px 20px; }
}

@media (max-width: 520px) {
  .free-form-row { flex-direction: column; }
  /* flex: none -- in a column, the row layout's flex: 1 becomes a zero
     flex-basis on the *height* and squeezes the field to a sliver. */
  .free-form input[type="email"] { flex: none; font-size: 16px; } /* 16px keeps iOS from zooming on focus */
  .free-form-submit { width: 100%; justify-content: center; }
}

/* footer */
.footer {
  padding-top: 16px;
  padding-bottom: 40px;
  border-top: 1px solid var(--pb-line);
  display: flex;
  justify-content: space-between;
  color: var(--pb-muted);
  font-size: 13px;
}

@media (max-width: 900px) {
  /* header */
  .header { height: 64px; }

  /* Below the desktop centered-modal width, dock the sign-in modal as a
     bottom sheet instead -- full-width, anchored to the viewport bottom,
     internal padding standing in for the page's usual side margin. */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { max-width: none; width: 100%; border-radius: 20px 20px 0 0; padding: 28px 20px 24px; }
  .modal-form input { font-size: 16px; } /* keeps iOS from zooming on focus */
  .header-actions { gap: 10px; }
  .signed-in-course-cta { height: 42px; padding: 0 16px; min-width: auto; font-size: 14px; }
  .account-trigger { width: 32px; height: 32px; }

  /* hero: image on top (its own composition), text below in normal flow —
     not overlaid, so it reads as dark-on-paper like the rest of the page */
  .hero-card { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-visual { position: relative; inset: auto; width: 100%; aspect-ratio: 3/2; }
  .hero-bg { object-position: 68% 32%; }
  .hero-rider { height: 96%; right: 2%; bottom: 0; }
  .hero-scrim { display: none; }
  .corner-note { left: 20px; right: auto; top: 18px; text-align: left; font-size: 20px; }

  /* horizontal gutter matches .pb-container (20px) exactly — no extra indent */
  .hero-copy {
    position: static;
    top: 0;
    max-width: none;
    width: 100%;
    padding: 20px 20px 9px;
    background: none;
    color: var(--pb-ink);
  }
  .hero h1 {
    color: var(--pb-ink);
    font-size: clamp(33px, 27px + 1.875vw, 36px);
    margin: 0 0 15px;
  }
  .hero p { font-size: 16px; color: #142B4A; text-shadow: none; }
  .hero p strong { color: #142B4A; font-weight: 600; }

  /* let's connect: copy takes its own row, the two cards sit side by side
     under it. The mountain would land behind a card's opaque ground here, so
     it waits until the cards stack. */
  .connect { padding: 26px 0; }
  .connect-inner { grid-template-columns: 1fr 1fr; gap: 16px; }
  .connect-copy { grid-column: 1 / -1; }
  .connect-note { display: none; }
  .connect-mountain { display: none; }
  .connect-contours { width: 200px; opacity: .2; }

  /* audio series: one column, description stacked below with its own breathing room */
  .series-head { grid-template-columns: 1fr; gap: 0; }
  /* back to a plain text block's clearance now that the signup moved out of it
     -- what follows is the free-episode card, which brings its own top margin */
  .series-aside { margin-top: 0; margin-bottom: 6px; }
  .dots { margin: 10px 0 14px; }
  .section.series { padding-top: 24px; }

  /* early access: one column, tighter gap between the two stacked blocks */
  .early { grid-template-columns: 1fr; gap: 27px; border-radius: 17px; }

  /* nudge the partner-strip content up a couple px within its fixed height */
  .partner .pb-eyebrow, .partner img { transform: translateY(-2px); }

  /* episode rows: number | status | title | duration | play | chevron — one
     unified grid for every row (available or planned), so duration and
     chevron sit at exactly the same position regardless of row type. This
     costs planned rows a little title width versus reserving nothing for
     the play column, but alignment precision is the priority here; long
     titles still wrap on their own, and the other cells stay centered
     against however tall that makes the row. */
  /* duration column widened 42 -> 54px: the compact length format runs to 6
     characters ("42m30s"), which overflowed the old column that only ever had
     to hold a 5-character "42:27" */
  .ep { grid-template-columns: 22px 16px 1fr 52px 24px 18px; gap: 6px; min-height: 0; }
  .ep-num { font-size: 12px; align-self: start; margin-top: 17px; }
  .status { width: 9px; height: 9px; align-self: start; margin-top: 17px; }
  .ep-title { white-space: normal; font-size: 15px; padding: 13px 0; }
  .dur { font-size: 13px; }
  .ep .play-btn { width: 24px; height: 24px; }
  .chev-btn { margin-left: 4px; }
  .ep-desc { margin: 0 0 0 50px; padding-bottom: 16px; max-width: none; }
  .ep-player { margin: 16px 0 16px 50px; max-width: none; flex-wrap: wrap; row-gap: 8px; }
  .ep-preview-note { margin: -8px 0 16px 50px; max-width: none; }
  .ep-end-card { margin: 0 0 16px 50px; max-width: none; padding: 16px; }
  .ep-badge { margin-left: 8px; }

  .hero-cta { background: var(--pb-accent-dark); color: #fff; margin: 14px 0 6px; }
  .hero-cta:hover { background: var(--pb-accent); }


  .pb-eyebrow { font-size: 11px; letter-spacing: .20em; }
  .meta { font-size: 14px; }
  .section { padding-top: 28px; padding-bottom: 28px; }
}

@media (max-width: 767px) {
  .brand { font-size: 19px; }
  .tag { font-size: 8px; letter-spacing: .14em; }
  .header-inner { gap: 12px; }
  .pb-button { padding: 10px 16px; font-size: 14px; min-height: 44px; }

  .hero p { font-size: 15px; }

  .partner { min-height: 54px; gap: 14px; }
  .partner img { height: 52px; }

  .series h2 { font-size: 30px; }
  .early h2 { font-size: 29px; }
  .early { padding: 24px 20px; }
  /* full-width CTA under the price on narrow screens */
  .buy { gap: 14px; }
  .buy .pb-button { width: 100%; justify-content: center; }
  .price { font-size: 37px; }

  /* let's connect: full stack — copy, then a full-width card each, then the
     note tucked under them on the right */
  .connect { padding: 32px 0 28px; }
  .connect-inner { display: flex; flex-direction: column; align-items: stretch; gap: 13px; }
  .connect-heading { font-size: 29px; }
  .connect-body { max-width: none; }
  .connect-card { width: 100%; min-height: 72px; grid-template-columns: 44px 1fr auto; padding: 13px 16px; }
  .connect-card-icon { width: 44px; height: 44px; }
  /* The note drops below the cards here instead of sitting beside them, so
     the arrow's target moves from "left, at the Zwift card" to "up and left,
     at the Zwift icon". The SVG head points 51deg below horizontal-left on its
     own, so it needs ~74deg of lift to aim at the icon across normal phone
     widths. Rotating costs no layout width (46x34.5 -> 45.8 wide) and reaches
     ~10px up into the 13px gap, which only helps it read as tied to the card. */
  .connect-note { display: flex; align-items: center; gap: 4px; align-self: flex-end; margin: 6px 44px 0 0; }
  .connect-note-arrow { margin-bottom: 0; transform: rotate(74deg); }
  .connect-contours { top: -14px; bottom: auto; width: 190px; }
  .connect-mountain { display: block; width: 130px; right: 6px; bottom: 0; opacity: .3; }

  .footer {
    display: block;
    padding-top: 16px;
    padding-bottom: 24px;
    font-size: 12px;
  }
  .footer > div + div { margin-top: 14px; }
}

/* Below this width the header CTA needs the room more than the tagline
   does -- hide it rather than compress the header further. */
@media (max-width: 400px) {
  .tag { display: none; }
}

/* very narrow phones (down to the 320px floor) — the header is the tightest
   fit; the tagline is already hidden below 400px above. */
@media (max-width: 360px) {
  .brand { font-size: 16px; }
  .pb-button { padding: 9px 13px; font-size: 13px; }
  .connect-heading { font-size: 27px; }
  .connect-note { margin-right: 18px; }
  /* The smaller right margin above pushes the note outward, which offsets most
     of the narrower viewport — so the angle only steepens a little (74.7deg at
     360px to 81.2deg at the 320px floor), not a lot. */
  .connect-note-arrow { transform: rotate(78deg); }

}

/* ---------------------------------------------------------------------------
   Per-episode "Scientific sources" button and the modal it opens
   (sources-data.js, generated by make_sources_page.py).
   --------------------------------------------------------------------------- */

/* Same indent and measure as the player/preview note it sits under, so it
   reads as part of the episode's detail block rather than as body copy. */
.ep-sources {
  display: inline-block;
  margin: 0 0 18px 90px;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--pb-accent);
  text-decoration: none;
  cursor: pointer;
}
.ep-sources:hover { text-decoration: underline; }
.ep-sources:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 767px) { .ep-sources { margin: 0 0 16px 50px; } }

.modal-wide { max-width: 640px; max-height: 85vh; overflow-y: auto; }
.sources-eyebrow { margin-bottom: 4px; }

.src-group {
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pb-muted); margin: 24px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--pb-line);
}
.src-group:first-of-type { margin-top: 16px; }
.src-list { list-style: none; margin: 0; padding: 0; }
.src-item { padding: 14px 0; border-bottom: 1px solid var(--pb-line); }
.src-cite { margin: 0; font-size: 15px; line-height: 1.5; }
.src-authors { font-weight: 600; }
.src-title { color: var(--pb-accent); text-decoration: none; }
.src-title:hover { text-decoration: underline; }
.src-title:hover .src-link-label { text-decoration: none; }
.src-title:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; border-radius: 2px; }
.src-journal { color: var(--pb-muted); font-style: italic; }
.src-journal::before { content: "· "; font-style: normal; }
.src-link-label {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--pb-muted);
  background: var(--pb-surface); border: 1px solid var(--pb-line); white-space: nowrap;
}
.src-note { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--pb-muted); }
.src-also { font-style: italic; }

@media (max-width: 767px) {
  .modal-wide { max-width: none; }
}

/* ---------------------------------------------------------------------------
   The free-library homepage (2026-11; COACH_GTM_PLAN.md, 4) and the pieces
   other pages share with it: the newsletter form, the course page's heading.
   --------------------------------------------------------------------------- */

.header a.brand { text-decoration: none; }

/* The site nav, the same on every page: plain links, with this page marked.
   Below 1120px it drops to its own row under the wordmark (the course page's
   sign-in and "Get access" stay up beside the wordmark) and switches to the
   short labels, so all of it fits on a phone instead of being hidden. */
.site-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.site-nav a { font-size: 16px; font-weight: 500; color: var(--pb-muted); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--pb-ink); }
.site-nav a[aria-current="page"] { color: var(--pb-ink); font-weight: 600; }
.site-nav a:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 3px; border-radius: 2px; }
.site-nav .nav-short { display: none; }
.site-nav + .header-actions { margin-left: 26px; }

/* The header stays at the top as you scroll (header.js adds .is-scrolled for
   the hairline), on every page. Anchors (#ask, #newsletter, /course's
   #free-episode) stop below it instead of under it. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 252, 250, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  transition: box-shadow .2s ease;
}
.header.is-scrolled { box-shadow: 0 1px 0 var(--pb-line), 0 6px 18px rgba(11, 35, 69, .05); }
html { scroll-padding-top: 100px; }
@media (max-width: 1119px) { html { scroll-padding-top: 116px; } }

/* "Account" in the nav once signed in (header.js), with the course page's menu. */
.nav-account { position: relative; display: inline-flex; }
.nav-account-menu { top: calc(100% + 12px); right: 0; }
.site-nav .account-menu-link { display: block; margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--pb-ink); text-decoration: none; }
.site-nav .account-menu-link:hover { text-decoration: underline; }
.nav-account-menu .account-menu-email strong { display: block; color: var(--pb-ink); font-weight: 500; margin-top: 2px; }
.hdr-signin-nl { margin: 12px 0 0; align-items: flex-start; line-height: 1.4; }
.hdr-signin-nl input { margin-top: 2px; flex-shrink: 0; }
@media (max-width: 767px) { .nav-account-menu { right: auto; left: 0; } }
@media (max-width: 1119px) {
  .header { height: auto; padding: 14px 0 12px; }
  .header-inner { flex-wrap: wrap; row-gap: 10px; }
  .site-nav { order: 3; width: 100%; margin-left: 0; gap: 20px; }
  .site-nav + .header-actions { margin-left: auto; }
}
@media (max-width: 767px) {
  .site-nav { gap: 18px; }
  .site-nav a { font-size: 14px; }
  .site-nav .nav-long { display: none; }
  .site-nav .nav-short { display: inline; }
}

/* /course: the series heading is the page's h1 now. */
.series h1 { font-weight: 700; line-height: 1.05; letter-spacing: -.025em; margin: 8px 0 10px; text-wrap: balance; font-size: 40px; }
.series-library { margin-top: 12px; font-size: 15px; line-height: 1.5; }
.series-library a { color: var(--pb-accent); }
@media (max-width: 767px) { .series h1 { font-size: 30px; } }

/* hero */
.hero-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 14px;
}
.hero .hero-cta { margin-top: 14px; }

/* Newsletter form: the hero, the homepage section, article ends, /questions,
   /newsletter (newsletter.js). */
.nl-form { margin: 0; }
.nl-row { display: flex; gap: 8px; max-width: 520px; }
.nl-form input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--pb-field-line);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  color: var(--pb-ink);
}
.nl-form input[type="email"]::placeholder { color: var(--pb-field-placeholder); }
.nl-form input[type="email"]:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 1px; }
.nl-form button[type="submit"] { height: 46px; padding: 0 18px; font-size: 15px; }
.nl-form button[disabled], .nl-form input[disabled] { opacity: .6; cursor: default; }
.nl-form .nl-consent { font-size: 13px; line-height: 1.45; color: var(--pb-muted); margin: 8px 0 0; max-width: 520px; }
.nl-form .nl-consent a { color: inherit; }
.nl-form .nl-status { font-size: 14px; margin: 6px 0 0; min-height: 1.2em; color: #1d6b3a; }
.nl-form .nl-status.is-error { color: #b42318; }
.nl-coach { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--pb-ink); cursor: pointer; }
.nl-coach input { width: 16px; height: 16px; margin: 0; accent-color: var(--pb-accent-dark); }
/* the honeypot: off screen for people, still in the form for bots */
.nl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }


/* Share buttons (share.js): a row of quiet pills, the phone's share sheet
   the one filled button when the browser has it. On article pages, on every
   /questions card and on the homepage cards. */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 6px; }
.share-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--pb-field-line);
  border-radius: 999px;
  background: #fff;
  color: var(--pb-brand);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}
.share-btn[hidden] { display: none; }
.share-btn:hover { border-color: var(--pb-accent); color: var(--pb-accent); }
.share-btn:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; }
.share-primary { background: var(--pb-accent-dark); border-color: var(--pb-accent-dark); color: #fff; }
.share-primary:hover { background: var(--pb-accent); border-color: var(--pb-accent); color: #fff; }
.share-status { font-size: 13px; color: var(--pb-muted); }
.share-compact { gap: 6px; margin: 10px 0 0; }
.share-compact .share-btn { padding: 4px 11px; font-size: 13px; }
.share-compact .share-status { font-size: 12px; }

/* featured questions */
.q-teaser-list span { display: block; }
.feature-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pb-line);
  border-radius: 16px;
  padding: 12px 12px 14px;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.feature-card:hover { box-shadow: 0 10px 26px rgba(11, 35, 69, .09); transform: translateY(-2px); border-color: var(--pb-accent-soft-line); }
.feature-link { display: block; color: inherit; text-decoration: none; flex: 1; border-radius: 10px; }
.feature-link:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 3px; }
.feature-thumb { position: relative; display: block; margin-bottom: 10px; }
.q-teaser-list .feature-thumb img { margin-bottom: 0; }
/* A small round play button in the bottom-right corner: the thumbnails put
   their big words bottom-left, and the length is in the line under the card. */
.thumb-play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(11, 35, 69, .9);
  box-shadow: 0 4px 14px rgba(7, 27, 57, .25);
  transition: transform .15s ease, background .15s ease;
}
.thumb-play::before {
  content: "";
  margin-left: 3px; /* a triangle's weight sits left of its box */
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
}
.feature-card:hover .thumb-play { background: var(--pb-accent); }
.feature-card:hover .thumb-play { transform: scale(1.05); }
.feature-card .share-compact { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pb-line); }
/* the older .q-teaser-list a / span rules would otherwise reach into the card */
.q-teaser-list .share-btn { display: inline-flex; }
.q-teaser-list .share-btn[hidden] { display: none; }
.q-teaser-list .thumb-play { font-size: 0; }
.q-teaser-list .share-status { display: inline; font-size: 12px; font-weight: 400; }
.q-teaser-list .q-teaser-topic { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pb-muted); margin-bottom: 4px; }
.q-teaser-list .q-teaser-title { font-size: 17px; font-weight: 600; line-height: 1.35; }
.q-teaser-list .q-teaser-meta { font-size: 13px; font-weight: 400; color: var(--pb-muted); margin-top: 4px; }
.q-teaser-list a:hover .q-teaser-title { text-decoration: underline; }
.q-teaser-list a:hover span:not(.q-teaser-title) { text-decoration: none; }
.topic-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 20px; }
.topic-row-label { font-size: 14px; color: var(--pb-muted); margin-right: 4px; }
.topic-row .q-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--pb-accent-soft);
  border: 1px solid var(--pb-accent-soft-line);
  color: var(--pb-brand);
  font-size: 14px;
  text-decoration: none;
}
.topic-row .q-chip span { color: var(--pb-muted); margin-left: 2px; }
.topic-row .q-chip { transition: background .15s ease, border-color .15s ease; }
.topic-row .q-chip:hover { border-color: var(--pb-accent); background: #fff; }
.topic-row .q-chip:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; }
.teaser-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 6px; }
.teaser-notes { display: flex; flex-direction: column; gap: 6px; text-align: right; }
.teaser-new, .teaser-ask { margin: 0; font-size: 16px; color: var(--pb-ink); }
.teaser-new a, .teaser-ask a { font-weight: 600; color: var(--pb-accent); text-decoration: none; white-space: nowrap; }
.teaser-new a:hover, .teaser-ask a:hover { text-decoration: underline; }
@media (max-width: 767px) { .teaser-notes { text-align: left; } }

/* Ask what you want: the one dark band on the page, in the brand navy. */
.ask { background: var(--pb-brand); color: #fff; padding: 56px 0; }
.ask-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.ask .pb-eyebrow { color: rgba(255, 255, 255, .7); }
.ask h2 { font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -.025em; margin: 8px 0 14px; }
.ask-copy p { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .9); margin: 0 0 12px; max-width: 460px; }
.ask-copy .ask-private { font-size: 15px; color: rgba(255, 255, 255, .7); }
.ask-form { background: #fff; color: var(--pb-ink); border-radius: 18px; padding: 24px; }
.ask-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--pb-brand); }
.ask-form textarea, .ask-form input[type="email"] {
  width: 100%;
  border: 1px solid var(--pb-field-line);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  color: var(--pb-ink);
}
.ask-form textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; min-height: 110px; }
.ask-form input[type="email"] { height: 46px; padding: 0 14px; }
.ask-form textarea::placeholder, .ask-form input::placeholder { color: var(--pb-field-placeholder); }
.ask-form textarea:focus-visible, .ask-form input:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 1px; }
.ask-hint { font-size: 13px; line-height: 1.45; color: var(--pb-muted); margin: 6px 0 14px; }
.ask-count { color: var(--pb-ink); }
.ask-check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; margin: 0 0 10px; cursor: pointer; }
.ask-check input { width: 17px; height: 17px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--pb-accent-dark); }
.ask-email { margin: 6px 0 4px; }
.ask-email[hidden] { display: none; }
.ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; }
.ask-submit[disabled] { opacity: .6; cursor: default; }
.ask-privacy { font-size: 14px; color: var(--pb-muted); }
.ask-status { font-size: 15px; line-height: 1.45; margin: 12px 0 0; min-height: 1.2em; color: #1d6b3a; }
.ask-status.is-error { color: #b42318; }

/* coaching callout, newsletter section, course preview */
.coach-card, .newsletter-card, .course-card {
  border: 1px solid var(--pb-line);
  border-radius: 20px;
  padding: 32px 36px;
  background: #fff;
}
.coach-card { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; background: var(--pb-accent-soft); border-color: var(--pb-accent-soft-line); }
.coach-card h2, .newsletter-card h2, .course-card h2 { font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin: 8px 0 12px; text-wrap: balance; }
.coach-copy p, .newsletter-copy p, .course-copy p { font-size: 16px; line-height: 1.55; margin: 0 0 10px; max-width: 640px; }
.coach-points { list-style: none; margin: 14px 0 0; padding: 0; max-width: 640px; }
.coach-points li { position: relative; padding-left: 26px; margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.coach-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--pb-accent);
  border-bottom: 2px solid var(--pb-accent);
  transform: rotate(-45deg);
}
.coach-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.coach-access { font-size: 15px; font-weight: 600; color: var(--pb-accent); }
.section.coach { padding-bottom: 20px; }
.section.newsletter { padding-top: 20px; padding-bottom: 20px; }
.section.course-preview { padding-top: 20px; }
.newsletter-card { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.course-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.course-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.course-free { font-size: 15px; font-weight: 600; color: var(--pb-accent); }
.course-list { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--pb-line); }
.course-list li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--pb-line); font-size: 15px; font-weight: 500; }
.course-ep-n { color: var(--pb-muted); font-variant-numeric: tabular-nums; min-width: 1.2em; }
.course-ep-min { margin-left: auto; color: var(--pb-muted); font-weight: 400; font-size: 14px; white-space: nowrap; }

@media (max-width: 900px) {
  /* the hero copy sits on paper below the photo here, not on the photo */
  .hero-kicker { color: var(--pb-muted); }
  .ask-inner, .newsletter-card, .course-card { grid-template-columns: 1fr; gap: 24px; }
  .coach-card { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 767px) {
  .ask { padding: 36px 0; }
  .ask h2 { font-size: 32px; }
  .ask-form { padding: 18px; }
  .coach-card, .newsletter-card, .course-card { padding: 22px 20px; }
  .coach-card h2, .newsletter-card h2, .course-card h2 { font-size: 26px; }
  .nl-row { flex-direction: column; }
  /* stacked, flex: 1 would size the field from a zero basis and flatten it */
  .nl-form input[type="email"] { flex: none; }
  .nl-form button[type="submit"] { width: 100%; justify-content: center; }
  /* three questions are enough on a phone; "All N questions" has the rest */
  .q-teaser-list li:nth-child(n+4) { display: none; }
}

/* Made with coaches (make_articles.py, COACHES). A partnership video sits in
   the same list as every other question, marked in the site's accent blue:
   a solid card on the homepage, a framed thumbnail and a "Made with" pill on
   /questions, a "Made with coaches" chip in the filters. Never red, and one
   colour for every coach. Prefix co-: .partner, .ask and .coach-card are taken. */
.co-badge {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--pb-accent-dark); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .02em;
}
.co-badge.sm { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }

/* the filter chips */
.co-filter, .co-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--pb-accent); border-radius: 999px;
  background: #fff; color: var(--pb-accent);
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3;
  text-decoration: none; cursor: pointer;
}
.co-filter span:last-child, .co-chip span:last-child { font-weight: 400; opacity: .8; }
.co-filter:hover { background: var(--pb-accent-soft); }
.co-filter[aria-pressed="true"] { background: var(--pb-accent); color: #fff; }
.co-chip { padding: 4px 12px 4px 5px; border-color: var(--pb-field-line); color: var(--pb-brand); font-weight: 500; }
.co-chip[hidden] { display: none; }
.co-chip[aria-pressed="true"] { background: var(--pb-accent-dark); border-color: var(--pb-accent-dark); color: #fff; }
.co-chip[aria-pressed="true"] .co-badge { background: #fff; color: var(--pb-accent-dark); }
.co-filter:focus-visible, .co-chip:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; }
.co-subrow:not(:has(.co-chip:not([hidden]))) { display: none; }

/* homepage card: solid blue, white text */
.feature-card.is-co { background: var(--pb-accent); border-color: var(--pb-accent); color: #fff; box-shadow: 0 8px 22px rgba(18, 108, 168, .30); }
.feature-card.is-co:hover { background: var(--pb-accent-dark); border-color: var(--pb-accent-dark); }
.feature-card.is-co .feature-link { color: #fff; }
.q-teaser-list .is-co .q-teaser-topic,
.q-teaser-list .is-co .q-teaser-meta { color: rgba(255, 255, 255, .8); }
.feature-card.is-co .q-teaser-title { color: #fff; }
.feature-card.is-co .feature-thumb img { border-color: rgba(255, 255, 255, .5); }
.feature-card.is-co .share-compact { border-top-color: rgba(255, 255, 255, .35); }
.feature-card.is-co .share-btn { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.feature-card.is-co .share-btn:hover { border-color: #fff; background: rgba(255, 255, 255, .14); color: #fff; }
.feature-card.is-co .share-btn.share-primary { background: #fff; border-color: #fff; color: var(--pb-accent-dark); }
.feature-card.is-co .share-btn.share-primary:hover { background: #fff; }
.feature-card.is-co .share-status { color: #fff; }
.feature-card.is-co:hover .thumb-play { background: var(--pb-accent-dark); }

/* the coach pill on the thumbnail, top left so it clears the sketch's captions
   (.q-teaser-list span would otherwise make every span in a card a block) */
.q-teaser-list .co-with {
  position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border-radius: 999px; background: #fff; color: var(--pb-brand);
  font-size: 13px; font-weight: 600; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.q-teaser-list .co-badge, .q-list .co-badge { display: inline-grid; font-size: 10px; font-weight: 700; line-height: 1; }
.q-teaser-list a:hover .co-with { text-decoration: none; }

/* /questions: the row stays light, the thumbnail gets the frame */
.q-item.is-co img { border: 3px solid var(--pb-accent); border-radius: 12px; box-shadow: 0 6px 18px rgba(18, 108, 168, .25); }
.co-ribbon {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 3px 14px 3px 4px;
  border-radius: 999px; background: var(--pb-accent); font-size: 13px; line-height: 1; color: rgba(255, 255, 255, .85);
}
.co-ribbon strong { color: #fff; font-weight: 600; }
.co-ribbon .co-badge { background: #fff; color: var(--pb-accent-dark); }

/* the homepage's search, above the topic row */
.home-search { margin: 0 0 14px; }
.home-search input {
  width: 100%; font: inherit; font-size: 16px; /* 16px or more, or iOS zooms in on focus */
  padding: 12px 16px; border: 1px solid var(--pb-field-line); border-radius: 12px;
  background: #fff; color: var(--pb-ink);
}
.home-search input::placeholder { color: var(--pb-field-placeholder); }
.home-search input:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 1px; }