/* ==========================================================================
   AI Agent Playbook — Overview (Figma 787lIj5Xp9qmSDxsDRfoUS / 1056:4106)
   ========================================================================== */

.pb-page {
  font-family: 'Inter', sans-serif;
  color: var(--color-neutral-700);
  background: #EEF0F7;
  /* Body becomes the positioning context for the page-edge guides below. */
  position: relative;
}
/* Left + right vertical guides aligned exactly with the .container-large
   edges (max-width 80rem, centered). Using `position: absolute` + `50%` on
   the body sidesteps the `100vw`-includes-scrollbar gotcha that would
   shift the lines a few pixels inside the section. */
.pb-page::before,
.pb-page::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-neutral-100);
  z-index: 1;
  pointer-events: none;
}
.pb-page::before { left: max(5%, calc(50% - 40rem)); }
.pb-page::after  { right: max(5%, calc(50% - 40rem)); }
/* Layout uses the site-wide .padding-global + .container-large shell — no
   page-specific container rule needed here. (Was: .pb-container.) */

/* ─── HERO ─────────────────────────────────────────────────────────────── */
.pb-hero {
  position: relative;
  padding: 80px 0 0;
  /* Background lives on .pb-hero-inner now so the hero is contained
     within padding-global + container-large instead of bleeding full-width. */
}
.pb-hero-inner {
  position: relative;
  min-height: 720px;
  padding: 40px 80px;
  background: var(--color-primary-100);
  overflow: hidden;
  /* Center the .pb-hero-stage vertically + horizontally inside the inner
     card. The absolute decoration layers ignore this since they're absolute. */
  display: flex;
  align-items: center;
  justify-content: center;
}

.pb-hero-stage {
  position: relative;
  width: 650px;
  max-width: 100%;
  height: 441px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 58px;
}
/* Pill is no longer a standalone div — it's drawn via the gradient span's
   ::before pseudo so it always hugs the "AI Agent?" text exactly, regardless
   of viewport width. The standalone .pb-hero-pill div in the HTML is now a
   no-op (kept for backward compat). */
.pb-hero-pill { display: none; }
.pb-hero-title {
  position: relative;
  z-index: 1;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 90px;
  line-height: 112px;
  color: var(--color-primary-500);
  text-align: center;
  margin: 0;
  letter-spacing: -1px;
  white-space: nowrap;
}
.pb-hero-title .pb-hero-gradient {
  position: relative;
  display: inline-block;
  font-weight: 700;
  background-image: linear-gradient(89.98deg, #015FE9 34%, #825CDE 79%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Reserve space for the surrounding pill so it doesn't collide with nearby
     glyphs on the same line. */
  padding: 0 18px;
  margin: 0 -8px;
}
/* The pill is drawn as a ::before so it hugs "AI Agent?" exactly.
   Negative top/bottom insets extend the box above and below the text bounds
   to add visible breathing room around the gradient word. */
.pb-hero-title .pb-hero-gradient::before {
  content: "";
  position: absolute;
  inset: -10px -2px -10px -2px;
  border: 3px dashed rgba(54, 97, 237, 0.4);
  border-radius: 10px;
  background-image: linear-gradient(to right, rgba(245, 248, 255, 0.4), rgba(235, 227, 250, 0.28));
  box-shadow: 0 12px 12px 0 rgba(54, 97, 237, 0.10);
  pointer-events: none;
  z-index: -1;
}
.pb-hero-sub {
  position: relative;
  z-index: 1;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  color: var(--color-neutral-900);
  text-align: center;
  margin: 0;
  width: 596px;
  max-width: 100%;
}

/* Decorative hero illustrations — absolute-positioned around the stage */
.pb-hero-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.pb-hero-deco img { display: block; width: 100%; height: 100%; }

/* Bottom-left hand — anchored to the bottom-left corner of the hero-inner so
   the whole illustration is visible. Original Figma values had it positioned
   too low and would get clipped by the rounded hero card. */
.pb-hero-deco--hand-left   {
  left: -49px;
  bottom: -24px;
  top: auto;
  width: 280px;
  height: 308px;
  animation: pbHandFloatA 4.6s ease-in-out infinite;
}
.pb-hero-deco--hand-right  {
  right: -49px;
  top: -27px;
  width: 448px;
  height: 274px;
  animation: pbHandFloatB 5.2s ease-in-out infinite;
}

/* Subtle continuous horizontal drift — each hand uses different distances,
   timings, and easing so they never line up. Adds a tiny rotation tilt at
   the extremes for a more organic feel. */
@keyframes pbHandFloatA {
  0%, 100% { transform: translateX(0)    rotate(0deg); }
  50%      { transform: translateX(10px) rotate(-1.5deg); }
}
@keyframes pbHandFloatB {
  0%, 100% { transform: translateX(0)    rotate(0deg); }
  50%      { transform: translateX(-12px) rotate(1.5deg); }
}
.pb-hero-deco--star-blue   { left: 150px;  top: 185px; width: 130px; height: 87px;  }
.pb-hero-deco--folder      { left: 540px;  top: 628px; width: 99px;  height: 99px;
  transform: rotate(-8.94deg); }
.pb-hero-deco--search      { left: 1006px; top: 484px; width: 83px;  height: 81px;
  transform: rotate(-1.76deg); }
.pb-hero-deco--pie         { left: 177px;  top: -11px; width: 72px;  height: 72px;  }
.pb-hero-deco--vector-bot  { left: 1187px; top: 666px; width: 106px; height: 86px;  }
.pb-hero-deco--ai-cluster  { left: -20px;  top: 287px; width: 78px;  height: 90px;  transform: rotate(-16.7deg); }
.pb-hero-deco--vector-top  { left: 566px;  top: 36px;  width: 79px;  height: 81px;
  transform: rotate(59.91deg); }

/* ─── Featured logos ───────────────────────────────────────────────────── */
.pb-featured {
  padding: 0;
  text-align: center;
}
.pb-featured-inner {
  padding: 56px 0;
}
.pb-featured-label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.04em;
  color: var(--color-neutral-500);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.pb-featured-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px 48px;
  filter: grayscale(1);
}
.pb-featured-logos img {
  height: 26px;
  width: auto;
  object-fit: contain;
  /* Hidden + nudged up by default; the IntersectionObserver in overview.html
     adds .is-in-view on the container which transitions each child to its
     resting state. Per-child transition-delay gives the staggered slide. */
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.55s cubic-bezier(.22,.61,.36,1),
              transform 0.55s cubic-bezier(.22,.61,.36,1);
}
.pb-featured-logos.is-in-view img {
  opacity: 0.8;
  transform: translateY(0);
}
.pb-featured-logos.is-in-view img:nth-child(1) { transition-delay: 0.05s; }
.pb-featured-logos.is-in-view img:nth-child(2) { transition-delay: 0.12s; }
.pb-featured-logos.is-in-view img:nth-child(3) { transition-delay: 0.19s; }
.pb-featured-logos.is-in-view img:nth-child(4) { transition-delay: 0.26s; }
.pb-featured-logos.is-in-view img:nth-child(5) { transition-delay: 0.33s; }
.pb-featured-logos.is-in-view img:nth-child(6) { transition-delay: 0.40s; }
.pb-featured-logos.is-in-view img:nth-child(7) { transition-delay: 0.47s; }
.pb-featured-logos.is-in-view img:nth-child(8) { transition-delay: 0.54s; }

/* Respect users who prefer reduced motion — skip the stagger, just show. */
@media (prefers-reduced-motion: reduce) {
  .pb-featured-logos img { opacity: 0.8; transform: none; transition: none; }
}

/* ─── Hero message ─────────────────────────────────────────────────────── */
.pb-message {
  padding: 0;
  text-align: center;
}
/* White content card — spans the full container-large width. */
.pb-message-inner {
  width: 100%;
  margin: 0 auto;
  padding: 120px 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}
.pb-message-lead {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-neutral-600);
  margin: 0;
  max-width: 38rem;
}
.pb-message-lead p { margin: 0 0 10px 0; }
.pb-message-lead p:last-child { margin: 0; }
.pb-message-headline {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 38px;
  line-height: 48px;
  color: var(--color-neutral-200);
  margin: 0;
  letter-spacing: -0.5px;
  max-width: 38rem;
}
/* Per-word spans are injected by the inline JS in overview.html. The
   transition rule here lets the inline `style.color` change animate
   smoothly between the unfilled (grey/200) and filled (grey/600) states
   as the reader scrolls through the headline. */
