/* ---- Variables & Reset ---- */

:root {
  --fg: #1a1a1a; --fg-muted: #555; --fg-faint: #888;
  --bg: #fdfdfc; --bg-surface: #f6f5f3;
  --accent: #0055dd; --accent-hover: #0044b3;
  --border: #e2e0dc;
  --bg-code: #1c1c1e; --fg-code: #e5e5e7;
  --green: #2a7d4f; --green-bg: #f3faf6;
  --red: #b5443a; --red-bg: #fdf4f3;
  --amber: #a06a12; --amber-bg: #fdf6ea;

  /* Spacing — Open Props' `--size-*` scale (MIT), values copied verbatim rather than
     @import'ed: an @import would serialise a second round trip to a third-party CDN
     in front of every page on the site. Use these for padding, margin and gap, never
     a bare rem. Values in `em` are deliberate (they track font-size) and stay put.
     Note the scale has no 0.75rem step — that is the one place the design had to give,
     and those declarations moved up to 1rem. */
  --size-1: 0.25rem;
  --size-2: 0.5rem;
  --size-3: 1rem;
  --size-4: 1.25rem;
  --size-5: 1.5rem;
  --size-6: 1.75rem;
  --size-7: 2rem;
  --size-8: 3rem;

  /* Radius is deliberately NOT Open Props'. Theirs runs 2px, 5px, 16px; this design's
     two most-used radii are 8px and 10px, which have no near equivalent on that scale —
     adopting it would make every card either visibly sharp or pill-round. Local scale:
     pills, controls, cards, media. */
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;
  --radius-4: 12px;

  /* Shadows — Open Props (MIT), light-theme values copied verbatim. Only the two
     lightest steps: --shadow-1 resolves to hsl(220 3% 15% / 10%), a hairline, which is
     what suits a paper-like editorial surface. Their --shadow-3+ are five-layer
     elevations built for a heavier, app-like UI and would fight this design.

     Use them where elevation *means* something — an element that lifts, or one that is
     deliberately raised above its peers. Prose blocks (.testimonial, .lead-answer) and
     full-width surface panels stay flat on purpose; shadowing everything is how a flat
     design becomes a noisy one. */
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
  --shadow-strength-4: calc(var(--shadow-strength) + 3%);
  --shadow-strength-6: calc(var(--shadow-strength) + 5%);
  --shadow-strength-10: calc(var(--shadow-strength) + 9%);
  --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color)/var(--shadow-strength-10));
  --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),
              0 7px 14px -5px hsl(var(--shadow-color)/var(--shadow-strength-6));

  /* Line height — Open Props' `--font-lineheight-*` (MIT). Replaces eight ad-hoc values
     doing about four jobs: headings tight, code 1.5, prose 1.75, the pipeline line 2. */
  --font-lineheight-1: 1.25;
  --font-lineheight-2: 1.375;
  --font-lineheight-3: 1.5;
  --font-lineheight-4: 1.75;
  --font-lineheight-5: 2;

  /* Weights — Open Props naming. 400/600/700 map exactly, so this is naming only. */
  --font-weight-4: 400;
  --font-weight-6: 600;
  --font-weight-7: 700;

  /* One duration, one easing. There were five spellings of a single intent, including
     `0.15s` and `0.15s ease`, which are the same thing written two ways. */
  --ease-3: cubic-bezier(.25, 0, .3, 1);
  --duration-fast: 0.15s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  line-height: var(--font-lineheight-4);
  color: var(--fg);
  background: var(--bg);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--size-8) var(--size-5);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
/* Prose links are underlined. Navigational links are not — underlining every row of
   an episode index or a card grid makes it unreadable — so the list, grid and card
   components opt out explicitly. `.results .meta a` is deliberately absent: it opts
   *in*, with its own underline rule further down. */
p a, li a { text-decoration: underline; }
.breadcrumbs a,
.episode-list li a,
.podcast-grid li a,
.results .title a,
.topics-line a { text-decoration: none; }

/* ---- Typography ---- */

