/* ==========================================================================
   JTBD "produce X" use-case page — reusable template styles
   First instantiated on /board-report-template (shipped draft-first under
   /blog/drafts/). Loads AFTER styles/main.css, so all :root design tokens,
   .btn*, .brand, .article-* and .lpd-* classes are already available and are
   reused directly. This file only adds the section components that are unique
   to a use-case page: the centred hero + centred demo, the repeatable value
   band, the anatomy emphasis, the template artifact, the connectors block, the
   related-template cards and the practitioner quote.
   Breakpoint contract matches the site: <=1024, <=768, <=480.
   ========================================================================== */

.jtbd { background: var(--bg-dark); position: relative; }

/* --- Breadcrumb (reusable <site-breadcrumb>) -------------------------------
   Small, muted, in normal flow directly above the H1 and left-aligned to it
   (it's the first child of `.hero__text`, so it shares the headline's column
   and left inset). Every use-case page. */
/* `display: contents` removes the host box so the rendered `.jtbd-breadcrumb`
   nav becomes the first flex child of `.hero__text` (16px above the H1). */
site-breadcrumb { display: contents; }
.jtbd-breadcrumb { margin: 0; }
.jtbd-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
}
.jtbd-breadcrumb__item { display: inline-flex; }
.jtbd-breadcrumb__link {
  color: var(--text-medium-on-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}
.jtbd-breadcrumb__link:hover,
.jtbd-breadcrumb__link:focus-visible { color: var(--text-strong-light); }
.jtbd-breadcrumb__sep { color: rgba(243, 247, 243, 0.32); }
.jtbd-breadcrumb__current { color: var(--text-strong-on-dark); }

/* ── GLOBAL TYPOGRAPHY RULE — no widows/orphans on display copy ──────────────
   A lone single word on the last line of a heading or centred subhead looks
   broken. `text-wrap: balance` evens heading lines; `text-wrap: pretty` reflows
   body/subhead copy so the last line is never a single dangling word. Content-
   agnostic (no per-string <br>/&nbsp; hacks) so every use-case page inherits it.
   Progressive enhancement: unsupported browsers fall back to normal wrapping. */
.hero--lp .hero__title,
.jtbd-band__stmt,
.jtbd .article-aside__title { text-wrap: balance; }
.jtbd-answer p,
.jtbd-tpl-card__desc { text-wrap: pretty; }

/* ── BRAND WORDMARK IN HEADINGS ──────────────────────────────────────────────
   The heading face (Season Mix) ships a single normal file covering weights
   600–700, so `.brand__ready` at 700 renders IDENTICALLY to a 600 heading — the
   wordmark's bold "ready" doesn't show (only the italic "when" reads). In every
   heading context, render "ready" in the site's bold display face (Season Sans,
   the same font the closing CTA uses) so the wordmark reads bold per the global
   brand rule. "when" keeps its Season Mix italic. Body copy is unaffected
   (Geist is a variable font where 700 vs 400 already reads bold). */
.article-body :is(h1, h2, h3, h4) .brand__ready {
  font-family: "Season Sans", var(--font-mix);
  font-weight: 800;
}
/* And "when" must never read as heavy as "ready" — pin it to the medium italic
   face (500) so it stays clearly lighter than the 800 "ready", not the heading's
   own 600 weight. */
.article-body :is(h1, h2, h3, h4) .brand__when { font-weight: 500; }

/* --- S1 Hero — TWO-COLUMN "hero--lp" layout (text left, product UI on the
   right over the green glow), reusing the site's .hero / .hero--lp system so
   the use-case hero matches the Figma "Hero Section" + the live LPs. Per-page
   overrides below restore this Figma's H1 (64/72) + subhead width. The eyebrow
   uses .hero__eyebrow (muted mono) and the micro reuses it too. */
.jtbd .hero--lp .hero__body .brand { color: var(--text-strong-light); }
/* Exact Figma "Hero BG Container" glow, scoped to use-case pages so the
   homepage/LP backgrounds are untouched. The image is the 683×1100 container
   aspect (cover fills the image column). */
.jtbd .hero--lp .hero__image-bg {
  background-image: url('../public/images/hero/jtbd-hero-bg.webp');
  background-size: cover;
  background-position: center right;
}
/* Keep the Figma bottom-fade overlay (gradient 2: fades the hero bottom to
   #232C27 over the last 393px). Cover-cropping the image alone doesn't land its
   baked fade at the hero's true bottom, so this overlay guarantees a smooth
   fade into the dark space above the value band (was hidden — the cause of the
   hard green-to-dark seam). */

/* Inky peeking from the device's bottom-left, straddling the seam (Figma). Sits
   above the device; the image column is overflow:visible ≥970 so it can bleed
   left. Hidden when the hero stacks (≤768) where it has nowhere to sit. */
.jtbd-hero-inky {
  position: absolute;
  z-index: 6;
  width: 300px;
  height: auto;
  left: -150px;
  top: calc(50% + 88px);
  pointer-events: none;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
  /* Same idle bob + sway as Inky everywhere else on the site (shared keyframes
     in main.css). translate/rotate compose independently of left/top. */
  transform-origin: 50% 35%;
  animation: octo-bob 5.5s ease-in-out infinite, octo-sway 7.3s ease-in-out infinite;
}
@media (max-width: 768px) { .jtbd-hero-inky { display: none; } }
/* Restore this Figma's larger H1 + subhead width — desktop only; below 1025 the
   site's .hero--lp responsive sizes (clamp) take over so it shrinks on tablet/mobile. */
@media (min-width: 1025px) {
  .jtbd .hero--lp .hero__title { width: 512px; font-size: 64px; line-height: 72px; }
  .jtbd .hero--lp .hero__body { width: 428px; }
}

/* .hero--lp intermediate-breakpoint behaviour, ported from the LP inline styles
   so the two-column hero reflows identically on every use-case page. */
@media (min-width: 1440px),
       (min-width: 1025px) and (max-width: 1439px),
       (min-width: 970px) and (max-width: 1024px) and (max-height: 1100px) {
  .hero--lp .hero__image { overflow: visible; }
  .hero--lp .lpd { left: calc(50% - 28px); }
}
@media (max-width: 1439px) {
  .hero--lp .lpd-stage { inset: 12px; }
}

/* --- Board hero chat animation (scripts/board-report-device-anim.js). Matched
   to the actual app UI (apps/platform ChatPanel / ToolActivity /
   FollowUpSuggestions): NO avatars in front of messages, a filled-primary user
   pill, green check-circle tool steps with a bold search term, a compact asset
   card for the produced doc, and a "Follow up:" card with lucide icons + plus
   buttons. Reuses the shared .lpd frame + .lpd-rail; new class names. --------- */
.lpd-chatcol { display: flex; min-width: 0; flex: 1; flex-direction: column; background: #f8f9f7; }
.lpd-thread { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.lpd-thread__in {
  position: absolute; inset: 0 0 auto 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 22px 6px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.lpd-appear { opacity: 0; transform: translateY(10px); transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
.lpd-appear.is-in { opacity: 1; transform: none; }
/* Messages — no avatars. Assistant = plain prose; user = filled primary pill. */
.lpd-msg { display: flex; }
.lpd-msg--u { justify-content: flex-end; }
.lpd-prose { max-width: 96%; font-size: 14px; line-height: 20px; color: #262723; }
.lpd-prose ul { margin: 6px 0 0; padding-left: 18px; }
.lpd-prose li { margin: 2px 0; }
.lpd-ubub { max-width: 80%; padding: 9px 14px; border-radius: 16px; background: #2c2924; color: #f7f6f2; font-size: 14px; line-height: 20px; }
/* Typing indicator (no avatar) */
.lpd-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.lpd-typing i { width: 5px; height: 5px; border-radius: 50%; background: #b9bdb2; animation: lpd-typing 1s infinite; }
.lpd-typing i:nth-child(2) { animation-delay: 0.15s; }
.lpd-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes lpd-typing { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* Tool-activity steps — green check-circle + muted text, bold search term. */
.lpd-step { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: #82817a; }
.lpd-step__c { flex: none; display: flex; color: #2e9d57; }
.lpd-step__c svg { width: 14px; height: 14px; }
.lpd-step__t b { font-weight: 500; color: #262723; }
/* Reasoning line */
.lpd-think { font-size: 13px; line-height: 19px; color: #3b3f38; }
/* Asset card (the produced document). */
.lpd-asset { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e2e2dc; border-radius: 12px; background: #fff; }
.lpd-asset__ico { flex: none; width: 32px; height: 32px; border-radius: 8px; background: #eeeeea; color: rgba(130, 129, 122, 0.75); display: flex; align-items: center; justify-content: center; }
.lpd-asset__ico svg { width: 16px; height: 16px; }
.lpd-asset__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: #262723; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpd-asset__dl { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 8px; background: #262723; color: #f7f6f2; font-size: 12px; font-weight: 500; }
.lpd-asset__dl svg { width: 12px; height: 12px; }
/* Follow-up card — "Follow up:" header, lucide icons, plus buttons. */
.lpd-fu { border: 1px solid rgba(226, 226, 220, 0.7); border-radius: 12px; background: rgba(238, 238, 234, 0.35); overflow: hidden; }
.lpd-fu__head { padding: 8px 12px; font-size: 12px; font-weight: 500; color: #82817a; }
.lpd-fu__row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-top: 1px solid rgba(226, 226, 220, 0.5); }
.lpd-fu__ico { flex: none; display: flex; color: #82817a; }
.lpd-fu__ico svg { width: 16px; height: 16px; }
.lpd-fu__t { flex: 1; font-size: 14px; color: #262723; }
.lpd-fu__add { flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: none; border-radius: 6px; color: #82817a; display: flex; align-items: center; justify-content: center; }
.lpd-fu__add svg { width: 14px; height: 14px; }
/* Composer — circular send / destructive stop, matching the app. */
.lpd-comp { flex: none; display: flex; align-items: center; gap: 10px; margin: 8px 16px 14px; padding: 9px 10px 9px 14px; border: 1px solid #e2e2dc; border-radius: 14px; background: #fff; }
.lpd-comp__ph { flex: 1; font-size: 14px; color: #a6aa9e; }
.lpd-comp__btn { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #eeeeea; color: #82817a; display: flex; align-items: center; justify-content: center; }
.lpd-comp__btn svg { width: 15px; height: 15px; }
.lpd-comp__btn.is-stop { background: #d64530; color: #fff; }
@media (min-width: 1025px) and (max-width: 1439px) {
  /* Hero clips at its OUTER edges so the gradient's right bleed can't cause page
     overflow; the device + Inky bleed over the interior SEAM, which isn't clipped. */
  .hero--lp { flex-direction: row; align-items: safe center; gap: 48px; overflow: hidden; padding-top: 0; padding-bottom: 0; padding-right: 0; min-height: 100vh; max-height: 1100px; height: auto; }
  .hero--lp .hero__content { width: auto; max-width: none; flex: 1 1 auto; min-width: 0; margin: 0; padding: 96px 0 48px; }
  .hero--lp .hero__image { width: min(50vw, 683px); max-width: 683px; min-width: 0; flex: 0 0 auto; align-self: stretch; height: auto; aspect-ratio: auto; margin: 0; border-radius: 0; }
  .hero--lp .hero__image-bg { border-radius: 0; }
  .hero--lp .hero__image-gradient { display: block; }
}
@media (min-width: 970px) and (max-width: 1024px) and (max-height: 1100px) {
  .hero--lp { flex-direction: row; align-items: safe center; padding-top: 0; padding-bottom: 0; padding-right: 0; gap: 48px; min-height: 100vh; max-height: 1100px; height: auto; overflow: hidden; }
  .hero--lp .hero__content { width: auto; max-width: none; flex: 1 1 auto; min-width: 0; margin: 0; padding: 96px 0 48px; }
  .hero--lp .hero__image { width: min(45vw, 460px); max-width: 460px; min-width: 0; flex: 0 0 auto; align-self: stretch; height: auto; aspect-ratio: auto; margin: 0; border-radius: 0; }
  .hero--lp .hero__image-bg { border-radius: 0; }
  .hero--lp .hero__image-gradient { display: block; }
}
@media (min-width: 769px) and (max-width: 969px) and (max-height: 1100px) {
  .hero--lp { padding-top: 96px; padding-bottom: 16px; gap: 16px; }
  .hero--lp .hero__content { gap: 16px; }
  .hero--lp .hero__image { width: min(100%, 720px); height: clamp(380px, calc(100svh - 380px), 480px); aspect-ratio: auto; }
}

/* Approve button accent inside the reused device */
.lpd-docbtn--go { color: var(--accent-darker); }
/* Demo panel title is a <span> here (not an <h3>) to keep the page heading
   order clean — the demo is decorative/aria-hidden. Restore block layout. */
.lpd-tl__title { display: block; }

/* --- Shared section rhythm ------------------------------------------------ */
.jtbd-section { max-width: 720px; margin: 0 auto; padding: 0 32px; }
.jtbd-section + .jtbd-section { margin-top: 80px; }
.jtbd-kicker {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: var(--accent);
}
.jtbd-h2 {
  margin: 0 0 16px;
  font-family: var(--font-mix);
  font-weight: 600;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.5px;
  color: var(--text-strong-light);
  scroll-margin-top: 104px;
}

/* --- S2 Answer-first block ------------------------------------------------ */
.jtbd-answer {
  max-width: 780px;
  margin: 72px auto 0;
  padding: 32px;
  border: 1px solid var(--border-on-dark);
  border-radius: 8px;
  background: var(--bg-lift-dark);
  box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo);
}
.jtbd-answer .jtbd-kicker { color: var(--accent); }
.jtbd-answer p {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--text-strong-on-dark);
}
.jtbd-answer p strong { color: var(--text-strong-light); font-weight: 500; }

/* --- S2b Repeatable value band -------------------------------------------- */
.jtbd-band {
  width: 100vw;
  margin: 80px calc(50% - 50vw) 0;
  padding: 80px 32px;
  background: var(--bg-depth-dark);
  text-align: center;
}
/* 780px (centre-anchored) clears the fixed article rails at every viewport:
   the TOC ends at centre-408px and the CTA card starts at centre+408px, so a
   900px inner overlapped both by ~42px on mid-size screens. */
.jtbd-band__inner { max-width: 780px; margin: 0 auto; }
/* 1281-1388px: the rails are visible but the CTA card is pinned 24px from the
   right (left edge = 100vw - 304px), so even 780px collides. Shrink to keep
   ~46px clearance; below 1281px the rails are display:none and above 1388px
   the centre-anchored maths holds. */
@media (min-width: 1281px) and (max-width: 1388px) {
  .jtbd-band__inner { max-width: calc(100vw - 700px); }
}
.jtbd-band__lbl {
  margin: 0 0 24px;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: var(--text-medium-on-dark);
}
.jtbd-band__stmt {
  margin: 0;
  font-family: var(--font-mix);
  font-weight: 600;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: -0.5px;
  color: var(--text-strong-light);
}
.jtbd-band__stmt .fast { color: var(--accent); }
.jtbd-band__stmt .slow { color: var(--accent-hover, #f07c6c); }

/* --- S4 Anatomy table (reuses .article-table) --------------------------------- */
.jtbd-anat { margin-top: 24px; }
/* On narrow screens a 3-col text table squashes to one word per line and clips
   the Length column. Reflow each row into a stacked card: Section = card title,
   the two <td>s become labelled lines (label from data-label). Scoped to
   .jtbd-anat so other article tables keep their horizontal-scroll behaviour. */
@media (max-width: 640px) {
  .jtbd-anat.article-table-wrap { border: 0; border-radius: 0; overflow: visible; }
  .jtbd-anat .article-table,
  .jtbd-anat .article-table tbody,
  .jtbd-anat .article-table tr,
  .jtbd-anat .article-table td,
  .jtbd-anat .article-table th { display: block; }
  .jtbd-anat .article-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .jtbd-anat .article-table tbody tr {
    padding: 16px;
    border: 1px solid var(--border-on-dark);
    border-radius: 10px;
    background: var(--bg-lift-dark);
  }
  .jtbd-anat .article-table tbody tr + tr { margin-top: 10px; }
  .jtbd-anat .article-table tbody th[scope="row"] {
    padding: 0 0 10px;
    border: 0;
    white-space: normal;
    font-size: 16px;
    line-height: 22px;
    color: var(--text-strong-light);
  }
  .jtbd-anat .article-table tbody td {
    padding: 6px 0 0;
    border: 0;
    display: flex;
    gap: 10px;
    font-size: 14px;
    line-height: 20px;
  }
  .jtbd-anat .article-table tbody td::before {
    content: attr(data-label);
    flex: none;
    min-width: 72px;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 11px;
    line-height: 20px;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    color: var(--text-medium-on-dark);
  }
}

/* --- S5 Template picker — reuses the FAQ accordion (native <details>/<summary>,
   all collapsed by default; descriptions + template + prompt stay in the raw
   HTML, so it's crawlable, same as the FAQ). Escalates most-hands-on → done for
   you. ----------------------------------------------------------------------- */
.jtbd-tpl { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.jtbd-tpl__item { background: var(--bg-lift-dark); border-radius: 8px; }
.jtbd-tpl__item--hero {
  background: radial-gradient(140% 180% at 100% 0%, rgba(172, 255, 182, 0.08) 0%, rgba(172, 255, 182, 0) 55%),
    var(--bg-lift-dark);
  box-shadow: inset 0 0 0 1px rgba(172, 255, 182, 0.22);
}
.jtbd-tpl__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
}
.jtbd-tpl__q::-webkit-details-marker { display: none; }
.jtbd-tpl__q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.jtbd-tpl__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-strong-on-dark);
}
.jtbd-tpl__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-on-dark);
  border-radius: 6px;
  background: rgba(243, 247, 243, 0.04);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-medium-on-dark);
}
.jtbd-tpl__tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(172, 255, 182, 0.14);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Brand wordmark in the (Geist) label: bold "ready", clearly-lighter italic
   "when" — the two halves must never read as equally bold. */
.jtbd-tpl__label .brand__ready { font-weight: 700; }
.jtbd-tpl__label .brand__when { font-weight: 400; }
/* +/- toggle (reused from the FAQ): plus when closed, minus when open. */
.jtbd-tpl__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  border: 1px solid var(--border-on-dark);
  border-radius: 8px;
  background: rgba(243, 247, 243, 0.08);
  box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo);
  color: var(--accent);
}
.jtbd-tpl__toggle svg { width: 12px; height: 12px; display: block; }
.jtbd-tpl__toggle .jtbd-tpl__minus { display: none; }
.jtbd-tpl__item[open] .jtbd-tpl__plus { display: none; }
.jtbd-tpl__item[open] .jtbd-tpl__minus { display: block; }
/* Expanded content: summary copy, then the template block, then the actions.
   The 24px left padding is the "body margin" the readywhen CTA aligns to. */
.jtbd-tpl__a { display: flex; flex-direction: column; gap: 16px; padding: 4px 24px 24px; }
/* Setting `display: flex` overrides the UA's closed-<details> hiding (which the
   FAQ's __a avoids by leaving display unset), so collapse it explicitly. Content
   stays in the DOM — crawlable. */
.jtbd-tpl__item:not([open]) .jtbd-tpl__a { display: none; }
.jtbd-tpl__desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-medium-on-dark);
  text-wrap: pretty;
}
/* Uniform action row across every item: Copy first, the other option second. */
.jtbd-tpl__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* On narrow screens the option-3 summary ("Let readywhen do it" + Recommended
   tag) runs out of room and the title wraps mid-phrase. Tighten the row's
   paddings/gaps and slim the tag so the title stays on one line. */
@media (max-width: 640px) {
  .jtbd-tpl__q { gap: 10px; padding: 18px 14px; }
  .jtbd-tpl__label { gap: 6px; font-size: 14px; flex-wrap: wrap; }
  .jtbd-tpl__text { white-space: nowrap; }
  .jtbd-tpl__tag { padding: 2px 6px; font-size: 9px; letter-spacing: 0.02em; }
  .jtbd-tpl__a { padding: 4px 16px 20px; }
}

/* Code panel (plain-text template / prompt file). */
.jtbd-code {
  border: 1px solid var(--border-on-dark);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-depth-dark);
}
.jtbd-code__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-on-dark);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-medium-on-dark);
}
.jtbd-code__head .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.jtbd-code pre {
  margin: 0;
  padding: 22px 24px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 22px;
  color: var(--text-strong-on-dark);
  white-space: pre;
  tab-size: 2;
}
/* Qualify `pre.jtbd-code__scroll` (0,2,1) to beat `.jtbd-code pre` (0,1,1) so
   the long prompt lines wrap instead of scrolling horizontally. */
.jtbd-code pre.jtbd-code__scroll { max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

.jtbd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border-on-dark);
  border-radius: 8px;
  background: rgba(243, 247, 243, 0.05);
  box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-strong-on-dark);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Hover = a simple background lift only, borrowed from the approved homepage
   glass buttons (`.arrow-btn:hover` under the testimonials). No border-colour
   change; the global `:focus-visible` ring handles keyboard focus. */
.jtbd-btn:hover { background: rgba(243, 247, 243, 0.12); }
.jtbd-btn svg { width: 16px; height: 16px; display: block; flex: none; }
/* The leading action (Copy), given a touch more presence than the second. */
.jtbd-btn--strong { background: rgba(243, 247, 243, 0.1); }
.jtbd-btn--strong:hover { background: rgba(243, 247, 243, 0.16); }
/* The quiet secondary action. */
.jtbd-btn--ghost { background: transparent; }
.jtbd-btn--ghost:hover { background: rgba(243, 247, 243, 0.08); }
/* Download <a> — neutralise `.article-body a` (mint underline + 1px pad) AND its
   `:hover { border-color: accent }`, which otherwise turned the whole button
   border green on hover. Keep the button's own neutral 4-sided border. */
.article-body a.jtbd-btn,
.article-body a.jtbd-btn:hover { color: var(--text-strong-on-dark); border-color: var(--border-on-dark); padding-bottom: 9px; }
/* Copy → check swap. Qualify to beat `.jtbd-btn svg { display:block }`. */
.jtbd-btn .jtbd-btn__check { display: none; }
.jtbd-btn.is-copied { color: var(--accent); }
.jtbd-btn.is-copied .jtbd-btn__copy { display: none; }
.jtbd-btn.is-copied .jtbd-btn__check { display: block; color: var(--accent); }

/* The readywhen wordmark inside a button inherits the button's text colour
   (dark on the primary) instead of the light .article-body .brand colour. */
.jtbd .btn .brand { color: inherit; }

/* --- S10 FAQ accordion — reuses the Figma card design in a single column
   (the designer's 2-col split would collide with the floating TOC/aside).
   Native <details>/<summary>: content stays in the raw HTML (crawlable), no JS.
   Card #28332D, 8px radius, glass +/- toggle with a mint icon. */
.jtbd-faq { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.jtbd-faq__item { background: var(--bg-lift-dark); border-radius: 8px; }
.jtbd-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-strong-on-dark);
}
.jtbd-faq__q::-webkit-details-marker { display: none; }
.jtbd-faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
/* Glass +/- circle (Figma "Circle") */
.jtbd-faq__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  border: 1px solid var(--border-on-dark);
  border-radius: 8px;
  background: rgba(243, 247, 243, 0.08);
  box-shadow: inset 0 1px 0 0 var(--inset-hi), inset 0 -1px 0 0 var(--inset-lo);
  color: var(--accent);
}
.jtbd-faq__toggle svg { width: 12px; height: 12px; display: block; }
/* Qualify with the parent so this beats `.jtbd-faq__toggle svg { display:block }`
   — otherwise both + and - show at once. Plus when closed, minus when open. */
.jtbd-faq__toggle .jtbd-faq__minus { display: none; }
.jtbd-faq__item[open] .jtbd-faq__plus { display: none; }
.jtbd-faq__item[open] .jtbd-faq__minus { display: block; }
.jtbd-faq__a { padding: 8px 24px 24px; }
.jtbd-faq__a p { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-medium-on-dark); }
.jtbd-faq__a p + p { margin-top: 12px; }

/* --- S7 Feature card (the previous "Feature Column"): a light card with a body,
   a row of rounded-square connector tiles, and a "see all" link. Each tile is a
   link to its /connectors page. -------------------------------------------- */
.jtbd-feature {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--border-on-light);
  border-radius: 12px;
  background: #f8faf8;
}
/* Two-class specificity beats `.article-body p` (0,1,1) so the light-card text
   stays dark, not the article's light-on-dark colour. */
.jtbd-feature .jtbd-feature__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: rgba(35, 44, 39, 0.64);
  text-wrap: pretty;
}
/* Brand wordmark on the light card: dark, not the light .article-body colour. */
.jtbd-feature .brand { color: #232c27; }
.jtbd-feature__tiles { display: flex; flex-wrap: wrap; gap: 6px; }
/* Stripe uses the shared connector-icon resolver; size it into the white disc. */
.jtbd-tpl-tile__icon .connector-tile__icon { width: 22px; height: 22px; }
/* Tiles are links — reset `.article-body a` (mint underline + its hover border
   tint); subtle background lift on hover, no green border. */
.jtbd-feature__tiles .jtbd-tpl-tile { text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; }
.article-body a.jtbd-tpl-tile,
.article-body a.jtbd-tpl-tile:hover { border-color: var(--border-on-light); padding-bottom: 0; }
.jtbd-feature__tiles .jtbd-tpl-tile:hover { background: #ffffff; }
.article-body a.jtbd-tpl-tile:hover { border-color: rgba(35, 44, 39, 0.28); }
/* "See all 145 connectors" link — accent-darker for contrast on the light card. */
.jtbd-feature__all {
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}
.article-body a.jtbd-feature__all { color: var(--accent-darker); border-bottom: 0; padding-bottom: 0; }
.jtbd-feature__all:hover { text-decoration: underline; }

/* --- S8 numbered steps — accent-coloured markers on an <ol>, keeping the
   HowTo's ordered semantics + schema and showing 1..5 numbers. -------------- */
.article-body ol.jtbd-steps-list { list-style: decimal; padding-left: 24px; }
.article-body ol.jtbd-steps-list li { padding-left: 6px; }
.article-body ol.jtbd-steps-list li::marker { color: var(--accent); font-weight: 700; }

/* --- S9 "What investors say" pull-quote (semantic <figure>). Visually
   subordinate to the section heading: the h2 is the label, the quote is
   lighter/smaller content, and the attribution is smaller still. -------------- */
.jtbd-pull { margin: 4px 0 0; padding: 2px 0 2px 24px; border-left: 2px solid var(--accent); }
.jtbd-pull blockquote { margin: 0; }
/* (0,1,2) beats `.article-body p` (0,1,1) so the quote stays this size/weight. */
.jtbd-pull blockquote p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: rgba(243, 247, 243, 0.82);
  text-wrap: pretty;
}
.jtbd-pull figcaption {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-medium-on-dark);
}
.jtbd-pull figcaption cite { font-style: italic; }

.jtbd-placeholder {
  display: block;
  margin-top: 12px;
  padding: 16px;
  border: 1px dashed var(--ui-warning, #c56a21);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.4px;
  color: var(--ui-warning, #c56a21);
}

/* --- S11 More templates (designer's light card-grid) ---------------------- */
/* Full-bleed light band that breaks out of the dark article column. The <h2>
   lives inside so the TOC/scroll-spy still finds it (it's an article-body h2),
   but is re-coloured dark-on-light here. */
.jtbd-templates {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 96px;
  padding: 96px 32px 104px;
  background: var(--bg-light);
}
.jtbd-templates__inner { max-width: 1376px; margin: 0 auto; }
/* Two-class specificity to beat `.article-body h2` (0,1,1). */
.jtbd-templates .jtbd-templates__title {
  margin: 0 0 40px;
  font-family: var(--font-mix);
  font-weight: 400;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.01em;
  color: var(--bg-dark);
  text-wrap: balance;
}
/* Bordered grid: single shared border, drawn per-cell so the internal rules
   are hairlines and the outer edge is one clean rounded rectangle. */
.jtbd-tpl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-on-light);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-light);
}
/* Reset the inherited `.article-body a` (mint colour + underline) — and set a
   dark default so link text isn't the article's light-on-dark colour on this
   light band. */
.jtbd-templates a { color: var(--bg-dark); border-bottom: 0; text-decoration: none; }
/* `.jtbd-templates` prefix lifts specificity to (0,2,0) so `padding` beats the
   inherited `.article-body a { padding-bottom: 1px }` (0,1,1) — the card is an <a>. */
.jtbd-templates .jtbd-tpl-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-right: 1px solid var(--border-on-light);
  border-bottom: 1px solid var(--border-on-light);
  background: #f8faf8;
  transition: background 0.15s ease;
}
.jtbd-tpl-card:hover { background: #ffffff; }
/* Keep the divider borders neutral on hover — otherwise `.article-body a:hover
   { border-color: accent }` turns the grid lines light green. Background change
   only. */
.article-body a.jtbd-tpl-card:hover { border-color: var(--border-on-light); }
.jtbd-tpl-card:nth-child(3n) { border-right: 0; }
.jtbd-tpl-card:nth-last-child(-n + 3) { border-bottom: 0; }
.jtbd-tpl-card__text { display: flex; flex-direction: column; gap: 12px; }
/* `.jtbd-templates` prefix (0,2,0) beats `.article-body h3`/`.article-body p`
   (0,1,1), which otherwise force the article's light-on-dark text colour here. */
.jtbd-templates .jtbd-tpl-card__title {
  margin: 0;
  font-family: var(--font-mix);
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #232c27;
}
.jtbd-templates .jtbd-tpl-card__desc {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(35, 44, 39, 0.64);
}
/* Row of "commonly used connectors" glass tiles (Figma Frame 529–532: 73px,
   9px radius, glass inset highlight, white icon disc). */
.jtbd-tpl-card__tiles { display: flex; gap: 6px; margin-top: auto; }
.jtbd-tpl-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--border-on-light);
  border-radius: 9px;
  background: #f8faf8;
  box-shadow: inset 0 0.75px 0 rgba(243, 247, 243, 0.16),
    inset 0 -0.75px 0 rgba(243, 247, 243, 0.08);
}
.jtbd-tpl-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
}
.jtbd-tpl-tile__icon img { width: 22px; height: 22px; object-fit: contain; }
/* Subtle "lift" of the connector tiles when the card is hovered — a gentle
   left-to-right stagger gives the section a little life. */