.pb-message-headline .pb-word,
.pb-pullquote .pb-word {
  color: var(--color-neutral-200);
  transition: color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Pull quote — a standalone 28px headline-style sentence used inside the
   article prose to break up long passages. Animates with the same
   per-word scroll fill as .pb-message-headline. */
.pb-pullquote {
  margin: 32px 0;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -0.4px;
  color: var(--color-neutral-200);
}

/* ─── Tensions section ─────────────────────────────────────────────────── */
.pb-tensions {
  padding: 80px 0;
}
.pb-tensions-lead {
  max-width: 643px;
  margin: 0 auto 32px;
  text-align: center;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  color: var(--color-neutral-900);
}
.pb-tensions-stage {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.pb-tension {
  display: grid;
  align-items: center;
  gap: 16px;
}
.pb-tension-char {
  flex-shrink: 0;
  width: 221px;
  height: 221px;
}
.pb-tension-char--sm { width: 173px; height: 173px; }
.pb-tension-char img { width: 100%; height: 100%; object-fit: contain; }
/* Mirror horizontally (Y-axis flip) for the overworked character so he
   faces the bubble on the right. */
.pb-tension-char--flip img { transform: scaleX(-1); }

.pb-tension-bubble {
  position: relative;
  width: 546px;
  height: 120px;
  display: flex;
  align-items: center;
}
.pb-tension-bubble--small {
  width: 547px;
  height: auto;
}
.pb-tension-bubble--small .pb-tension-bubble-svg {
  width: 100%;
  height: auto;
}
/* Bubble SVGs are inlined in the HTML so the `<text>` elements inside
   can use the page-loaded Instrument Sans font (an external <img>-loaded
   SVG can't). The SVG fills the parent bubble naturally. */
.pb-tension-bubble-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Tension layout: 3 staggered rows.
   Positions are shifted ~117px left of their original values so the
   three-character cluster reads as horizontally centered inside the
   1280-wide stage (the original Figma layout sat right-biased). */
.pb-tension--1 { grid-template-columns: 0.5fr 1.5fr; }
.pb-tension--2 { grid-template-columns: 1.5fr 0.5fr; }
.pb-tension--3 { grid-template-columns: 0.5fr 1.5fr; }

.pb-tension--1 .pb-tension-bubble  { width: 547px; }
.pb-tension--2 .pb-tension-bubble  { width: 548px; }
.pb-tension--3 .pb-tension-bubble  { width: 547px; padding: 24px 40px; }

/* ─── Three questions (Fold 3) ─────────────────────────────────────────── */
.pb-questions {
  padding: 40px 0 80px;
}
.pb-questions-lead {
  margin: 0 0 32px;
  padding: 0 80px;
  text-align: center;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  color: var(--color-neutral-600);
}
.pb-questions-lead p { margin: 0 0 10px 0; }
.pb-questions-lead p:last-child { margin: 0; }
.pb-questions-stage {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  height: 564px;
  padding: 32px 40px;
  background: #fff;
  border-radius: 16px;
  box-sizing: border-box;
}
.pb-question-pin {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pb-question-pin img {
  display: block;
  width: 100%;
  height: 100%;
}
.pb-question-pin-text {
  position: absolute;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  color: var(--color-primary-500);
  text-align: center;
}
/* The three pins are absolutely positioned. Original Figma values sat
   left-biased inside the 1100-wide stage (cluster spanned 0–634, leaving
   ~466px empty on the right). Each `left` is shifted right by ~233px so
   the cluster reads as horizontally centered. */
.pb-question-pin--1 { left: 297px; top: 0;   width: 422px; height: 142px; }
.pb-question-pin--1 .pb-question-pin-text { left: 44px; right: 44px; top: 56px; }

.pb-question-pin--2 { left: 455px; top: 154px; width: 412px; height: 151px; }
.pb-question-pin--2 .pb-question-pin-text { left: 28px; right: 28px; top: 60px; }

.pb-question-pin--3 { left: 233px; top: 326px; width: 505px; height: 159px; }
.pb-question-pin--3 .pb-question-pin-text { left: 44px; right: 44px; top: 62px; }

/* ─── Banner (marquee) — Figma 1056:4547 ───────────────────────────────── */
.pb-banner {
  background: var(--color-primary-800);
  height: 84px;
  /* Override the global `section { padding: 120px 0 }` rule so the banner
     stays a flat 84px tall instead of being wrapped in 240px of padding. */
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  position: relative;
  /* Sit above the .pb-page::before / ::after vertical guides (z-index: 1)
     so the full-bleed banner reads as a single uninterrupted blue strip. */
  z-index: 2;
  display: flex;
  align-items: center;
}
.pb-banner-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  animation: pbMarquee 36s linear infinite;
}
.pb-banner-track > * { flex-shrink: 0; }
.pb-banner-title {
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.pb-banner-title .pb-banner-accent { color: var(--color-primary-300); }
.pb-banner-sep {
  width: 1px;
  height: 49px;
  background: rgba(255, 255, 255, 0.35);
}
.pb-banner-icon { width: 52px; height: 52px; }
.pb-banner-icon img { width: 100%; height: 100%; display: block; }
@keyframes pbMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── Playbook section ─────────────────────────────────────────────────── */
.pb-playbook {
  padding: 40px 0;
}
.pb-playbook-card {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 4px 0 rgba(122, 122, 122, 0.04),
              0 12px 12px 0 rgba(122, 122, 122, 0.12);
  overflow: hidden;
  min-height: 790px;
  padding: 40px 80px;
  display: flex;
  align-items: center;
  gap: 78px;
}
.pb-playbook-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.pb-playbook-deco img { width: 100%; height: 100%; display: block; }
.pb-playbook-deco--ellipse-blue   { left: -314px; top: 304px;  width: 424px; height: 424px; }
.pb-playbook-deco--ellipse-purple { left: -628px; top: 236px;  width: 868px; height: 868px; }
.pb-playbook-deco--ellipse-blue-2 { left: 896px;  top: -548px; width: 834px; height: 834px; }
.pb-playbook-deco--walk           { left: 698px;  top: 126px;  width: 620px; height: 561px; }

.pb-playbook-content {
  position: relative;
  z-index: 1;
  width: 566px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.pb-playbook-title {
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 38px;
  line-height: 62px;
  color: var(--color-neutral-900);
  margin: 0;
  white-space: nowrap;
  letter-spacing: 0;
}
.pb-part {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.pb-part-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 32px;
  color: var(--color-neutral-500);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pb-part-name {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 32px;
  color: var(--color-neutral-900);
  margin: 0;
  letter-spacing: 0;
}
.pb-part-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutral-600);
  margin: 0;
}
.pb-part-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-primary-500);
  padding: 6px 0;
  transition: gap 0.2s ease, color 0.2s ease;
}
.pb-part:hover .pb-part-cta {
  gap: 12px;
  color: var(--color-primary-800);
}
.pb-part-cta svg { width: 16px; height: 16px; }

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pb-hero-inner { padding: 32px 40px; }
  .pb-hero-stage { transform: scale(0.85); transform-origin: top center; }
  .pb-tensions-stage { transform: scale(0.78); transform-origin: top center; height: 600px; padding: 0 24px; }
  .pb-questions-stage { transform: scale(0.85); transform-origin: top center; height: 514px; }
  .pb-playbook-card { padding: 32px 40px; }
  .pb-playbook-deco--walk { width: 480px; height: 432px; left: 580px; top: 160px; }
  .pb-playbook-content { width: 480px; }
  .pb-playbook-title { font-size: 32px; line-height: 1.2; white-space: normal; }
}