h1 { font-size: 2rem; font-weight: var(--font-weight-7); line-height: var(--font-lineheight-1); margin-bottom: var(--size-2); letter-spacing: -0.02em; }
h2 {
  font-size: 1.25rem;
  font-weight: var(--font-weight-7);
  margin: var(--size-7) 0 var(--size-3);
  padding-bottom: var(--size-1);
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.01em;
}
h3 { font-size: 1rem; font-weight: var(--font-weight-6); margin-bottom: var(--size-1); }

p { margin-bottom: var(--size-3); }
ul { margin-bottom: var(--size-5); padding-left: var(--size-4); }
li { margin-bottom: var(--size-1); }

.subtitle { color: var(--fg-muted); font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; margin-bottom: var(--size-5); }

/* ---- Code & Pre ---- */

code {
  font-family: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  font-size: 0.85em;
  background: var(--bg-surface);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-1);
  border: 1px solid var(--border);
}

pre {
  background: var(--bg-code);
  color: var(--fg-code);
  padding: var(--size-4) var(--size-5);
  border-radius: var(--radius-3);
  overflow-x: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82em;
  line-height: var(--font-lineheight-3);
  margin: var(--size-3) 0 var(--size-3);
  border: 1px solid rgba(255,255,255,0.06);
}

pre code { background: none; padding: 0; border: none; font-size: 1em; color: inherit; }

/* ---- Breadcrumbs ---- */

.breadcrumbs { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--fg-faint); margin-bottom: var(--size-5); }
.breadcrumbs a { color: var(--fg-faint); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { margin: 0 0.4em; }

/* ---- Episode list (podcast hub + speaker pages) ---- */

.episode-list { list-style: none; padding: 0; }
.episode-list li { padding: var(--size-2) 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.episode-list li:last-child { border-bottom: none; }
.ep-date { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--fg-faint); margin-left: var(--size-2); }
.ep-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--fg-faint); margin-left: var(--size-2); }

/* ---- CTA section ---- */

.cta-section {
  text-align: center;
  padding: var(--size-7) var(--size-5);
  margin-top: var(--size-7);
  background: var(--bg-surface);
  border-radius: var(--radius-4);
  border: 1px solid var(--border);
}
.cta-section pre { text-align: left; margin: var(--size-3) auto; max-width: 540px; }

/* The whole-archive offer. Sits inline in the archive section rather than in a boxed
   .cta-section, so it needs its own spacing to read as an offer and not as more caption. */
.archive-cta { margin: var(--size-5) 0 var(--size-7); }
.archive-cta .cta { max-width: 100%; white-space: normal; text-align: center; }

.cta {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: var(--font-weight-6);
  font-size: 0.9rem;
  background: var(--accent);
  color: #fff;
  padding: var(--size-3) var(--size-5);
  border-radius: var(--radius-2);
  text-decoration: none;
  border: none;
  cursor: pointer;
  margin-top: var(--size-2);
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-1);
  transition: all var(--duration-fast) var(--ease-3);
}
.cta:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.cta:active { transform: translateY(0); box-shadow: var(--shadow-1); }

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

footer { margin-top: var(--size-8); padding-top: var(--size-5); border-top: 1px solid var(--border); color: var(--fg-faint); font-size: 0.85rem; }
footer a { color: var(--fg-faint); text-decoration: underline; }
footer a:hover { color: var(--accent); }

/* ---- Episode page ---- */

.episode-header { display: flex; gap: var(--size-5); align-items: flex-start; margin-bottom: var(--size-7); }
.episode-artwork { width: 160px; height: 160px; border-radius: var(--radius-4); flex-shrink: 0; }
.episode-meta h1 { font-size: 1.5rem; margin-bottom: var(--size-1); line-height: var(--font-lineheight-1); }
.episode-meta .podcast-name { color: var(--fg-muted); font-size: 1.05rem; }
.episode-meta .release-date { color: var(--fg-faint); font-size: 0.88rem; margin-top: var(--size-1); font-family: 'IBM Plex Mono', monospace; }
.episode-description { color: var(--fg-muted); font-size: 0.95rem; margin-bottom: var(--size-5); line-height: var(--font-lineheight-4); }
.speakers { font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; color: var(--fg-muted); margin-bottom: var(--size-5); }
.speakers .label { font-weight: var(--font-weight-6); color: var(--fg); }
.topics-line { font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; color: var(--fg-muted); margin-bottom: var(--size-5); }
.topics-line .label { font-weight: var(--font-weight-6); color: var(--fg); }

