/* ══════════════════════════════════════════
   PLAYBOOK — shared reading surface
   Loaded by /playbook/ and every /playbook/[chapter]/ page.

   Light on purpose: these pages are long-form reading and long dark
   text causes halation. This is a recorded exception to the site's
   dark theme — see CLAUDE.md before "fixing" it.

   Brand orange #ff9200 scores only 2.15:1 on this ground, so it is
   used for FILLS and RULES only. Orange text uses --pb-accent-ink.
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
     PLAYBOOK — .pb-* prefix
     A long-form reading surface. Text-first, no
     hero image, dark like the rest of the site.

     Header is fixed and measures 77px under
     1200px, 122px at and above it. Every
     scroll-margin and sticky offset below is
     derived from --pb-header, not guessed.
     ══════════════════════════════════════════ */

  /* ── Light reading surface ──
     A deliberate exception to the site's dark theme, made because this page
     is a 4,100-word read and long-form dark text causes halation. Recorded
     in CLAUDE.md so it is not "corrected" later.

     Brand orange #ff9200 scores only 2.15:1 on this ground, so it is used
     for FILLS and RULES (where it is a background) and never for text.
     Text that must read orange uses --pb-accent-ink at 5.7:1. */
  .pb-scope {
    --pb-header: 77px;
    --pb-gutter: 24px;

    --pb-bg: #fbfaf8;
    --pb-bg-sunk: #f4f1ec;

    --pb-ink: #1c1917;                    /* 16.8:1 */
    --pb-ink-2: #35302c;                  /* 12.1:1 — body */
    --pb-ink-3: #57534e;                  /* 7.3:1  — secondary */
    --pb-ink-4: #6f6862;                  /* 5.0:1  — meta, still body-legal */

    --pb-line: rgba(28, 25, 23, 0.13);
    --pb-line-soft: rgba(28, 25, 23, 0.075);

    --pb-accent: #ff9200;                 /* fills, bars, rules only */
    --pb-accent-ink: #9c4f00;             /* 5.7:1 — orange TEXT */
    --pb-accent-deep: #7c3f00;            /* hover on orange text */
    --pb-accent-wash: rgba(255, 146, 0, 0.10);

    /* #4ade80 scores only 1.74:1 on white and cannot be used for text here.
       This is the darkest green that still reads as "yes" at 5.02:1. */
    --pb-good: #15803d;
    --pb-good-bright: #4ade80;   /* fills only, never text */

    --pb-surface: #ffffff;
    --pb-surface-2: #fffdfa;

    --pb-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05), 0 2px 8px -2px rgba(28, 25, 23, 0.07);
    --pb-shadow-md: 0 2px 4px rgba(28, 25, 23, 0.05), 0 10px 24px -8px rgba(28, 25, 23, 0.11);
    --pb-shadow-lg: 0 4px 8px rgba(28, 25, 23, 0.05), 0 22px 48px -16px rgba(28, 25, 23, 0.16);

    --pb-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --pb-measure: 64ch;
  }
  @media only screen and (min-width: 1200px) {
    .pb-scope { --pb-header: 122px; }
  }

  /* The site paints a light default behind the wrapper; this page is dark,
     so it claims its own ground rather than inheriting it. */
  .pb-scope {
    background: var(--pb-bg);
  }

  /* The template's .body-wrapper carries `overflow: hidden` sitewide, which
     silently disables `position: sticky` for every descendant. Lifted for
     this route only (via the pb-page body class) so the chapter rail can
     stick; scoped deliberately narrow so no other page changes behavior. */
  body.pb-page { background: var(--pb-bg); }
  body.pb-page .body-wrapper {
    /* `clip` on x with `visible` on y is invalid and computes to auto/auto,
       which reintroduces a scroll container. overflow-clip-margin keeps the
       horizontal containment the template wants without creating one. */
    overflow-x: clip;
    overflow-y: visible;
  }

  .pb-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ── Browser surfaces we did not draw, themed from the palette ── */
  .pb-scope ::selection {
    background: #ffe0b0;
    color: #1c1917;
  }
  .pb-scope :is(a, button, summary):focus-visible {
    outline: 2px solid var(--pb-accent);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .pb-toc-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(191, 110, 0, 0.42) transparent;
  }
  .pb-toc-list::-webkit-scrollbar { width: 6px; }
  .pb-toc-list::-webkit-scrollbar-track { background: transparent; }
  .pb-toc-list::-webkit-scrollbar-thumb {
    background: rgba(191, 110, 0, 0.4);
    border-radius: 3px;
  }
  .pb-toc-list::-webkit-scrollbar-thumb:hover { background: rgba(191, 110, 0, 0.62); }

  /* Numerals in data align in columns rather than dancing. */
  .pb-scope :is(table, .pb-meta, .pb-bar-num) {
    font-variant-numeric: tabular-nums;
  }

  /* ── Reading progress ── */
  .pb-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: transparent;
    z-index: 100000;
    pointer-events: none;
  }
  .pb-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    transform-origin: left center;
    background: linear-gradient(90deg, #ff9200 0%, #ff6b00 100%);
    box-shadow: 0 0 12px rgba(255, 146, 0, 0.5);
  }

  /* ── Hero ── */
  .pb-hero {
    position: relative;
    padding: calc(var(--pb-header) + 72px) 0 64px;
    isolation: isolate;
    overflow: hidden;
  }
  @media only screen and (max-width: 991px) {
    .pb-hero { padding: calc(var(--pb-header) + 44px) 0 48px; }
  }

  /* On a light ground a glow reads as a smudge, so the hero is separated by
     a warm wash and a hairline instead — the paper changes tone rather than
     being lit from behind. */
  .pb-hero {
    background: linear-gradient(180deg, #f6f2ea 0%, var(--pb-bg) 100%);
    border-bottom: 1px solid var(--pb-line);
  }

  .pb-crumbs {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 13px;
    color: var(--pb-ink-4);
    margin-bottom: 28px;
    display: flex;
    gap: 9px;
    align-items: center;
  }
  .pb-crumbs a {
    color: var(--pb-ink-3);
    text-decoration: none;
    transition: color 0.25s var(--pb-ease);
  }
  .pb-crumbs a:hover { color: var(--pb-accent-ink); }

  .pb-h1 {
    font-family: var(--font-heading, "Inter", sans-serif) !important;
    font-size: clamp(2.35rem, 6.4vw, 5.1rem);
    line-height: 0.98;
    font-weight: 400;
    letter-spacing: -0.035em;
    color: var(--pb-ink);
    margin: 0 0 26px;
    text-wrap: balance;
  }
  /* The H1 wraps on its own via text-wrap: balance — no hard <br>, because
     the template hides every <br> under 767px (master-services.css) without
     substituting a space, which welded "Business" to "Growth". */
  @media only screen and (max-width: 767px) {
    .pb-h1 { overflow-wrap: break-word; }
  }

  .pb-dek {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: clamp(1.0625rem, 1.45vw, 1.3125rem);
    line-height: 1.5;
    color: var(--pb-ink-3);
    margin: 0 0 34px;
    max-width: 46ch;
    text-wrap: pretty;
  }

  .pb-meta {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 13px;
    color: var(--pb-ink-4);
  }
  .pb-meta-item--free {
    color: var(--pb-accent-ink);
    font-weight: 600;
  }
  .pb-meta-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(28, 25, 23, 0.22);
  }

  .pb-byline {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 14px;
    color: var(--pb-ink-4);
    margin: 20px 0 0;
  }
  .pb-byline a {
    color: var(--pb-ink-2);
    text-decoration: underline;
    text-decoration-color: rgba(255, 146, 0, 0.42);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color 0.25s var(--pb-ease);
  }
  .pb-byline a:hover { color: var(--pb-accent-ink); }

  /* ── Layout ── */
  .pb-body {
    padding: 0 0 110px;
    border-top: 1px solid var(--pb-line-soft);
  }
  @media only screen and (max-width: 767px) { .pb-body { padding-bottom: 72px; } }

  .pb-layout {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 0 76px;
    align-items: start;
  }
  @media only screen and (max-width: 1199px) {
    .pb-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  }

  /* ── ToC ──
     Desktop: a quiet always-open rail. Mobile: a sticky disclosure.
     Not a <details> — a collapsed one clips to height:0 and no child
     rule can reopen it. */
  /* The rail sticks below the fixed header. The top offset must live on the
     sticky element itself — padding here would push content past the offset
     and let the first links scroll under the header. Content alignment with
     the first chapter is handled by .pb-content's own padding instead. */
  .pb-toc {
    position: sticky;
    top: calc(var(--pb-header) + 28px);
    max-height: calc(100vh - var(--pb-header) - 48px);
    display: flex;
    flex-direction: column;
  }
  @media only screen and (max-width: 1199px) {
    .pb-toc {
      top: var(--pb-header);
      z-index: 30;
      display: block;
      max-height: none;
      margin: 0 0 32px;
      background: rgba(251, 250, 248, 0.94);
      backdrop-filter: saturate(180%) blur(14px);
      -webkit-backdrop-filter: saturate(180%) blur(14px);
      border-bottom: 1px solid var(--pb-line);
      border-radius: 0 0 14px 14px;
    }
  }

  .pb-toc-toggle { display: none; }
  @media only screen and (max-width: 1199px) {
    .pb-toc-toggle {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      /* 48px minimum so the control clears the touch-target guideline —
         it is the only way into the chapter list on small screens. */
      min-height: 48px;
      padding: 15px 4px;
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-body, "DM Sans", sans-serif);
      text-align: left;
      color: var(--pb-ink-2);
    }
    .pb-toc-toggle-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--pb-ink-4);
      flex-shrink: 0;
    }
    .pb-toc-toggle-current {
      font-size: 14px;
      font-weight: 600;
      color: var(--pb-ink);
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pb-toc-chev {
      color: var(--pb-accent-ink);
      flex-shrink: 0;
      transition: transform 0.32s var(--pb-ease);
    }
    .pb-toc.is-open .pb-toc-chev { transform: rotate(180deg); }
  }

  .pb-toc-heading {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pb-ink-4);
    margin: 0 0 14px;
    padding-left: 22px;
  }
  @media only screen and (max-width: 1199px) {
    .pb-toc-heading { display: none; }
  }

  @media only screen and (max-width: 1199px) {
    .pb-toc-nav {
      display: none;
      padding: 4px 4px 18px;
      max-height: min(58vh, 460px);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .pb-toc.is-open .pb-toc-nav { display: block; }
  }

  .pb-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  @media only screen and (min-width: 1200px) {
    .pb-toc-nav {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .pb-toc-list {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding-right: 4px;
    }
  }

  .pb-toc-link {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 14px;
    line-height: 1.35;
    color: var(--pb-ink-4);
    text-decoration: none;
    transition: color 0.28s var(--pb-ease);
  }
  /* A rule that grows into the accent, instead of a pill that lights up.
     Scaled on the x axis rather than animating width, so the transition
     stays on the compositor and never triggers layout. */
  .pb-toc-rule {
    width: 26px;
    height: 1px;
    flex-shrink: 0;
    transform: translateY(-4px) scaleX(0.385);
    transform-origin: left center;
    background: rgba(28, 25, 23, 0.26);
    transition: transform 0.34s var(--pb-ease), background 0.28s var(--pb-ease);
  }
  .pb-toc-link:hover { color: var(--pb-ink); }
  .pb-toc-link:hover .pb-toc-rule {
    transform: translateY(-4px) scaleX(0.69);
    background: rgba(28, 25, 23, 0.5);
  }
  .pb-toc-link.is-active { color: var(--pb-ink); font-weight: 600; }
  .pb-toc-link.is-active .pb-toc-rule {
    transform: translateY(-4px) scaleX(1);
    background: var(--pb-accent);
  }

  .pb-toc-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 22px 0 0 22px;
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pb-accent-ink);
    text-decoration: none;
    transition: color 0.25s var(--pb-ease);
  }
  .pb-toc-cta svg { transition: transform 0.3s var(--pb-ease); }
  .pb-toc-cta:hover { color: var(--pb-accent-ink); }
  .pb-toc-cta:hover svg { transform: translate(2px, -2px); }
  @media only screen and (max-width: 1199px) {
    .pb-toc-cta { margin-left: 22px; }
  }

  /* ── Chapters ── */
  .pb-content { min-width: 0; padding-top: 52px; }
  @media only screen and (max-width: 1199px) { .pb-content { padding-top: 0; } }

  .pb-chapter {
    padding: 0 0 60px;
    margin: 0 0 60px;
    border-bottom: 1px solid var(--pb-line-soft);
    scroll-margin-top: calc(var(--pb-header) + 24px);
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
  .pb-chapter:last-of-type { border-bottom: none; }
  @media only screen and (max-width: 767px) {
    .pb-chapter { padding-bottom: 44px; margin-bottom: 44px; }
  }

  /* More space above a heading than below it. */
  .pb-chapter-head { margin-bottom: 20px; }

  .pb-chapter-title {
    position: relative;
    font-family: var(--font-heading, "Inter", sans-serif) !important;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -0.022em;
    color: var(--pb-ink);
    margin: 0;
    text-wrap: balance;
  }

  /* The one authored moment: headings settle from an already-visible
     default, so nothing is hidden if the observer never fires. */
  .pb-chapter-head.will-settle {
    opacity: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .pb-chapter-head.will-settle {
      opacity: 0.999;
      filter: blur(5px);
      transform: translateY(11px);
      transition: filter 0.75s var(--pb-ease), transform 0.75s var(--pb-ease);
    }
    .pb-chapter-head.will-settle.is-settled {
      filter: blur(0);
      transform: none;
    }
  }

  .pb-copy {
    position: relative;
    background: none;
    border: none;
    padding: 4px 6px;
    margin-left: 6px;
    color: rgba(28, 25, 23, 0.26);
    cursor: pointer;
    vertical-align: middle;
    line-height: 0;
    transition: color 0.25s var(--pb-ease);
  }
  .pb-chapter:hover .pb-copy { color: rgba(28, 25, 23, 0.46); }
  .pb-copy:hover, .pb-copy:focus-visible { color: var(--pb-accent-ink); }
  .pb-copy.is-copied { color: var(--pb-good); }

  .pb-copy-toast {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    transform: translate(-50%, 4px);
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--pb-good-bright);
    color: #04240f;
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s var(--pb-ease), transform 0.24s var(--pb-ease);
  }
  .pb-copy.is-copied .pb-copy-toast {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  /* ── Prose ── */
  .pb-prose {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 17px;
    line-height: 1.68;
    color: var(--pb-ink-2);
    max-width: var(--pb-measure);
  }
  @media only screen and (max-width: 767px) { .pb-prose { font-size: 16.5px; } }

  .pb-prose p { margin: 0 0 18px; text-wrap: pretty; }
  .pb-prose p:last-child { margin-bottom: 0; }
  .pb-prose strong { color: var(--pb-ink); font-weight: 600; }
  .pb-prose em { font-style: italic; }

  .pb-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875em;
    background: rgba(255, 146, 0, 0.11);
    color: var(--pb-accent-ink);
    padding: 2px 6px;
    border-radius: 4px;
  }

  .pb-prose h3 {
    font-family: var(--font-heading, "Inter", sans-serif) !important;
    font-size: 1.24rem;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--pb-ink);
    margin: 36px 0 12px;
  }

  .pb-prose ul,
  .pb-prose ol { margin: 0 0 18px; padding-left: 20px; }
  .pb-prose li { margin-bottom: 9px; padding-left: 3px; }
  .pb-prose li::marker { color: rgba(255, 146, 0, 0.55); }

  .pb-prose a {
    color: var(--pb-accent-ink);
    text-decoration: underline;
    text-decoration-color: rgba(255, 146, 0, 0.34);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.22s var(--pb-ease), text-decoration-color 0.22s var(--pb-ease);
  }
  .pb-prose a:hover {
    color: var(--pb-accent-ink);
    text-decoration-color: var(--pb-accent-ink);
  }

  .pb-prose .pb-serving {
    font-size: 14px;
    color: var(--pb-ink-4);
  }

  /* Standalone serving line on the chapter pages, where it sits outside the
     prose and follows the citable sentence rather than a paragraph. */
  .pb-serving-line {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 14px;
    line-height: 1.6;
    color: var(--pb-ink-4);
    max-width: var(--pb-measure);
    margin: 0 0 40px;
  }

  /* Stat callout — a raised panel, not a bordered bar. */
  .pb-prose .pb-stat-callout {
    position: relative;
    background:
      linear-gradient(180deg, rgba(255, 146, 0, 0.09) 0%, rgba(255, 146, 0, 0.03) 100%),
      var(--pb-surface);
    border: 1px solid rgba(255, 146, 0, 0.2);
    border-radius: 12px;
    padding: 18px 22px;
    margin: 0 0 20px;
    font-size: 16px;
    color: var(--pb-ink-2);
    box-shadow: var(--pb-shadow-sm);
  }

  /* The AI-citable sentence: set apart by measure and weight, not a bar. */
  .pb-prose .pb-quotable {
    font-family: var(--font-heading, "Inter", sans-serif);
    font-size: 1.18rem;
    line-height: 1.48;
    letter-spacing: -0.012em;
    color: var(--pb-ink);
    max-width: 54ch;
    margin: 30px 0;
    padding-top: 22px;
    border-top: 1px solid var(--pb-line);
  }

  /* Ch.1 diagnostic — a numbered sequence that carries real information. */
  .pb-prose .pb-checklist {
    list-style: none;
    counter-reset: pbtest;
    padding: 0;
    margin: 0 0 28px;
    display: grid;
    gap: 10px;
  }
  .pb-prose .pb-checklist > li {
    counter-increment: pbtest;
    position: relative;
    border: 1px solid var(--pb-line);
    border-radius: 12px;
    padding: 16px 20px 16px 56px;
    margin: 0;
    background: var(--pb-surface);
    box-shadow: var(--pb-shadow-sm);
    transition:
      border-color 0.3s var(--pb-ease),
      box-shadow 0.3s var(--pb-ease),
      transform 0.3s var(--pb-ease);
  }
  .pb-prose .pb-checklist > li:hover {
    border-color: rgba(255, 146, 0, 0.42);
    box-shadow: var(--pb-shadow-md);
    transform: translateY(-1px);
  }
  .pb-prose .pb-checklist > li::before {
    content: counter(pbtest);
    position: absolute;
    left: 18px;
    top: 16px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 146, 0, 0.14);
    color: var(--pb-accent-ink);
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .pb-prose .pb-check-label {
    display: block;
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--pb-ink);
    margin-bottom: 5px;
  }
  .pb-prose .pb-checklist p { margin: 0; font-size: 16px; }

  .pb-prose .pb-score { list-style: none; padding: 0; }
  .pb-prose .pb-score li {
    padding-left: 18px;
    position: relative;
  }
  .pb-prose .pb-score li::before {
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 7px; height: 1px;
    background: var(--pb-accent);
    opacity: 0.75;
  }

  .pb-prose .pb-priority,
  .pb-prose .pb-questions { padding-left: 22px; }

  /* ── Tables ── */
  .pb-prose .pb-table-wrap {
    margin: 0 0 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 146, 0, 0.3) transparent;
    border: 1px solid var(--pb-line);
    border-radius: 12px;
    background: var(--pb-surface);
    box-shadow: var(--pb-shadow-sm);
  }
  .pb-prose .pb-table-wrap::-webkit-scrollbar { height: 6px; }
  .pb-prose .pb-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(191, 110, 0, 0.4);
    border-radius: 3px;
  }
  .pb-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
  }
  /* Tables scroll inside their own wrapper rather than widening the page.
     The wrapper is the scroll container, so a table wider than the column
     is intended — the page itself must never scroll sideways. */
  .pb-prose .pb-factors,
  .pb-prose .pb-compare { min-width: 22rem; }
  .pb-prose caption {
    text-align: left;
    font-size: 12.5px;
    color: var(--pb-ink-4);
    padding: 14px 18px 0;
  }
  .pb-prose th {
    text-align: left;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pb-ink-4);
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--pb-line);
    white-space: nowrap;
  }
  .pb-prose td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--pb-line-soft);
    color: var(--pb-ink-2);
    vertical-align: middle;
  }
  .pb-prose tbody tr:last-child td { border-bottom: none; }
  .pb-prose tbody tr { transition: background 0.22s var(--pb-ease); }
  .pb-prose tbody tr:hover { background: #faf7f2; }

  /* Ranking-factor bars — the most linkable element on the page. */
  .pb-prose .pb-factors td:first-child { white-space: nowrap; }
  .pb-prose .pb-factors td:last-child {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 168px;
  }
  .pb-prose .pb-bar {
    display: block;
    height: 5px;
    width: var(--w);
    max-width: 124px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ff9200 0%, #ff6b00 100%);
    flex-shrink: 0;
  }
  .pb-prose .pb-bar-num {
    font-weight: 600;
    color: var(--pb-ink);
    font-size: 14px;
  }

  .pb-prose .pb-compare--ours td:last-child {
    color: var(--pb-ink);
    font-weight: 600;
    white-space: nowrap;
  }
  .pb-prose .pb-yes  { color: var(--pb-good); font-weight: 600; }
  .pb-prose .pb-some { color: var(--pb-accent-ink); font-weight: 600; }
  .pb-prose .pb-no   { color: var(--pb-ink-4); font-weight: 600; }

  /* ── Ch.10 phases — a real sequence, so it is numbered ── */
  .pb-prose .pb-phases {
    display: grid;
    gap: 12px;
    margin: 0 0 26px;
    counter-reset: pbphase;
  }
  .pb-prose .pb-phase {
    counter-increment: pbphase;
    position: relative;
    border: 1px solid var(--pb-line);
    border-radius: 14px;
    padding: 20px 22px;
    background: var(--pb-surface);
    box-shadow: var(--pb-shadow-sm);
    overflow: hidden;
  }
  /* A hairline that reads as progress through the sequence. */
  .pb-prose .pb-phase::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background: linear-gradient(180deg, #ff9200 0%, rgba(255, 146, 0, 0.14) 100%);
  }
  .pb-prose .pb-phase-days {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pb-accent-ink);
    margin-bottom: 5px;
  }
  .pb-prose .pb-phase-title {
    font-family: var(--font-heading, "Inter", sans-serif) !important;
    font-size: 1.17rem;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--pb-ink);
    margin: 0 0 12px;
  }
  .pb-prose .pb-phase ul { margin-bottom: 12px; }
  .pb-prose .pb-phase-why {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--pb-line-soft);
    font-size: 14.5px;
    color: var(--pb-ink-4);
  }

  /* ── Go deeper ── */
  .pb-deeper {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    margin: 30px 0 0;
    max-width: var(--pb-measure);
    border: 1px solid rgba(255, 146, 0, 0.22);
    border-radius: 14px;
    background: linear-gradient(135deg, #fff6e8 0%, var(--pb-surface) 100%);
    box-shadow: var(--pb-shadow-sm);
    text-decoration: none;
    transition:
      background 0.34s var(--pb-ease),
      border-color 0.34s var(--pb-ease),
      box-shadow 0.34s var(--pb-ease);
  }
  .pb-deeper:hover {
    background: linear-gradient(135deg, #ffefd8 0%, #fffaf2 100%);
    border-color: rgba(255, 146, 0, 0.42);
    box-shadow: var(--pb-shadow-md);
  }
  .pb-deeper-copy { display: block; flex: 1; min-width: 0; }
  .pb-deeper-label {
    display: block;
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pb-accent-ink);
    margin-bottom: 5px;
  }
  .pb-deeper-title {
    display: block;
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 16px;
    line-height: 1.4;
    color: var(--pb-ink);
    text-wrap: pretty;
  }
  .pb-deeper-arrow {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 146, 0, 0.16);
    color: var(--pb-accent-ink);
    transition: background 0.34s var(--pb-ease), transform 0.34s var(--pb-ease);
  }
  .pb-deeper:hover .pb-deeper-arrow {
    background: var(--pb-accent);
    color: #241300;
    transform: translateX(3px);
  }

  /* ── Related ── */
  .pb-related {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 14px;
    line-height: 1.9;
    color: var(--pb-ink-4);
    margin: 18px 0 0;
    max-width: var(--pb-measure);
  }
  .pb-related-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pb-ink-4);
    margin-right: 10px;
  }
  .pb-related a {
    color: var(--pb-ink-3);
    text-decoration: underline;
    text-decoration-color: rgba(255, 146, 0, 0.28);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color 0.22s var(--pb-ease), text-decoration-color 0.22s var(--pb-ease);
  }
  .pb-related a:hover {
    color: var(--pb-accent-ink);
    text-decoration-color: var(--pb-accent-ink);
  }
  .pb-related-sep { margin: 0 9px; color: rgba(28, 25, 23, 0.28); }

  /* ── Inline CTA ── */
  .pb-cta-inline {
    margin: 32px 0 0;
    padding: 24px 26px;
    max-width: var(--pb-measure);
    border: 1px solid var(--pb-line);
    border-radius: 16px;
    background: var(--pb-surface-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    box-shadow: var(--pb-shadow-sm);
  }
  @media only screen and (max-width: 767px) {
    .pb-cta-inline { flex-direction: column; align-items: flex-start; padding: 20px; }
  }
  .pb-cta-text {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--pb-ink-2);
    margin: 0;
    flex: 1;
    text-wrap: pretty;
  }
  .pb-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: 100px;
    background: var(--pb-accent);
    color: #241300;
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.3s var(--pb-ease), box-shadow 0.3s var(--pb-ease);
  }
  .pb-cta-btn:hover {
    color: #241300;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(191, 110, 0, 0.5);
  }

  /* ── FAQ ── */
  .pb-faqs {
    display: grid;
    gap: 8px;
    max-width: var(--pb-measure);
  }
  .pb-faq {
    border: 1px solid var(--pb-line);
    border-radius: 12px;
    background: var(--pb-surface);
    overflow: hidden;
    box-shadow: var(--pb-shadow-sm);
    transition: border-color 0.3s var(--pb-ease), box-shadow 0.3s var(--pb-ease);
  }
  .pb-faq:hover { box-shadow: var(--pb-shadow-md); }
  .pb-faq[open] { border-color: rgba(255, 146, 0, 0.26); }
  .pb-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 20px;
    cursor: pointer;
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--pb-ink);
    list-style: none;
  }
  .pb-faq-q::-webkit-details-marker { display: none; }
  .pb-faq-icon {
    color: var(--pb-accent-ink);
    flex-shrink: 0;
    transition: transform 0.34s var(--pb-ease);
  }
  .pb-faq[open] .pb-faq-icon { transform: rotate(45deg); }
  .pb-faq-a {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 15.5px;
    line-height: 1.68;
    color: var(--pb-ink-3);
    margin: 0;
    padding: 0 20px 18px;
    max-width: 62ch;
    text-wrap: pretty;
  }

  /* ── End CTA ── */
  .pb-end-cta {
    position: relative;
    margin-top: 64px;
    padding: 44px;
    max-width: var(--pb-measure);
    border: 1px solid rgba(255, 146, 0, 0.22);
    border-radius: 20px;
    background:
      radial-gradient(90% 130% at 6% 0%, #fff2de 0%, var(--pb-surface) 62%);
    box-shadow: var(--pb-shadow-lg);
    scroll-margin-top: calc(var(--pb-header) + 24px);
    overflow: hidden;
  }
  @media only screen and (max-width: 767px) { .pb-end-cta { padding: 28px 22px; } }

  .pb-end-title {
    font-family: var(--font-heading, "Inter", sans-serif) !important;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.022em;
    color: var(--pb-ink);
    margin: 0 0 12px;
    text-wrap: balance;
  }
  .pb-end-text {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 15.5px;
    line-height: 1.62;
    color: var(--pb-ink-3);
    margin: 0 0 26px;
    max-width: 46ch;
    text-wrap: pretty;
  }

  .pb-end-trust {
    font-family: var(--font-body, "DM Sans", sans-serif);
    font-size: 13px;
    color: var(--pb-ink-4);
    margin: 22px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .pb-end-trust svg { color: var(--pb-accent-ink); flex-shrink: 0; }
  .pb-end-trust a {
    color: var(--pb-ink-3);
    text-decoration: none;
    transition: color 0.22s var(--pb-ease);
  }
  .pb-end-trust a:hover { color: var(--pb-accent-ink); }

  /* ── Print: the 90-day plan is what people put on paper ── */
  @media print {
    .pb-progress, .pb-toc, .pb-hero, .pb-cta-inline,
    .pb-end-cta, .pb-deeper, .pb-related, .pb-copy { display: none !important; }
    .pb-scope { background: #fff !important; }
    .pb-chapter { display: none !important; }
    .pb-chapter#\39 0-days { display: block !important; border: none; }
    .pb-layout { display: block !important; }
    .pb-content { padding-top: 0 !important; }
    .pb-prose, .pb-prose p, .pb-prose li { color: #000 !important; }
    .pb-chapter-title, .pb-prose strong { color: #000 !important; }
    .pb-prose .pb-phase {
      border-color: #bbb !important;
      background: none !important;
      break-inside: avoid;
    }
    .pb-prose .pb-phase::before { display: none !important; }
    .pb-prose .pb-phase-days,
    .pb-prose .pb-phase-title { color: #000 !important; }
    .pb-prose .pb-phase-why { color: #333 !important; }
  }

  /* ── Reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    .pb-scope *,
    .pb-scope *::before,
    .pb-scope *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
    .pb-deeper:hover, .pb-cta-btn:hover { transform: none !important; }
    .pb-chapter-head.will-settle { filter: none !important; transform: none !important; }
  }

/* ══════════════════════════════════════════
   CHAPTER PAGES — /playbook/[slug]/
   Only what a chapter needs beyond the hub.
   ══════════════════════════════════════════ */

.pb-chapter-badge {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pb-accent-ink);
  margin: 0 0 14px;
}

/* A chapter H1 is a page title, not the brand statement the hub carries. */
.pb-h1--chapter {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  max-width: 30ch;
}

/* Section headings inside a chapter sit a step below the hub's chapter titles. */
.pb-chapter-title--sub {
  font-size: clamp(1.42rem, 2.5vw, 1.95rem);
}

/* Pull quotes for the review-reply examples. Indented and set in the reading
   face, so they read as sample copy rather than as a callout. */
.pb-quote {
  margin: 0 0 18px;
  padding: 14px 20px;
  border-radius: 10px;
  background: var(--pb-bg-sunk);
  color: var(--pb-ink-2);
  font-size: 16px;
  line-height: 1.6;
}

/* ── Chapter footer nav ── */
.pb-chapter-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--pb-line);
  max-width: var(--pb-measure);
}

.pb-chapter-nav-hub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--pb-ink-3);
  text-decoration: none;
  transition: color 0.24s var(--pb-ease);
}
.pb-chapter-nav-hub:hover { color: var(--pb-accent-ink); }

.pb-chapter-nav-next {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid var(--pb-line);
  border-radius: 12px;
  background: var(--pb-surface);
  box-shadow: var(--pb-shadow-sm);
  text-decoration: none;
  transition: box-shadow 0.3s var(--pb-ease), border-color 0.3s var(--pb-ease);
}
.pb-chapter-nav-next:hover {
  box-shadow: var(--pb-shadow-md);
  border-color: rgba(255, 146, 0, 0.42);
}
.pb-chapter-nav-label {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pb-ink-4);
}
.pb-chapter-nav-title {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--pb-ink);
}
.pb-chapter-nav-next svg { color: var(--pb-accent-ink); flex-shrink: 0; }