@media (max-width: 768px) {
  /* Small page-wide horizontal gutter so every section has a visible gap
     from the viewport edges — replaces the desktop's 5% padding. */
  .pb-page .padding-global { padding-left: 16px; padding-right: 16px; }

  .pb-hero { padding: 16px 0; }
  .pb-hero-inner {
    padding: 28px 20px;
    min-height: 0;
    border-radius: 0;
    /* Need positioning context for the decoration overrides below since
       desktop uses absolute coords like top: 628px that would push them
       off-screen on phones. */
  }
  .pb-hero-stage {
    width: 100%; height: auto; gap: 20px;
    transform: none;
    padding: 56px 0 60px;
  }
  .pb-hero-pill {
    width: 100%; max-width: 360px; height: 92px;
    top: 145px;
  }
  .pb-hero-title {
    font-size: 40px;
    line-height: 1.35;
    white-space: normal;
    letter-spacing: -0.5px;
  }
  .pb-hero-sub { font-size: 16px; line-height: 1.5; width: auto; padding: 0 8px; }

  /* Keep the playful character on mobile — show the two hands at corners
     plus a couple of small accent shapes near the title, scaled down and
     repositioned for the narrow viewport. Hide the desktop-only ones that
     are anchored to absolute pixel positions outside a phone canvas. */
  .pb-hero-deco--hand-left {
    left: -18px;
    bottom: -8px;
    top: auto;
    width: 130px;
    height: 143px;
  }
  .pb-hero-deco--hand-right {
    right: -18px;
    top: -10px;
    width: 180px;
    height: 110px;
  }
  .pb-hero-deco--pie {
    left: 12px;
    top: 18px;
    width: 44px;
    height: 44px;
  }
  .pb-hero-deco--star-blue {
    left: auto;
    right: 20px;
    top: auto;
    bottom: 30%;
    width: 70px;
    height: 47px;
  }
  .pb-hero-deco--ai-cluster {
    left: 4px;
    top: 38%;
    width: 50px;
    height: 58px;
  }
  /* Hide decorations whose desktop positions are too far off-canvas to
     reposition meaningfully on a phone */
  .pb-hero-deco--folder,
  .pb-hero-deco--search,
  .pb-hero-deco--vector-bot,
  .pb-hero-deco--vector-top { display: none; }

  .pb-featured { padding: 32px 0; }
  .pb-featured-logos { gap: 24px 32px; }
  .pb-featured-logos img { height: 22px; }

  .pb-message { padding: 32px 0; }
  .pb-message-headline { font-size: 24px; line-height: 1.3; }

  .pb-tensions { padding: 48px 0; }
  .pb-tensions-stage {
    transform: none;
    height: auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }
  .pb-tension {
    position: static;
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    grid-template-columns: none !important;
  }
  /* Quote bubble first on top, character/illustration below */
  .pb-tension-bubble,
  .pb-tension-bubble--small { order: 0; }
  .pb-tension-char,
  .pb-tension-char--sm { order: 1; }
  /* Per-row character sizing on mobile */
  .pb-tension--1 .pb-tension-char { width: 200px; height: 200px; }
  .pb-tension--2 .pb-tension-char { width: 180px; height: 180px; }
  .pb-tension--3 .pb-tension-char { width: 200px; height: 200px; }
  .pb-tension-bubble,
  .pb-tension-bubble--small {
    width: 100% !important;
    height: auto;
    padding: 20px 24px;
    min-height: 96px;
    /* Vertically center the SVG inside the bubble container */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pb-tension-bubble-text { font-size: 16px; line-height: 26px; max-width: none !important; text-align: left !important; }
  /* Center the character image vertically inside its wrapper */
  .pb-tension-char,
  .pb-tension-char--sm {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pb-tension-char img,
  .pb-tension-char--sm img { width: auto; height: 100%; max-width: 100%; }
  /* M3 illustration scales to a compact 50px tall row inside the bubble */
  .pb-tension--3 .pb-tension-bubble-svg { height: 50px; width: auto; max-width: 100%; }

  .pb-questions { padding: 32px 0 56px; }
  .pb-questions-lead { padding: 0 16px; }
  .pb-questions-stage {
    transform: none;
    height: auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  /* All three question pin illustrations render at a uniform 80px height */
  .pb-question-pin { position: static; width: 100% !important; height: 80px; }
  .pb-question-pin img { width: auto; max-width: 100%; height: 80px; object-fit: contain; }
  .pb-question-pin-text { font-size: 16px; line-height: 26px; left: 28px; right: 28px; top: 44px; }

  .pb-banner-title { font-size: 18px; line-height: 1.4; }
  .pb-banner-icon  { width: 40px; height: 40px; }

  .pb-playbook-card { padding: 32px 24px; flex-direction: column; gap: 24px; min-height: 0; }
  .pb-playbook-content { width: 100%; }
  .pb-playbook-title { font-size: 26px; }
  .pb-part-name { font-size: 20px; line-height: 1.3; }
  .pb-playbook-deco--walk { display: none; }
}

/* ==========================================================================
   Part pages (what-is-an-ai-agent / ai-agent-workflows / ai-agent-guardrails)
   Two-column layout: sticky TOC sidebar on the left, long-form content on
   the right. The Parts tabs sit between the navbar and the body.
   ========================================================================== */

/* Parts navigation tabs — strip matches the page bg, each tab is a white
   pill sitting on top with small gaps showing the gray underneath. Sticks
   to the top of the viewport just under the main navbar. The 82px offset
   matches the navbar's rendered height (its min-height is 72px but its
   actual content renders ~82px tall); a smaller offset would pull the
   tabs upward beneath the navbar as soon as scrolling started. */
.pb-parts-nav {
  position: sticky;
  top: 82px;
  z-index: 997;
  background: #EEF0F7;
}
/* Bottom hairline sits on `.container-large` so it stops at the 80rem
   max-width instead of bleeding past the page-edge guides. */
.pb-parts-nav .container-large {
  border-bottom: 1px solid var(--color-neutral-100);
}
.pb-parts-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  /* Anchor the scroll-progress bar to the bottom edge. */
  position: relative;
}
/* Scroll-progress indicator — a 4px primary-500 bar pinned to the bottom
   of the tab strip. The `js/playbook-scroll-progress.js` script (loaded
   on every playbook page) updates --scroll-progress on scroll (0–100). */
.pb-parts-tabs::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: calc(var(--scroll-progress, 0) * 1%);
  background: var(--color-primary-500);
  transition: width 0.05s linear;
  pointer-events: none;
}
.pb-parts-tabs a {
  display: block;
  padding: 20px 16px;
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: var(--color-neutral-700);
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.pb-parts-tabs a:hover {
  color: var(--color-primary-500);
  background: var(--color-primary-50);
}
.pb-parts-tabs a.is-active {
  color: var(--color-primary-500);
}

/* Page body */
.pb-part-page { background: #EEF0F7; }
.pb-part-main { padding-top: 48px; padding-bottom: 48px; }

.pb-part-layout {
  display: grid;
  /* TOC column matches .pb-toc width (300px) so the sidebar doesn't
     overflow into the article. */
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

/* Sticky TOC sidebar */
.pb-toc {
  position: sticky;
  /* Below: 82px navbar + ~60px parts-nav + 40px gap = 182px, so when
     sticky kicks in the TOC lands right where it naturally sat (just
     below the parts-nav with the article's 40px breathing room
     preserved). A smaller value would yank the TOC up under the
     parts-nav strip and eat the 40px gap. */
  top: 182px;
  width: 300px;
  background: #fff;
  border: 1px solid var(--color-neutral-100);
  border-radius: 0 12px 12px 0;
  padding: 24px 20px;
  align-self: start;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.pb-toc-title {
  margin: 0 0 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}
.pb-toc-list,
.pb-toc-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pb-toc-list > li { margin: 0; }
.pb-toc-link {
  display: block;
  padding: 8px 12px;
  margin-left: -12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-neutral-600);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.15s ease, font-weight 0.15s ease, border-color 0.15s ease;
}
.pb-toc-link:hover { color: var(--color-neutral-900); }
.pb-toc-link.is-active {
  color: var(--color-primary-500);
  font-weight: 600;
  border-left-color: var(--color-primary-500);
}
.pb-toc-sublist {
  margin: 4px 0 4px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pb-toc-sublink {
  display: block;
  padding: 6px 12px;
  margin-left: -12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-neutral-600);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.15s ease, font-weight 0.15s ease, border-color 0.15s ease;
}
.pb-toc-sublink:hover { color: var(--color-neutral-900); }
.pb-toc-sublink.is-active {
  color: var(--color-primary-500);
  font-weight: 600;
  border-left-color: var(--color-primary-500);
}

/* Article body */
.pb-part-content {
  min-width: 0;
}
.pb-part-header { margin-bottom: 32px; }
.pb-part-eyebrow {
  margin: 0 0 12px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.pb-part-title {
  margin: 0;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--color-neutral-900);
}
.pb-gradient {
  background: linear-gradient(95deg, #3661ED 0%, #825CDE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
/* Part titles should never be italic, even when the gradient span inside them
   inherits the default italic from .pb-gradient. */
.pb-part-title .pb-gradient,
.pb-section-title .pb-gradient { font-style: normal; }

/* Quote callout — mirrors the success-story `.ss-quote` visual: rounded
   card, blue→purple gradient left border via a ::before mask, Inter 16/1.6
   weight 600 body, light primary-50 background. Used for BOTH the hero
   quote and inline body quotes — `.pb-quote--inline` is a no-op modifier
   kept for backward compatibility. */
.pb-quote {
  position: relative;
  margin: 16px 0 40px;
  padding: 24px 28px;
  background: #F8F9FC;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.pb-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0 0 0 4px;
  background: linear-gradient(to bottom, rgba(54, 97, 237, 1), rgba(151, 71, 255, 0.8));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.pb-quote-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.pb-quote-text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.16px;
  color: var(--color-neutral-700);
}
.pb-quote-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pb-quote-avatar {
  width: 60px;
  height: 60px;
  border-radius: 20px 0;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-neutral-100);
}
.pb-quote-byline { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-quote-name {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-900);
}
.pb-quote-linkedin {
  color: #0A66C2;
  display: inline-flex;
  text-decoration: none;
}
.pb-quote-meta {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--color-neutral-600);
}
.pb-quote-company {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--color-neutral-700);
  /* Hide the text node — only the logo image inside should render. */
  font-size: 0;
}
.pb-quote-company img { height: 14px; width: auto; }

/* Long-form prose */
.pb-prose {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-neutral-700);
}
.pb-prose p { margin: 0 0 18px; }
.pb-prose p:last-child { margin-bottom: 0; }
.pb-prose em { font-style: italic; color: var(--color-neutral-900); }
.pb-prose strong { font-weight: 600; color: var(--color-neutral-900); }
.pb-prose ul,
.pb-prose ol {
  margin: 0 0 24px;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pb-prose li { margin: 0; }
.pb-prose li::marker { color: var(--color-neutral-500); }

/* Section + heading types within an article. Sections are separated by a
   neutral-100 hairline with 40px breathing room on each side. */
/* Each section ends with a thin neutral-200 rule. neutral-100 (#EEF0F7)
   matches the page bg so it would be invisible — neutral-200 (#D4D9EA)
   reads as a clear separator. border-bottom lets the last section show
   a separator too, without doubling with the next section's top edge. */
.pb-section { padding-top: 24px; padding-bottom: 40px; border-bottom: 1px solid var(--color-neutral-200); }
.pb-section:last-of-type { border-bottom: 0; padding-bottom: 0; }
.pb-section:first-child { padding-top: 0; border-top: 0; }
.pb-section-title {
  margin: 0 0 20px;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--color-neutral-900);
  scroll-margin-top: 100px;
}
.pb-section-h3 {
  margin: 36px 0 16px;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--color-neutral-900);
  scroll-margin-top: 100px;
}

/* Word-by-char fill: each character is wrapped in .pb-quote-word by JS.
   Starts light gray, transitions to neutral-700 when JS adds .is-on. */
.pb-quote-word {
  color: #ADB2CE;
  transition: color 0.25s ease;
}
.pb-quote-word.is-on { color: var(--color-neutral-700); }
.pb-quote-avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #5D7FEF 0%, #3661ED 100%);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Two-panel gradient callout — Figma 1288:18675. Top: gradient header
   with the question + a "?" badge. Bottom: white card with a dashed
   primary border holding the body copy. A circular "?" badge floats over
   the right edge, straddling the gradient/body split. */
.pb-callout-gradient {
  position: relative;
  margin: 32px 0 40px;
  /* Reserve room on the right for the floating "?" badge so the body
     copy never collides with it. */
  padding-right: 60px;
}
/* Gradient header — top half of the stack. */
.pb-callout-gradient-icon {
  display: none;            /* legacy SVG icon hidden — replaced by ::after badge */
}
.pb-callout-gradient-title {
  margin: 0;
  padding: 32px 28px 50px;
  background: linear-gradient(114deg, #3661ED 34.39%, rgba(151, 71, 255, 0.80) 131.55%);
  border-radius: 20px 20px 0 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  color: #fff;
}
/* White body — bottom half. Pulled up 30px so it overlaps the gradient
   header and reads as a connected two-tone card. */
.pb-callout-gradient-body {
  position: relative;
  margin-top: -30px;
  padding: 24px 28px;
  background: #fff;
  border: 2px dashed var(--color-primary-500);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pb-callout-gradient p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-neutral-600);
}
.pb-callout-gradient em { font-style: italic; }
.pb-callout-gradient strong { font-weight: 600; color: var(--color-neutral-700); }
/* Floating "?" badge — uses the standalone SVG asset whose outer ring is
   pre-coloured #EEF0F7 to match the page bg, giving the illusion that the
   badge punches through the gradient/body seam. Positioned to match
   Figma 1288:18684 (140×140, ~55px from the right edge of the callout). */
.pb-callout-gradient-badge {
  position: absolute;
  top: 0;
  right: 55px;
  width: 140px;
  height: 140px;
  z-index: 2;
  pointer-events: none;
  display: block;
}

/* Definition block — Figma 1288:18772. Primary-50 card with a 2px dashed
   primary-500 border, body copy on the left, robot illustration on the
   right. */
.pb-definition {
  margin: 16px 0 24px;
  padding: 0 48px;
  background: #F5F8FF;
  border: 2px dashed var(--color-primary-500);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.pb-definition-body { flex: 1 1 auto; min-width: 0; }
.pb-definition p {
  margin: 0;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-neutral-900);
}
.pb-definition strong { font-weight: 600; color: var(--color-primary-500); }
.pb-definition-illus {
  flex: 0 0 auto;
  width: 218px;
  height: 217px;
}
.pb-definition-illus img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* Mirage illustration — Figma-supplied SVG dropped between the two opening
   paragraphs of Section 3 to anchor the "End-to-End Robot Employee" idea. */
.pb-mirage-illus { margin: 24px 0; text-align: center; }
.pb-mirage-illus img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* ---- 4-column "spectrum" comparison table ----
   Each row is a CSS grid: label col + 4 type cols. The right-most column
   (Agentic AI) is solid primary blue, the middle (AI Agent) is light blue,
   and the first two are plain white. Same pattern as the live page table. */
.pb-spectrum {
  margin: 24px 0 32px;
}
.pb-spectrum-grid {
  border: 1px solid var(--color-neutral-100);
  border-radius: 8px;
  overflow: hidden;
}
.pb-spectrum-row {
  display: grid;
  grid-template-columns: 180px repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-neutral-100);
}
.pb-spectrum-row:last-child { border-bottom: 0; }
.pb-spectrum-cell {
  padding: 16px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-700);
  border-right: 1px solid var(--color-neutral-100);
  background: #fff;
}
.pb-spectrum-cell:last-child { border-right: 0; }
.pb-spectrum-cell--label {
  background: #FAFBFE;
  font-weight: 500;
  color: var(--color-neutral-800);
}
.pb-spectrum-col-head {
  background: #FAFBFE;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-neutral-900);
  text-align: left;
}
.pb-spectrum-col-head--mid { background: #E0EBFE; color: var(--color-primary-800); }
.pb-spectrum-col-head--high { background: var(--color-primary-500); color: #fff; }
.pb-spectrum-cell--mid { background: rgba(54, 97, 237, 0.08); color: var(--color-neutral-800); }
.pb-spectrum-cell--high { background: var(--color-primary-500); color: #fff; border-right-color: rgba(255,255,255,0.12); }

/* Agency scale chevrons — Figma 1288:18747. Four interlocking arrows in a
   soft primary-50 card, escalating from white (no agency) → primary-500
   (high agency). Each chip overlaps the next via negative margin and a
   chevron-shaped clip-path on the right edge; left edge has a matching
   inverse notch so they read as a connected scale. */
.pb-agency-scale {
  margin-top: 16px;
  background: #F5F8FF;
  border-radius: 16px;
  padding: 8px;
  display: flex;
  align-items: stretch;
}
.pb-agency-chip {
  flex: 1;
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0;
  text-align: center;
  padding: 12px 28px 12px 36px;
  /* arrow with right-pointing tip + inverse notch on the left to slot into
     the previous chip's tip. */
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
  margin-left: -22px;
  position: relative;
}
.pb-agency-chip:first-child {
  /* No left notch for the first chip — flat left edge, rounded by the
     parent's border-radius effectively. */
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  margin-left: 0;
  padding-left: 24px;
}
.pb-agency-chip--0 { background: #fff;                  color: var(--color-neutral-900); }
.pb-agency-chip--1 { background: var(--color-primary-100); color: var(--color-neutral-900); }
.pb-agency-chip--2 { background: var(--color-primary-300); color: #fff; }
.pb-agency-chip--3 { background: var(--color-primary-500); color: #fff; }

/* Key distinction callout — Figma 1288:18756. Top + bottom primary-500
   hairlines, a 28px title, and a row of the four nouns separated by ≠
   icons (Prompt ≠ copilot ≠ agent ≠ agentic). */
.pb-key-distinction {
  margin: 32px 0;
  padding: 24px;
  border-top: 1px solid var(--color-primary-500);
  border-bottom: 1px solid var(--color-primary-500);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pb-key-distinction-title {
  margin: 0;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 38px;
  color: var(--color-neutral-900);
}
.pb-key-distinction-eq {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 38px;
  color: var(--color-primary-500);
}
.pb-key-distinction-eq svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-primary-500);
}

/* Myth blocks */
.pb-myth { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--color-neutral-100); }
.pb-myth:first-of-type { border-top: 0; padding-top: 0; }

/* Myth card — Figma 1288:19068. 2px primary-500 border, soft blue/purple
   gradient bg, 24px radius on three corners (top-left, top-right,
   bottom-right). Two-column flex: prose on the left, illustration right. */
.pb-myth-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 2px solid var(--color-primary-500);
  border-radius: 24px 24px 24px 0;
  background:
    linear-gradient(135.26deg, rgba(54, 97, 237, 0.06) 34.72%, rgba(151, 71, 255, 0.048) 143.59%),
    #ffffff;
  scroll-margin-top: 100px;
}
.pb-myth-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pb-myth-card-prose { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pb-myth-card-prose p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-neutral-600);
}
.pb-myth-card-illus { flex: 0 0 auto; width: 268px; height: 268px; }
.pb-myth-card-illus img { width: 100%; height: 100%; display: block; object-fit: contain; }
.pb-myth-num {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-primary-500);
}
.pb-myth-title {
  margin: 0;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--color-neutral-900);
  scroll-margin-top: 100px;
}