.transcript-preview { position: relative; max-height: 500px; overflow: hidden; margin-bottom: 0; }
.transcript-preview pre { margin: 0; white-space: pre-wrap; word-wrap: break-word; line-height: var(--font-lineheight-4); }
.transcript-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.transcript-remaining { text-align: center; color: var(--fg-faint); font-size: 0.88rem; margin-bottom: var(--size-2); font-family: 'IBM Plex Mono', monospace; }

.episode-page .cta-section { margin-top: 0; }
.episode-page .cta-section h2 { font-size: 1.25rem; margin-bottom: var(--size-2); }
.episode-page .cta-section .cta-intro { color: var(--fg-muted); font-size: 0.95rem; margin-bottom: var(--size-3); }

/* ---- Episode metadata page ---- */

.meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; color: var(--fg-muted); margin-bottom: var(--size-7); }
.artwork-float { width: 120px; height: 120px; border-radius: var(--radius-4); float: right; margin: 0 0 var(--size-3) var(--size-5); }
.cta-block { margin-top: var(--size-7); padding: var(--size-5); background: var(--bg-surface); border-radius: var(--radius-4); border: 1px solid var(--border); }
.cta-block h2 { font-size: 1rem; margin-bottom: var(--size-3); }

/* ---- Podcast hub page ---- */

.podcast-header { display: flex; gap: var(--size-5); align-items: flex-start; margin-bottom: var(--size-5); }
.podcast-artwork { width: 160px; height: 160px; border-radius: var(--radius-4); flex-shrink: 0; }
.podcast-meta h1 { font-size: 1.5rem; margin-bottom: var(--size-1); line-height: var(--font-lineheight-1); }
.podcast-meta .artist { color: var(--fg-muted); font-size: 1.05rem; }
.podcast-description { color: var(--fg-muted); font-size: 0.95rem; margin-bottom: var(--size-7); line-height: var(--font-lineheight-4); }

/* ---- Podcasts index page ---- */

.podcast-grid { list-style: none; padding: 0; display: grid; gap: var(--size-3); }
.podcast-grid li a { display: flex; align-items: center; gap: var(--size-3); padding: var(--size-3); border: 1px solid var(--border); border-radius: var(--radius-3); color: var(--fg); transition: border-color var(--duration-fast) var(--ease-3); }
.podcast-grid li a:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.podcast-thumb { width: 48px; height: 48px; border-radius: var(--radius-3); flex-shrink: 0; }
.podcast-grid span { font-size: 0.95rem; font-weight: var(--font-weight-6); }

/* ---- Find page ---- */

.search-form { display: flex; gap: var(--size-2); margin-bottom: var(--size-7); }
.search-input { flex: 1; font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; padding: var(--size-2) var(--size-3); border: 2px solid var(--border); border-radius: var(--radius-3); background: var(--bg); color: var(--fg); outline: none; transition: border-color var(--duration-fast) var(--ease-3); }
.search-input:focus { border-color: var(--accent); }
.search-input::placeholder { color: var(--fg-faint); }
.search-btn { font-family: 'IBM Plex Mono', monospace; font-weight: var(--font-weight-6); font-size: 0.88rem; background: var(--accent); color: #fff; padding: var(--size-2) var(--size-4); border-radius: var(--radius-3); border: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-3); white-space: nowrap; }
.search-btn:hover { background: var(--accent-hover); }
.search-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.results { list-style: none; padding: 0; }
.results li { border-bottom: 1px solid var(--border); }
.results li:last-child { border-bottom: none; }
.result-card { padding: var(--size-3) 0; }
.results .title { font-weight: var(--font-weight-6); font-size: 1rem; line-height: var(--font-lineheight-2); }
.results .title a { color: var(--accent); }
.results .title a:hover { color: var(--accent-hover); text-decoration: underline; }
.results .meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--fg-faint); margin-top: var(--size-1); }
.results .meta a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 2px; }
.results .meta a:hover { color: var(--accent); }
.result-cmd { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--fg-faint); margin-top: var(--size-2); cursor: pointer; overflow-x: auto; white-space: nowrap; }
.result-cmd:hover { color: var(--accent); }