.jtbd-tpl-tile { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease; }
.jtbd-tpl-card:hover .jtbd-tpl-tile {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px -8px rgba(35, 44, 39, 0.22),
    inset 0 0.75px 0 rgba(243, 247, 243, 0.16),
    inset 0 -0.75px 0 rgba(243, 247, 243, 0.08);
}
.jtbd-tpl-card:hover .jtbd-tpl-tile:nth-child(2) { transition-delay: 0.05s; }
.jtbd-tpl-card:hover .jtbd-tpl-tile:nth-child(3) { transition-delay: 0.1s; }
.jtbd-tpl-card:hover .jtbd-tpl-tile:nth-child(4) { transition-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) {
  .jtbd-tpl-tile { transition: none; }
  .jtbd-tpl-card:hover .jtbd-tpl-tile { transform: none; box-shadow: inset 0 0.75px 0 rgba(243, 247, 243, 0.16), inset 0 -0.75px 0 rgba(243, 247, 243, 0.08); }
}
/* "Get started" glass button (Figma Hero Button Container / Base). */
.jtbd-tpl-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(35, 44, 39, 0.08);
  box-shadow: inset 0 1px 0 rgba(243, 247, 243, 0.16),
    inset 0 -1px 0 rgba(243, 247, 243, 0.08);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: #232c27;
  transition: background 0.15s ease;
}
.jtbd-tpl-card__cta .btn__dot {
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent-darker);
}
.jtbd-tpl-card:hover .jtbd-tpl-card__cta { background: rgba(35, 44, 39, 0.14); }
/* "See more" — dark glass button centred under the grid (Figma Base, dark). */
/* "See more" — dark glass button (Figma Base, dark variant). `.jtbd-templates`
   prefix keeps it (0,2,0)+ so `padding` beats `.article-body a`'s
   `padding-bottom: 1px` (0,1,1) and the light text colour beats the `a` reset. */