/* ── End CTA actions ── */
.pb-end-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.pb-end-secondary {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14px;
  color: var(--pb-ink-3);
  text-decoration: underline;
  text-decoration-color: rgba(255, 146, 0, 0.34);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.24s var(--pb-ease);
}
.pb-end-secondary:hover { color: var(--pb-accent-ink); }

/* ── Pick your trade ──
   A routing block, not a chapter. Sits between the lead photo and the first
   summary so a reader in one of these trades can leave immediately. */
.pb-trades {
  max-width: var(--pb-measure);
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
  border-radius: 12px;
  padding: 24px;
  margin: 0 0 44px;
  box-shadow: var(--pb-shadow-sm);
}
.pb-trades-label {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pb-accent-ink);
  margin: 0 0 8px;
}
.pb-trades-dek {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--pb-ink-3);
  margin: 0 0 18px;
}
.pb-trades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pb-trade-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 48px so the card clears the touch-target guideline on a phone. */
  min-height: 48px;
  padding: 12px 15px;
  background: var(--pb-bg-sunk);
  border: 1px solid var(--pb-line);
  border-radius: 9px;
  text-decoration: none;
  transition: border-color 0.22s var(--pb-ease), background 0.22s var(--pb-ease);
}
.pb-trade-card:hover {
  border-color: var(--pb-accent);
  background: var(--pb-accent-wash);
}
.pb-trade-name {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--pb-ink);
}
.pb-trade-go { color: var(--pb-accent-ink); display: flex; flex-shrink: 0; }
.pb-trades-note {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--pb-ink-4);
  margin: 0;
}
.pb-trades-note a {
  color: var(--pb-accent-ink);
  text-decoration: underline;
  text-decoration-color: rgba(255, 146, 0, 0.4);
  text-underline-offset: 3px;
}