.status { text-align: center; padding: var(--size-7) 0; color: var(--fg-faint); font-size: 0.95rem; }
.status.error { color: var(--red); }

.examples { font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; color: var(--fg-faint); margin-bottom: var(--size-7); }
.examples span { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.examples span:hover { color: var(--accent); }

/* ---- Marketing pages (vs/*, use-cases/*, why-spoken) ---- */

/* The serif lede. `.marketing .subtitle` is the same component under its old name:
   generated pages carry that class in frozen markup, so the selector has to stay
   even though new markup uses `.lede`. Keep the two declarations identical. */
.lede,
.marketing .subtitle { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.05rem; color: var(--fg-muted); margin-bottom: var(--size-5); line-height: var(--font-lineheight-3); }
.marketing .dateline { color: var(--fg-faint); font-size: 0.82rem; font-family: 'IBM Plex Mono', monospace; margin-top: calc(-1 * var(--size-2)); margin-bottom: var(--size-5); }

/* Lead answer block — the 40–60 word snippet AI extracts */
.lead-answer {
  font-size: 1.05rem;
  line-height: var(--font-lineheight-4);
  padding: var(--size-4) var(--size-5);
  background: var(--bg-surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-3) var(--radius-3) 0;
  margin: 0 0 var(--size-6);
}
.lead-answer p:last-child { margin-bottom: 0; }

/* Comparison table */
.compare-table { border-collapse: collapse; margin: var(--size-3) 0 var(--size-5); font-size: 0.92rem; }
.compare-table th, .compare-table td { padding: var(--size-3) var(--size-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.compare-table th { background: var(--bg-surface); font-weight: var(--font-weight-6); font-size: 0.88rem; letter-spacing: -0.01em; }
.compare-table th:first-child, .compare-table td:first-child { font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; color: var(--fg-muted); width: 32%; }
.compare-table .col-spoken { background: rgba(0,85,221,0.04); }
.compare-table th.col-spoken { background: rgba(0,85,221,0.08); color: var(--accent); }
@media (max-width: 600px) { .compare-table { font-size: 0.85rem; } .compare-table th, .compare-table td { padding: var(--size-2) var(--size-2); } }

/* When-to-use / when-not boxes */
.use-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-3); margin: var(--size-3) 0 var(--size-5); }
@media (max-width: 600px) { .use-grid { grid-template-columns: 1fr; } }
.use-card { padding: var(--size-3) var(--size-4); border-radius: var(--radius-3); border: 1px solid var(--border); background: var(--bg); font-size: 0.95rem; }
.use-card.pick { border-color: rgba(0,85,221,0.35); background: rgba(0,85,221,0.04); }
.use-card h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--size-2); color: var(--fg-faint); font-family: 'IBM Plex Mono', monospace; }
.use-card.pick h3 { color: var(--accent); }
.use-card ul { margin: 0 0 0 var(--size-4); }
.use-card li { margin-bottom: var(--size-1); line-height: var(--font-lineheight-3); }

/* FAQ */
.faq-item { margin-bottom: var(--size-4); }
.faq-item h3 { font-size: 1rem; font-weight: var(--font-weight-6); margin-bottom: var(--size-1); }
.faq-item p { color: var(--fg-muted); }

/* Inline code-like callout for cost figures */
.figure-callout { font-family: 'IBM Plex Mono', monospace; font-size: 0.85em; background: var(--bg-surface); padding: 0.1em 0.4em; border-radius: var(--radius-1); border: 1px solid var(--border); }