/* "Reality-check" small heading inside a myth */
/* Reality-check card — Figma 1288:19225. Vertical primary-500 → purple
   gradient, white text, 0/16/16/16 border-radius (only top-left squared
   so it visually slots beneath the myth card). */
.pb-reality-card {
  margin: 28px 0;
  padding: 24px;
  border-radius: 0 16px 16px 16px;
  background: linear-gradient(179.85deg, #3661ED 6.51%, rgba(151, 71, 255, 0.8) 207.04%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pb-reality-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: #fff;
}
.pb-reality-card p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: #fff;
}

/* Vendor Questions ↔ What to Ask Instead table */
/* Vendor questions — Figma 1288:19266. Two-column icon-card grid with a
   plain title + intro above. No outer card / table chrome. */
.pb-vqa {
  margin: 24px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pb-vqa-header { display: flex; flex-direction: column; gap: 8px; }
.pb-vqa-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  color: var(--color-neutral-900);
}
.pb-vqa-intro {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-neutral-600);
}
.pb-vqa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.pb-vqa-card { display: flex; flex-direction: column; gap: 12px; }
.pb-vqa-icon { width: 24px; height: 24px; color: var(--color-primary-500); flex-shrink: 0; }
.pb-vqa-q {
  margin: 0;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-neutral-900);
}
.pb-vqa-a {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-neutral-600);
}

/* Row-based vqa table — Figma 1462:20126. Header bare, each row a tinted
   rounded card with optional icon on the left. */
.pb-vqa--rows {
  gap: 8px;
  margin: 16px 0 24px;
}
.pb-vqa--rows .pb-vqa-head {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 28px;
  color: #52577A;
}
.pb-vqa--rows .pb-vqa-head > div:first-child { flex: 0 0 200px; }
.pb-vqa--rows .pb-vqa-head > div:last-child { flex: 1 1 0; min-width: 0; }
.pb-vqa--rows .pb-vqa-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 20px;
  background: #F5F8FF;
  border-radius: 8px;
}
.pb-vqa--rows .pb-vqa-q {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #2D3044;
}
.pb-vqa--rows .pb-vqa-a {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #52577A;
}
.pb-vqa--rows .pb-vqa-a em {
  font-style: normal;
  font-weight: 600;
  color: #2D3044;
}
.pb-vqa-icon-img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

/* Ownership questions — Figma 1462:20235. Tinted card with stacked prompts
   on the left and a thinking-character illustration on the right. */