/* ── Chapter figures ──
   One photo per chapter, sitting between the heading and the prose. The
   aspect-ratio plus explicit width/height on the <img> reserve the box
   before the file arrives, so nothing below it jumps (no layout shift).
   Photos are decorative here — the caption carries the information, which
   is why it is real text and not baked into the image. */
.pb-figure {
  margin: 0 0 34px;
  max-width: var(--pb-measure);
}
.pb-figure-frame {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: var(--pb-bg-sunk);
  box-shadow: var(--pb-shadow-sm);
}
.pb-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pb-figure figcaption {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--pb-ink-4);
  margin-top: 10px;
  padding-left: 11px;
  border-left: 2px solid var(--pb-accent);
}
.pb-figure-credit { color: var(--pb-ink-4); }
.pb-figure-credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(28, 25, 23, 0.22);
  text-underline-offset: 2px;
}
.pb-figure-credit a:hover { color: var(--pb-accent-ink); }

/* The hub's figure sits under the lead chapter summary and runs a touch
   wider, because the hub column has no long prose to align against. */
.pb-figure--lead { margin-bottom: 40px; }

@media only screen and (max-width: 767px) {
  .pb-figure { margin-bottom: 26px; }
  .pb-figure figcaption { font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLAYBOOK HUB — editorial field-guide layout
   Scoped to /playbook/ so the long-form chapter templates keep their
   intentionally narrower reading surface.
   ═══════════════════════════════════════════════════════════════════════════ */
.pb-page--hub .pb-hero {
  padding: calc(var(--pb-header) + clamp(3.5rem, 6vw, 6rem)) 0 clamp(4.5rem, 7vw, 7rem);
  background:
    radial-gradient(70% 90% at 100% 12%, rgba(255, 146, 0, 0.1), transparent 68%),
    linear-gradient(180deg, #f3efe7 0%, #fbfaf8 100%);
}

.pb-page--hub .pb-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(22rem, 0.78fr);
  gap: clamp(3.25rem, 7vw, 7.5rem);
  align-items: center;
}

.pb-page--hub .pb-hero-copy { min-width: 0; }

.pb-page--hub .pb-crumbs {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.pb-page--hub .pb-hero-kicker {
  margin: 0 0 1.25rem;
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--pb-accent-ink);
}

.pb-page--hub .pb-h1 {
  max-width: 11.5ch;
  margin-bottom: 1.75rem;
  font-size: clamp(3.6rem, 6.4vw, 6.6rem);
  line-height: 0.9;
  letter-spacing: -0.052em;
}

.pb-page--hub .pb-dek {
  max-width: 39ch;
  margin-bottom: 2.25rem;
  font-size: clamp(1.05rem, 1.38vw, 1.27rem);
}

.pb-page--hub .pb-meta {
  width: fit-content;
  padding: 0.9rem 0;
  border-top: 1px solid var(--pb-line);
  border-bottom: 1px solid var(--pb-line);
}

.pb-page--hub .pb-meta-dot {
  width: 1px;
  height: 1rem;
  border-radius: 0;
}

.pb-page--hub .pb-byline { margin-top: 1.25rem; }

.pb-page--hub .pb-hero-visual {
  position: relative;
  min-height: clamp(30rem, 44vw, 38rem);
  margin: 0;
  overflow: hidden;
  background: #1c1917;
  box-shadow: 0 2rem 5rem -2.5rem rgba(65, 44, 20, 0.42);
}

.pb-page--hub .pb-hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 14, 12, 0.05) 38%, rgba(16, 14, 12, 0.88) 100%),
    linear-gradient(90deg, rgba(255, 146, 0, 0.12), transparent 38%);
  pointer-events: none;
}