/* TL;DR / verdict box at end of comparison pages */
.verdict {
  margin: var(--size-5) 0;
  padding: var(--size-4) var(--size-5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  font-size: 0.97rem;
}
.verdict strong { color: var(--accent); }

/* Outline variant of .cta — for a secondary/lower-commitment action next to a primary buy button */
.cta-secondary {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  margin-right: var(--size-2);
}
.cta-secondary:hover { background: var(--accent); color: #fff; }

/* Testimonial + usage-stat proof block, for comparison/use-case pages that otherwise carry no social proof */
.testimonial {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-3);
  padding: var(--size-5) var(--size-6);
  margin: var(--size-7) 0;
}
.testimonial p { font-size: 1.05rem; color: var(--fg); margin-bottom: var(--size-3); }
.testimonial .attribution { font-style: normal; font-size: 0.9rem; color: var(--fg-muted); margin-bottom: 0; }
.proof-stat { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; color: var(--fg-faint); margin: 0 0 var(--size-6); }

/* ============================================================================
   Homepage components (website/index.html)

   Base rules above are shared by every page, homepage included — there is one
   type scale, one link treatment, one .cta, one .testimonial. What follows is
   only what exists nowhere else: the pricing tiers, the before/after cards, the
   copy-to-clipboard code chrome. Nothing here is a restatement of a base rule.
   ============================================================================ */

/* ---- Copyable code block ---- */

.code-block { position: relative; }
.copy-btn {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: var(--font-weight-6);
  background: rgba(255,255,255,0.08);
  color: var(--fg-code);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-1);
  padding: var(--size-1) var(--size-2);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-3);
}
.copy-btn:hover { background: rgba(255,255,255,0.18); }