.pb-ownership-questions {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: stretch;
  padding: 20px 24px;
  margin: 12px 0 24px;
  background: #F5F8FF;
  border-radius: 8px;
  overflow: hidden;
}
.pb-ownership-questions-list {
  flex: 1 1 0;
  min-width: 0;
  max-width: 64%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pb-ownership-questions-list p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #52577A;
}
.pb-ownership-questions-illus {
  flex-shrink: 0;
  width: 130px;
  height: auto;
  align-self: center;
  display: block;
}

@media (max-width: 720px) {
  .pb-ownership-questions { flex-direction: column; padding: 16px; }
  .pb-ownership-questions-list { max-width: 100%; }
  .pb-ownership-questions-illus { width: 230px; height: 230px; align-self: center; }
}

@media (max-width: 720px) {
  .pb-vqa--rows .pb-vqa-head { display: none; }
  .pb-vqa--rows .pb-vqa-row {
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }
  .pb-vqa--rows .pb-vqa-q { flex: 0 0 auto; }
}

/* 3-column agent types (Horizontal / Vertical / Bespoke) */
.pb-types {
  margin: 24px 0 28px;
  border: 1px solid var(--color-neutral-100);
  border-radius: 8px;
  overflow: hidden;
}
.pb-types-row {
  display: grid;
  grid-template-columns: 160px repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-neutral-100);
}
.pb-types-row--head {
  background: var(--color-neutral-900);
}
.pb-types-row--head .pb-types-cell--head {
  padding: 14px 16px;
  background: transparent;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.pb-types-row--head .pb-types-cell--head:last-child { border-right: 0; }
.pb-types-row:last-child { border-bottom: 0; }
.pb-types-cell {
  padding: 14px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-700);
  border-right: 1px solid var(--color-neutral-100);
  background: #fff;
}
.pb-types-cell:last-child { border-right: 0; }
.pb-types-cell--label {
  background: #FAFBFE;
  font-weight: 500;
  color: var(--color-neutral-800);
}
.pb-types-cell--head {
  font-weight: 600;
}

/* ==========================================================================
   Part 2 — workflow-specific components
   ========================================================================== */

/* 4 workflow overview cards on the intro */
/* Workflow overview cards — Figma 1288:905. Composite card:
   row 1 has a dashed-bordered title sub-card on the left + an
   illustration on the right; row 2 has Primary Teams + Brief Description
   sub-cards. Whole thing sits on a subtle dot-grid background. */
.pb-workflow-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 24px 0 32px;
}
.pb-wf-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "title  .     illus"
    "teams  desc  illus";
  gap: 16px 16px;
  padding: 20px;
  background:
    radial-gradient(circle, rgba(54, 97, 237, 0.18) 1px, transparent 1.5px) 0 0 / 12px 12px,
    #F8F9FC;
  border: 1px solid var(--color-neutral-200);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pb-wf-card:hover {
  border-color: var(--color-primary-300);
  box-shadow: 0 4px 16px rgba(54, 97, 237, 0.08);
}
/* Top-left: dashed-border title sub-card */
.pb-wf-card-title-box {
  position: relative;
  grid-area: title;
  background: #fff;
  border: 1.5px dashed var(--color-primary-500);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Vertical dashed connector from title-box → teams-box. Sits inside the
   16px grid gap directly below the title card, ending in an arrowhead. */
.pb-wf-card-title-box::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -17px;
  width: 12px;
  height: 17px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 17' fill='none'><circle cx='6' cy='2' r='1.6' fill='%233661ED'/><line x1='6' y1='3.5' x2='6' y2='12' stroke='%233661ED' stroke-width='1.4' stroke-dasharray='2 2'/><path d='M2.5 11 L6 14.5 L9.5 11' stroke='%233661ED' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.pb-wf-card-tag {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-600);
}
.pb-wf-card-title {
  margin: 0;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-neutral-900);
}
/* Top-right: illustration (Figma asset, ~146×146) */
.pb-wf-card-illus {
  grid-area: illus;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pb-wf-card-illus img,
.pb-wf-card-illus svg { width: 100%; height: 100%; display: block; }
/* Bottom: two info sub-cards */
.pb-wf-card-box {
  background: #fff;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pb-wf-card-box--teams { grid-area: teams; position: relative; }
/* Horizontal dashed connector from teams-box → desc-box. One-way arrow:
   small dot on the left, dashed line, chevron pointing right at the desc-box. */
.pb-wf-card-box--teams::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none'><circle cx='2' cy='6' r='1.6' fill='%233661ED'/><line x1='3.5' y1='6' x2='15' y2='6' stroke='%233661ED' stroke-width='1.4' stroke-dasharray='2 2'/><path d='M13 2 L17 6 L13 10' stroke='%233661ED' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.pb-wf-card-box--desc { grid-area: desc; grid-column: desc / illus; }
.pb-wf-card-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary-500);
}
.pb-wf-card-value {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-900);
}

/* Detailed workflow section — same pattern as .pb-section in Part 1:
   thin neutral-200 bottom rule + symmetric 24/40 padding so each
   workflow reads as a labelled chunk with breathing room around it,
   and the bottom rule disappears after the last workflow. */
.pb-wf {
  padding-top: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-neutral-200);
}
.pb-wf:last-of-type { border-bottom: 0; padding-bottom: 0; }
.pb-wf-header { margin-bottom: 20px; }
/* Mirrors .pb-part-eyebrow so the "Workflow 1/2/3/4" header sits in the
   same visual tier as the Part 2 header above it. */
.pb-wf-eyebrow {
  margin: 0 0 12px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.pb-wf-title {
  margin: 0 0 12px;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--color-neutral-900);
  scroll-margin-top: 100px;
}
/* "Relevant teams:" row — inline-flex with a primary-500 users-three icon. */
.pb-wf-teams {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--color-neutral-700);
}
.pb-wf-teams-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-primary-500);
}
.pb-wf-teams strong { color: var(--color-neutral-900); font-weight: 600; }

/* Workflow intro row — two-column flex with prose on the left and a Figma
   illustration on the right. Used at the top of each Workflow section. */
.pb-wf-intro {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 16px 0 24px;
}
.pb-wf-intro-text { flex: 1 1 auto; min-width: 0; }
.pb-wf-intro-illus {
  flex: 0 0 220px;
  width: 220px;
  height: 220px;
}
.pb-wf-intro-illus img { display: block; width: 100%; height: 100%; }

/* White-bg container holding the skill-card + notdel-card together so the
   pair reads as one capability group rather than two stacked panels. */
.pb-capability-group {
  margin: 24px 0 32px;
  padding: 12px;
  background: #fff;
  border-radius: 24px;
}
.pb-capability-group > .pb-skill-card,
.pb-capability-group > .pb-notdel-card {
  margin: 0;
}
.pb-capability-group > .pb-skill-card + .pb-notdel-card {
  margin-top: 12px;
}

/* Agent Skill Stack card — Figma 1288:8599. Light primary-tinted surface,
   no border, large decorative quote glyph in the top-left corner. */
.pb-skill-card {
  position: relative;
  margin: 24px 0 32px;
  padding: 32px;
  background: #EEF2FF;
  border: 0;
  border-radius: 20px;
}
.pb-skill-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}
/* Decorative open-quote — replaces the round icon-chip used previously. */
.pb-skill-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 48px;
  height: 38px;
  background: transparent;
  color: var(--color-primary-500);
}
.pb-skill-icon > svg { display: none; }                                   /* hide legacy stroke icon */
.pb-skill-icon::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 38' fill='%233661ED'><path d='M0 38V22.5C0 12.6 6 4 16 0l4 6c-6 2.5-10 6.5-10 12h10v20H0Zm28 0V22.5C28 12.6 34 4 44 0l4 6c-6 2.5-10 6.5-10 12h10v20H28Z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.pb-skill-title {
  margin: 6px 0 0;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--color-neutral-900);
}
.pb-skill-subhead {
  margin: 24px 0 16px;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-neutral-900);
}
/* 2-column grid of skill items — icon stacks above the bold title + body */
.pb-skill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
}
.pb-skill-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
.pb-skill-list li > svg {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  color: var(--color-primary-500);
  flex-shrink: 0;
}
.pb-skill-list li strong {
  font-weight: 600;
  font-size: 18px;
  color: var(--color-neutral-900);
}
.pb-skill-list li span { color: var(--color-neutral-600); }

/* "What not to delegate" card — same shape as skill-card with coral palette
   and a dashed-corner decoration in place of the quote. */
.pb-notdel-card {
  position: relative;
  margin: 24px 0 32px;
  padding: 32px;
  background: #FFF1ED;
  border: 0;
  border-radius: 20px;
}
.pb-notdel-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 12px;
}
/* Decorative dashed brackets corner */
.pb-notdel-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: transparent;
  color: #E0593F;
}
.pb-notdel-icon > svg { display: none; }
.pb-notdel-icon::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23E0593F' stroke-width='2.5' stroke-linecap='round'><path d='M2 11V4a2 2 0 0 1 2-2h7' stroke-dasharray='3 3'/><path d='M34 11V4a2 2 0 0 0-2-2h-7' stroke-dasharray='3 3'/><path d='M2 25v7a2 2 0 0 0 2 2h7' stroke-dasharray='3 3'/><path d='M34 25v7a2 2 0 0 1-2 2h-7' stroke-dasharray='3 3'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.pb-notdel-title {
  margin: 4px 0 0;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--color-neutral-900);
}
.pb-notdel-lead {
  margin: 0 0 24px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-700);
}
/* 2-column grid of "do not delegate" items — coral icons */
.pb-notdel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
}
.pb-notdel-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
}
.pb-notdel-list li > svg {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  color: var(--color-neutral-600);
  flex-shrink: 0;
}
.pb-notdel-list li strong {
  font-weight: 600;
  font-size: 16px;
  color: var(--color-neutral-900);
}
.pb-notdel-list li span { color: var(--color-neutral-600); }