.pb-page--hub .pb-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.05);
  transition: transform 0.8s var(--pb-ease), filter 0.8s var(--pb-ease);
}

.pb-page--hub .pb-hero-visual:hover img {
  transform: scale(1.025);
  filter: saturate(0.9) contrast(1.05);
}

.pb-page--hub .pb-hero-visual-label {
  position: absolute;
  z-index: 2;
  top: 1.25rem;
  left: 1.25rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(20, 18, 16, 0.55);
  backdrop-filter: blur(8px);
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
}

.pb-page--hub .pb-hero-visual figcaption {
  position: absolute;
  z-index: 2;
  right: 1.5rem;
  bottom: 1.5rem;
  left: 1.5rem;
  max-width: 36ch;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.pb-page--hub .pb-body {
  padding-top: clamp(4.5rem, 7vw, 7rem);
}

.pb-page--hub .pb-layout {
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0 clamp(3rem, 5vw, 5.5rem);
}

.pb-page--hub .pb-content { padding-top: 0; }

.pb-page--hub .pb-trades {
  display: grid;
  grid-template-columns: minmax(12rem, 0.75fr) minmax(18rem, 1.25fr);
  grid-template-rows: auto auto 1fr;
  gap: 0 clamp(2.5rem, 5vw, 5rem);
  max-width: none;
  margin-bottom: clamp(5rem, 8vw, 8rem);
  padding: 2.25rem 0;
  border: 0;
  border-top: 1px solid var(--pb-line);
  border-bottom: 1px solid var(--pb-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pb-page--hub .pb-trades-label { grid-column: 1; grid-row: 1; }
.pb-page--hub .pb-trades-dek { grid-column: 1; grid-row: 2; margin-bottom: 1rem; }
.pb-page--hub .pb-trades-note { grid-column: 1; grid-row: 3; align-self: end; }
.pb-page--hub .pb-trades-grid {
  grid-column: 2;
  grid-row: 1 / 4;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--pb-line);
}

.pb-page--hub .pb-trade-card {
  min-height: 4.75rem;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--pb-line);
  border-radius: 0;
  background: transparent;
}

.pb-page--hub .pb-trade-card:hover {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  border-color: var(--pb-line);
  background: var(--pb-accent-wash);
}

.pb-page--hub .pb-trade-name {
  font-family: var(--font-heading, "Inter", sans-serif);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -0.025em;
}

.pb-page--hub .pb-trade-go {
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pb-line);
  transition: transform 0.3s var(--pb-ease), background 0.3s var(--pb-ease);
}