/* Syntax-ish colors for code blocks */
.code-comment { color: #6a737d; }
.code-string { color: #9ecbff; }
.code-header { color: #85e89d; }
.code-value { color: #ffab70; }
.code-key { color: #b392f0; }
.code-cmd { color: #79b8ff; }

/* Response header bar connected to the code block below it */
.response-headers {
  background: var(--bg-code);
  color: var(--fg-code);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78em;
  padding: var(--size-2) var(--size-3);
  border-radius: var(--radius-3) var(--radius-3) 0 0;
  margin-bottom: 0;
  line-height: var(--font-lineheight-4);
  border: 1px solid rgba(255,255,255,0.06);
  border-bottom: none;
}
.response-headers + pre { border-radius: 0 0 var(--radius-3) var(--radius-3); margin-top: 0; }

/* ---- Before/after comparison ---- */

.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-3); margin: var(--size-4) 0 var(--size-5); }
@media (max-width: 600px) { .comparison { grid-template-columns: 1fr; } }
.comparison-card { border-radius: var(--radius-3); padding: var(--size-4); font-size: 0.9rem; line-height: var(--font-lineheight-4); }
.comparison-card.before { background: var(--red-bg); border: 1px solid #e8c9c6; }
.comparison-card.after { background: var(--green-bg); border: 1px solid #bce0cc; }
.comparison-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  font-weight: var(--font-weight-6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--size-2);
  display: block;
}
.comparison-card.before .comparison-label { color: var(--red); }
.comparison-card.after .comparison-label { color: var(--green); }
.comparison-card p { margin-bottom: var(--size-2); font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; }
.comparison-card p:last-child { margin-bottom: 0; }

/* ---- Pricing ---- */

.pricing {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-4);
  padding: var(--size-6);
  margin: var(--size-5) 0;
}
.pricing .price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 2.2rem;
  font-weight: var(--font-weight-6);
  letter-spacing: -0.03em;
}
.pricing .unit { color: var(--fg-muted); font-size: 1rem; font-weight: var(--font-weight-4); }

.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: var(--size-5) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-4);
}
.pricing-tiers .pricing:first-child { border-radius: var(--radius-4) 0 0 var(--radius-4); }
.pricing-tiers .pricing:last-child { border-radius: 0 var(--radius-4) var(--radius-4) 0; }
@media (max-width: 600px) {
  .pricing-tiers { grid-template-columns: 1fr; }
  .pricing-tiers .pricing { border-right: none !important; border-bottom: 1px solid var(--border); }
  .pricing-tiers .pricing:last-child { border-bottom: none; }
  .pricing-tiers .pricing:first-child { border-radius: var(--radius-4) var(--radius-4) 0 0; }
  .pricing-tiers .pricing:last-child { border-radius: 0 0 var(--radius-4) var(--radius-4); }
}
.pricing-tiers .pricing {
  margin: 0;
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--border);
  background: var(--bg);
  transition: background var(--duration-fast) var(--ease-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pricing-tiers .pricing:last-child { border-right: none; }
.pricing-tiers .pricing:hover { background: var(--bg-surface); }
/* The recommended tier is the one element on the page whose job is to sit above
   its peers, so it is the one that gets real elevation. position/z-index let the
   shadow paint over the adjacent tiers rather than under them. */
.pricing-tiers .pricing.recommended {
  background: var(--bg-surface);
  border-color: var(--border);
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-2);
}
.pricing-tiers .pricing.recommended:hover { background: #efeeeb; }
.pricing-tiers .pricing .price { font-size: 2rem; margin-bottom: var(--size-1); }
.pricing-tiers .pricing .muted-sm { margin-bottom: var(--size-3); }
.pricing-tiers .pricing .cta { margin-top: auto; }
/* Softer CTA on non-recommended tiers */
.pricing-tiers .pricing:not(.recommended) .cta {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.pricing-tiers .pricing:not(.recommended) .cta:hover { background: var(--accent); color: #fff; }

.pricing-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  font-weight: var(--font-weight-6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--accent);
  color: #fff;
  padding: var(--size-1) var(--size-2);
  border-radius: var(--radius-1);
  display: inline-block;
  margin-bottom: var(--size-1);
}
.pricing .save {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--green);
  font-weight: var(--font-weight-6);
  background: var(--green-bg);
  padding: var(--size-1) var(--size-2);
  border-radius: var(--radius-1);
  margin-left: var(--size-1);
  vertical-align: middle;
}
.pricing .tier-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: var(--font-weight-6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  margin-bottom: var(--size-1);
}

/* ---- Hero, CTAs, misc ---- */

.hero-cta { margin: var(--size-5) 0 var(--size-2); }
.hero-cta-sub { display: inline-block; margin-left: var(--size-3); color: var(--fg-muted); font-size: 0.88em; }

.bottom-cta {
  margin-top: var(--size-7);
  text-align: center;
  padding: var(--size-7) var(--size-6);
  background: var(--bg-surface);
  border-radius: var(--radius-4);
  border: 1px solid var(--border);
}
.bottom-cta .cta { font-size: 0.95rem; padding: var(--size-3) var(--size-7); }

.integration-block { margin-top: var(--size-5); }
.integration-block h3 { font-size: 1rem; }

.muted { color: var(--fg-muted); font-size: 0.9em; }
.muted-sm { color: var(--fg-muted); font-size: 0.88em; }

.pipeline-steps {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85em;
  color: var(--fg-muted);
  line-height: var(--font-lineheight-5);
  margin-bottom: var(--size-3);
}
.pipeline-steps .step { display: inline; }
.pipeline-steps .arrow { color: var(--fg-faint); margin: 0 0.15em; }
.pipeline-steps .strikethrough { text-decoration: line-through; color: var(--fg-faint); }


/* ============================================================================
   Account and post-purchase pages (account.html, success.html)
   ============================================================================ */

/* ---- Shared UI states ---- */

.hidden { display: none; }
.loading-msg { color: var(--fg-faint); }
.error-msg {
  background: var(--red-bg);
  border-left: 3px solid var(--red);
  padding: var(--size-3) var(--size-3);
  margin: var(--size-3) 0;
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
}
.warning {
  background: var(--amber-bg);
  border-left: 3px solid var(--amber);
  padding: var(--size-3) var(--size-3);
  margin: var(--size-3) 0;
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
}

/* ---- Highlight box: the API key on success.html, the balance on account.html.
        One component; they were separately invented with different greens. ---- */

.key-box,
.balance-card {
  background: var(--green-bg);
  border: 1px solid #c6e9d4;
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-3);
  padding: var(--size-4) var(--size-5);
  margin: var(--size-5) 0;
}
.key-value {
  font-family: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  font-size: 1.05rem;
  word-break: break-all;
  user-select: all;
  margin: var(--size-2) 0;
}
.balance-credits { font-family: 'IBM Plex Mono', monospace; font-size: 2rem; font-weight: var(--font-weight-7); color: var(--green); }
.balance-label { color: var(--fg-muted); font-size: 0.88rem; margin-top: var(--size-1); }
.balance-email { font-size: 0.88rem; color: var(--fg-muted); margin-top: var(--size-2); }

/* ---- Key entry ---- */

.key-input-group { display: flex; gap: var(--size-2); align-items: stretch; flex-wrap: wrap; margin: var(--size-3) 0; }
.key-input {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  padding: var(--size-2) var(--size-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  flex: 1;
  min-width: 200px;
  background: var(--bg);
  color: var(--fg);
}
.key-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.active-key { display: flex; align-items: center; gap: var(--size-3); flex-wrap: wrap; margin: var(--size-3) 0; }
.active-key code { font-size: 0.9rem; padding: 0.35em 0.6em; }

.forget-btn {
  background: none;
  border: none;
  color: var(--fg-faint);
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.forget-btn:hover { color: var(--red); }

/* ---- Top-up buttons ---- */

.topup-grid { display: flex; gap: var(--size-2); flex-wrap: wrap; margin: var(--size-3) 0 var(--size-5); }
.topup-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  font-weight: var(--font-weight-6);
  padding: var(--size-2) var(--size-3);
  border-radius: var(--radius-2);
  cursor: pointer;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  text-decoration: none;
}
.topup-btn:hover { background: var(--accent); color: #fff; }
.topup-btn span { font-weight: var(--font-weight-4); color: var(--fg-faint); }
.topup-btn:hover span { color: rgba(255,255,255,0.8); }

/* ---- Usage table ---- */

.usage-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: var(--size-2); }
.usage-table th {
  text-align: left;
  font-weight: var(--font-weight-6);
  padding: var(--size-2) var(--size-3);
  border-bottom: 2px solid var(--border);
  font-size: 0.82rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.usage-table td { padding: var(--size-2) var(--size-3); border-bottom: 1px solid var(--border); font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; }
.usage-table tr:last-child td { border-bottom: none; }
.usage-total { font-size: 0.88rem; color: var(--fg-muted); margin-top: var(--size-2); }


/* ============================================================================
   Layout: breaking out of the reading column
   ============================================================================ */

/* The body is a 720px reading column, which is right for prose and wrong for things
   you *compare*. A side-by-side diff and a three-tier price grid are comparison
   objects: squeezing them into the text measure is what made the pricing tiers read
   as three flat cells. Centres on the column's own centre, so it stays aligned when
   the viewport is wider than the page. */
/* Applied to the existing component classes, not via a `.breakout` class in markup:
   these live in generated SEO pages, and a class in a template only reaches pages
   rendered after it lands — which would mean another 33,000-page sweep. Targeting the
   selectors the corpus already carries reaches every page the moment this deploys.

   Widened by name rather than via a `.breakout` utility class: the utility would have
   had exactly two users, both on the homepage, both already carrying a semantic class —
   and it could never be reused where it would matter most, since a class added to an SEO
   template does not reach the pages that already exist. One mechanism, not two.

   Deliberately NOT here: .episode-list and .results. Those are vertical lists of
   titles — prose-shaped, and widening them just lengthens the line you have to scan.
   Breakout is for things read across, not down. */
.comparison,
.pricing-tiers,
.compare-table,
.use-grid,
.podcast-grid {
  width: min(94vw, 940px);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* At 940px a two-column card grid leaves each card mostly empty, so the extra width
   buys a third column rather than wider cards. */
.podcast-grid { grid-template-columns: repeat(3, 1fr); }
/* Widest first, then narrowing — these must stay in this order, or the 600px rule loses
   to the 900px one below it and mobile gets two columns. */
@media (max-width: 900px) { .podcast-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .podcast-grid { grid-template-columns: 1fr; } }

/* ---- Hero CTA row ---- */

.hero-cta-buttons { display: flex; flex-wrap: wrap; gap: var(--size-2); align-items: center; }
.hero-cta-buttons form { margin: 0; }
/* The row owns the spacing now, so the button's own margins must not double it. */
.hero-cta-buttons .cta { margin-top: 0; margin-right: 0; }

@media (max-width: 600px) {
  /* Sized to their labels, the two CTAs came out different widths, which reads as
     unfinished. Stack them at equal width instead. */
  .hero-cta-buttons { flex-direction: column; align-items: stretch; }
  .hero-cta-buttons form,
  .hero-cta-buttons .cta { width: 100%; }
  .hero-cta-buttons .cta { display: block; text-align: center; }
}