.jtbd-templates .jtbd-tpl-more {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 48px auto 0;
  padding: 8px 16px;
  border: 1px solid rgba(243, 247, 243, 0.08);
  border-radius: 8px;
  background: #232c27;
  box-shadow: inset 0 1px 0 rgba(243, 247, 243, 0.16),
    inset 0 -1px 0 rgba(243, 247, 243, 0.08);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color: #f3f7f3;
  transition: background 0.15s ease;
}
.jtbd-templates .jtbd-tpl-more:hover { background: #1b221e; }
.jtbd-templates .jtbd-tpl-more .btn__dot {
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent-darker);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  /* 2-up: reset the 3-col border overrides, re-apply for a 2-col grid. */
  .jtbd-tpl-grid { grid-template-columns: 1fr 1fr; }
  .jtbd-tpl-card { border-right: 1px solid var(--border-on-light); border-bottom: 1px solid var(--border-on-light); }
  .jtbd-tpl-card:nth-child(3n) { border-right: 1px solid var(--border-on-light); }
  .jtbd-tpl-card:nth-last-child(-n + 3) { border-bottom: 1px solid var(--border-on-light); }
  .jtbd-tpl-card:nth-child(2n) { border-right: 0; }
  .jtbd-tpl-card:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 768px) {
  /* .hero--lp keeps the image column overflow:visible for the desktop device
     bleed; re-clip it when stacked so the device can't spill past the viewport. */
  .hero--lp .hero__image { overflow: hidden; }
  .jtbd-h2 { font-size: 28px; line-height: 32px; }
  .jtbd-band { padding: 56px 24px; }
  .jtbd-band__stmt { font-size: 28px; line-height: 38px; }
  .jtbd-answer p { font-size: 18px; line-height: 28px; }
  .jtbd-templates { margin-top: 64px; padding: 64px 24px 72px; }
  .jtbd-templates .jtbd-templates__title { font-size: 30px; line-height: 36px; margin-bottom: 28px; }
  .jtbd-templates .jtbd-tpl-card { padding: 24px; gap: 20px; }
}
@media (max-width: 480px) {
  .jtbd-band__stmt { font-size: 24px; line-height: 34px; }
  /* Single column: every card is a row divider except the last. `.jtbd-templates`
     prefix keeps these at (0,2,0)+ so they beat the 2-col nth-child rules above. */
  .jtbd-tpl-grid { grid-template-columns: 1fr; }
  .jtbd-templates .jtbd-tpl-card { border-right: 0; border-bottom: 1px solid var(--border-on-light); }
  .jtbd-templates .jtbd-tpl-card:last-child { border-bottom: 0; }
}

/* "Soon" variant of the template card: same card, no link, a quiet label where
   the CTA sits. Used wherever a curated template is not built yet (no dead
   links; unbuilt = Soon). */
.jtbd-tpl-card--soon { cursor: default; }
.jtbd-tpl-card--soon:hover { transform: none; box-shadow: none; }
.jtbd-tpl-card__soon {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, monospace);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: rgba(35, 44, 39, 0.48);
}

/* Crawlable mirror for JS-rendered / aria-hidden blocks (the hero product-UI
   chat and the junior/senior comparison). Offscreen-clipped, NOT display:none
   and NOT aria-hidden, so search and AI crawlers index it; derived from the
   same engine data arrays, keep in sync when the animation copy changes
   (see seo-briefs CRAWLABILITY-MIRRORS.md). */
.seo-mirror {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}