/* Takeaway footer inside the notdel-card — dashed neutral border, body text
   on the left, robot-with-scales illustration on the right (Figma 1288:8658). */
.pb-notdel-takeaway {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 32px;
  padding: 24px 40px 24px 32px;
  background: rgba(255, 255, 255, 0.5);
  border: 2px dashed #757A97;
  border-radius: 16px;
}
.pb-notdel-takeaway-body { flex: 1 1 auto; min-width: 0; }
.pb-notdel-takeaway-body p {
  margin: 0;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-neutral-900);
}
.pb-notdel-takeaway-illus {
  flex: 0 0 200px;
  width: 200px;
  height: auto;
  display: block;
}

/* Risks GTM Teams Flagged — blue badge header */
.pb-risks-header {
  margin: 32px 0 16px;
  scroll-margin-top: 100px;
}
.pb-risks-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px 8px 16px;
  background: var(--color-primary-500);
  color: #fff;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  /* asymmetric chevron — looks like a banner pointing right */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  padding-right: 28px;
}

/* Big takeaway — purple/blue gradient callout (variant of pb-callout-gradient) */
.pb-takeaway {
  margin: 24px 0 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #6371F3 0%, #825CDE 100%);
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.pb-takeaway-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 60px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.pb-takeaway p {
  margin: 0;
  flex: 1;
  min-width: 200px;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}

/* Closing paragraph before the next CTA */
.pb-prose--closing { margin-top: 48px; }

/* ==========================================================================
   Part 3 — guardrails + maturity components
   ========================================================================== */

/* HITL practices — embedded SVG illustration */
.pb-hitl-practices {
  margin: 24px 0 28px;
  width: 100%;
}
.pb-hitl-practices img {
  width: 100%;
  height: auto;
  display: block;
}

/* Maturity model — single rounded white card, numbered steps as plain text,
   nested inline quotes get a tinted sub-card look (mirrors the ori-prompt
   card used elsewhere on the site). */
.pb-maturity {
  margin: 24px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 32px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid var(--color-neutral-100);
  box-shadow: 0 6px 24px 0 rgba(35, 37, 50, 0.04);
}
.pb-maturity-step {
  display: block;
  padding: 0;
  background: transparent;
  border: none;
}
.pb-maturity-num {
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-neutral-900);
  margin-right: 4px;
}
.pb-maturity-num::after { content: '.'; }
.pb-maturity-body { display: inline; }
.pb-maturity-title {
  display: inline;
  margin: 0;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-neutral-900);
}
.pb-maturity-body p {
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-neutral-700);
}
/* Inline quote sitting inside the maturity card — tighter, embedded look */
.pb-maturity .pb-quote--inline {
  margin: 0;
  background: #F8F9FC;
  border-radius: 12px;
  padding: 20px 24px;
}

/* Pro tip — Figma 1466:20948. Blue→purple gradient callout with inline label
   and white body text. */
.pb-protip {
  display: block;
  margin: 16px 0 28px;
  padding: 14px 16px;
  background: linear-gradient(179.92deg, #3661ED 6.5%, rgba(151, 71, 255, 0.8) 207%);
  border: none;
  border-radius: 8px;
}
.pb-protip-label {
  display: inline;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: #FFFFFF;
}
.pb-protip-label::after { content: ': '; }
.pb-protip p {
  display: inline;
  margin: 0;
  flex: none;
  min-width: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #FFFFFF;
}
.pb-protip p strong { color: #FFFFFF; font-weight: 600; }

/* CEO closing byline — used at the very end of the playbook (Part 3 close). */
/* Field Notes — numbered list with gradient circles + accent word */
.pb-field-notes {
  margin: 20px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pb-field-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pb-field-note-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(179.3deg, #3661ED 6.5%, rgba(151, 71, 255, 0.8) 100%);
  color: #FFFFFF;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
}
.pb-field-note-body { flex: 1; min-width: 0; }
.pb-field-note-title {
  margin: 0 0 6px;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.45;
  color: var(--color-neutral-900);
}
.pb-field-note-body p {
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-neutral-600);
}
.pb-field-note-hl {
  color: var(--color-primary-500);
  font-weight: 600;
}
.pb-field-notes-kicker {
  margin: 28px 0 12px;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.45;
  color: var(--color-neutral-900);
}

/* Field Notes — notebook page look. Paper-texture background, soft shadow,
   rounded corners. Texture asset from Figma 1466:21961. */
#field-notes {
  position: relative;
  padding: 40px 44px;
  margin: 32px 0;
  background-color: #FBFAF6;
  background-image: url('/assets/playbook/field-notes/paper.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  box-shadow: 0 4px 42px 15px rgba(114, 114, 114, 0.16);
  overflow: hidden;
}
#field-notes::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.30);
  pointer-events: none;
  border-radius: inherit;
}
#field-notes > * { position: relative; z-index: 1; }

@media (max-width: 720px) {
  #field-notes { padding: 28px 20px; border-radius: 10px; }
}

.pb-ceo-byline {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-neutral-100);
  display: flex;
  align-items: center;
  gap: 14px;
}
.pb-ceo-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-neutral-100);
}
.pb-ceo-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-ceo-name {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-neutral-900);
}
.pb-ceo-role {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--color-neutral-600);
}

/* 3-layer measurement framework cards — Figma 1466:21441. Nested rounded
   cards stacked vertically inside a tinted container, progressively darker:
   transparent → light blue → brand blue (white text). */