.pb-page--hub .pb-trade-card:hover .pb-trade-go {
  transform: translateX(0.2rem);
  background: var(--pb-accent);
  color: #241300;
}

.pb-page--hub .pb-chapter {
  display: grid;
  grid-template-columns: minmax(12rem, 0.78fr) minmax(0, 1.72fr);
  column-gap: clamp(2.75rem, 5vw, 5.5rem);
  padding-bottom: clamp(4.5rem, 7vw, 7rem);
  margin-bottom: clamp(4.5rem, 7vw, 7rem);
  contain-intrinsic-size: auto 760px;
}

.pb-page--hub .pb-chapter > :not(.pb-chapter-head) { grid-column: 2; }

.pb-page--hub .pb-chapter-head {
  grid-column: 1;
  grid-row: 1 / span 8;
  align-self: start;
  margin: 0;
  padding-top: 0.15rem;
}

.pb-page--hub .pb-chapter-num {
  display: block;
  margin-bottom: 1.1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--pb-accent-ink);
}

.pb-page--hub .pb-chapter-title {
  max-width: 12ch;
  font-size: clamp(1.85rem, 2.8vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
}

.pb-page--hub .pb-prose {
  max-width: 67ch;
  font-size: 1.06rem;
  line-height: 1.74;
}

.pb-page--hub .pb-deeper {
  border-width: 1px 0;
  border-color: var(--pb-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pb-page--hub .pb-deeper:hover {
  border-color: rgba(255, 146, 0, 0.42);
  background: var(--pb-accent-wash);
  box-shadow: none;
}

.pb-page--hub .pb-faqs { max-width: 67ch; }

.pb-page--hub .pb-end-cta {
  display: grid;
  grid-template-columns: minmax(12rem, 0.78fr) minmax(0, 1.72fr);
  gap: 0 clamp(2.75rem, 5vw, 5.5rem);
  max-width: none;
  margin-top: 0;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  border-radius: 0;
  background:
    radial-gradient(90% 130% at 0% 0%, #fff0d8 0%, transparent 68%),
    var(--pb-surface);
}

.pb-page--hub .pb-end-title {
  grid-column: 1;
  grid-row: 1 / span 5;
  font-size: clamp(2rem, 3.5vw, 3.4rem);
  line-height: 1;
}

.pb-page--hub .pb-end-text,
.pb-page--hub .pb-end-actions,
.pb-page--hub .pb-end-trust { grid-column: 2; }

@media only screen and (max-width: 1199px) {
  .pb-page--hub .pb-hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(19rem, 0.8fr);
    gap: 3rem;
  }
  .pb-page--hub .pb-h1 { font-size: clamp(3.5rem, 7vw, 5.3rem); }
  .pb-page--hub .pb-layout { grid-template-columns: 1fr; }
  .pb-page--hub .pb-toc {
    top: calc(var(--pb-header) + var(--ab-height, 0px));
    margin-bottom: 4rem;
  }
}

@media only screen and (max-width: 991px) {
  .pb-page--hub .pb-hero-grid { grid-template-columns: 1fr; }
  .pb-page--hub .pb-h1 { max-width: 12ch; }
  .pb-page--hub .pb-hero-visual { min-height: 26rem; }
  .pb-page--hub .pb-hero-visual img { position: absolute; inset: 0; }
  .pb-page--hub .pb-chapter {
    grid-template-columns: minmax(11rem, 0.62fr) minmax(0, 1.38fr);
    column-gap: 3rem;
  }
}

@media only screen and (max-width: 767px) {
  .pb-page--hub .pb-hero {
    padding: calc(var(--pb-header) + 2.5rem) 0 4rem;
  }
  .pb-page--hub .pb-crumbs { margin-bottom: 2.5rem; }
  .pb-page--hub .pb-h1 {
    max-width: none;
    font-size: clamp(3rem, 14.5vw, 4.2rem);
    line-height: 0.94;
  }
  .pb-page--hub .pb-meta { width: 100%; gap: 0.55rem; }
  .pb-page--hub .pb-meta-dot { height: 0.8rem; }
  .pb-page--hub .pb-hero-visual { min-height: 22rem; }
  .pb-page--hub .pb-hero-visual figcaption { right: 1.1rem; bottom: 1.1rem; left: 1.1rem; }
  .pb-page--hub .pb-body { padding-top: 0; }
  .pb-page--hub .pb-toc { margin-bottom: 3.5rem; }
  .pb-page--hub .pb-trades {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0;
    margin-bottom: 4.5rem;
    padding: 1.75rem 0;
  }
  .pb-page--hub .pb-trades-label,
  .pb-page--hub .pb-trades-dek,
  .pb-page--hub .pb-trades-note,
  .pb-page--hub .pb-trades-grid {
    grid-column: 1;
    grid-row: auto;
  }
  .pb-page--hub .pb-trades-grid { margin: 0.5rem 0 1rem; }
  .pb-page--hub .pb-chapter {
    display: block;
    padding-bottom: 3.75rem;
    margin-bottom: 3.75rem;
  }
  .pb-page--hub .pb-chapter-head { margin-bottom: 1.75rem; }
  .pb-page--hub .pb-chapter-num { margin-bottom: 0.75rem; }
  .pb-page--hub .pb-chapter-title { max-width: 13ch; font-size: clamp(2rem, 9.5vw, 2.7rem); }
  .pb-page--hub .pb-prose { font-size: 1rem; line-height: 1.7; }
  .pb-page--hub .pb-end-cta {
    display: block;
    padding: 2rem 1.35rem;
  }
  .pb-page--hub .pb-end-title { margin-bottom: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERNAL PLAYBOOKS — chapter and trade editions
   The hub's field-guide language carried into the long-form templates, while
   preserving a disciplined reading measure for every body section.
   ═══════════════════════════════════════════════════════════════════════════ */
.pb-page--chapter .pb-hero {
  padding: calc(var(--pb-header) + clamp(3.25rem, 5.5vw, 5.5rem)) 0 clamp(4.5rem, 7vw, 7rem);
  background:
    radial-gradient(75% 100% at 100% 0%, rgba(255, 146, 0, 0.1), transparent 68%),
    linear-gradient(180deg, #f3efe7 0%, #fbfaf8 100%);
}

.pb-page--chapter .pb-chapter-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(21rem, 0.76fr);
  gap: clamp(3.25rem, 7vw, 7rem);
  align-items: center;
}

.pb-page--chapter .pb-chapter-hero-copy { min-width: 0; }

.pb-page--chapter .pb-crumbs {
  margin-bottom: clamp(2.75rem, 4.5vw, 4.25rem);
}

.pb-page--chapter .pb-chapter-badge {
  margin-bottom: 1.1rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}

.pb-page--chapter .pb-h1--chapter {
  max-width: 14ch;
  margin-bottom: 1.75rem;
  font-size: clamp(3.25rem, 5.45vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.048em;
}

.pb-page--chapter .pb-dek {
  max-width: 42ch;
  margin-bottom: 2.15rem;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
}

.pb-page--chapter .pb-meta {
  width: fit-content;
  padding: 0.85rem 0;
  border-top: 1px solid var(--pb-line);
  border-bottom: 1px solid var(--pb-line);
}

.pb-page--chapter .pb-meta-dot {
  width: 1px;
  height: 0.95rem;
  border-radius: 0;
}

.pb-page--chapter .pb-byline { margin-top: 1.25rem; }

.pb-page--chapter .pb-chapter-cover {
  position: relative;
  min-height: clamp(29rem, 41vw, 35rem);
  margin: 0;
  overflow: hidden;
  background: #1c1917;
  box-shadow: 0 2rem 5rem -2.5rem rgba(65, 44, 20, 0.42);
}

.pb-page--chapter .pb-chapter-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 14, 12, 0.04) 36%, rgba(16, 14, 12, 0.9) 100%),
    linear-gradient(90deg, rgba(255, 146, 0, 0.11), transparent 42%);
  pointer-events: none;
}

.pb-page--chapter .pb-chapter-cover img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.04);
  transition: transform 0.8s var(--pb-ease), filter 0.8s var(--pb-ease);
}

.pb-page--chapter .pb-chapter-cover:hover img {
  transform: scale(1.025);
  filter: saturate(0.95) contrast(1.04);
}

.pb-page--chapter .pb-chapter-cover-label {
  position: absolute;
  z-index: 2;
  top: 1.25rem;
  left: 1.25rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(20, 18, 16, 0.56);
  backdrop-filter: blur(8px);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
}

.pb-page--chapter .pb-chapter-cover figcaption {
  position: absolute;
  z-index: 2;
  right: 1.5rem;
  bottom: 1.5rem;
  left: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.pb-page--chapter .pb-chapter-cover figcaption a { color: inherit; }

.pb-page--chapter .pb-body {
  padding-top: clamp(5rem, 8vw, 8rem);
}

.pb-page--chapter .pb-layout {
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0 clamp(3.25rem, 5vw, 5.5rem);
}

.pb-page--chapter .pb-content { padding-top: 0; }

.pb-page--chapter .pb-chapter {
  display: grid;
  grid-template-columns: minmax(11.5rem, 0.72fr) minmax(0, 1.68fr);
  column-gap: clamp(2.75rem, 4.5vw, 5rem);
  padding-bottom: clamp(4.5rem, 7vw, 6.5rem);
  margin-bottom: clamp(4.5rem, 7vw, 6.5rem);
  contain-intrinsic-size: auto 760px;
}

.pb-page--chapter .pb-chapter > :not(.pb-chapter-head) { grid-column: 2; }

.pb-page--chapter .pb-chapter-head {
  grid-column: 1;
  grid-row: 1 / span 6;
  align-self: start;
  margin: 0;
  padding-top: 0.15rem;
}

.pb-page--chapter .pb-section-num {
  display: block;
  margin-bottom: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--pb-accent-ink);
}

.pb-page--chapter .pb-chapter-title--sub {
  max-width: 12ch;
  font-size: clamp(1.8rem, 2.65vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -0.036em;
}

.pb-page--chapter .pb-prose {
  max-width: 67ch;
  font-size: 1.06rem;
  line-height: 1.74;
}

.pb-page--chapter .pb-quotable {
  width: min(67ch, calc(100% - 15rem));
  margin: 0 0 2rem auto;
  padding: clamp(1.75rem, 3vw, 2.75rem) 0;
  border-top: 1px solid var(--pb-ink);
  border-bottom: 1px solid var(--pb-line);
  font-family: var(--font-heading, "Inter", sans-serif);
  font-size: clamp(1.55rem, 2.35vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: -0.028em;
  color: var(--pb-ink);
  text-wrap: pretty;
}

.pb-page--chapter .pb-serving-line,
.pb-page--chapter .pb-related,
.pb-page--chapter .pb-chapter-nav {
  width: min(67ch, calc(100% - 15rem));
  max-width: none;
  margin-left: auto;
}

.pb-page--chapter .pb-related { margin-top: 0; margin-bottom: 2rem; }

.pb-page--chapter .pb-chapter-nav {
  padding: 1.25rem 0;
  border-top: 1px solid var(--pb-line);
  border-bottom: 1px solid var(--pb-line);
}

.pb-page--chapter .pb-chapter-nav-next {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pb-page--chapter .pb-chapter-nav-next:hover {
  border-color: transparent;
  box-shadow: none;
}

.pb-page--chapter .pb-end-cta {
  display: grid;
  grid-template-columns: minmax(11.5rem, 0.72fr) minmax(0, 1.68fr);
  gap: 0 clamp(2.75rem, 4.5vw, 5rem);
  max-width: none;
  margin-top: clamp(4rem, 7vw, 6rem);
  padding: clamp(2.5rem, 4.5vw, 4rem);
  border-radius: 0;
  background:
    radial-gradient(90% 130% at 0% 0%, #fff0d8 0%, transparent 68%),
    var(--pb-surface);
}

.pb-page--chapter .pb-end-title {
  grid-column: 1;
  grid-row: 1 / span 5;
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.02;
}

.pb-page--chapter .pb-end-text,
.pb-page--chapter .pb-end-actions,
.pb-page--chapter .pb-end-trust { grid-column: 2; }

@media only screen and (max-width: 1199px) {
  .pb-page--chapter .pb-chapter-hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(19rem, 0.8fr);
    gap: 3rem;
  }
  .pb-page--chapter .pb-h1--chapter {
    font-size: clamp(3.1rem, 6.5vw, 4.8rem);
  }
  .pb-page--chapter .pb-layout { grid-template-columns: 1fr; }
  .pb-page--chapter .pb-toc {
    top: calc(var(--pb-header) + var(--ab-height, 0px));
    margin-bottom: 4rem;
  }
  :is(.pb-page--hub, .pb-page--chapter) .pb-chapter {
    scroll-margin-top: calc(var(--pb-header) + var(--ab-height, 0px) + 8rem);
  }
}

@media only screen and (max-width: 991px) {
  .pb-page--chapter .pb-chapter-hero-grid { grid-template-columns: 1fr; }
  .pb-page--chapter .pb-h1--chapter { max-width: 14ch; }
  .pb-page--chapter .pb-chapter-cover { min-height: 25rem; }
  .pb-page--chapter .pb-chapter-cover img { position: absolute; inset: 0; }
  .pb-page--chapter .pb-chapter {
    grid-template-columns: minmax(10.5rem, 0.62fr) minmax(0, 1.38fr);
    column-gap: 3rem;
  }
}

@media only screen and (max-width: 767px) {
  .pb-page--chapter .pb-hero {
    padding: calc(var(--pb-header) + 2.5rem) 0 4rem;
  }
  .pb-page--chapter .pb-crumbs { margin-bottom: 2.5rem; }
  .pb-page--chapter .pb-h1--chapter {
    max-width: none;
    font-size: clamp(2.8rem, 13.5vw, 4rem);
    line-height: 0.95;
  }
  .pb-page--chapter .pb-meta { width: 100%; gap: 0.55rem; }
  .pb-page--chapter .pb-meta-dot { height: 0.8rem; }
  .pb-page--chapter .pb-chapter-cover { min-height: 21rem; }
  .pb-page--chapter .pb-chapter-cover figcaption { right: 1.1rem; bottom: 1.1rem; left: 1.1rem; }
  .pb-page--chapter .pb-body { padding-top: 0; }
  .pb-page--chapter .pb-toc { margin-bottom: 3.5rem; }
  .pb-page--chapter .pb-chapter {
    display: block;
    padding-bottom: 3.75rem;
    margin-bottom: 3.75rem;
  }
  .pb-page--chapter .pb-chapter-head { margin-bottom: 1.75rem; }
  .pb-page--chapter .pb-section-num { margin-bottom: 0.75rem; }
  .pb-page--chapter .pb-chapter-title--sub {
    max-width: 13ch;
    font-size: clamp(1.95rem, 9.25vw, 2.65rem);
  }
  .pb-page--chapter .pb-prose { font-size: 1rem; line-height: 1.7; }
  .pb-page--chapter .pb-quotable,
  .pb-page--chapter .pb-serving-line,
  .pb-page--chapter .pb-related,
  .pb-page--chapter .pb-chapter-nav {
    width: 100%;
    margin-left: 0;
  }
  .pb-page--chapter .pb-end-cta {
    display: block;
    padding: 2rem 1.35rem;
  }
  .pb-page--chapter .pb-end-title { margin-bottom: 1.25rem; }
}

@media print {
  .pb-chapter-nav, .pb-end-actions { display: none !important; }
  /* A chapter prints in full — unlike the hub, which prints only the plan. */
  .pb-chapter { display: block !important; }
  /* Photos are decorative; printing them wastes ink and adds nothing. */
  .pb-figure { display: none !important; }
}