.pb-metrics {
  margin: 16px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #F5F8FF;
  border-radius: 12px;
}
.pb-metric {
  display: block;
  padding: 14px 20px;
  text-align: center;
  border: none;
  border-radius: 12px;
  background: transparent;
}
.pb-metric--task { background: transparent; }
.pb-metric--workflow { background: #E0EBFE; }
.pb-metric--team { background: #3661ED; }
.pb-metric-num { display: none; }
.pb-metric-title {
  margin: 0 0 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #424766;
  text-align: center;
}
.pb-metric-body p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #757A97;
  text-align: center;
}
.pb-metric--team .pb-metric-title,
.pb-metric--team .pb-metric-body p { color: #FFFFFF; }


/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet — shrink the TOC sidebar and pull display sizes down a notch. */
@media (max-width: 991px) {
  .pb-part-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
  .pb-part-title { font-size: 36px; }
  .pb-section-title { font-size: 26px; }
  /* Myth + definition cards: drop the rigid right-column illustration width */
  .pb-myth-card-illus,
  .pb-definition-illus { width: 200px; height: 200px; }
  .pb-myth-card-body,
  .pb-definition-body { min-width: 0; }
  /* Overview hero scales down */
  .pb-hero-title { font-size: 64px; line-height: 1.05; }
  .pb-message-headline { font-size: 30px; }
}

/* Mobile — single-column stacks across the board. */
@media (max-width: 768px) {
  /* ---- Parts-nav strip ---- */
  /* Mobile navbar is 81px tall (style/global.css), so park the sticky
     parts-nav 1px higher to remove the seam between the two bars. Full
     white bg makes the strip read as a continuation of the navbar
     instead of the EEF0F7 page background. */
  .pb-parts-nav { top: 81px; background: #fff; }
  .pb-parts-tabs { gap: 0; }
  .pb-parts-tabs a { padding: 12px 6px; font-size: 13px; }

  /* ---- Part layout: TOC stacks above content ---- */
  .pb-part-main { padding-top: 24px; padding-bottom: 32px; }
  .pb-part-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pb-toc {
    position: static;
    top: auto;
    width: 100%;
    max-height: none;
    border: none;
    border-radius: 12px;
    padding: 20px 16px;
  }
  .pb-toc-sublist { padding-left: 12px; }

  /* ---- Display + heading sizes ---- */
  .pb-part-eyebrow { font-size: 14px; }
  .pb-part-title { font-size: 32px; line-height: 1.15; letter-spacing: -0.4px; }
  .pb-section-title { font-size: 24px; line-height: 1.2; }
  .pb-section-h3 { font-size: 18px; margin: 24px 0 12px; }
  .pb-pullquote { font-size: 20px; line-height: 30px; }

  /* ---- Section dividers tighter ---- */
  .pb-section { padding-top: 20px; padding-bottom: 28px; }

  /* ---- Prose ---- */
  .pb-prose p,
  .pb-prose li { font-size: 16px; line-height: 1.6; }

  /* ---- Inline quote blocks ---- */
  .pb-quote { padding: 20px 16px; }
  .pb-quote-text { font-size: 16px; line-height: 26px; }
  .pb-quote-author { gap: 12px; }
  .pb-quote-avatar { width: 48px; height: 48px; border-radius: 16px 0; }
  .pb-quote-name { font-size: 14px; }
  .pb-quote-meta { font-size: 12px; }

  /* ---- Gradient "Why does this distinction matter?" callout ---- */
  /* On mobile the floating "?" badge sits inside the title bar instead of
     straddling the right edge, so the outer card no longer needs to
     reserve 60px of padding-right (which was leaving a visible empty
     strip on the right). */
  .pb-callout-gradient { padding: 0; margin: 24px 0 32px; }
  .pb-callout-gradient-title {
    font-size: 18px; line-height: 26px; padding: 20px 72px 36px 20px;
    border-radius: 16px 16px 0 0;
  }
  .pb-callout-gradient-badge { width: 56px; height: 56px; right: 12px; top: 12px; }
  .pb-callout-gradient-body { margin-top: -20px; padding: 20px; border-radius: 16px; }
  .pb-callout-gradient p { font-size: 15px; line-height: 1.55; }

  /* ---- Definition card: stack robot above text, drop horizontal padding ---- */
  .pb-definition {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 16px;
    border-radius: 12px;
  }
  .pb-definition-illus { width: 140px; height: 140px; align-self: center; }
  .pb-definition p { font-size: 15px; line-height: 26px; }

  /* ---- Spectrum table on mobile ----
     Stacks each row as a card. The row's label (e.g. "What it is") becomes
     a primary-coloured header bar; the 4 value cells stack underneath, each
     prefixed with its column type ("Prompt Tool" / "Copilot" / "AI Agent"
     / "Agentic AI") via a ::before pseudo so context is preserved without
     repeating the column header table. */
  .pb-spectrum-grid { border: 0; border-radius: 0; }
  .pb-spectrum-row {
    display: block;
    grid-template-columns: none;
    border: 1px solid var(--color-neutral-200);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
  }
  .pb-spectrum-row--head { display: none; }
  .pb-spectrum-cell { display: block; border-right: 0; padding: 14px 16px; font-size: 14px; line-height: 1.55; }
  .pb-spectrum-cell + .pb-spectrum-cell { border-top: 1px solid var(--color-neutral-100); }
  /* Row label becomes the card header. */
  .pb-spectrum-cell--label {
    background: var(--color-primary-50);
    color: var(--color-primary-800);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  /* Inject the column type as a small uppercase eyebrow on each value cell. */
  .pb-spectrum-row .pb-spectrum-cell:not(.pb-spectrum-cell--label)::before {
    display: block;
    margin-bottom: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
  }
  .pb-spectrum-row .pb-spectrum-cell:nth-child(2)::before { content: "Prompt Tool"; }
  .pb-spectrum-row .pb-spectrum-cell:nth-child(3)::before { content: "Copilot"; }
  .pb-spectrum-row .pb-spectrum-cell:nth-child(4)::before { content: "AI Agent"; color: var(--color-primary-500); }
  .pb-spectrum-row .pb-spectrum-cell:nth-child(5)::before { content: "Agentic AI"; color: var(--color-primary-500); }
  /* Drop the desktop colour fills — the eyebrow already cues type. */
  .pb-spectrum-cell--mid,
  .pb-spectrum-cell--high { background: #fff; color: var(--color-neutral-700); }

  /* ---- Agency scale: chevrons → flat pills stacked horizontally ---- */
  .pb-agency-scale { flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 12px; }
  .pb-agency-chip {
    flex: 1 1 calc(50% - 6px);
    clip-path: none;
    margin-left: 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    min-height: 44px;
  }
  .pb-agency-chip:first-child { padding-left: 12px; clip-path: none; }

  /* ---- Key distinction (Prompt ≠ copilot ≠ …) ---- */
  .pb-key-distinction { padding: 16px 0; }
  .pb-key-distinction-title { font-size: 20px; line-height: 28px; }
  .pb-key-distinction-eq { font-size: 20px; line-height: 28px; gap: 8px; }
  .pb-key-distinction-eq svg { width: 18px; height: 18px; }

  /* ---- Mirage illustration sits flush ---- */
  .pb-mirage-illus { margin: 16px -8px; }

  /* ---- Myth cards: stack illustration below text ---- */
  .pb-myth-card {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    border-radius: 16px 16px 16px 0;
  }
  .pb-myth-card-illus { width: 100%; height: 200px; align-self: center; max-width: 240px; margin: 0 auto; }
  .pb-myth-num { font-size: 16px; }
  .pb-myth-title { font-size: 20px; }
  .pb-myth-card-prose p { font-size: 15px; line-height: 26px; }

  /* ---- Reality-check card ---- */
  .pb-reality-card { padding: 20px; gap: 16px; border-radius: 0 12px 12px 12px; }
  .pb-reality-title { font-size: 20px; line-height: 28px; }
  .pb-reality-card p { font-size: 15px; line-height: 26px; }

  /* ---- Vendor Questions: 2-col grid → 1-col stack ---- */
  .pb-vqa { gap: 20px; }
  .pb-vqa-title { font-size: 20px; line-height: 28px; }
  .pb-vqa-intro { font-size: 15px; line-height: 26px; }
  .pb-vqa-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pb-vqa-card { gap: 8px; }
  .pb-vqa-icon { width: 22px; height: 22px; }
  .pb-vqa-q { font-size: 17px; line-height: 24px; }
  .pb-vqa-a { font-size: 15px; line-height: 24px; }

  /* ---- Agent types table stacks into per-type cards (transposed) ---- */
  .pb-types { border-radius: 12px; }
  .pb-types-row { grid-template-columns: minmax(0, 1fr); }
  .pb-types-row--head { display: none; }
  .pb-types-cell { border-right: 0; border-bottom: 1px solid var(--color-neutral-100); padding: 12px 14px; font-size: 14px; }
  .pb-types-cell:last-child { border-bottom: 0; }
  .pb-types-cell--label {
    background: var(--color-primary-50);
    color: var(--color-primary-800);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
  }

  /* ---- Overview hero ---- */
  .pb-hero { padding: 40px 0 32px; min-height: 0; }
  .pb-hero-inner { padding: 32px 20px; }
  .pb-hero-title { font-size: 40px; line-height: 1.05; letter-spacing: -1px; }
  .pb-hero-sub { font-size: 16px; line-height: 1.5; }
  .pb-hero-deco { display: none; } /* drop the floating bits on phones */

  /* ---- Overview banner ---- */
  .pb-banner { height: auto; padding: 20px 0; }
  .pb-banner-title { font-size: 18px; line-height: 1.3; }

  /* ---- Overview message section ---- */
  .pb-message-inner { padding: 56px 20px; }
  .pb-message-lead { font-size: 14px; }
  .pb-message-headline { font-size: 24px; line-height: 1.25; }

  /* ---- Featured logos wrap ---- */
  .pb-featured-inner { padding: 32px 20px; }
  .pb-featured-logos { flex-wrap: wrap; gap: 24px; justify-content: center; }
  .pb-featured-logos img { height: 28px; }

  /* ---- Overview tensions: stack ---- */
  .pb-tension { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; }
  .pb-tensions-lead { font-size: 18px; }
  .pb-tension-bubble,
  .pb-tension-bubble--small { width: 100%; height: auto; max-width: 320px; }

  /* ---- Overview question pins: stack ---- */
  .pb-question-pins { flex-direction: column; align-items: center; gap: 24px; }
  .pb-questions-lead { font-size: 18px; }
  .pb-question-pin-text { font-size: 16px; }

  /* ---- Overview playbook intro + part cards ---- */
  .pb-playbook-title { font-size: 28px; line-height: 1.2; }
  .pb-part-name { font-size: 22px; }
  .pb-part-label { font-size: 14px; }
  .pb-part-desc { font-size: 14px; }

  /* ---- Part 2 workflow components stack ---- */
  .pb-workflow-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pb-wf { padding-top: 20px; padding-bottom: 28px; }
  .pb-wf-eyebrow { font-size: 11px; }
  .pb-wf-title { font-size: 22px; line-height: 1.2; }
  .pb-wf-teams { font-size: 13px; }
  .pb-wf-card { padding: 18px 16px; }
  .pb-wf-card-title { font-size: 16px; }
  .pb-wf-card-meta dt { font-size: 11px; }
  .pb-wf-card-meta dd { font-size: 13px; }
  .pb-skill-card,
  .pb-notdel-card { padding: 20px 16px; border-radius: 10px; margin: 16px 0; }
  .pb-skill-title,
  .pb-notdel-title { font-size: 17px; line-height: 24px; }
  .pb-skill-subhead { font-size: 13px; }
  .pb-skill-list li,
  .pb-notdel-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; }
  .pb-takeaway { flex-direction: column; padding: 18px 20px; gap: 10px; }
  .pb-takeaway-label { align-self: flex-start; }
  .pb-takeaway p { font-size: 15px; }
  .pb-risks-header { margin: 24px 0 12px; }

  /* ---- Part 3 components stack ---- */
  .pb-maturity-step { flex-direction: column; padding: 16px; gap: 8px; }
  .pb-protip { padding: 12px 14px; }

  /* ---- Workflow + skill cards stack ---- */
  /* Switch wf-card from grid to flex column so the title-box, illustration,
     teams pill and description stack cleanly at full width — the desktop
     grid areas don't apply once it's flex. */
  .pb-wf-card {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-areas: none;
    gap: 12px;
  }
  .pb-wf-card-title-box { width: 100%; }
  /* Hide the dashed connector pseudo-elements on mobile — they were designed
     for the desktop grid layout and don't connect anything meaningful once
     the card stacks into a single column. */
  .pb-wf-card-title-box::after,
  .pb-wf-card-box--teams::after { display: none; }
  .pb-wf-card-illus { width: 100px; height: 100px; align-self: center; }
  .pb-wf-intro { flex-direction: column; gap: 16px; }
  .pb-wf-intro-illus { width: 100%; max-width: 280px; align-self: center; }

  /* Stack the relevant-teams pill vertically so the icon + label + team
     names don't crowd on narrow viewports */
  .pb-wf-teams {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Stack the not-delegate takeaway: body text on top, robot+scales below */
  .pb-notdel-takeaway {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
  }
  .pb-notdel-takeaway-illus {
    flex: 0 0 auto;
    width: 140px;
    align-self: center;
  }
  .pb-skill-list,
  .pb-notdel-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pb-vqa-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pb-types { grid-template-columns: minmax(0, 1fr); }
  .pb-myth-card { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 16px; }
  .pb-myth-card-illus { width: 160px; height: 160px; justify-self: center; }
  .pb-definition-illus { width: 160px; height: 160px; }
  .pb-decision-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px; }
  .pb-decision-row--header { display: none; }
  .pb-spectrum-row { grid-template-columns: minmax(0, 1fr); }
  .pb-section-title { font-size: 26px; line-height: 1.25; letter-spacing: -0.4px; }
  .pb-pullquote { font-size: 22px; line-height: 1.35; }
  .pb-callout-gradient { padding: 20px 16px 24px; }
  .pb-callout-gradient-badge { display: none; }
  .pb-callout-gradient-title { font-size: 18px; line-height: 1.35; }
}

/* Small-mobile breakpoint — tightens spacing and stacks remaining components
   that don't reflow gracefully on narrow phone screens. */
@media (max-width: 599px) {
  .pb-section { padding-top: 20px; padding-bottom: 24px; }
  .pb-section-title { font-size: 22px; line-height: 1.25; }
  .pb-section-h3 { font-size: 16px; }
  .pb-prose p { font-size: 15px; line-height: 1.6; }
  .pb-pullquote { font-size: 20px; line-height: 1.35; }

  /* Hero / part headers tighten further */
  .pb-part-title { font-size: 28px; line-height: 1.2; }
  .pb-part-name { font-size: 20px; }
  .pb-banner-title { font-size: 16px; }

  /* Quote cards */
  .pb-quote--inline { padding: 18px 16px; }
  .pb-quote-text { font-size: 15px; line-height: 1.55; }
  .pb-quote-author { gap: 10px; }
  .pb-quote-avatar { width: 36px; height: 36px; }
  .pb-quote-name { font-size: 13px; }
  .pb-quote-meta { font-size: 12px; }

  /* Field Notes notebook page — tighter on phones */
  #field-notes { padding: 22px 16px; border-radius: 10px; margin: 20px 0; }
  .pb-field-note { gap: 10px; }
  .pb-field-note-num { width: 22px; height: 22px; font-size: 11px; }
  .pb-field-note-title { font-size: 16px; line-height: 1.4; }
  .pb-field-note-body p { font-size: 14px; line-height: 1.6; }
  .pb-field-notes-kicker { font-size: 16px; }
  .pb-ceo-byline { gap: 10px; padding-top: 18px; margin-top: 22px; }
  .pb-ceo-avatar { width: 40px; height: 40px; }
  .pb-ceo-name { font-size: 14px; }
  .pb-ceo-role { font-size: 12px; line-height: 1.45; }

  /* Maturity card — tighter padding inside the white card */
  .pb-maturity { padding: 20px 18px; gap: 18px; }
  .pb-maturity-num,
  .pb-maturity-title { font-size: 15px; }
  .pb-maturity-body p { font-size: 14px; }
  .pb-maturity .pb-quote--inline { padding: 16px; }

  /* Decision / VQA row tables */
  .pb-decision-icon { width: 36px; height: 36px; flex: 0 0 36px; }
  .pb-decision-row { padding: 14px; line-height: 24px; }
  .pb-vqa--rows .pb-vqa-row { padding: 14px; gap: 8px; }
  .pb-vqa-icon-img { width: 22px; height: 22px; }
  .pb-vqa--rows .pb-vqa-q,
  .pb-vqa--rows .pb-vqa-a { font-size: 13px; line-height: 20px; }

  /* Pro tip — keep inline label but tighten padding */
  .pb-protip,
  .pb-protip-label,
  .pb-protip p { font-size: 13px; line-height: 20px; }

  /* Metrics cards inside the F5F8FF wrapper */
  .pb-metrics { padding: 8px; gap: 6px; }
  .pb-metric { padding: 12px 14px; }
  .pb-metric-title,
  .pb-metric-body p { font-size: 13px; line-height: 20px; }

  /* Ownership-questions card — fully stack illustration below text */
  .pb-ownership-questions { padding: 16px; gap: 12px; }
  .pb-ownership-questions-illus { width: 230px; height: 230px; max-width: 100%; align-self: center; }
  .pb-ownership-questions-list p { font-size: 13px; line-height: 20px; }

  /* Workflow card / intro */
  .pb-wf-title { font-size: 20px; }
  .pb-wf-card { padding: 16px 14px; }
  .pb-wf-card-illus { width: 80px; height: 80px; }

  /* HITL illustration — keep readable, don't overflow */
  .pb-hitl-practices img { max-width: 100%; }

  /* TOC — reduce padding and font so it doesn't dominate the page */
  .pb-toc { padding: 12px 14px; margin: 12px 0 20px; }
  .pb-toc-title { font-size: 13px; }
  .pb-toc-link,
  .pb-toc-sublink { font-size: 14px; }

  /* Next CTA */
  .pb-next-cta { padding: 18px 16px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .pb-next-cta-text { font-size: 14px; }

  /* ---- Overview page hero — tighten further on phones ---- */
  .pb-hero-inner { padding: 24px 16px; border-radius: 0; }
  .pb-hero-stage { padding: 48px 0 52px; gap: 16px; }
  .pb-hero-title { font-size: 32px; line-height: 1.35; }
  .pb-hero-title .pb-hero-gradient { padding: 0 10px; margin: 0 -4px; }
  .pb-hero-title .pb-hero-gradient::before { inset: -6px -2px -6px -2px; border-width: 2px; border-radius: 8px; }
  .pb-hero-sub { font-size: 14px; line-height: 1.45; padding: 0; }
  .pb-hero-deco--hand-left  { width: 100px; height: 110px; left: -12px; }
  .pb-hero-deco--hand-right { width: 140px; height: 86px; right: -12px; }
  .pb-hero-deco--pie        { width: 36px; height: 36px; left: 8px; top: 14px; }
  .pb-hero-deco--star-blue  { width: 56px; height: 38px; right: 14px; }
  .pb-hero-deco--ai-cluster { width: 40px; height: 46px; }

  /* Overview — section spacing and tension/question/banner content */
  .pb-featured { padding: 20px 0; }
  .pb-featured-inner { padding: 28px 0; }
  .pb-featured-label { font-size: 12px; margin-bottom: 18px; }
  .pb-featured-logos { gap: 18px 24px; }
  .pb-featured-logos img { height: 18px; }

  .pb-message { padding: 24px 0; }
  .pb-message-headline { font-size: 20px; line-height: 1.35; }

  .pb-tensions { padding: 28px 0; }
  .pb-tensions-stage { gap: 16px; }
  .pb-tension-char,
  .pb-tension-char--sm { width: 110px; height: 110px; }
  .pb-tension-bubble,
  .pb-tension-bubble--small { padding: 16px 18px; min-height: 0; }
  .pb-tension-bubble-text { font-size: 14px; line-height: 22px; }

  .pb-questions { padding: 20px 0 32px; }
  .pb-questions-stage { gap: 12px; }
  .pb-question-pin { height: 110px; }
  .pb-question-pin-text { font-size: 14px; line-height: 22px; left: 20px; right: 20px; top: 36px; }

  /* Overview banner marquee */
  .pb-banner { padding: 18px 0; }
  .pb-banner-title { font-size: 15px; line-height: 1.35; }
  .pb-banner-icon { width: 32px; height: 32px; }

  /* Overview playbook card (the 3-parts card) */
  .pb-playbook-card { padding: 22px 16px; gap: 18px; }
  .pb-playbook-title { font-size: 22px; line-height: 1.2; }
  .pb-playbook-eyebrow { font-size: 11px; }
  .pb-playbook-desc { font-size: 14px; line-height: 1.55; }
  .pb-part-card { padding: 16px 14px; gap: 10px; }
  .pb-part-label { font-size: 11px; }
  .pb-part-name { font-size: 18px; line-height: 1.25; }
  .pb-part-desc { font-size: 13px; line-height: 1.5; }

}

.pb-next-cta-link {
  color: var(--color-primary-500);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.pb-next-cta-link:hover { text-decoration: underline; }

/* ---- Build / Buy / Blend decision table ---- */
.pb-decision-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 24px 0 32px;
  background: #F8F9FC;
  border-radius: 16px;
  padding: 8px;
  overflow: hidden;
}
.pb-decision-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 8px;
  font-family: 'Instrument Sans', 'Inter', sans-serif;
  font-size: 14px;
  line-height: 28px;
  box-shadow: 0 6px 12px 0 rgba(122, 122, 122, 0.06);
}
.pb-decision-row--header {
  background: #F8F9FC;
  color: #52577A;
  font-weight: 500;
  box-shadow: none;
  padding-block: 12px;
}
.pb-decision-row--buy { background: #3661ED; color: #FFFFFF; }
.pb-decision-row--build { background: #90A6EE; color: #FFFFFF; }
.pb-decision-row--blend { background: #E0EBFE; color: #757A97; }
.pb-decision-row--blend .pb-decision-label { color: #232532; }
.pb-decision-cell { word-break: break-word; }
.pb-decision-cell--approach {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pb-decision-icon {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  display: block;
}
.pb-decision-label {
  font-weight: 500;
}

@media (max-width: 720px) {
  .pb-decision-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 16px;
  }
  .pb-decision-row--header { display: none; }
  .pb-decision-cell--approach { gap: 10px; }
  .pb-decision-cell:not(.pb-decision-cell--approach)::before {
    content: attr(data-label);
  }
}