/* =============================================================
   ThriveMap component styles.

   Built incrementally as templates and components land — build
   sequence steps 5–9 in docs/build-spec/BRIEF.md. Tokens and the
   base layer (reset, typography, buttons) live in tokens.css and
   base.css; everything here reads from the CSS custom properties
   defined in tokens.css.

   Sections (added as components land):
     1. Layout primitives (main wrapper)
     2. Primary navigation
     3. Mobile nav drawer
     4. Site footer
     5. Hero eyebrow
     6. Dark CTA block
     7. Environmental band
     8. Assessment card
     9. Walk-flow (3-step)
    10. Stats (3-up grid + 4-up strip)
    11. Inline chart
    12. Inline callout
    13. Related card
    14. Post card
    15. Photo placeholder
    16. Industry sub-navigation
    17. Industry page layout (hero, sections, what's-different, related grid)
    18. Homepage layout (hero, trust strip, problem with persona tabs)
   ============================================================= */

/* --- 1. Layout primitives ------------------------------------------- */

.site-main {
  display: block;
}

/* --- 2. Primary navigation ------------------------------------------ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 244, 237, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.site-nav__inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  color: var(--cobalt);
  text-decoration: none;
}
.site-nav__brand svg {
  height: 28px;
  width: auto;
  display: block;
}

/* The menu. wp_nav_menu emits a <ul class="nav-menu site-nav__menu">. */
.site-nav .nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
}
.site-nav .nav-menu li { margin: 0; }
.site-nav .nav-menu a {
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 0;
  transition: color 0.15s;
  /* Reserve the wider bold width up-front via a hidden mirror — keeps the
     row from shifting when hover/active turns the text 600. data-text is
     populated by JS from each link's textContent. */
  display: inline-block;
}
.site-nav .nav-menu a::after {
  content: attr(data-text);
  display: block;
  font-weight: 600;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}
.site-nav .nav-menu a:hover,
.site-nav .nav-menu .current-menu-item > a,
.site-nav .nav-menu .current_page_item > a {
  color: var(--cobalt);
  font-weight: 600;
}

/* Submenu (desktop). The walker_nav_menu_start_el filter in inc/setup.php
   appends a <button.site-nav__submenu-toggle> to any top-level item that
   carries `menu-item-has-children`. JS in assets/js/theme.js toggles
   `.is-open` on the parent <li> on click. */
/* Top-level <li>s render as inline-flex with centered alignment so the
   link text aligns identically whether or not the item has a chevron — a
   plain inline-block <a> would baseline-align and ride higher than its
   parent siblings. */
.site-nav .nav-menu > li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.site-nav .nav-menu .menu-item-has-children {
  position: relative;
}
.site-nav__submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin: 0;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 6px;
  line-height: 1;
}
.site-nav__submenu-toggle:hover { color: var(--ink); }
.site-nav__submenu-chevron { transition: transform 0.15s; }
.site-nav__submenu-toggle[aria-expanded="true"] .site-nav__submenu-chevron {
  transform: rotate(180deg);
}
.site-nav .nav-menu .sub-menu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: -16px;
  margin: 8px 0 0;
  padding: 8px;
  min-width: 200px;
  background: var(--canvas-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  display: none;
  z-index: 60;
}
.site-nav .nav-menu .menu-item-has-children.is-open > .sub-menu { display: block; }
.site-nav .nav-menu .sub-menu li { display: block; }
.site-nav .nav-menu .sub-menu a {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
}
.site-nav .nav-menu .sub-menu a:hover {
  background: var(--warm);
  color: var(--cobalt);
}

.site-nav__cta {
  background: var(--cobalt);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 0;
  white-space: nowrap;
  transition: background 0.15s;
}
.site-nav__cta-short { display: none; }
@media (max-width: 480px) {
  .site-nav__cta-full { display: none; }
  .site-nav__cta-short { display: inline; }
}
.site-nav__cta:hover,
.site-nav__cta:focus-visible {
  background: var(--cobalt-deep);
  color: #fff;
}

/* Burger — hidden on desktop, shown alongside the CTA on mobile.
   Three bars are rendered as one element + two box-shadow clones, so all
   three are painted from the same 22×2 rectangle — guaranteed identical. */
.site-nav__burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  margin-left: var(--space-1);
  cursor: pointer;
  color: var(--ink);
}
.site-nav__burger-bars {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  box-shadow:
    0 -7px 0 0 currentColor,
    0  7px 0 0 currentColor;
}

@media (max-width: 980px) {
  .site-nav .nav-menu { display: none; }
  .site-nav__burger { display: inline-flex; }
  .site-nav__cta { margin-left: auto; }
}

/* --- 3. Mobile nav drawer ------------------------------------------ */

.mobile-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100vw);
  background: var(--canvas);
  z-index: 100;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  overflow-y: auto;
}
.mobile-drawer[hidden] { display: none; }

.has-mobile-nav-open .mobile-drawer { transform: translateX(0); }
.has-mobile-nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer { transition: none; }
}

.mobile-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-drawer__brand {
  color: var(--cobalt);
  display: inline-flex;
}
.mobile-drawer__brand svg { height: 24px; width: auto; }

.mobile-drawer__close {
  background: transparent;
  border: 0;
  padding: 8px 12px;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.mobile-drawer .nav-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  flex: 1;
}
.mobile-drawer .nav-menu li { margin: 0; }
.mobile-drawer .nav-menu a {
  display: block;
  padding: 16px 0;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

/* Mobile drawer submenu — chevron sits inline with the parent row;
   accordion-style expansion (no absolute positioning). */
.mobile-drawer .nav-menu .menu-item-has-children {
  display: block;
  position: relative;
}
.mobile-drawer .nav-menu .menu-item-has-children > a {
  padding-right: 56px;
}
.mobile-drawer .site-nav__submenu-toggle {
  position: absolute;
  top: 16px;
  right: 0;
  padding: 8px;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1;
}
.mobile-drawer .site-nav__submenu-toggle .site-nav__submenu-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.15s;
}
.mobile-drawer .site-nav__submenu-toggle[aria-expanded="true"] .site-nav__submenu-chevron {
  transform: rotate(180deg);
}
.mobile-drawer .nav-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 8px 16px;
  display: none;
}
.mobile-drawer .nav-menu .menu-item-has-children.is-open > .sub-menu { display: block; }
.mobile-drawer .nav-menu .sub-menu a {
  font-size: 18px;
  padding: 12px 0;
  color: var(--ink-soft);
  border-bottom: 0;
}

.mobile-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;
  background: var(--cobalt);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.mobile-drawer__cta:hover { background: var(--cobalt-deep); color: #fff; }

/* --- 4. Site footer ------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding: 32px 0 40px;
  font-size: 14px;
  margin-top: var(--space-15);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}

.site-footer__brand { color: #fff; }
.site-footer__brand svg {
  height: 26px;
  width: auto;
  margin-bottom: 14px;
  color: #fff;
}
.site-footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  opacity: 0.7;
  max-width: 260px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  transition: color 0.15s, background 0.15s;
}
.site-footer__social:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
/* Override the generic .site-footer__brand svg (logo) sizing for icons. */
.site-footer__social svg {
  height: 18px;
  width: 18px;
  margin: 0;
  color: inherit;
}

.site-footer__heading {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}

.site-footer__list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.site-footer__list a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 0;
}
.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  color: #fff;
}

.site-footer__bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.site-footer__legal { display: flex; gap: 16px; }
.site-footer__legal a {
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
}
.site-footer__legal a:hover { color: #fff; }

@media (max-width: 980px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* --- 5. Hero eyebrow ------------------------------------------------ */

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--canvas-card);
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: 100px;
  margin-bottom: 28px;
}
.hero-eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cobalt);
  display: inline-block;
  flex-shrink: 0;
}
.hero-eyebrow__label { display: inline-block; }

/* --- 6. Dark CTA block --------------------------------------------- */

.dark-cta {
  background: var(--cobalt-deep);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
}
.dark-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  pointer-events: none;
}
.dark-cta__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.dark-cta__heading {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #fff;
  margin-bottom: 18px;
}
.dark-cta__heading em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: #B8C8FF;
}
.dark-cta__body {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 30px;
  max-width: 480px;
}
.dark-cta__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* No border-bottom override here — base.css only adds the underline-style
   bottom-border to anchors inside .prose / <article>, which the CTA isn't.
   Stripping it would shave the bottom edge off the secondary button's
   1px border and produce a three-sided "3D" look. */
.dark-cta__actions a { text-decoration: none; }

.dark-cta--with-stat {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.dark-cta--with-stat .dark-cta__content { max-width: 560px; }

/* An editor-chosen image beside the CTA copy. */
.dark-cta--with-image {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.dark-cta--with-image .dark-cta__content { max-width: 520px; }
.dark-cta__image {
  position: relative;
  z-index: 1;
  max-width: 460px;
  justify-self: end;
}
.dark-cta__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--r);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.45);
}

/* "What happens after you book" — the three contact-page steps beside the
   CTA copy, in place of the phone mockup (Homepage). */
.dark-cta--with-next {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.dark-cta--with-next .dark-cta__content { max-width: 520px; }
.dark-cta__next {
  position: relative;
  z-index: 1;
  padding: 22px 26px 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r);
}
.dark-cta__next-heading {
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #B8C8FF;
}
.dark-cta__next-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dark-cta__next-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.dark-cta__next-list li:first-child { border-top: 0; }
.dark-cta__next-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.15;
  color: #B8C8FF;
}
.dark-cta__next-text { min-width: 0; }
.dark-cta__next-text b {
  display: block;
  margin-bottom: 2px;
  letter-spacing: -0.005em;
  font-weight: 600;
  color: #fff;
}

.dark-cta__stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r);
  padding: 28px;
  position: relative;
  z-index: 1;
}
.dark-cta__stat-num {
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  margin-bottom: 8px;
}
.dark-cta__stat-unit {
  font-size: 0.5em;
  font-weight: 500;
  margin-left: 2px;
  letter-spacing: -0.02em;
}

/* Thin arrow icon for primary CTAs. Vertical-aligned via flex `align-items: center`
   on .btn — sits close to the middle of lowercase letters at typical button sizes. */
.btn-arrow {
  display: inline-block;
  width: 22px;
  height: 8px;
  flex-shrink: 0;
}
.dark-cta__stat-label {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 980px) {
  .dark-cta { padding: 48px 32px; }
  .dark-cta__heading { font-size: 30px; }
  .dark-cta--with-stat { grid-template-columns: 1fr; gap: 32px; }
  .dark-cta--with-next { grid-template-columns: 1fr; gap: 32px; }
  .dark-cta--with-image { grid-template-columns: 1fr; gap: 32px; }
  .dark-cta__image { justify-self: stretch; max-width: none; }
}

/* --- 7. Environmental band ----------------------------------------- */

.env-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  color: #fff;
  min-height: 360px;
  display: flex;
  align-items: end;
  padding: 40px;
}
.env-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(31, 50, 110, 0.25) 0%, rgba(11, 14, 26, 0.85) 100%),
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 14px,
      rgba(255, 255, 255, 0.04) 14px,
      rgba(255, 255, 255, 0.04) 28px
    ),
    linear-gradient(135deg, var(--ind-tone-a, var(--cobalt-deep)) 0%, var(--ind-tone-b, var(--cobalt)) 100%);
}
.env-band__bg--photo {
  background:
    linear-gradient(180deg, rgba(31, 50, 110, 0.25) 0%, rgba(11, 14, 26, 0.85) 100%),
    var(--env-band-photo, none) center / cover no-repeat;
}
.env-band__label {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cobalt-deep);
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: ui-monospace, monospace;
}
.env-band__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}
.env-band__tag {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #B8C8FF;
  margin-bottom: 14px;
  display: inline-block;
}
.env-band__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  color: #fff;
  margin-bottom: 18px;
}
.env-band__byline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.env-band__byline strong { color: #fff; font-weight: 600; }

@media (max-width: 980px) {
  .env-band { min-height: 320px; padding: 28px; }
  .env-band__quote { font-size: 22px; }
}

/* --- 8. Assessment card -------------------------------------------- */

.assessment-card-wrap {
  position: relative;
}

.assessment-card {
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  position: relative;
}
.assessment-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cobalt);
}
.assessment-card__head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.assessment-card__head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  min-width: 0; /* allow flex to shrink if role label is long */
}
.assessment-card__head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

/* Pause / play toggle — small neutral button next to the Live pill. */
.assessment-card__pause {
  background: transparent;
  border: 0;
  padding: 6px;
  margin: -4px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-mute);
  border-radius: 4px;
  transition: color 0.15s ease;
}
.assessment-card__pause:hover,
.assessment-card__pause:focus-visible {
  color: var(--ink);
}
.assessment-card__pause-icon {
  display: block;
}
.assessment-card__pause .assessment-card__pause-play { display: none; }
.assessment-card__pause[aria-pressed="true"] .assessment-card__pause-bars { display: none; }
.assessment-card__pause[aria-pressed="true"] .assessment-card__pause-play { display: block; }
.assessment-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  padding: 3px 9px 3px 7px;
  background: var(--cobalt-soft);
  color: var(--cobalt);
  border-radius: 100px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.assessment-card__pill-dot {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--cobalt);
  border-radius: 50%;
  flex-shrink: 0;
}
.assessment-card__pill-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--cobalt);
  opacity: 0.3;
  animation: thrivemap-pulse 2s ease-in-out infinite;
}
@keyframes thrivemap-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.3; }
  50%      { transform: scale(1.6); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .assessment-card__pill-dot::after { animation: none; opacity: 0; }
}
.assessment-card__role {
  color: var(--ink-mute);
  font-size: 12px;
}
.assessment-card__progress {
  font-size: 11px;
  color: var(--ink-mute);
  font-family: ui-monospace, monospace;
}
.assessment-card__body { padding: 28px 24px; }
.assessment-card__label {
  font-size: 11px;
  color: var(--cobalt);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.assessment-card__question {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 18px;
  letter-spacing: -0.005em;
}
.assessment-card__opt {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  /* Smooth the "user answers" animation when the cycle reveals the choice. */
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.assessment-card__opt.is-selected {
  border-color: var(--cobalt);
  background: var(--cobalt-soft);
  color: var(--ink);
}
.assessment-card__radio {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #D6D5CD;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
}
.assessment-card__opt.is-selected .assessment-card__radio { border-color: var(--cobalt); }
.assessment-card__opt.is-selected .assessment-card__radio::after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--cobalt);
  border-radius: 50%;
}

/* Sonar ring overlaid on the radio outer edge — opacity 0 until the option
   becomes selected inside a scenario cycle, then animated outward. */
.assessment-card__radio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--cobalt);
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
}
/* Only animate inside the scenario cycle context — sandbox / static usages
   show selected options without the click animation. */
.scenario-cycle .assessment-card__opt.is-selected {
  animation: thrivemap-opt-click 0.4s ease-out;
}
.scenario-cycle .assessment-card__opt.is-selected .assessment-card__radio::before {
  animation: thrivemap-radio-ring 0.7s ease-out;
}
.scenario-cycle .assessment-card__opt.is-selected .assessment-card__radio::after {
  animation: thrivemap-radio-fill 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes thrivemap-opt-click {
  0%   { transform: scale(1);     }
  35%  { transform: scale(0.985); }
  100% { transform: scale(1);     }
}
@keyframes thrivemap-radio-ring {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0;   }
}
@keyframes thrivemap-radio-fill {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .scenario-cycle .assessment-card__opt.is-selected,
  .scenario-cycle .assessment-card__opt.is-selected .assessment-card__radio::before,
  .scenario-cycle .assessment-card__opt.is-selected .assessment-card__radio::after {
    animation: none;
  }
}
.assessment-card__foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #F8F5EE;
}
.assessment-card__bar {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.assessment-card__bar-fill {
  height: 100%;
  background: var(--cobalt);
}
.assessment-card__foot-meta {
  font-size: 11px;
  color: var(--ink-mute);
  font-family: ui-monospace, monospace;
}

.assessment-card__annotation {
  position: absolute;
  z-index: 2;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 11px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-card);
  pointer-events: none;
}
.assessment-card__annotation::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--highlight);
  border-radius: 50%;
}
.assessment-card__annotation--top    { top: -16px; left: -24px; }
.assessment-card__annotation--bottom { bottom: -20px; right: 32px; }

@media (max-width: 980px) {
  .assessment-card__annotation { display: none; }
}

/* Scenario cycle — frames stack in one grid cell, opacity reveals the active
   frame; JS toggles `.is-active` and the answer-revealing `.is-selected`. */
.scenario-card-wrap { position: relative; }
.scenario-cycle__frames {
  display: grid;
  position: relative;
}
.scenario-cycle__frame {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.scenario-cycle__frame.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* prefers-reduced-motion: JS opts out of cycling — show the first frame's
   answer pre-selected so the static card still reads as "candidate answered". */
@media (prefers-reduced-motion: reduce) {
  .scenario-cycle__frame { transition: none; }
  .scenario-cycle__frame.is-active .assessment-card__opt[data-is-answer="true"] {
    border-color: var(--cobalt);
    background: var(--cobalt-soft);
    color: var(--ink);
  }
  .scenario-cycle__frame.is-active .assessment-card__opt[data-is-answer="true"] .assessment-card__radio {
    border-color: var(--cobalt);
  }
  .scenario-cycle__frame.is-active .assessment-card__opt[data-is-answer="true"] .assessment-card__radio::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--cobalt);
    border-radius: 50%;
  }
}

/* Simulated cursor — small cobalt dot that travels from a neutral resting
   spot to the answer option, "presses" (the click that triggers the existing
   reveal animations), then returns. Two-element structure so the outer span
   handles position via `transform: translate()` while the inner span handles
   the visual scale on press. */
.scenario-cycle__cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform: translate(0, 0);
  /* Same curve for entry and exit — short travel + simultaneous fade. */
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
}
.scenario-cycle__cursor.is-visible { opacity: 1; }
.scenario-cycle__cursor-inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Neutral semi-opaque tone — off-brand on purpose so the dot reads as a
     "user agent" rather than part of the cobalt interface. */
  background: var(--ink);
  opacity: 0.55;
  box-shadow: 0 0 0 4px rgba(21, 22, 27, 0.15);
  transition: transform 0.15s ease-out, opacity 0.15s ease-out, box-shadow 0.15s ease-out;
}
.scenario-cycle__cursor.is-pressing .scenario-cycle__cursor-inner {
  transform: scale(0.85);
  opacity: 1;
  box-shadow: 0 0 0 8px rgba(21, 22, 27, 0.10);
}
@media (prefers-reduced-motion: reduce) {
  .scenario-cycle__cursor { display: none; }
}

/* Chat scenario — alternate frame body for `scenario_type === 'chat'`. The
   outer scenario-cycle shell (Live pill, pause, progress bar, cursor) is
   shared with MC; only the frame contents differ. JS reveals bubbles and
   reply buttons in sequence; the cursor presses the chosen reply per turn. */
.chat-scenario {
  display: flex;
  flex-direction: column;
  /* Fixed height so the container doesn't grow as bubbles appear — the
     feed (flex: 1 + overflow: auto) absorbs all the variance. */
  height: 320px;
}

.chat-scenario__feed {
  display: flex;
  flex-direction: column;
  /* Bottom-anchored: the conversation fills from the bottom, the newest bubble
     is always in view, and older bubbles clip off the top (overflow: hidden — no
     scrollbar). As the replies area expands below, the feed shrinks and the
     whole conversation shifts up. */
  justify-content: flex-end;
  gap: 10px;
  flex: 1;
  min-height: 0;
  padding-bottom: 8px;
  overflow: hidden;
  position: relative;
}

/* Typing indicator — three dots that bounce while the customer is "typing". */
.chat-scenario__typing {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: #F2EFE7;
  border-radius: 16px 16px 16px 4px;
  width: fit-content;
  margin-top: 2px;
}
.chat-scenario__typing.is-visible { display: inline-flex; }
.chat-scenario__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-mute);
  display: block;
  animation: thrivemap-chat-typing 1.2s ease-in-out infinite;
}
.chat-scenario__typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-scenario__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes thrivemap-chat-typing {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.5; }
  40%           { transform: translateY(-4px); opacity: 1;   }
}

/* Rows are removed from layout until JS marks them .is-visible — keeping
   them in flow (with opacity: 0) would reserve empty space below the
   typing indicator and push the visible content out of the feed's
   scroll viewport. Slide-in uses a keyframe so the entry plays on the
   display change. */
.chat-scenario__row {
  display: none;
  align-items: flex-end;
  gap: 8px;
  max-width: 88%;
}
.chat-scenario__row.is-visible {
  display: flex;
  animation: thrivemap-chat-bubble-in 0.35s ease;
}
@keyframes thrivemap-chat-bubble-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0);   }
}
.chat-scenario__row--customer {
  align-self: flex-start;
}
.chat-scenario__row--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-scenario__bubble-avatar {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: #E8E4D8;
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.chat-scenario__bubble-avatar--you {
  background: var(--cobalt);
  color: #fff;
}
.chat-scenario__bubble {
  font-size: 13px;
  line-height: 1.45;
  padding: 9px 13px;
  border-radius: 14px;
  word-wrap: break-word;
}
.chat-scenario__row--customer .chat-scenario__bubble {
  background: #F2EFE7;
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.chat-scenario__row--user .chat-scenario__bubble {
  background: var(--cobalt);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Replies area — collapsed to zero height until a turn's options become active,
   then it expands and pushes the conversation up. All turn groups stack in the
   same grid cell; the active one fades in. The collapse animates via the
   grid-template-rows 0fr→1fr technique (with :has) so the shift-up is smooth. */
.chat-scenario__replies {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0fr;
  padding-top: 0;
  border-top: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: grid-template-rows 0.35s ease, padding-top 0.35s ease, border-color 0.35s ease;
}
.chat-scenario__replies:has(.chat-scenario__reply-group.is-active) {
  grid-template-rows: 1fr;
  padding-top: 10px;
  border-top-color: var(--line-soft);
}
.chat-scenario__reply-group {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.chat-scenario__reply-group.is-active {
  opacity: 1;
  visibility: visible;
}
.chat-scenario__reply {
  text-align: left;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  cursor: default;
  font-family: inherit;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
}
.chat-scenario__reply.is-pressed {
  border-color: var(--cobalt);
  background: var(--cobalt-soft);
  color: var(--ink);
  transform: scale(0.985);
}

/* prefers-reduced-motion: show the chat in its completed state — every
   bubble visible, replies hidden, typing indicator suppressed. Reads as
   "conversation complete" without animation. */
@media (prefers-reduced-motion: reduce) {
  .chat-scenario__row {
    display: flex;
    animation: none;
  }
  .chat-scenario__typing { display: none; }
  .chat-scenario__replies { display: none; }
}

/* Ranking scenario — alternate frame body for `scenario_type === 'ranking'`.
   Items render in entered order; JS visits them in rank order, grabs each
   with the cursor and slides it to its target position, displacing the
   other items via FLIP-style translateY transforms. */
.ranking-scenario {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ranking-scenario__item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  background: #fff;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.4;
  will-change: transform;
  transition:
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.2s ease;
}
.ranking-scenario__item.is-dragging {
  border-color: var(--cobalt);
  background: var(--cobalt-soft);
  box-shadow: 0 10px 28px rgba(21, 22, 27, 0.18);
  position: relative;
  z-index: 2;
}
.ranking-scenario__item.is-ranked {
  border-color: var(--cobalt);
  background: var(--cobalt-soft);
  color: var(--ink);
}
.ranking-scenario__badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* `.is-ranked` adds the pop animation when an item reaches its final
   position — JS updates the badge's text content as positions change, so
   the number itself is always visible from the start. */
.ranking-scenario__item.is-ranked .ranking-scenario__badge {
  animation: thrivemap-rank-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes thrivemap-rank-pop {
  0%   { transform: scale(0.5); }
  100% { transform: scale(1);   }
}
.ranking-scenario__text {
  flex: 1;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ranking-scenario__item {
    transition: none;
    transform: none !important;
    border-color: var(--cobalt);
    background: var(--cobalt-soft);
    color: var(--ink);
  }
  .ranking-scenario__badge {
    animation: none;
  }
}

/* --- 9. Walk-flow (3-step) ----------------------------------------- */

.walk-flow {
  display: grid;
  grid-template-columns: repeat(var(--walk-cols, 3), 1fr);
  gap: 16px;
  position: relative;
}

.walk-step {
  position: relative;
  z-index: 1;
  background: transparent;
  padding: 0 8px;
  box-shadow: none;
  border-radius: 0;
}
.walk-step:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 30px;
  width: 12px;
  height: 1px;
  background: var(--line);
}
.walk-step__num {
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
  background: var(--canvas-card);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--cobalt);
}
.walk-step__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 10px;
  color: var(--ink);
}
.walk-step__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
/* One-line outcome under the step text: plain, under a hairline. Not a box,
   and no accent bar (rule: a bar or a box, never both; the bar is reserved
   for unboxed text such as article blockquotes). */
.walk-step__example {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.walk-step__example em,
.walk-step__example i {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 980px) {
  .walk-flow { grid-template-columns: 1fr; gap: 24px; }
  .walk-step::before { display: none; }
}

/* Homepage "How it works" variant: white cards with large italic serif
   numerals (no circle, no connector lines). Matches pages/01-homepage.html
   .how-card. */
.home-section--how {
  scroll-margin-top: 96px;
}
.home-section--how .walk-step {
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
}
.home-section--how .walk-step:not(:first-child)::before { display: none; }
.home-section--how .walk-step__num {
  width: auto;
  height: auto;
  margin-bottom: 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: block;
  font-size: 36px;
  line-height: 1;
}
.home-section--how .walk-step__title {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.home-section--how .walk-step__desc { font-size: 15px; }

/* Homepage "How it works" screens (template-parts/components/how-screens.php):
   each column is [screen][text]. A subgrid shares the two row heights across
   the columns so the screens match the tallest one and the step text starts
   on the same line in every column. */
.walk-flow--screens {
  gap: 24px;
  grid-template-rows: auto auto;
  align-items: stretch;
}
.home-section--how .walk-flow--screens .walk-step {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 20px;
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
.walk-flow--screens .walk-step__text { max-width: 36ch; }
.home-section--how .walk-flow--screens .walk-step__title { font-size: 19px; margin-bottom: 8px; }

.how-screen {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--canvas-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.how-screen__body {
  flex: 1 1 auto;
  padding: 24px 24px 26px;
}
.how-screen__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 10px;
}

/* Attribute rows: profile and result screens. */
.how-attrs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.how-attrs li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--ink);
}
.how-attrs li:last-child { border-bottom: 0; }
/* Second list on the profile screen: the two things left out on purpose. */
.how-attrs + .how-attrs {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.how-attrs__bar {
  display: block;
  position: relative;
  width: 112px;
  height: 6px;
  border-radius: 3px;
  background: var(--cobalt-soft);
}
.how-attrs__bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 50%);
  border-radius: 3px;
  background: var(--cobalt);
}
.how-attrs li.is-out { padding: 8px 0; }
.how-attrs li.is-out span:first-child {
  text-decoration: line-through;
  color: var(--ink-mute);
}
.how-attrs li.is-out em {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  color: var(--ink-mute);
}

/* Candidate screen: a fixed-width phone, centred, cut by the card's bottom
   edge. Sand a step deeper than --warm-deep so the white phone stands off it. */
.how-screen--candidate .how-screen__body {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 26px 26px 0;
  background: #DBD2BA;
  overflow: hidden;
}
.how-phone {
  width: 100%;
  max-width: 320px;
  padding: 18px 16px 8px;
  background: var(--canvas-card);
  border: 6px solid var(--ink);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 18px 40px -16px rgba(15, 18, 30, 0.35);
}
.how-phone__label {
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-mute);
}
.how-phone__bubble {
  max-width: 94%;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 14px 14px 14px 4px;
  background: var(--cobalt-soft);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.how-phone__opt {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: start;
  gap: 10px;
  margin-bottom: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.how-phone__opt::before {
  content: '';
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
}
.how-phone__opt.is-picked {
  border-color: var(--cobalt);
  background: #fff;
  color: var(--ink);
}
.how-phone__opt.is-picked::before {
  border-color: var(--cobalt);
  background: radial-gradient(circle, var(--cobalt) 45%, #fff 50%);
}

/* Result screen. */
.how-result__rank {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 4px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.how-result__rank span {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ink-mute);
}
.how-result__ask {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--canvas);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}
.how-result__ask span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cobalt);
}

@media (max-width: 980px) {
  .walk-flow--screens { grid-template-rows: none; }
  .home-section--how .walk-flow--screens .walk-step { grid-template-rows: auto auto; }
}

/* --- 10. Stats (3-up grid + 4-up strip) ---------------------------- */

/* 3-up bordered strip — single card, vertical dividers between stats, label
   below the number. Matches pages/02-product.html .proof-stat. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.stats-grid__card {
  background: transparent;
  padding: 36px 32px;
  border-right: 1px solid var(--line);
}
.stats-grid__card:last-child { border-right: none; }
.stats-grid__num {
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 12px;
}
.stats-grid__unit {
  font-size: 0.5em;
  font-weight: 500;
  margin-left: 2px;
  color: var(--ink-soft);
}
.stats-grid__label {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.stats-grid__byline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
}

/* 3-up separate cards with shadow (Industry stats). 72px numbers, gap between
   cards, no shared border. Matches 03-industry.html `.industry-stat`. */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.stats-cards__card {
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  padding: 36px 32px 32px;
  box-shadow: var(--shadow-card);
}
.stats-cards__num {
  font-size: 72px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 14px;
}
.stats-cards__unit {
  font-size: 0.45em;
  font-weight: 500;
  margin-left: 4px;
  color: var(--ink-soft);
}
.stats-cards__label {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.stats-cards__byline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
}

/* 4-up strip (Case study headline stats). Accepts 2-4 items via auto-fit
   with a 180px floor so it doesn't collapse to a single row on narrow widths.
   Label sits ABOVE the number. */
.stats-strip {
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stats-strip__item {
  padding: 28px;
  border-right: 1px solid var(--line);
}
.stats-strip__item:last-child { border-right: none; }
.stats-strip__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.stats-strip__num {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.stats-strip__unit {
  font-size: 0.5em;
  font-weight: 500;
  margin-left: 2px;
  color: var(--ink-soft);
}
.stats-strip__byline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 8px;
}

@media (max-width: 980px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stats-grid__card { border-right: none; border-bottom: 1px solid var(--line); }
  .stats-grid__card:last-child { border-bottom: none; }
  .stats-grid__num { font-size: 48px; }
  .stats-cards { grid-template-columns: 1fr; }
  .stats-cards__num { font-size: 56px; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stats-strip__item { border-right: none; border-bottom: 1px solid var(--line); }
  .stats-strip__item:last-child,
  .stats-strip__item:nth-last-child(2) { border-bottom: none; }
}
@media (max-width: 600px) {
  .stats-strip { grid-template-columns: 1fr; }
  .stats-strip__item { border-right: none; border-bottom: 1px solid var(--line); }
  /* Override the 2-col rule above: in single-col mode every item except the last
     needs its bottom border back, so each item has a divider above the next. */
  .stats-strip__item:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .stats-strip__item:last-child { border-bottom: none; }
}

/* --- 11. Inline chart ---------------------------------------------- */

.inline-chart {
  background: var(--canvas-card);
  border-radius: var(--r);
  padding: 28px 32px;
  box-shadow: var(--shadow-card);
  margin: 32px 0;
}
.inline-chart__heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.inline-chart__sub {
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 22px;
}
.chart-bar {
  display: grid;
  grid-template-columns: 180px 1fr 70px;
  align-items: center;
  gap: 18px;
  padding: 11px 0;
}
.chart-bar__label {
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 500;
}
.chart-bar__track {
  height: 10px;
  background: var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
}
.chart-bar__fill {
  height: 100%;
  border-radius: 2px;
}
.chart-bar__fill--signal { background: var(--cobalt); }
.chart-bar__fill--muted  { background: var(--ink-mute); opacity: 0.4; }
.chart-bar__val {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  font-family: ui-monospace, monospace;
  text-align: right;
}
.inline-chart__foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink-mute);
  font-family: var(--font-serif);
  font-style: italic;
}

/* Inline quote card (inline-quote.php) — reuses the .inline-chart card chrome,
   with a large serif pull-quote in place of the bars. */
.inline-quote__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
  margin: 8px 0 16px;
}
.inline-quote__text em,
.inline-quote__text i {
  color: var(--cobalt);
  font-weight: 500;
}
.inline-quote__source {
  font-size: 12px;
  color: var(--ink-mute);
}

@media (max-width: 600px) {
  .chart-bar { grid-template-columns: 1fr; gap: 6px; }
  .chart-bar__val { text-align: left; }
}

/* --- 12. Inline callout -------------------------------------------- */

/* A tinted band. The tint alone sets it apart; no accent bar on a box. */
.inline-callout {
  background: var(--warm);
  padding: 24px 28px;
  margin: 36px 0;
  border-radius: var(--r);
}
.inline-callout p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}
.inline-callout p em,
.inline-callout p i {
  color: var(--cobalt);
  font-weight: 500;
}

/* Large variant — a quote. Same chrome as .pull-quote (case studies) so quotes
   look the same on every page: white, hairline border, full radius, serif italic. */
.inline-callout--large {
  background: var(--canvas-card);
  border: 1px solid var(--line-soft);
  padding: 36px 40px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.inline-callout--large p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.inline-callout--large p em,
.inline-callout--large p i { font-style: italic; }

@media (max-width: 980px) {
  .inline-callout p { font-size: 16px; }
  .inline-callout--large { padding: 28px 28px; }
  .inline-callout--large p { font-size: 18px; }
}

/* --- 13. Related card ---------------------------------------------- */

.related-card {
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  border-bottom: 0;
}
.related-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
}
.related-card__photo {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.3) 100%),
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 14px,
      rgba(255, 255, 255, 0.04) 14px,
      rgba(255, 255, 255, 0.04) 28px
    ),
    linear-gradient(135deg, var(--ind-tone-a, var(--cobalt-deep)) 0%, var(--ind-tone-b, var(--cobalt)) 100%);
  position: relative;
  display: flex;
  align-items: end;
  padding: 16px;
  overflow: hidden;
}
.related-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.related-card__photo--has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 0;
}
/* Industry-colour-family overrides — set --ind-tone-* on the card itself. */
.related-card__photo--logistics     { --ind-tone-a: #1F326E; --ind-tone-b: #2D499F; }
.related-card__photo--care          { --ind-tone-a: #325545; --ind-tone-b: #4A7A60; }
.related-card__photo--retail        { --ind-tone-a: #6B3E2A; --ind-tone-b: #A05F3F; }
.related-card__photo--contact       { --ind-tone-a: #2A4A5E; --ind-tone-b: #3F6B85; }
.related-card__photo--manufacturing { --ind-tone-a: #4B3B6E; --ind-tone-b: #6E5A99; }
.related-card__photo--field         { --ind-tone-a: #3D5240; --ind-tone-b: #5D7A60; }
.related-card__photo--banking       { --ind-tone-a: #2C3A4A; --ind-tone-b: #4A5A6E; }
.related-card__photo--energy        { --ind-tone-a: #5A4520; --ind-tone-b: #8C6A30; }

.related-card__tag {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.related-card__body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.related-card__stat {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--cobalt);
  margin-bottom: 8px;
}
.related-card__claim {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 14px;
  flex: 1;
}
.related-card__heading {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 16px;
  flex: 1;
}
.related-card__heading em,
.related-card__heading i {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}
.related-card__meta {
  font-size: 13px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.related-card__meta-name { font-weight: 600; color: var(--ink); }
.related-card__meta-arrow {
  width: 22px;
  height: 8px;
  color: var(--cobalt);
  flex-shrink: 0;
  display: inline-block;
}

/* --- 14. Post card ------------------------------------------------- */

.post-card {
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  border-bottom: 0;
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
}
.post-card__photo {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.25) 100%),
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 14px,
      rgba(255, 255, 255, 0.04) 14px,
      rgba(255, 255, 255, 0.04) 28px
    ),
    linear-gradient(135deg, var(--cobalt-deep) 0%, var(--cobalt) 100%);
  position: relative;
  display: flex;
  align-items: end;
  padding: 14px;
}
.post-card__photo--guide    { background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.25) 100%), repeating-linear-gradient(45deg, transparent 0, transparent 14px, rgba(255,255,255,0.04) 14px, rgba(255,255,255,0.04) 28px), linear-gradient(135deg, #1F326E 0%, #2D499F 100%); }
.post-card__photo--research { background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.25) 100%), repeating-linear-gradient(45deg, transparent 0, transparent 14px, rgba(255,255,255,0.04) 14px, rgba(255,255,255,0.04) 28px), linear-gradient(135deg, #325545 0%, #4A7A60 100%); }
.post-card__photo--opinion  { background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.25) 100%), repeating-linear-gradient(45deg, transparent 0, transparent 14px, rgba(255,255,255,0.04) 14px, rgba(255,255,255,0.04) 28px), linear-gradient(135deg, #6B3E2A 0%, #A05F3F 100%); }
.post-card__photo--customer { background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.25) 100%), repeating-linear-gradient(45deg, transparent 0, transparent 14px, rgba(255,255,255,0.04) 14px, rgba(255,255,255,0.04) 28px), linear-gradient(135deg, #2A4A5E 0%, #3F6B85 100%); }
.post-card__photo--template { background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.25) 100%), repeating-linear-gradient(45deg, transparent 0, transparent 14px, rgba(255,255,255,0.04) 14px, rgba(255,255,255,0.04) 28px), linear-gradient(135deg, #4B3B6E 0%, #6E5A99 100%); }
.post-card__photo--has-image {
  background:
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.25) 100%),
    var(--post-card-photo) center / cover no-repeat;
}
.post-card__tag {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.post-card__body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--ink);
}
.post-card__title em,
.post-card__title i {
  color: var(--cobalt);
  font-weight: 500;
}
.post-card__excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  flex: 1;
  margin-bottom: 14px;
}
.post-card__meta {
  font-size: 12px;
  color: var(--ink-mute);
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 10px;
  align-items: center;
}
.post-card__meta-sep { opacity: 0.5; }

/* --- 15. Photo placeholder ----------------------------------------- */

.photo-placeholder {
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 10px,
      rgba(45, 73, 159, 0.04) 10px,
      rgba(45, 73, 159, 0.04) 20px
    ),
    var(--cobalt-soft);
  border: 1px dashed var(--cobalt);
  border-radius: var(--r);
  aspect-ratio: 16 / 9;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-placeholder--portrait { aspect-ratio: 4 / 5; }
.photo-placeholder--square   { aspect-ratio: 1 / 1; }
.photo-placeholder--avatar {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  width: 120px;
  height: 120px;
}
.photo-placeholder__label {
  background: var(--cobalt-deep);
  color: #fff;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: center;
  max-width: 80%;
}
.photo-placeholder__label::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--highlight);
  border-radius: 50%;
  flex-shrink: 0;
}
.photo-placeholder__caption {
  position: absolute;
  bottom: 14px;
  left: 14px;
  font-size: 11px;
  color: var(--cobalt-deep);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* --- 16. Industry sub-navigation ----------------------------------- */

.industry-subnav {
  border-bottom: 1px solid var(--line-soft);
  background: rgba(247, 244, 237, 0.5);
}
.industry-subnav__inner {
  display: flex;
  gap: 0;
  /* The whole row, not each link, overlaps the parent's border by 1px, so the
     scroll box holds no extra height and cannot capture vertical scrolling
     (overflow-x: auto also makes overflow-y scrollable; keep it hidden). */
  margin-bottom: -1px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.industry-subnav__inner::-webkit-scrollbar { display: none; }
.industry-subnav__link {
  flex-shrink: 0;
  padding: 14px 0;
  margin-right: 32px;
  font-size: 13px;
  color: var(--ink-mute);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.industry-subnav__link:hover { color: var(--ink); }
.industry-subnav__link.is-active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--cobalt);
}

/* --- 17. Industry page layout -------------------------------------- */

/* The industry page wrapper carries `--ind-tone-a` / `--ind-tone-b` inline so
   environmental band + related-card photo backgrounds pick up the colour
   family without needing a class on each instance. */
.industry-page { display: block; }

/* Section primitives shared across the page's content sections. */
.industry-section          { padding: 80px 0; }
.industry-section--warm    { background: var(--warm); padding: 120px 0; }
.industry-section--walk    { padding: 120px 0; }
.industry-section--callout { padding: 16px 0 80px; }
.industry-section--final-cta { padding: 100px 0 0; }

.industry-section__header {
  margin-bottom: 48px;
  max-width: 720px;
}

.section-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cobalt);
  margin-bottom: 18px;
}
.section-label::before { content: '— '; }

/* On-page TOC bar ---------------------------------------------------- */
/* Full-width band under a hero; "On this page" + inline section anchors that
   wrap to a second row on narrow widths. Static (not sticky). */
.toc-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}
/* Align the TOC content with the body reading column (.generic-shell, 784px)
   rather than the full 1200px container, so the nav sits directly above and
   visually attached to the content it links to instead of spanning the whole
   page (changes.docx: "On this page" alignment). The border/background bar
   itself still runs full-width. 784px mirrors .generic-shell. */
.toc-bar > .container {
  max-width: 784px;
}
.toc-bar__inner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding: 14px 0;
}
.toc-bar__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
  white-space: nowrap;
}
.toc-bar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-bar__link {
  display: inline-block;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.toc-bar__link:hover { color: var(--cobalt); }
.toc-bar__link.is-active {
  color: var(--cobalt);
  border-bottom-color: var(--cobalt);
}
/* Toggle is desktop-hidden; the list is inline above 700px. */
.toc-bar__toggle { display: none; }

@media (max-width: 700px) {
  /* Collapse to an "On this page ▾" dropdown. */
  .toc-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .toc-bar__label { display: none; }
  .toc-bar__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    padding: 14px 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-mute);
    cursor: pointer;
  }
  .toc-bar__chevron { flex: none; transition: transform 0.2s ease; }
  .toc-bar__toggle[aria-expanded="true"] .toc-bar__chevron { transform: rotate(180deg); }
  .toc-bar__list {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 0 0 10px;
  }
  .toc-bar.is-open .toc-bar__list { display: flex; }
  .toc-bar__link {
    display: block;
    padding: 9px 0;
    font-size: 15px;
    border-bottom: 0;
  }
  .toc-bar__link.is-active {
    border-bottom: 0;
    font-weight: 600;
  }
}

h2.section-h,
.section-h {
  font-family: var(--font-sans);
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  /* One heading measure for every section. Wrappers (.industry-section__header
     and friends) may also be 720px to cap their ledes, but must never be
     narrower than this, or headings wrap differently from section to section. */
  max-width: 720px;
}
.section-h em,
.section-h i {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
/* Section headings scale 44px → 32px at the same breakpoint across every page,
   so heading size never changes as you scroll a page (only the hero differs).
   Matches the designs (e.g. 01-homepage.html @media 980px). Per-page headers
   with higher specificity (e.g. .case-related__header) keep their own scale. */
@media (max-width: 980px) {
  h2.section-h,
  .section-h {
    font-size: 32px;
  }
}
/* Hero --------------------------------------------------------------- */

.industry-hero { padding: 80px 0 88px; }
.industry-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.industry-hero__h1 {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 24px;
}
.industry-hero__h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.industry-hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 32px;
}
.industry-hero__ctas {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.industry-hero__visual {
  position: relative;
}

/* Environmental band wrapper ---------------------------------------- */

.industry-env-wrap { padding: 0 0 80px; }
/* When the TOC bar precedes the environmental band, add a gap so the image
   band doesn't butt straight up against the bar (the band has no top padding,
   and the hero's bottom padding now sits above the bar, not below it). */
.toc-bar + .industry-env-wrap { margin-top: 48px; }

/* What's different -------------------------------------------------- */

.industry-wd__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.industry-wd__points {
  display: grid;
  gap: 36px;
}
.industry-wd__point {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  align-items: start;
}
.industry-wd__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  font-weight: 500;
  color: var(--cobalt);
  line-height: 1;
}
.industry-wd__h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
  color: var(--ink);
}
.industry-wd__h3 em,
.industry-wd__h3 i {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.industry-wd__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Featured case studies grid ---------------------------------------- */

.industry-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Responsive overrides --------------------------------------------- */

@media (max-width: 980px) {
  .industry-hero { padding: 56px 0 64px; }
  .industry-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .industry-wd__grid { grid-template-columns: 1fr; gap: 40px; }
  .industry-related__grid { grid-template-columns: 1fr; }
  .industry-section--warm,
  .industry-section--walk { padding: 80px 0; }
}

/* --- 18. Homepage layout ------------------------------------------- */

.home-page { display: block; }

/* Hero --------------------------------------------------------------- */

.home-hero { padding: 88px 0 100px; }
.home-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.home-hero__h1 {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 24px;
}
.home-hero__h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.home-hero__lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 520px;
  margin-bottom: 28px;
}
.home-hero__ctas {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.home-hero__tertiary {
  font-size: 14px;
  color: var(--ink-mute);
}
.home-hero__tertiary a {
  color: var(--cobalt);
  font-weight: 500;
  border-bottom: 1px dashed var(--cobalt-soft);
  text-decoration: none;
}
.home-hero__tertiary a:hover {
  color: var(--cobalt-deep);
  border-bottom-style: solid;
  border-bottom-color: var(--cobalt);
}
.home-hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
}

/* On short (laptop) viewports, trim the hero's vertical padding so the animated
   graphic and its progress bar clear the fold. Pairs with the graphic's own
   fit-to-fold scaling (tm-hero-graphic.js): less padding here means the phone
   needs to scale down less, staying larger. Height-based, so tall desktop
   monitors are untouched. */
@media (min-width: 981px) and (max-height: 880px) {
  .home-hero { padding: 44px 0 52px; }
}

/* Trust strip ------------------------------------------------------- */

.trust-strip {
  background: var(--warm);
  border-top: 1px solid var(--warm-deep);
  border-bottom: 1px solid var(--warm-deep);
}
.trust-strip__inner {
  /* 1/3 for the intro label, 2/3 for the logo row. Pinning the column
     ratio (rather than letting the row flex: 1 across all remaining
     space) keeps the logos within a predictable share of the content
     width regardless of how short the label happens to be. */
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  column-gap: 32px;
  padding-top: 28px;
  padding-bottom: 28px;
}
.trust-strip__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-mute);
  font-style: italic;
  font-family: var(--font-serif);
}
.trust-strip__row {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
  /* Logos distribute evenly across the 2/3 column — first logo at the
     column-start, last at the column-end, inter-logo spacing scales with
     however many logos the editor adds (3, 4, 5+ all read balanced). */
  justify-content: space-between;
}
.trust-strip__wordmark {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  opacity: 0.45;
  letter-spacing: -0.005em;
}
.trust-strip__logo {
  max-height: 28px;
  width: auto;
  opacity: 0.7;
  display: block;
}

/* Problem / persona tabs -------------------------------------------- */

.home-problem { padding: 120px 0; }

.persona-tabs {
  display: flex;
  gap: 0;
  /* The baseline is an inset shadow, not a border, so the active tab's 2px
     underline can sit on it without a negative margin. A negative margin made
     the content 1px taller than the box, and because overflow-x: auto forces
     overflow-y to auto as well, the bar became a 1px vertical scroller that
     captured wheel and trackpad scrolling. Keep the vertical axis hidden. */
  box-shadow: inset 0 -1px 0 var(--line);
  margin: 24px 0 40px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.persona-tabs::-webkit-scrollbar { display: none; }
.persona-tab {
  flex-shrink: 0;
  padding: 16px 0;
  margin-right: 32px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-mute);
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: color 0.15s, border-color 0.15s;
}
.persona-tab:hover { color: var(--ink); }
.persona-tab.is-active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--cobalt);
}
.persona-tab:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: -2px; /* Inside the tab, so the clipped scroll box does not cut it off. */
}

.persona-panels {
  position: relative;
  min-height: 240px;
}
.persona-panel {
  opacity: 1;
  transition: opacity 0.15s ease;
}
.persona-panel[hidden] { display: none; }

.problem-h {
  font-family: var(--font-sans);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 18px;
}
.problem-h em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.problem-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 720px;
}

@media (prefers-reduced-motion: reduce) {
  .persona-panel { transition: none; }
}

/* Generic ghost button (used in section headers — "see a real assessment →") */

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--cobalt);
  color: var(--cobalt);
  background: var(--cobalt-soft);
}

/* Section rhythm for homepage tranche 6B sections ------------------- */

.home-section          { padding: 100px 0; }
.home-section--how     { background: var(--warm); }
.home-section--cases   { background: var(--canvas); }
.home-section--industries { background: var(--warm); }
.home-section--final-cta { padding: 100px 0 0; }

/* HOW IT WORKS ------------------------------------------------------ */

.home-how__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}
/* No width or size override here: the heading takes the standard 44px and
   720px from .section-h, like every other section heading down the page. The
   header-text div is only a flex item so the link can sit beside it. */

/* CASE STUDIES ------------------------------------------------------ */

.home-cases__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}
.home-cases__controls {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.home-cases__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.home-cases__btn:hover,
.home-cases__btn:focus-visible {
  border-color: var(--cobalt);
  color: var(--cobalt);
}
.home-cases__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.home-cases__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 40px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.home-cases__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 32px;
  border-left: 1px solid var(--line-soft);
}
.home-cases__stat:first-child {
  border-left: 0;
  padding-left: 0;
}
.home-cases__stat:last-child {
  padding-right: 0;
}
.home-cases__stat-num {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
}
.home-cases__stat-unit {
  font-size: 0.45em;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 1px;
}
.home-cases__stat-label {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 280px;
}

.home-cases__track-wrap {
  position: relative;
  margin: 0 -24px;
  padding: 4px 24px;
}
.home-cases__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, calc(40% - 16px));
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 24px;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.home-cases__track::-webkit-scrollbar { display: none; }
.home-cases__track > .related-card {
  scroll-snap-align: start;
  min-width: 0;
}

.home-cases__quote {
  margin-top: 56px;
  max-width: 75%;
}

/* INDUSTRIES GRID --------------------------------------------------- */

.home-industries__header {
  max-width: 720px;
  margin-bottom: 40px;
}
.home-industries__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.industry-grid-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.industry-grid-card:hover,
.industry-grid-card:focus-visible {
  border-color: var(--cobalt);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.industry-grid-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--cobalt-soft);
  color: var(--cobalt);
  flex-shrink: 0;
}
.industry-grid-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.industry-grid-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.industry-grid-card__meta {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* PULL QUOTE -------------------------------------------------------- */

.pull-quote {
  margin: 0;
  padding: 40px 48px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  position: relative;
  display: grid;
  gap: 20px;
}
.pull-quote__mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 80px;
  line-height: 0.5;
  color: var(--cobalt);
  margin: 0;
  padding-top: 24px;
}
.pull-quote__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.pull-quote__byline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.pull-quote__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cobalt-soft);
  color: var(--cobalt);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pull-quote__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pull-quote__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.pull-quote__role {
  font-size: 13px;
  color: var(--ink-mute);
}

/* PHONE MOCKUP (dark CTA --with-phone) ----------------------------- */

.dark-cta--with-phone {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.dark-cta__phone {
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone-mock {
  width: 240px;
  background: var(--ink);
  border-radius: 28px;
  padding: 8px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  position: relative;
  transform: rotate(-10deg);
}
.phone-mock__notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 18px;
  background: var(--ink);
  border-radius: 0 0 12px 12px;
  z-index: 2;
}
.phone-mock__screen {
  background: var(--canvas-card);
  border-radius: 20px;
  padding: 36px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phone-mock__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--ink-mute);
  padding: 0 4px 4px;
}
.phone-mock__bar-dots {
  display: inline-flex;
  gap: 3px;
}
.phone-mock__bar-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-mute);
  display: block;
}
.phone-mock__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.phone-mock__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--cobalt-soft);
  color: var(--cobalt);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
  letter-spacing: 0.02em;
}
.phone-mock__pill-dot {
  width: 5px;
  height: 5px;
  background: var(--cobalt);
  border-radius: 50%;
}
.phone-mock__progress {
  font-size: 10px;
  color: var(--ink-mute);
  font-family: ui-monospace, monospace;
}
.phone-mock__label {
  font-size: 9px;
  font-weight: 700;
  color: var(--cobalt);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 4px;
}
.phone-mock__question {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 4px;
}
.phone-mock__opt {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.3;
  background: #fff;
}
.phone-mock__opt--selected {
  border-color: var(--cobalt);
  background: var(--cobalt-soft);
  color: var(--ink);
}
.phone-mock__radio {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid #D6D5CD;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
}
.phone-mock__opt--selected .phone-mock__radio {
  border-color: var(--cobalt);
}
.phone-mock__opt--selected .phone-mock__radio::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--cobalt);
  border-radius: 50%;
}
.phone-mock__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}
.phone-mock__bar-fill {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.phone-mock__bar-fill span {
  display: block;
  height: 100%;
  background: var(--cobalt);
}
.phone-mock__pct {
  font-size: 10px;
  color: var(--ink-mute);
  font-family: ui-monospace, monospace;
}

/* Responsive overrides for homepage -------------------------------- */

@media (max-width: 980px) {
  .home-hero { padding: 56px 0 64px; }
  .home-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .home-problem { padding: 80px 0; }
  .trust-strip__inner {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 20px;
  }
  .trust-strip__row { justify-content: flex-start; gap: 28px; }

  .home-section { padding: 72px 0; }
  .home-how__header,
  .home-cases__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .home-cases__stats { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .home-cases__stat { padding: 0; border-left: 0; }
  .home-cases__track { grid-auto-columns: minmax(0, 85%); }
  .home-industries__grid { grid-template-columns: repeat(2, 1fr); }
  .home-cases__quote { max-width: 100%; }
  .pull-quote { padding: 28px 24px; }
  .pull-quote__text { font-size: 22px; }

  .dark-cta--with-phone {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dark-cta--with-phone .dark-cta__phone {
    order: -1;
  }
  .phone-mock { width: 200px; }
}

@media (max-width: 640px) {
  .home-industries__grid { grid-template-columns: 1fr; }
}

/* --- 19. Case-study layout (single-case-study.php) ----------------- */

.case-study-page { display: block; }

.case-section                  { padding: 80px 0; }
.case-section--glance          { padding: 80px 0 0; }
.case-section--article         { padding: 56px 0 60px; }
.case-section--chart           { padding: 0 0 60px; }
.case-section--env             { padding: 0 0 80px; }
.case-section--outcome         { padding: 0 0 80px; }
.case-section--extras          { padding: 0 0 60px; }
.case-section--archive         { padding: 32px 0 96px; }
.case-section--related         { background: var(--warm); padding: 96px 0; }
.case-section--final-cta       { padding: 100px 0 0; }

/* Article extras: a quote box following a graph box gets breathing room. */
.case-section--extras .inline-chart + .pull-quote { margin-top: 48px; }

/* Archive empty state + pagination spacing. */
.case-archive__empty { color: var(--ink-soft); font-size: 18px; }
.case-section--archive .feed-pagination { margin-top: 56px; }

/* Hero ----------------------------------------------------------------- */

.case-hero { padding: 72px 0 0; }

.case-hero__meta {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.case-breadcrumb {
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.case-breadcrumb a {
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.case-breadcrumb a:hover {
  color: var(--cobalt);
  border-bottom-color: var(--cobalt);
}
.case-breadcrumb__sep { opacity: 0.5; }
.case-hero__tag {
  font-size: 12px;
  color: var(--ink-mute);
}

/* Customer chip (logo or initial + name) */
.customer-chip {
  background: var(--canvas-card);
  border: 1px solid var(--line);
  padding: 6px 14px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 32px;
}
.customer-chip__name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.customer-chip__mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ind-tone-a, #1F326E), var(--ind-tone-b, #2D499F));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.customer-chip__img {
  width: auto;
  height: 22px;
  max-width: 120px;
  display: block;
  object-fit: contain;
}
.customer-chip__sep,
.customer-chip__industry {
  color: var(--ink-soft);
  font-weight: 500;
}
@media (max-width: 600px) {
  .customer-chip__sep,
  .customer-chip__industry {
    display: none;
  }
}

.case-hero__h1 {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 24px;
  max-width: 920px;
}
.case-hero__h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.case-hero__lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 680px;
}

/* Hero environmental photo */
.case-hero__photo {
  margin: 56px 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.case-hero__photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(11,14,26,0) 0%, rgba(11,14,26,0.78) 100%);
  pointer-events: none;
  z-index: 1;
}
.case-hero__photo-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
.case-hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 32px 36px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
  max-width: 720px;
  margin: 0;
}

/* Headline stats wrapper — sits between hero photo and at-a-glance */
.case-hero__stats { margin-top: 48px; }

/* At-a-glance ---------------------------------------------------------- */

.at-glance {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.at-glance__h {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cobalt);
  margin-bottom: 12px;
}
.at-glance__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.at-glance__body strong { color: var(--ink); font-weight: 600; }

/* Article body --------------------------------------------------------- */

.case-body {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.case-body > p { margin-bottom: 24px; }
.case-body > h2 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin: 56px 0 22px;
}
.case-body > h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.case-body > h3 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 40px 0 16px;
}
.case-body em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
}
.case-body strong { color: var(--ink); font-weight: 600; }

/* Section header block (custom Gutenberg block — eyebrow + H2 with em). */
.case-body .case-body__section-header { margin: 56px 0 22px; }
.case-body .case-body__section-header:first-child { margin-top: 0; }
.case-body__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cobalt);
  margin-bottom: 14px;
}
.case-body__h2 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.case-body__h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}

/* Body images — fit the narrow column but never upscale past their natural size, no text wrap. */
.case-body .wp-block-image,
.case-body figure {
  margin: 40px 0;
  clear: both;
  float: none;
}
.case-body .wp-block-image img,
.case-body figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
}
.case-body .wp-block-image figcaption,
.case-body figure figcaption {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
  text-align: left;
}

/* Native core/quote (and any plain blockquote) in the article body. The
   global `.wp-block-quote` rule (§29) paints a 2px cobalt LEFT bar and, being
   two classes, out-specifies `.case-body > blockquote`; the case body's own
   rule added top/bottom hairlines on top, so both stacked (feedback image7).
   Scoping to `.case-body .wp-block-quote` (three classes) wins control so the
   plain quote shows a single treatment: the cobalt left accent only, with left
   padding so the text clears the bar (no horizontal hairlines). */
.case-body > blockquote,
.case-body .wp-block-quote:not(.is-style-callout) {
  margin: 48px 0;
  padding: 0 0 0 32px;
  border-left: 2px solid var(--cobalt);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.4;
  color: var(--ink);
}
.case-body .wp-block-quote:not(.is-style-callout) p {
  margin: 0;
  font: inherit;
  color: inherit;
}
.case-body > blockquote cite,
.case-body .wp-block-quote:not(.is-style-callout) cite {
  display: block;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.case-body > blockquote cite strong,
.case-body .wp-block-quote:not(.is-style-callout) cite strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--ink);
}
.case-body > ul,
.case-body > ol {
  margin: 0 0 24px 24px;
  padding: 0;
}
.case-body > ul li,
.case-body > ol li {
  margin-bottom: 10px;
  line-height: 1.6;
}

/* Outcome panel -------------------------------------------------------- */

.case-outcome__header {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.outcome-panel {
  background: var(--warm);
  border-radius: var(--r-lg);
  padding: 48px;
}
.outcome-panel__h {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 24px;
}
.outcome-panel__h em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.outcome-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
}
.outcome-panel__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.outcome-panel__check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.outcome-panel__item-h {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 4px;
  color: var(--ink);
}
.outcome-panel__item-b {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* Related case studies ------------------------------------------------- */

.case-related__header {
  max-width: 720px;
  margin-bottom: 40px;
}
.case-related__header .section-h {
  /* Flat 32px to match 05-case-study.html (.related-header h2) and the page's
     article H2 scale — keeps heading size consistent down the page. The global
     .section-h 44px/32px rule is overridden here by higher specificity. */
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
}
.case-related__header em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.case-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Responsive ----------------------------------------------------------- */

@media (max-width: 980px) {
  .case-hero { padding: 56px 0 0; }
  .case-hero__h1 { font-size: 40px; }
  .case-hero__photo-img { aspect-ratio: 4 / 3; }
  .case-section--article { padding: 40px 0; }
  .case-section--related { padding: 72px 0; }

  .at-glance { grid-template-columns: 1fr; gap: 24px; }
  .case-body { font-size: 16px; }
  .case-body > h2 { font-size: 26px; margin: 40px 0 16px; }
  .outcome-panel { padding: 32px; }
  .outcome-panel__grid { grid-template-columns: 1fr; gap: 20px; }
  .case-related__grid { grid-template-columns: 1fr; }
}

/* --- 20. Use-case layout (single-use-case.php) -------------------- */

.use-case-page { display: block; }

.use-case-hero { padding: 72px 0 64px; }
.use-case-hero__h1 {
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 1000px;
}
/* <em> emphasis = cobalt serif italic, matching every other hero. Without this
   the H1's color:var(--ink) cascades into <em> (base.css gives <em> serif italic
   but no colour), so emphasised words rendered black instead of cobalt
   (changes.docx: use-cases "cobalt blue not showing on 'without scaling'"). */
.use-case-hero__h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.use-case-hero__lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 680px;
  margin: 0 0 36px;
}
.use-case-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.use-case-breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 28px;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.use-case-breadcrumb a { color: var(--ink-mute); text-decoration: none; }
.use-case-breadcrumb a:hover { color: var(--cobalt); }
.use-case-breadcrumb__sep { opacity: 0.5; }

/* JTBD card -------------------------------------------------------- */

.jtbd-card {
  margin-top: 56px;
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.jtbd-card__col { padding: 36px; }
.jtbd-card__col--left {
  border-right: 1px solid var(--line);
}
.jtbd-card__col--right { background: var(--warm); }
.jtbd-card__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cobalt);
  margin-bottom: 12px;
}
.jtbd-card__h {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 16px;
}
.jtbd-card__h em,
.jtbd-card__h i {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
  font-weight: 500;
}
.jtbd-card__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.jtbd-card__body em,
.jtbd-card__body i {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
}
.jtbd-card__customer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.jtbd-card__mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cobalt-deep), var(--cobalt));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.jtbd-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  max-width: 33%;
}
.jtbd-card__logo-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 65px;
}
.jtbd-card__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jtbd-card__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.jtbd-card__role { font-size: 12px; color: var(--ink-mute); }

/* Use-case sections ----------------------------------------------- */

.use-case-section                  { padding: 100px 0; }
.use-case-section--moves           { background: var(--warm); padding: 120px 0; }
.use-case-section--pull            { padding: 100px 0; }
.use-case-section--pull .pull-quote { max-width: 820px; margin-left: auto; margin-right: auto; background: transparent; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 48px 0; }
.use-case-section--pull .pull-quote__byline { border-top: 0; padding-top: 16px; }
.use-case-section--examples        { background: var(--warm); padding: 100px 0; }
.use-case-section--final-cta       { padding: 100px 0 0; }

.use-case-section__header {
  margin-bottom: 64px;
  max-width: 720px;
}

/* Three moves grid ------------------------------------------------ */

.moves-grid { display: grid; gap: 16px; }

.move {
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  padding: 36px 40px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 80px 1fr 320px;
  gap: 40px;
  align-items: center;
}
.move__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 56px;
  font-weight: 500;
  color: var(--cobalt);
  line-height: 1;
}
.move__h {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--ink);
}
.move__h em,
.move__h i {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
  font-weight: 500;
}
.move__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.move__stat {
  text-align: right;
  padding-left: 32px;
  border-left: 1px solid var(--line-soft);
}
.move__stat-num {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--cobalt);
  margin-bottom: 6px;
}
.move__stat-num span { font-size: 0.6em; }
.move__stat-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* Examples grid --------------------------------------------------- */

.use-case-examples__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ROI calculator (roi-calculator.php) ----------------------------- */

.roi { padding: 100px 0; }
.roi-block {
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.roi-inputs { padding: 40px 44px; }
.roi-output {
  padding: 40px 44px;
  background: var(--cobalt-deep);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.roi-output::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
.roi-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cobalt);
  margin-bottom: 6px;
}
.roi-output .roi-label { color: #b8c8ff; }
.roi-h {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 28px;
}
.roi-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.roi-input-row:last-of-type { border-bottom: none; }
.roi-input-label {
  font-size: 14px;
  color: var(--ink-soft);
  flex: 1;
}
.roi-input-label small {
  display: block;
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.roi-input-field {
  display: grid;
  grid-template-columns: 16px 110px 16px;
  align-items: center;
  gap: 6px;
}
.roi-input-prefix,
.roi-input-suffix {
  font-size: 14px;
  color: var(--ink-mute);
  font-weight: 500;
  text-align: center;
}
.roi-input-prefix { grid-column: 1; }
.roi-input-field input { grid-column: 2; }
.roi-input-suffix { grid-column: 3; }
.roi-input-field input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--canvas);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.roi-input-field input:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(45, 73, 159, 0.12);
}
.roi-currency-toggle {
  display: inline-flex;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px;
  margin-bottom: 24px;
}
.roi-currency-toggle button {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mute);
  border-radius: 100px;
  cursor: pointer;
}
.roi-currency-toggle button.active {
  background: var(--cobalt);
  color: #fff;
}
.roi-result { position: relative; z-index: 1; }
.roi-result-figure {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 12px 0 14px;
}
.roi-result-figure em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: #b8c8ff;
  font-size: 28px;
  vertical-align: middle;
  margin-left: 4px;
}
.roi-result-secondary {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 14px;
}
.roi-result-secondary span:first-child { color: #b8c8ff; }
.roi-result-sub {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  max-width: 320px;
}
.roi-foot {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
.roi-foot a { color: #b8c8ff; text-decoration: underline; }
.roi-disclaimer {
  margin-top: 24px;
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
  font-family: var(--font-serif);
  line-height: 1.5;
}

@media (max-width: 980px) {
  .use-case-hero__h1 { font-size: 42px; }
  .jtbd-card { grid-template-columns: 1fr; }
  .jtbd-card__col--left {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .move {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .move__stat {
    text-align: left;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    padding-top: 20px;
  }
  .use-case-section,
  .use-case-section--moves,
  .use-case-section--pull,
  .use-case-section--examples,
  .use-case-section--final-cta { padding: 80px 0 0; }
  .use-case-section--examples { padding-bottom: 80px; }
  .use-case-section--moves { padding-bottom: 80px; }
  .use-case-examples__grid { grid-template-columns: 1fr; }
  .roi { padding: 80px 0; }
  .roi-block { grid-template-columns: 1fr; }
  .roi-result-figure { font-size: 44px; }
}

/* --- 21. Product page (page-product.php) --------------------------- */

.product-page { display: block; }

.product-section          { padding: 100px 0; }
.product-section--warm    { background: var(--warm); }
.product-section--final-cta { padding: 100px 0 0; }
.product-section--quote   { padding: 80px 0 100px; }
.product-section--quote .pull-quote { max-width: 820px; margin-left: auto; margin-right: auto; }
.product-section--proof   { padding: 80px 0; }

.product-section__header  { margin-bottom: 56px; max-width: 720px; }
.product-section__lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 580px;
  margin-top: 20px;
}

/* Hero --------------------------------------------------------------- */

.product-hero { padding: 80px 0 88px; }
.product-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.product-hero__h1 {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 24px;
}
.product-hero__h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.product-hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 32px;
}
.product-hero__ctas {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.product-hero__visual { position: relative; }

/* Pillars ------------------------------------------------------------ */

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar-card {
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  padding: 36px 32px 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pillar-card__icon {
  width: 44px;
  height: 44px;
  background: var(--cobalt-soft);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cobalt);
}
.pillar-card__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.pillar-card__title em,
.pillar-card__title i {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.pillar-card__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Scoring grid ------------------------------------------------------- */

.scoring-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.scoring-list {
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.scoring-list__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.scoring-list__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cobalt-soft);
  color: var(--cobalt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.scoring-list__heading {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
  color: var(--ink);
}
.scoring-list__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.scoring-grid__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}

/* Integrations ------------------------------------------------------- */

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.integ-tile {
  background: var(--canvas-card);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
a.integ-tile:hover { box-shadow: var(--shadow-lift); }
.integ-tile__logo {
  width: 36px;
  height: 36px;
  background: var(--cobalt-soft);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cobalt);
  font-family: ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
}
.integ-tile__logo--img {
  width: auto;
  height: 36px;
  max-width: 120px;
  background: transparent;
  border-radius: 0;
  justify-content: flex-start;
}
.integ-tile__img {
  max-height: 36px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
.integ-tile__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.integ-tile__meta {
  font-size: 12px;
  color: var(--ink-mute);
}
.integrations-foot {
  margin-top: 40px;
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}
.integrations-foot a {
  color: var(--cobalt);
  font-weight: 600;
  text-decoration: none;
}

/* Calibration funnel ("How we build it") ----------------------------- */

.calibration-header { max-width: 720px; margin-bottom: 56px; }
.calibration-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 680px;
  margin-top: 24px;
}
.calibration-lede em,
.calibration-lede i {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
}

.diagram {
  background: var(--canvas-card);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: 48px 40px 36px;
  position: relative;
}
.diagram-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.diagram-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  font-weight: 500;
}
.diagram-meta {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.svg-host { width: 100%; aspect-ratio: 1180 / 560; }
.svg-host svg { width: 100%; height: 100%; display: block; }

.diagram-footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.diagram-footer .arrow { display: inline-flex; align-items: center; gap: 8px; }

.calibration-legend {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
.calibration-legend .step {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 11px;
  color: var(--cobalt);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.calibration-legend h4 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  line-height: 1.25;
}
.calibration-legend h4 em,
.calibration-legend h4 i {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.calibration-legend p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* SVG type styles for the funnel diagram */
.label-axis { font-family: var(--font-sans); font-size: 10px; fill: var(--ink-mute); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
.label-zone { font-family: var(--font-sans); font-size: 11px; fill: var(--ink); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
.label-zone-sub { font-family: var(--font-serif); font-size: 13px; fill: var(--ink-mute); font-style: italic; }
.gate-label { font-family: var(--font-sans); font-size: 13px; fill: var(--ink); font-weight: 600; letter-spacing: -0.005em; }
.gate-sub { font-family: var(--font-serif); font-size: 12px; fill: var(--ink-mute); font-style: italic; }
.gate-step { font-family: ui-monospace, 'SF Mono', monospace; font-size: 10px; fill: var(--cobalt); font-weight: 600; letter-spacing: 0.08em; }
.feedback-label { font-family: var(--font-serif); font-size: 12px; fill: var(--cobalt); font-style: italic; }
.feedback-label-tag { font-family: ui-monospace, 'SF Mono', monospace; font-size: 10px; fill: var(--cobalt); font-weight: 600; letter-spacing: 0.08em; }

.dot-noise { animation: tm-calib-drift 4s ease-in-out infinite; }
@keyframes tm-calib-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, -3px); }
}
.dot-flow { animation: tm-calib-flow 7s linear infinite; opacity: 0; }
@keyframes tm-calib-flow {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(720px); opacity: 0; }
}
.gate-pulse { animation: tm-calib-gate 5s ease-in-out infinite; transform-origin: center; }
@keyframes tm-calib-gate {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}
.feedback-pulse { stroke-dasharray: 4 6; animation: tm-calib-dash 14s linear infinite; }
@keyframes tm-calib-dash { to { stroke-dashoffset: -200; } }

@media (prefers-reduced-motion: reduce) {
  .dot-noise,
  .dot-flow,
  .gate-pulse,
  .feedback-pulse { animation: none; }
  .dot-flow { opacity: 1; }
}

/* Responsive --------------------------------------------------------- */

@media (max-width: 980px) {
  .product-hero { padding: 56px 0 64px; }
  .product-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .pillars-grid { grid-template-columns: 1fr; }
  .scoring-grid { grid-template-columns: 1fr; gap: 40px; }
  .integrations-grid { grid-template-columns: repeat(2, 1fr); }
  .calibration-legend { grid-template-columns: 1fr; gap: 20px; }
  .diagram { padding: 28px 20px 24px; }
  .product-section,
  .product-section--proof,
  .product-section--quote { padding: 80px 0; }
}
@media (max-width: 600px) {
  .integrations-grid { grid-template-columns: 1fr; }
}

/* --- 22. Resources index (page-resources.php) ---------------------- */

.resources-page { display: block; }

.resources-hero { padding: 80px 0 32px; }
.resources-hero__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cobalt);
  margin-bottom: 18px;
}
.resources-hero__eyebrow::before { content: '— '; }
.resources-hero__h1 {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 840px;
}
.resources-hero__h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
/* Yellow highlight for <mark> in the title — the second standard emphasis
   (alongside <em> cobalt italic), using the existing --highlight token. Matches
   the raw-<mark> treatment used in body prose (.article-body mark). */
.resources-hero__h1 mark {
  background: var(--highlight);
  color: var(--ink);
  padding: 0 0.12em;
  border-radius: 4px;
}
.resources-hero__lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0;
}

.filter-row {
  margin-top: 28px;
  padding: 28px 0 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
  margin-right: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--canvas-card);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: all 0.15s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip--active,
.chip--active:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.filter-row--children {
  margin-top: 0;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--line);
  border-top: 0;
}
.filter-row + .filter-row--children { margin-top: -1px; }
.chip--child {
  background: #fff;
  border-color: var(--line-soft);
  font-size: 12px;
  padding: 6px 12px;
}
.chip--child.chip--active,
.chip--child.chip--active:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Featured post */
.resources-featured { padding: 56px 0 32px; }
.featured-post {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.2s;
}
.featured-post:hover {
  box-shadow: var(--shadow-lift);
  color: var(--ink);
}
.featured-post__photo {
  position: relative;
  min-height: 360px;
  background:
    linear-gradient(135deg, rgba(31, 50, 110, 0.25) 0%, rgba(45, 73, 159, 0.6) 100%),
    repeating-linear-gradient(45deg, transparent 0, transparent 14px, rgba(255, 255, 255, 0.04) 14px, rgba(255, 255, 255, 0.04) 28px),
    var(--cobalt-deep);
}
.featured-post__photo-label {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cobalt-deep);
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: ui-monospace, monospace;
}
.featured-post__photo--has-image {
  background:
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.25) 100%),
    var(--featured-photo) center / cover no-repeat;
}
.featured-post__body { padding: 48px; }
.featured-post__tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cobalt);
  margin-bottom: 14px;
}
.featured-post__h {
  font-family: var(--font-sans);
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
}
.featured-post__h em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
  font-weight: 500;
}
.featured-post__excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.featured-post__meta {
  font-size: 12px;
  color: var(--ink-mute);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.featured-post__meta-sep { opacity: 0.5; }
.featured-post__arrow {
  margin-left: auto;
  color: var(--cobalt);
  font-weight: 600;
  font-size: 14px;
}

/* Feed */
.resources-feed { padding: 32px 0 64px; }
.feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feed-empty {
  font-size: 15px;
  color: var(--ink-mute);
  padding: 40px 0;
  text-align: center;
}
.feed-pagination {
  margin-top: 56px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.feed-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--canvas-card);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.feed-pagination .page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.feed-pagination .page-numbers.current {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.feed-pagination .dots { border: 0; background: transparent; }

/* Newsletter */
.resources-newsletter { padding: 0 0 96px; }
.newsletter {
  background: var(--warm);
  border-radius: var(--r-lg);
  padding: 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
}
.newsletter__h {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px;
}
.newsletter__h em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
  font-weight: 500;
}
.newsletter__body {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
.newsletter__form {
  display: flex;
  gap: 8px;
}
.newsletter__input {
  flex: 1;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--canvas-card);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
}
.newsletter__input:focus { outline: none; border-color: var(--cobalt); }
.newsletter__btn {
  background: var(--cobalt);
  color: #fff;
  padding: 13px 22px;
  border-radius: var(--r-sm);
  border: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.newsletter__btn:hover { background: var(--cobalt-deep); }
.newsletter__foot {
  grid-column: 1 / -1;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-mute);
  margin: 0;
}

/* --- 23. Single blog post (single-post.php) ------------------------ */

.post-page { display: block; }

.article-shell {
  padding: 56px 0 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 80px;
  align-items: start;
}
.article { min-width: 0; }
.sidebar { position: sticky; top: 96px; align-self: start; }

/* Post header */
.post-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cobalt);
  text-decoration: none;
  font-size: 13px;
}
.post-breadcrumb:hover { color: var(--ink); }
.post-breadcrumb__arrow { flex: none; color: var(--cobalt); transition: transform 0.15s; }
.post-breadcrumb:hover .post-breadcrumb__arrow { transform: translateX(-2px); }

.post-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-mute);
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.post-cat {
  display: inline-flex;
  background: var(--cobalt);
  color: #fff;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.post-eyebrow__sep { opacity: 0.5; }

.post-title {
  font-family: var(--font-sans);
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 24px;
}
.post-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.post-deck {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 40px;
  max-width: 640px;
}

.post-byline {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.post-byline__avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: block;
}
.post-byline__avatar .tm-avatar { display: inline-flex; }
.post-byline__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.post-byline__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.post-byline__role {
  font-size: 12px;
  color: var(--ink-mute);
}
.post-byline__date {
  font-size: 12px;
  color: var(--ink-mute);
  margin-left: auto;
}

/* Hero photo */
.post-hero-image {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, rgba(31, 50, 110, 0.2) 0%, rgba(45, 73, 159, 0.7) 100%),
    repeating-linear-gradient(45deg, transparent 0, transparent 14px, rgba(255, 255, 255, 0.04) 14px, rgba(255, 255, 255, 0.04) 28px),
    var(--cobalt-deep);
  margin-bottom: 48px;
}
.post-hero-image--has-image {
  background:
    linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.2) 100%),
    var(--post-hero) center / cover no-repeat;
}

/* Article body — styles the_content() / core-block output */
.article-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.article-body > * + * { margin-top: 22px; }
/* font-size/line-height: inherit ties paragraphs to .article-body (17px/1.7,
   16px on mobile) so the global base.css `p { font-size: 16px }` can't shrink
   them below list items, which inherit 17px. Keeps prose and bullets the same
   size. 22px bottom margin matches 08-blog-post.html. */
.article-body p { margin: 0 0 22px; font-size: inherit; line-height: inherit; }
.article-body--lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 40px;
  max-width: 640px;
}
.article-body--lede p { margin: 0; font-size: 20px; line-height: 1.55; }
.article-body h2,
.article-body h3,
.article-body h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.article-body h2 { font-size: 28px; line-height: 1.2; margin: 56px 0 18px; }
.article-body h3 { font-size: 19px; line-height: 1.3; margin: 32px 0 12px; }
.article-body h4 { font-size: 17px; margin: 24px 0 10px; }
.article-body h2 em,
.article-body h3 em,
.article-body h4 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.article-body a {
  color: var(--cobalt);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--cobalt-soft);
  transition: border-color 0.15s;
}
.article-body a:hover { border-bottom-color: var(--cobalt); }
.article-body em,
.article-body i {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
}
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.92em;
  padding: 2px 6px;
  background: var(--warm);
  border-radius: 4px;
}
.article-body mark {
  background: var(--highlight);
  color: var(--ink);
  padding: 0 3px;
}
.article-body ul,
.article-body ol {
  /* Markers (bullets/numbers) sit inside at the list's left edge — which is the
     same edge as the body paragraphs — so the numbers/bullets line up with the
     body text, and the item text flows to their right. 22px bottom margin per
     08-blog-post.html. */
  margin: 0 0 22px;
  padding-left: 0;
  list-style-position: inside;
}
/* list-style-type (not the `list-style` shorthand, which would reset
   list-style-position back to `outside` and pull the markers out of line). */
.article-body ul { list-style-type: disc; }
.article-body ol { list-style-type: decimal; }
.article-body li { margin: 6px 0; line-height: inherit; }
.article-body li > ul,
.article-body li > ol { margin-top: 6px; }

/* Core blocks */
.article-body .wp-block-quote,
.article-body blockquote {
  margin: 40px 0;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--cobalt);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
}
.article-body .wp-block-quote cite,
.article-body blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 13px;
  color: var(--ink-mute);
}
.article-body .wp-block-pullquote {
  margin: 56px 0;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.article-body .wp-block-pullquote blockquote {
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 26px;
}
.article-body .wp-block-image,
.article-body figure.wp-block-image {
  margin: 40px 0;
}
.article-body .wp-block-image img,
.article-body figure.wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
  display: block;
}
.article-body figcaption,
.article-body .wp-element-caption {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
  text-align: center;
}
.article-body .wp-block-code,
.article-body .wp-block-preformatted,
.article-body pre {
  background: var(--warm);
  padding: 20px 22px;
  border-radius: var(--r);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  overflow-x: auto;
}
.article-body .wp-block-code code,
.article-body pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.article-body .wp-block-table,
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 32px 0;
}
.article-body .wp-block-table th,
.article-body .wp-block-table td,
.article-body table th,
.article-body table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.article-body .wp-block-table th,
.article-body table th { color: var(--ink); font-weight: 600; }
.article-body .wp-block-separator,
.article-body hr {
  border: 0;
  width: 60px;
  height: 2px;
  background: var(--line);
  margin: 48px auto;
}
.article-body .wp-block-embed,
.article-body .wp-block-embed__wrapper {
  margin: 40px 0;
}
.article-body .wp-block-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r);
  display: block;
}
/* Video embeds in generic page bodies (landing / use-case / etc.). page.php
   doesn't share the .article-body scope, so without this Vimeo/YouTube embeds
   placed in page content render at raw iframe dimensions and look "resized"
   (changes.docx: "these videos have been resized"). Mirror the blog treatment
   so they fill their column at 16:9 — including those nested in columns, so the
   smaller side-by-side videos size correctly too. */
.generic-body .wp-block-embed iframe,
.generic-body--blocks .wp-block-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r);
  display: block;
}
.article-body .wp-block-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 32px 0;
}
.article-body .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cobalt);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 0;
}
.article-body .wp-block-button__link:hover { background: var(--cobalt-deep); }

/* Author card */
.author-card {
  margin-top: 64px;
  padding: 28px;
  background: var(--canvas-card);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}
.author-card__avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
}
.author-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.author-card__role {
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.author-card__bio {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* Avatar (uploaded image or initials circle fallback) */
.tm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--cobalt-soft);
  color: var(--cobalt);
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
  text-indent: 0.02em;
}
.tm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tm-avatar--initials { font-weight: 600; }

/* Sidebar */
.sidebar-card {
  background: var(--canvas-card);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
.sidebar-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cobalt);
  margin-bottom: 14px;
}
.sidebar-toc {
  display: grid;
  gap: 8px;
}
.sidebar-toc a {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  border-bottom: 0;
  line-height: 1.45;
  transition: color 0.15s, border-color 0.15s;
}
.sidebar-toc a:hover {
  color: var(--cobalt);
  border-left-color: var(--cobalt);
}
.share-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
}
.share-link:last-of-type { border-bottom: 0; padding-bottom: 0; }
.share-link__arrow { color: var(--cobalt); flex-shrink: 0; transition: transform 0.15s; }
.share-link:hover { color: var(--cobalt); }
.share-link:hover .share-link__arrow { transform: translateX(2px); }
.sidebar-mini-cta {
  background: var(--cobalt-deep);
  color: #fff;
  border-radius: var(--r);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.sidebar-mini-cta::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
}
.sidebar-mini-cta > * { position: relative; z-index: 1; }
.sidebar-mini-cta h4 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 18px;
  color: #fff;
}
.sidebar-mini-cta h4 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt-soft);
}
.sidebar-mini-cta p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 14px;
}
.sidebar-mini-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--cobalt-deep);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.sidebar-mini-cta__arrow { flex-shrink: 0; transition: transform 0.15s; }
.sidebar-mini-cta__btn:hover { background: var(--canvas); }
.sidebar-mini-cta__btn:hover .sidebar-mini-cta__arrow { transform: translateX(2px); }

/* More from resources */
.more-section {
  padding: 80px 0 96px;
  background: var(--warm);
}
.more-section__header {
  margin-bottom: 40px;
  max-width: 720px;
}
.more-section__h {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.more-section__h em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
  font-weight: 500;
}

/* --- 24. Resources + post responsive ------------------------------- */
@media (max-width: 980px) {
  .resources-hero { padding: 64px 0 24px; }
  .resources-hero__h1 { font-size: 40px; }
  .featured-post { grid-template-columns: 1fr; }
  .featured-post__photo { min-height: 0; aspect-ratio: 16 / 9; }
  .featured-post__body { padding: 32px; }
  .feed-grid { grid-template-columns: repeat(2, 1fr); }
  .newsletter { grid-template-columns: 1fr; gap: 20px; padding: 32px; }

  .article-shell {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 40px 0 64px;
  }
  .sidebar { position: static; }
  .post-title { font-size: 38px; }
  .post-deck { font-size: 18px; }
  .more-section { padding: 64px 0 80px; }
}
@media (max-width: 600px) {
  .feed-grid { grid-template-columns: 1fr; }
  .newsletter__form { flex-direction: column; }
  .resources-hero__h1 { font-size: 32px; }
  .featured-post__body { padding: 24px; }
  .post-title { font-size: 30px; }
}

/* --- 25. Contact / Book a demo (page-contact.php) ------------------- */

.contact-page { display: block; }

.contact-hero { padding: 72px 0 96px; }
.contact-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact-hero__copy { padding-top: 12px; }
.contact-hero__copy .hero-eyebrow { margin-bottom: 28px; }

.contact-hero__h1 {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 24px;
}
.contact-hero__h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.contact-hero__lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 500px;
  margin: 0 0 40px;
}

/* Expectations list — sits beneath the lede, hairline above. */
.contact-expect {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 22px;
}
.contact-expect__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.contact-expect__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
}
.contact-expect__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--cobalt);
  line-height: 1;
}
.contact-expect__h {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 4px;
  color: var(--ink);
}
.contact-expect__b {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* Form card — white lifted card with cobalt accent strip on top. The
   HubSpot embed mounts inside .tm-hs-form (BRIEF §8 step 8); the static
   placeholder form below uses these contact-form__* classes for visual
   parity with the design until the embed lands. */
.contact-hero__form-wrap { min-width: 0; }
.contact-form-card {
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: 40px;
  position: relative;
}
.contact-form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cobalt);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.contact-form-card__h {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.contact-form-card__h em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
  font-weight: 500;
}
.contact-form-card__sub {
  font-size: 14px;
  color: var(--ink-mute);
  margin: 0 0 28px;
}

.contact-form__placeholder {
  display: grid;
  gap: 16px;
}
.contact-form__row { display: grid; gap: 6px; }
.contact-form__row--two {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-form__row--two > div { display: grid; gap: 6px; }
.contact-form__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.contact-form__req {
  color: var(--cobalt);
  margin-left: 2px;
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  appearance: none;
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--canvas);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.15s;
}
.contact-form__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2374757F' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.contact-form__textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.5;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--cobalt);
}
.contact-form__submit {
  margin-top: 8px;
  background: var(--cobalt);
  color: #fff;
  padding: 14px 24px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s;
}
.contact-form__submit:hover { background: var(--cobalt-deep); }
.contact-form__foot {
  font-size: 12px;
  color: var(--ink-mute);
  margin: 16px 0 0;
  line-height: 1.5;
  font-family: var(--font-serif);
  font-style: italic;
}

/* Direct contact strip — warm band beneath the form, 4-column "intro +
   three email columns". */
.contact-direct {
  background: var(--warm);
  padding: 64px 0;
  border-top: 1px solid var(--warm-deep);
}
.contact-direct__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  align-items: start;
}
/* No intro copy: drop the wide first column so the contact columns fill from
   the left instead of leaving a gap (see page-contact.php). */
.contact-direct__grid--no-intro {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.contact-direct__h {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}
.contact-direct__h em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
  font-weight: 500;
}
.contact-direct__body {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}
.contact-direct__col-h {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cobalt);
  margin: 0 0 12px;
}
.contact-direct__email {
  display: block;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.5;
  font-weight: 500;
}
.contact-direct__email:hover { color: var(--cobalt); }
.contact-direct__sup {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 6px 0 0;
}

@media (max-width: 980px) {
  .contact-hero { padding: 56px 0 72px; }
  .contact-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-hero__h1 { font-size: 38px; }
  .contact-form-card { padding: 28px; }
  .contact-direct__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .contact-form__row--two { grid-template-columns: 1fr; }
}

/* --- 26. Pricing (page-pricing.php) -------------------------------- */

.pricing-page { display: block; }

/* Shared section header — eyebrow label + H2 (+ optional intro paragraph)
   stacked, max-width to keep the intro narrow. */
.pricing-section__header {
  max-width: 720px;
  margin: 0 0 48px;
}
.pricing-section__header .section-h { margin-top: 4px; }
.pricing-arch__intro,
.pricing-included__intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 18px 0 0;
  max-width: 620px;
}

/* Hero — centered, lighter padding than the canvas-wide heroes elsewhere
   since the model section that follows is the page's first piece of substance. */
.pricing-hero {
  padding: 72px 0 56px;
  text-align: center;
}
.pricing-hero .hero-eyebrow { margin-bottom: 28px; }
.pricing-hero__h1 {
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  /* No max-width — the headline fills the centred container per 07-pricing.html.
     A 900px cap here forced an early wrap that read as extra side padding. */
  margin: 0 0 24px;
}
.pricing-hero__h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.pricing-hero__lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 600px;
  margin: 0 auto;
}

/* The model — two cards explaining the one-off build + annual subscription. */
.pricing-model { padding: 32px 0 96px; }
.pricing-model__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}
.pricing-model__card {
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 36px 32px;
}
.pricing-model__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  background: var(--cobalt-soft);
  color: var(--cobalt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.pricing-model__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: 14px;
}
.pricing-model__h {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.2;
}
.pricing-model__h em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.pricing-model__b {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.pricing-model__b--2 { margin-top: 12px; }
.pricing-model__note {
  max-width: 760px;
  margin: 36px auto 0;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.pricing-model__note em {
  color: var(--cobalt);
  font-style: italic;
}

/* What shapes your price — 5-tab archetype interface. Tab bar mirrors the
   homepage persona-tabs visual (underline-on-active) but uses its own
   classes since the panel layout differs (2-col side / points). */
.pricing-arch { padding: 32px 0 96px; }
.pricing-arch__tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin: 0 0 40px;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.pricing-arch__tabs::-webkit-scrollbar { display: none; }
.pricing-arch__tab {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-mute);
  padding: 12px 4px;
  margin-right: 24px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.pricing-arch__tab:hover { color: var(--ink-soft); }
.pricing-arch__tab.is-active {
  color: var(--cobalt);
  border-bottom-color: var(--cobalt);
}
.pricing-arch__tab:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
  border-radius: 4px;
}

.pricing-arch__panel { display: none; }
.pricing-arch__panel.is-active { display: block; }
.pricing-arch__panel[hidden] { display: none; }
.pricing-arch__panel.is-active[hidden] { display: block; }

.pricing-arch__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.pricing-arch__side-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: 14px;
}
.pricing-arch__side-h {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
}
.pricing-arch__side-h em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.pricing-arch__roles {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0;
}
.pricing-arch__points {
  display: grid;
  gap: 16px;
}
.pricing-arch__point {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--canvas-card);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
}
.pricing-arch__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--cobalt-soft);
  color: var(--cobalt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pricing-arch__point-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.pricing-arch__point-text strong {
  color: var(--ink);
  font-weight: 600;
}
.pricing-arch__threshold {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-mute);
  font-family: var(--font-serif);
  font-style: italic;
}
.pricing-arch__note {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-mute);
  margin: 40px 0 0;
}

/* What's included — warm band, 2-col item grid with cobalt-soft icon tile,
   closing italic foot note. */
.pricing-included {
  padding: 96px 0;
  background: var(--warm);
  border-top: 1px solid var(--warm-deep);
  border-bottom: 1px solid var(--warm-deep);
}
.pricing-included__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
  max-width: 880px;
}
.pricing-included__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.pricing-included__icon {
  width: 20px;
  height: 20px;
  color: var(--cobalt);
  flex-shrink: 0;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pricing-included__foot {
  margin-top: 28px;
  font-size: 14px;
  color: var(--ink-mute);
  max-width: 760px;
  line-height: 1.6;
}

/* The return — 3-stat proof grid. Each card carries a tag (customer), a
   large stat number, and a caption. Visually distinct from the homepage
   stats strip (which renders a hairline-bordered single card). */
.pricing-proof { padding: 96px 0; }
.pricing-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pricing-proof__card {
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 36px 32px;
}
.pricing-proof__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: 14px;
}
.pricing-proof__num {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 12px;
}
.pricing-proof__caption {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* FAQ — stacked white cards, question 17/600, answer 14/ink-soft. */
.pricing-faq { padding: 96px 0; }
.pricing-faq__list {
  display: grid;
  gap: 12px;
  max-width: 880px;
}
.pricing-faq__item {
  background: var(--canvas-card);
  border-radius: var(--r);
  padding: 24px 28px;
  box-shadow: var(--shadow-card);
}
.pricing-faq__q {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 10px;
  color: var(--ink);
}
.pricing-faq__q em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
  font-weight: 500;
}
.pricing-faq__a {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.pricing-faq__a em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
}
.pricing-faq__a p { margin: 0 0 12px; }
.pricing-faq__a p:last-child { margin-bottom: 0; }
.pricing-faq__a a {
  color: var(--cobalt);
  text-decoration: underline;
  text-decoration-color: var(--cobalt-soft);
}
.pricing-faq__a a:hover { text-decoration-color: var(--cobalt); }

/* FAQ section (faq-section.php — reusable; Pricing FAQ above can migrate to
   these classes later) ---------------------------------------------------- */
.faq-section__header {
  max-width: 720px;
  margin-bottom: 40px;
}
.faq-section__list {
  display: grid;
  gap: 12px;
  max-width: 880px;
}
.faq-section__item {
  background: var(--canvas-card);
  border-radius: var(--r);
  padding: 24px 28px;
  box-shadow: var(--shadow-card);
}
.faq-section__q {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 10px;
  color: var(--ink);
}
.faq-section__q em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
  font-weight: 500;
}
.faq-section__a {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.faq-section__a em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
}
.faq-section__a p { margin: 0 0 12px; }
.faq-section__a p:last-child { margin-bottom: 0; }
.faq-section__a a {
  color: var(--cobalt);
  text-decoration: underline;
  text-decoration-color: var(--cobalt-soft);
}
.faq-section__a a:hover { text-decoration-color: var(--cobalt); }

.pricing-section--final-cta { padding: 0 0 96px; }

@media (max-width: 980px) {
  .pricing-hero { padding: 56px 0 40px; }
  .pricing-hero__h1 { font-size: 42px; }
  .pricing-model { padding: 24px 0 72px; }
  .pricing-model__grid { grid-template-columns: 1fr; }
  .pricing-arch { padding: 24px 0 72px; }
  .pricing-arch__layout { grid-template-columns: 1fr; gap: 32px; }
  .pricing-included { padding: 64px 0; }
  .pricing-included__grid { grid-template-columns: 1fr; }
  .pricing-proof { padding: 64px 0; }
  .pricing-proof__grid { grid-template-columns: 1fr; }
  .pricing-faq { padding: 64px 0; }
  .pricing-section--final-cta { padding: 0 0 72px; }
}
@media (max-width: 600px) {
  .pricing-hero__h1 { font-size: 34px; }
  .pricing-arch__side-h { font-size: 24px; }
}

/* --- 27. Generic page (page.php) ----------------------------------- */

.generic-page { display: block; }

/* Header — uppercase crumb, big H1, lede. Hairline beneath ties into the
   two-column body shell below. */
.generic-header {
  padding: 64px 0 32px;
  border-bottom: 1px solid var(--line);
}
.generic-header__crumb {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cobalt);
  font-weight: 700;
  margin-bottom: 16px;
}
.generic-header__h1 {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 840px;
}
.generic-header__h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.generic-header__lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 680px;
  margin: 0;
}

/* Body shell. Prose pages get a centred reading column; the "On this page" nav
   is now the horizontal toc-bar above the body (not a sidebar). Block-built
   pages opt into `--full` to render their section bands full-bleed. */
.generic-shell {
  max-width: 784px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}
.generic-shell--full {
  max-width: none;
  margin: 0;
  padding: 0;
}

.generic-toc {
  position: sticky;
  top: 96px;
  align-self: start;
}
.generic-toc__label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.generic-toc__nav {
  display: grid;
  gap: 6px;
}
.generic-toc__nav a {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 5px 0 5px 14px;
  border-left: 2px solid var(--line);
  /* base.css applies `article a { border-bottom: 1px solid var(--cobalt-soft) }`
     to all in-article links; the TOC only wants the left border. */
  border-bottom: 0;
  line-height: 1.45;
  transition: color 0.15s, border-color 0.15s;
}
.generic-toc__nav a:hover,
.generic-toc__nav a.is-active {
  color: var(--cobalt);
  border-left-color: var(--cobalt);
}

/* Body — styles all native Gutenberg block output. Anything the editor
   puts in renders through these typographic rules. */
.generic-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  min-width: 0;
}
/* Block-built pages: let each section band control its own type/colour rather
   than inheriting the prose defaults. */
.generic-body--blocks {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
/* Section backgrounds stay full-bleed, but their inner content aligns to the
   new theme's container — legacy blocks centre on `max-w-screen-xl` (1280px),
   wider than the rest of the site, so pin it to `--container` (1200/32px). Any
   stray top-level prose gets the same treatment. */
.generic-body--blocks .max-w-screen-xl {
  max-width: var(--container);
  padding-left: 32px;
  padding-right: 32px;
}
.generic-body--blocks > :not(section) {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ===================================================================
   Converted legacy blocks (.cblock*)
   Legacy ACF blocks rewritten into the new design system. They keep
   their acf/* names + fields but render with these classes instead of
   the legacy Tailwind bundle. Shared chrome first, then per-block.
   =================================================================== */

/* Surfaces — full-bleed bands, content centred via the inner .container.
   Only the two content tones exist (canvas + warm); the single dark surface
   per page is the contained closing CTA, handled by dark-cta-block, not here. */
.cblock { position: relative; }
.cblock--plain { background: var(--canvas); }
.cblock--warm  { background: var(--warm); }

/* Vertical rhythm */
.cblock--pad-tight   { padding: 64px 0; }
.cblock--pad-default { padding: 100px 0; }
.cblock--pad-loose   { padding: 128px 0; }

/* Alignment */
.cblock--align-left   { text-align: left; }
.cblock--align-centre { text-align: center; }
.cblock--align-right  { text-align: right; }

/* Prose inside a converted block.
   Imported content uses the full heading range — hero blocks carry the page's
   own <h1>, and older pages lean on h4 (sometimes as br-separated body text) —
   so every level gets an explicit size, leading and margin here. base.css
   deliberately leaves heading/paragraph margins at 0, which is what made
   unstyled levels sit flush against the next element. */
.cblock__prose { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.cblock__prose > :first-child { margin-top: 0; }
.cblock__prose > :last-child { margin-bottom: 0; }
.cblock__prose h1 {
  font-family: var(--font-sans);
  font-size: clamp(36px, 4.5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 24px;
}
.cblock__prose h1 + p { font-size: 19px; line-height: 1.6; }
.cblock__prose h2 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin: 40px 0 16px;
}
.cblock__prose h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 28px 0 12px;
}
.cblock__prose h4,
.cblock__prose h5,
.cblock__prose h6 {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  margin: 28px 0 12px;
}
.cblock__prose em,
.cblock__prose h2 em,
.cblock__prose h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.cblock__prose p { margin: 0 0 18px; }
.cblock__prose ul,
.cblock__prose ol { margin: 0 0 18px; padding-left: 20px; }
.cblock__prose li { margin-bottom: 8px; line-height: 1.6; }

/* Buttons row. Inside `.generic-body`, the rule `.generic-body a` (0,1,1)
   out-specifies the base `.btn-*` colours (0,1,0), so the primary button would
   render cobalt-text-on-cobalt-fill — invisible until hover darkens the fill.
   Re-assert the templated-CTA treatment here at higher specificity: cobalt
   fill + white text, darkening to cobalt-deep on hover. */
.cblock__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cblock--align-centre .cblock__btns { justify-content: center; }
.cblock--align-right .cblock__btns { justify-content: flex-end; }
.cblock__btns .btn { border-bottom: 0; }
.cblock__btns .btn-primary { background: var(--cobalt); }
.cblock__btns .btn-primary,
.cblock__btns .btn-primary:hover { color: #fff; }
.cblock__btns .btn-primary:hover { background: var(--cobalt-deep); }
.cblock__btns .btn-secondary { background: var(--canvas-card); border: 1px solid var(--line); }
.cblock__btns .btn-secondary,
.cblock__btns .btn-secondary:hover { color: var(--ink); }
.cblock__btns .btn-secondary:hover { border-color: var(--ink); }

/* One-column block — centre alignment narrows to a readable measure. */
.cblock--1col.cblock--align-centre .cblock__single {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Two-column block */
.cblock--2col .cblock__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.cblock--2col .cblock__col { min-width: 0; }

/* Stand-out content — lifted white card on canvas; heading + content columns. */
.cblock--standout .cblock__panel {
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 48px;
}
.cblock--standout .cblock__panel-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}
.cblock--standout .cblock__panel-h {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.cblock--standout .cblock__panel-h em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.cblock--standout .cblock__panel-accent {
  display: block;
  width: 64px;
  height: 4px;
  background: var(--cobalt);
  border-radius: 2px;
  margin-top: 20px;
}

/* Overlapping image + content card — card overlaps the image on desktop,
   stacks on mobile (replaces the legacy absolute-position version). */
.cblock--overlap .cblock__overlap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.cblock--overlap .cblock__overlap-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.cblock--overlap .cblock__overlap-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cblock--overlap .cblock__overlap-card {
  position: relative;
  z-index: 1;
  margin-left: -64px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: 40px;
}
.cblock--overlap .cblock__overlap-card--card-light { background: var(--canvas-card); }
.cblock--overlap .cblock__overlap-card--card-warm { background: var(--warm); }
/* No-image instance: render the card on its own, no overlap. */
.cblock--overlap .cblock__overlap-card:only-child {
  grid-column: 1 / -1;
  margin-left: 0;
  max-width: 720px;
}

/* Card grids (cards / icon-cards / icon-cards-alt) ----------------- */
.cblock__intro { max-width: 720px; margin: 0 0 48px; }
.cblock--align-centre .cblock__intro { margin-left: auto; margin-right: auto; }
.cblock__intro > :first-child { margin-top: 0; }
.cblock__intro > :last-child { margin-bottom: 0; }

.cblock__cards { display: grid; gap: 24px; }
.cblock__cards--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cblock__cards--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cblock__cards--cols-4 { grid-template-columns: repeat(4, 1fr); }
.cblock__cards--icons { grid-template-columns: repeat(2, 1fr); gap: 40px; }
.cblock__cards--icon-rows { grid-template-columns: repeat(2, 1fr); }
.cblock__cards + .cblock__btns { margin-top: 40px; }

/* Card "learn more" arrow link */
.ccard__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cobalt);
  border-bottom: 0;
}
.ccard__link:hover { color: var(--cobalt-deep); }
.ccard__link-arrow { width: 20px; height: 8px; flex-shrink: 0; }

.ccard__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 10px;
}
.ccard__text { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.ccard__text > :first-child { margin-top: 0; }
.ccard__text > :last-child { margin-bottom: 0; }
.ccard__text p { margin: 0 0 12px; }

.ccard__icon { display: inline-flex; color: var(--cobalt); }
.ccard__icon svg { width: 40px; height: 40px; }
.ccard__icon img { max-height: 40px; width: auto; }

/* Media card (cards) */
.ccard--media {
  display: flex;
  flex-direction: column;
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-align: left;
}
.ccard--media .ccard__media img { display: block; width: 100%; height: 180px; object-fit: cover; }
.ccard--media .ccard__body { padding: 24px 26px; }

/* Icon card (icon-cards) — plain, centred icon + text */
.ccard--icon { text-align: center; }
.ccard--icon .ccard__icon { justify-content: center; margin-bottom: 14px; }
.cblock--align-left .ccard--icon { text-align: left; }
.cblock--align-left .ccard--icon .ccard__icon { justify-content: flex-start; }

/* Icon-row card (icon-cards-alt) — icon left, text right, in a card */
.ccard--icon-row {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
  text-align: left;
}
.ccard--icon-row .ccard__icon { flex-shrink: 0; }
.ccard--icon-row .ccard__icon img { max-height: 64px; }
.ccard--icon-row .ccard__body { min-width: 0; }

@media (max-width: 860px) {
  .cblock--2col .cblock__cols { grid-template-columns: 1fr; gap: 32px; }
  .cblock--pad-tight   { padding: 48px 0; }
  .cblock--pad-default { padding: 64px 0; }
  .cblock--pad-loose   { padding: 80px 0; }
  .cblock--standout .cblock__panel { padding: 32px 24px; }
  .cblock--standout .cblock__panel-grid { grid-template-columns: 1fr; gap: 24px; }
  .cblock--overlap .cblock__overlap { grid-template-columns: 1fr; }
  .cblock--overlap .cblock__overlap-media { aspect-ratio: 16 / 9; }
  .cblock--overlap .cblock__overlap-card { margin-left: 0; margin-top: -40px; }
  .cblock__cards--cols-3,
  .cblock__cards--cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cblock__cards--cols-2,
  .cblock__cards--icons,
  .cblock__cards--icon-rows { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cblock__cards--cols-3,
  .cblock__cards--cols-4 { grid-template-columns: 1fr; }
}

/* Hex banner — hero intro (heading + content + optional image) */
.cblock--hero .cblock__hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.cblock--hero .cblock__hero--solo {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
  text-align: center;
}
.cblock__hero-h {
  font-family: var(--font-sans);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 20px;
}
.cblock__hero-lead {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
  font-size: 0.62em;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.cblock__hero-media img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.cblock__hero--solo .cblock__btns { justify-content: center; }

/* Fancy icon list — image + bold text grid */
.cblock__iconlist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
  margin-top: 8px;
}
.cblock--align-centre .cblock__iconlist { text-align: center; }
/* Icons are brand SVGs with a baked light-cyan fill (built for the old dark
   band); on a warm band they wash out, so seat them on a cobalt medallion. */
.cblock__iconlist-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--cobalt);
  margin: 0 auto 16px;
}
.cblock--align-left .cblock__iconlist-icon { margin-left: 0; }
.cblock__iconlist-icon img { display: block; max-width: 40px; max-height: 40px; width: auto; height: auto; }
.cblock__iconlist-text { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.cblock__iconlist + .cblock__btns { margin-top: 40px; }

/* Coloured list — emphasis rows (white cards; no accent bar on a box) */
.cblock__crows { display: grid; gap: 14px; max-width: 900px; margin: 0 auto; }
.cblock--align-left .cblock__crows { margin-left: 0; }
.cblock__crow {
  background: var(--canvas-card);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: 22px 28px;
  text-align: left;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink);
}
/* The row content is a wysiwyg `<p>`; drop its outer margins so the card pads evenly. */
.cblock__crow > :first-child { margin-top: 0; }
.cblock__crow > :last-child { margin-bottom: 0; }
.cblock__crows + .cblock__btns { margin-top: 40px; }

/* Summary points — intro band with overlapping point cards */
.cblock--summary { padding: 0; }
.cblock--summary .cblock__summary-intro { background: var(--warm); padding: 100px 0 160px; }
.cblock--summary .cblock__summary-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: -120px;
  margin-bottom: 100px;
}
.cblock--summary .cblock__summary-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Top-align so the number badges line up across cards regardless of how many
     lines the text runs to (grid stretches the cards to equal height). */
  justify-content: flex-start;
  gap: 16px;
  text-align: center;
  min-height: 200px;
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: 32px 24px;
}
.cblock--summary .cblock__summary-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.cblock--summary .cblock__summary-text {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.cblock--summary .cblock__summary-text > :first-child { margin-top: 0; }
.cblock--summary .cblock__summary-text > :last-child { margin-bottom: 0; }

/* Accordion — intro + expand/collapse rows (toggled by theme.js) */
.cblock__accordion { max-width: 820px; margin: 0 auto; text-align: left; }
.cblock--align-left .cblock__accordion { margin-left: 0; }
.cblock__acc-item {
  background: var(--canvas-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  margin-bottom: 12px;
}
.cblock__acc-item:last-child { margin-bottom: 0; }
.cblock__acc-head { margin: 0; }
.cblock__acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.cblock__acc-trigger:hover,
.cblock__acc-item.is-open .cblock__acc-trigger { color: var(--cobalt); }
.cblock__acc-chevron { flex-shrink: 0; color: var(--ink-mute); transition: transform 0.2s ease, color 0.2s ease; }
.cblock__acc-item.is-open .cblock__acc-chevron { transform: rotate(180deg); color: var(--cobalt); }
.cblock__acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.cblock__acc-item.is-open .cblock__acc-panel { grid-template-rows: 1fr; }
.cblock__acc-clip { overflow: hidden; min-height: 0; }
.cblock__acc-body { padding: 0 24px 22px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.cblock__acc-body .cblock__prose { font-size: inherit; color: inherit; }
.cblock__acc-body > :first-child { margin-top: 0; }
.cblock__btns--footer { margin-top: 40px; }
@media (prefers-reduced-motion: reduce) {
  .cblock__acc-panel,
  .cblock__acc-chevron { transition: none; }
}

/* Carousels (carousel / logo-carousel / testimonial-carousel / why-thrivemap) */
.cblock__carousel { margin-top: 32px; }
.cblock__carousel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 16px;
  margin: 0 -4px;
  scrollbar-width: none;
}
.cblock__carousel-track::-webkit-scrollbar { display: none; }
.cblock__carousel-item { flex: 0 0 auto; scroll-snap-align: start; text-align: left; }
.cblock__carousel-nav { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.cblock__carousel-nav[hidden] { display: none; }
.cblock__carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas-card);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.cblock__carousel-btn:hover { border-color: var(--cobalt); color: var(--cobalt); }

/* Content card (carousel) */
.cblock--carousel .cblock__ccard {
  width: 320px;
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
  text-align: center;
}
.cblock__ccard-logo { display: flex; align-items: center; justify-content: center; height: 60px; margin-bottom: 20px; }
.cblock__ccard-logo img { max-width: 200px; max-height: 60px; width: auto; }
.cblock__ccard-body { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* Logo cell (logo-carousel) */
.cblock--logo-carousel .cblock__logo-cell {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cblock__logo-cell img { max-width: 160px; max-height: 56px; width: auto; }

/* Testimonial card */
.cblock--testimonials .cblock__tcard {
  width: 380px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
}
.cblock__tcard-quote { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ink); }
.cblock__tcard-cite { display: flex; flex-direction: column; gap: 2px; }
.cblock__tcard-from { font-size: 14px; font-weight: 600; color: var(--ink); }
.cblock__tcard-role { font-size: 13px; color: var(--ink-mute); }
.cblock__tcard-logo { margin-top: auto; }
.cblock__tcard-logo img { max-height: 40px; width: auto; }

/* Why ThriveMap — header + separator + reason cards */
.cblock--why .cblock__why-header { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; text-align: left; }
.cblock__why-h { font-family: var(--font-sans); font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.cblock__why-sub { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--cobalt); margin: 0; }
.cblock__why-copy { font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.cblock__why-sep { text-align: center; margin: 40px 0 0; }
.cblock__why-sep span { display: inline-block; background: var(--cobalt); color: #fff; font-weight: 600; font-size: 15px; padding: 10px 28px; border-radius: 100px; }
.cblock--why .cblock__why-card {
  width: 320px;
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
}
.cblock__why-card-accent { display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--cobalt); margin-bottom: 18px; }
.cblock__why-card-h { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px; }
.cblock__why-card-body { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 860px) {
  .cblock--why .cblock__why-header { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .cblock--carousel .cblock__ccard,
  .cblock--testimonials .cblock__tcard,
  .cblock--why .cblock__why-card { width: 82vw; max-width: 340px; }
}

/* Statistics — donut-chart stat cards */
.cblock__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.cblock__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--canvas-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 32px 28px;
}
.cblock__stat-donut { position: relative; width: 140px; height: 140px; margin-bottom: 18px; }
.cblock__stat-donut svg { display: block; width: 100%; height: 100%; }
.cblock__donut-ring { stroke: var(--cobalt-soft); }
.cblock__donut-seg { stroke: var(--cobalt); }
.cblock__stat-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cblock__stat-info { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.cblock__stat .ccard__link { margin-top: 14px; }

/* Book a Demo — contained cobalt CTA panel + white form card */
.cblock--book-demo .cblock__demo-panel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
  background: var(--cobalt-deep);
  border-radius: var(--r-lg);
  padding: 48px;
}
.cblock__demo-h {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px;
}
.cblock__demo-h-accent {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: #b8c8ff;
}
.cblock__demo-body { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.cblock__demo-body a { color: #fff; }
.cblock__demo-form { background: var(--canvas-card); border-radius: var(--r); padding: 32px; }
@media (max-width: 860px) {
  .cblock--book-demo .cblock__demo-panel { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; }
}

@media (max-width: 860px) {
  .cblock--hero .cblock__hero,
  .cblock--hero .cblock__hero--solo { grid-template-columns: 1fr; gap: 32px; }
  .cblock__iconlist { grid-template-columns: 1fr; gap: 28px; }
  .cblock--summary .cblock__summary-intro { padding: 64px 0 140px; }
  .cblock--summary .cblock__summary-points { margin-bottom: 64px; }
}
.generic-body p { margin: 0 0 22px; }
.generic-body > :last-child { margin-bottom: 0; }
.generic-body h2 {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
  margin: 56px 0 18px;
  scroll-margin-top: 96px;
}
.generic-body h2:first-child { margin-top: 0; }
.generic-body h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.generic-body h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 32px 0 12px;
}
.generic-body em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
}
.generic-body strong {
  color: var(--ink);
  font-weight: 600;
}
.generic-body a {
  color: var(--cobalt);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--cobalt-soft);
}
.generic-body a:hover { border-bottom-color: var(--cobalt); }
.generic-body ul,
.generic-body ol {
  margin: 0 0 22px 24px;
}
.generic-body li { margin-bottom: 8px; }
.generic-body img,
.generic-body figure {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.generic-body figure { margin: 32px 0; }
.generic-body figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
  margin-top: 8px;
}
.generic-body blockquote {
  margin: 32px 0;
  padding-left: 20px;
  border-left: 2px solid var(--cobalt);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}
.generic-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

/* Supplementary panel (team grid / document list / future layouts). */
.generic-panel {
  background: var(--canvas-card);
  border-radius: var(--r);
  padding: 28px 32px;
  box-shadow: var(--shadow-card);
  margin: 36px 0;
}
.generic-panel__h {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cobalt);
  margin-bottom: 18px;
}
.generic-panel__team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.generic-panel__team-item {
  display: flex;
  gap: 14px;
  align-items: center;
}
.generic-panel__team-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cobalt-soft);
  color: var(--cobalt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}
.generic-panel__team-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.generic-panel__team-role {
  font-size: 12px;
  color: var(--ink-mute);
}
.generic-panel__doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.generic-panel__doc { margin: 0; }
.generic-panel__doc-link {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--ink);
  border-left: 0;
}
.generic-panel__doc-link:hover { color: var(--cobalt); border-left: 0; }
.generic-panel__doc:last-child .generic-panel__doc-link { border-bottom: 0; }
.generic-panel__doc-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.generic-panel__doc-desc {
  display: block;
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 4px;
}

/* Soft footer — warm link card, not a dark CTA. Optional. */
.generic-soft-foot {
  background: var(--warm);
  border-radius: var(--r-lg);
  padding: 36px 40px;
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}
.generic-soft-foot__h {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 4px;
  color: var(--ink);
}
.generic-soft-foot__h em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
  font-weight: 500;
}
.generic-soft-foot__b {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}
.generic-soft-foot__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cobalt);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 0;
  flex-shrink: 0;
  transition: background 0.15s;
}
.generic-soft-foot__btn:hover {
  background: var(--cobalt-deep);
  color: #fff;
}

@media (max-width: 980px) {
  .generic-header { padding: 48px 0 24px; }
  .generic-header__h1 { font-size: 38px; }
  .generic-shell {
    padding: 32px 24px 64px;
  }
  .generic-shell--full {
    padding: 0;
  }
  .generic-panel__team-grid { grid-template-columns: 1fr; }
  .generic-soft-foot { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .generic-header__h1 { font-size: 30px; }
  .generic-body { font-size: 16px; }
}

/* --- 28. AI-answer (single-ai-answer.php) -------------------------- */

.ai-answer-page { display: block; }

/* Three-area shell. On desktop the rail (right column) spans both rows so
   sticky TOC + sidebar follow the scroll throughout the article. On mobile
   the grid collapses to a single column and the rail uses `display: contents`
   so its children (TOC + sidebar) can be reordered around the body via CSS
   `order`: header → TOC → body → sidebar. */
.ai-answer-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 32px 96px;
  display: grid;
  grid-template-columns: minmax(0, 760px) 280px;
  grid-template-rows: auto 1fr;
  gap: 32px 80px;
  align-items: start;
}
.ai-answer__header {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.ai-answer__body {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
.ai-answer__rail {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 96px;
  align-self: start;
}
/* TOC and sidebar inherit normal block flow inside the flex rail; no
   per-element sticky needed because the rail itself is sticky. */
.ai-answer__toc { display: block; }
.ai-answer__sidebar { display: block; }

/* Breadcrumb — dashed-underline on hover, same line as the dot separator. */
.ai-answer__breadcrumb {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-bottom: 40px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ai-answer__breadcrumb a {
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.ai-answer__breadcrumb a:hover {
  color: var(--cobalt);
  border-bottom-color: var(--cobalt);
}
.ai-answer__breadcrumb-sep {
  color: var(--ink-mute);
  opacity: 0.5;
}

/* The question — H1. Bigger weight, the page-wide single yellow highlight
   may appear via a <mark> in the ACF field value. */
.ai-answer__question {
  font-family: var(--font-sans);
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 32px;
}
.ai-answer__question em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.ai-answer__question mark {
  background: transparent;
  color: inherit;
  position: relative;
  display: inline-block;
  padding: 0 4px;
  /* Create a stacking context so the ::before highlight can sit behind the
     text without needing an inner wrapper element. Authors can write
     <mark>word</mark> directly. */
  isolation: isolate;
}
.ai-answer__question mark::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 8%;
  height: 38%;
  background: var(--highlight);
  z-index: -1;
  transform: skewX(-3deg) rotate(-0.6deg);
  border-radius: 2px;
}

/* The direct answer — sits immediately after H1, bordered top + bottom. */
.ai-answer__lead {
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink);
  padding: 28px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  margin: 0 0 48px;
}
.ai-answer__lead strong {
  font-weight: 600;
  color: var(--ink);
}

/* Article meta — avatar + name/role inline with dates and read time. */
.ai-answer__meta {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.ai-answer__author {
  display: flex;
  gap: 10px;
  align-items: center;
}
.ai-answer__author-avatar .tm-avatar { vertical-align: middle; }
.ai-answer__author-who { display: inline-flex; flex-direction: column; }
.ai-answer__author-name {
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
}
.ai-answer__author-role { font-size: 11px; }
.ai-answer__meta-sep { opacity: 0.5; }

/* Body — styles the_content() output. Same typographic family as the
   generic page body but slightly tighter top margin on the first h2. */
.ai-answer__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.ai-answer__body p { margin: 0 0 22px; }
.ai-answer__body > *:last-child { margin-bottom: 0; }
.ai-answer__body h2 {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
  margin: 56px 0 18px;
  scroll-margin-top: 96px;
}
.ai-answer__body h2:first-child { margin-top: 0; }
.ai-answer__body h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.ai-answer__body h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 32px 0 12px;
}
/* Prose links inside the body. Buttons rendered by the template (soft-CTA)
   are excluded so the body's underline + cobalt color don't override the
   pill button styling. */
.ai-answer__body a:not(.ai-answer__softcta-btn) {
  color: var(--cobalt);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--cobalt-soft);
  transition: border-color 0.15s;
}
.ai-answer__body a:not(.ai-answer__softcta-btn):hover { border-bottom-color: var(--cobalt); }
.ai-answer__body em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
}
.ai-answer__body strong {
  color: var(--ink);
  font-weight: 600;
}
.ai-answer__body ul,
.ai-answer__body ol {
  margin: 0 0 22px 24px;
}
.ai-answer__body li { margin-bottom: 8px; }

/* Native core/quote → pull-quote treatment by default. Sizes mirror the
   design's `.article-pull-quote` (26px italic serif, 13px sans cite). The
   "Callout" block style (`.is-style-callout`) is excluded so its warm-band
   styling in section 29 wins without a specificity battle. */
.ai-answer__body blockquote:not(.is-style-callout) {
  margin: 48px 0;
  padding-left: 32px;
  border-left: 2px solid var(--cobalt);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.45;
  color: var(--ink);
}
.ai-answer__body blockquote:not(.is-style-callout) p { margin: 0 0 16px; }
.ai-answer__body blockquote:not(.is-style-callout) cite {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-mute);
}
.ai-answer__body blockquote:not(.is-style-callout) cite strong {
  font-weight: 600;
  color: var(--ink);
}

/* Images / figures — rounded edge + italic serif caption. */
.ai-answer__body figure { margin: 32px 0; }
.ai-answer__body img,
.ai-answer__body figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.ai-answer__body figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
  margin-top: 8px;
}
.ai-answer__body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

/* TL;DR card — closes the article body. Dot bullets, cobalt label. */
.ai-answer__tldr {
  background: var(--canvas-card);
  border-radius: var(--r);
  padding: 28px 32px;
  box-shadow: var(--shadow-card);
  margin: 48px 0 24px;
}
.ai-answer__tldr-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cobalt);
  margin-bottom: 14px;
}
.ai-answer__tldr-h {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}
.ai-answer__tldr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.ai-answer__tldr-list li {
  padding-left: 22px;
  position: relative;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ai-answer__tldr-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--cobalt);
  border-radius: 50%;
}

/* Soft CTA — warm-band link card. No dark block on AI-answer pages
   (DESIGN-SYSTEM.md rule 3). */
.ai-answer__softcta {
  background: var(--warm);
  border-radius: var(--r);
  padding: 36px;
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.ai-answer__softcta-h {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.ai-answer__softcta-h em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.ai-answer__softcta-b {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.ai-answer__softcta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cobalt);
  color: #fff;
  padding: 13px 22px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 0;
  flex-shrink: 0;
  transition: background 0.15s;
}
.ai-answer__softcta-btn:hover {
  background: var(--cobalt-deep);
  color: #fff;
}

/* Sidebar — white cards stacked, sticky on desktop. */
.ai-answer__sidebar-card {
  background: var(--canvas-card);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
.ai-answer__sidebar-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cobalt);
  margin-bottom: 14px;
}
.ai-answer__sidebar-toc {
  display: grid;
  gap: 8px;
}
.ai-answer__sidebar-toc a {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  /* base.css applies `article a { border-bottom: 1px solid var(--cobalt-soft) }`
     to all in-article links; the TOC only wants the left border, so zero
     out the inherited bottom. */
  border-bottom: 0;
  line-height: 1.45;
  transition: color 0.15s, border-color 0.15s;
}
.ai-answer__sidebar-toc a:hover {
  color: var(--cobalt);
  border-left-color: var(--cobalt);
}
.ai-answer__related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.ai-answer__related-list li { margin: 0; }
.ai-answer__related-link {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  transition: color 0.15s;
}
.ai-answer__related-list li:first-child .ai-answer__related-link {
  border-top: 0;
  padding-top: 0;
}
.ai-answer__related-link:hover { color: var(--cobalt); }
.ai-answer__related-link em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
  font-weight: 500;
}

.ai-answer__mini-cta {
  background: var(--cobalt-deep);
  color: #fff;
  border-radius: var(--r);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.ai-answer__mini-cta::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
}
.ai-answer__mini-cta > * { position: relative; z-index: 1; }
.ai-answer__mini-cta h4 {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.3;
}
.ai-answer__mini-cta h4 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: #B8C8FF;
}
.ai-answer__mini-cta p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 16px;
}
.ai-answer__mini-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--cobalt-deep);
  padding: 9px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}
.ai-answer__mini-cta-btn:hover { background: var(--highlight); }

@media (max-width: 980px) {
  .ai-answer-shell {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 32px;
    padding: 32px 24px 64px;
  }
  /* Collapse the rail so its children (TOC + sidebar) become direct grid
     children of the shell; CSS `order` then drops them either side of the
     body. The desktop sticky position is also released here. */
  .ai-answer__rail {
    display: contents;
    position: static;
  }
  .ai-answer__header  { grid-column: 1; grid-row: auto; order: 1; }
  .ai-answer__toc     { grid-column: 1; grid-row: auto; order: 2; }
  .ai-answer__body    { grid-column: 1; grid-row: auto; order: 3; }
  .ai-answer__sidebar { grid-column: 1; grid-row: auto; order: 4; }
  .ai-answer__question { font-size: 36px; }
  .ai-answer__lead { font-size: 18px; }
  .ai-answer__body { font-size: 16px; }
  .ai-answer__body h2 { font-size: 24px; }
  .ai-answer__body blockquote:not(.is-style-callout) { font-size: 20px; padding-left: 24px; }
  .ai-answer__body blockquote.is-style-callout { font-size: 16px; }
  .ai-answer__softcta { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ai-answer__question { font-size: 30px; }
  .ai-answer__softcta { padding: 24px; }
}

/* --- 29. Core block styles ---------------------------------------- */

/* Baseline default style on core/quote — matches the design's pull-quote
   treatment (26px italic serif, 2px cobalt left border, sans-serif cite with
   bold name + grey role). Applies in the block editor and anywhere a quote
   appears without a more specific body-wrapper rule. The per-template
   blockquote rules (`.ai-answer__body`, `.article-body`, `.generic-body`,
   `.case-body`) win on the front-end via specificity and can tune sizes
   per layout. */
.wp-block-quote:not(.is-style-callout) {
  /* Vertical-only margin — `margin: 48px 0;` would force the lateral margins
     to zero and the block sits flush against the editor canvas instead of
     aligning with the surrounding paragraphs. */
  margin-top: 48px;
  margin-bottom: 48px;
  padding-left: 32px;
  border-left: 2px solid var(--cobalt);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.45;
  color: var(--ink);
  box-sizing: border-box;
}
/* The editor renders quote text in an inner <p>; force it to inherit the
   blockquote's typography so font-size / family / style cascade through. */
.wp-block-quote:not(.is-style-callout) p {
  margin: 0 0 16px;
  font-family: inherit;
  font-style: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}
.wp-block-quote:not(.is-style-callout) cite {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-mute);
}
.wp-block-quote:not(.is-style-callout) cite strong {
  font-weight: 600;
  color: var(--ink);
}

/* "Callout" style on core/quote — warm-band card for inline editorial
   callouts, matching .inline-callout (tint only, full radius, no accent bar).
   Registered in inc/blocks.php; authors pick it from the Quote block's Styles
   panel. */
.wp-block-quote.is-style-callout {
  background: var(--warm);
  border-left: 0;
  padding: 24px 28px;
  /* Vertical-only margin so the editor's lateral block-list padding is
     preserved (`margin: 40px 0;` would zero out the editor's auto/inherited
     left/right margins and make the callout sit flush left of prose). */
  margin-top: 40px;
  margin-bottom: 40px;
  border-radius: var(--r);
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}
.wp-block-quote.is-style-callout p {
  margin: 0;
  font-family: inherit;
  font-style: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.wp-block-quote.is-style-callout p + p { margin-top: 14px; }
.wp-block-quote.is-style-callout em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
  font-weight: 500;
}
.wp-block-quote.is-style-callout strong {
  font-weight: 600;
  color: var(--ink);
}
.wp-block-quote.is-style-callout cite {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 13px;
  color: var(--ink-mute);
}

/* --- 30. About page (page-about.php) ------------------------------- */

/* Section rhythm — mirrors .product-section: canvas by default, warm band via
   the --warm modifier, 100px vertical rhythm. (The mockup used tighter 56–72px
   paddings; standardised here to the site's section rhythm.) */
.about-section            { padding: 100px 0; }
.about-section--warm      { background: var(--warm); }
.about-section--final-cta { padding: 100px 0 0; }
.about-section__header    { margin-bottom: 48px; max-width: 720px; }
.about-section__lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 16px;
}

/* Hero */
.about-hero { padding: 88px 0 64px; }
.about-hero__h1 {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5.2vw, 60px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 28px 0;
}
.about-hero__h1 em,
.about-hero__h1 i {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.about-hero__lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 680px;
}
.about-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* Origin / manifesto — label + body two-column (reused for "the world we want"). */
.about-origin {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
}
.about-origin__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cobalt);
  padding-top: 8px;
}
.about-origin__h2 {
  font-family: var(--font-sans);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 24px;
}
.about-origin__h2 em,
.about-origin__h2 i {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.about-origin__body p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 20px;
  max-width: 640px;
}
.about-origin__body p:last-child { margin-bottom: 0; }
.about-origin__body strong { color: var(--ink); font-weight: 600; }

/* Comparison rows (component: comparison-rows) — them vs us. */
.comparison__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.comparison__row:last-child { border-bottom: 1px solid var(--line); }
.comparison__cell { padding: 28px 32px 28px 0; }
.comparison__cell--them {
  color: var(--ink-mute);
  border-right: 1px solid var(--line);
  padding-right: 40px;
}
.comparison__cell--us { padding-left: 40px; }
.comparison__role {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.comparison__cell--them .comparison__role { color: var(--ink-mute); }
.comparison__cell--us .comparison__role { color: var(--cobalt); }
.comparison__text { font-size: 15.5px; line-height: 1.6; }
.comparison__cell--us .comparison__text { color: var(--ink-soft); }
.comparison__text strong { color: var(--ink); font-weight: 600; }
.comparison__text em,
.comparison__text i {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cobalt);
}

/* Award grid (component: award-grid) — recognition. */
.award-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.award-grid__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 26px;
  background: var(--canvas-card);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}
.award-grid__logo {
  width: 92px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.award-grid__logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.award-grid__wordmark {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.award-grid__title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 3px;
  letter-spacing: -0.005em;
}
.award-grid__issuer { font-size: 13px; color: var(--ink-mute); }

/* Standards / ARTP — cobalt-deep editorial band. */
.about-section--standards { background: var(--cobalt-deep); color: #fff; }
.about-standards {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: center;
}
.about-standards__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #b8c8ff;
  margin-bottom: 20px;
}
.about-standards__h2 {
  font-family: var(--font-sans);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 22px;
  color: #fff;
}
.about-standards__h2 em,
.about-standards__h2 i {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: #b8c8ff;
}
.about-standards__copy p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 18px;
}
.about-standards__partners {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  gap: 18px;
}
.about-standards__partners-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.about-standards__partner-logo {
  height: 40px;
  width: auto;
  display: block;
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
}
.about-standards__portrait {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r);
}
.about-standards__caption {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-serif);
  font-style: italic;
}
/* Photo placeholder sits on the dark band here — lighten its default treatment. */
.about-standards__visual .photo-placeholder {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (max-width: 980px) {
  .about-section { padding: 80px 0; }
  .about-hero { padding: 64px 0 48px; }
}
@media (max-width: 900px) {
  .about-origin { grid-template-columns: 1fr; gap: 16px; }
  .comparison__row { grid-template-columns: 1fr; }
  .comparison__cell--them {
    border-right: none;
    border-bottom: 1px dashed var(--line);
    padding-right: 0;
    padding-bottom: 20px;
  }
  .comparison__cell--us { padding-left: 0; padding-top: 20px; }
  .award-grid { grid-template-columns: 1fr; }
  .about-standards { grid-template-columns: 1fr; gap: 40px; }
}

/* --- 31. Dark CTA "next steps" box inside a blog article --------- */
/* In articles-with-sidebar (single posts) the dark CTA's "What happens after you
   book" box is squeezed into the narrow .article-body column. There only: drop the
   box heading + per-step descriptions (keep the numbered point titles), remove the
   divider lines, and tighten the vertical padding of the inner box, the list rows,
   and the overall panel so it isn't so tall. Pages have no .article-body, so
   they're unaffected. */
.article-body .dark-cta__next-heading { display: none; }
.article-body .dark-cta__next-body { display: none; }
.article-body .dark-cta { padding-top: 36px; padding-bottom: 36px; }
.article-body .dark-cta__next { padding-top: 14px; padding-bottom: 8px; }
.article-body .dark-cta__next-list li { border-top: 0; padding-top: 6px; padding-bottom: 6px; }
/* .article-body h2 rules would otherwise force the heading to ink + a 56px top
   margin; restore the on-dark colours and set an even 18px top/bottom margin. */
.article-body .dark-cta__heading { color: #fff; margin: 18px 0; }
.article-body .dark-cta__heading em { color: #B8C8FF; }
.article-body .dark-cta__next-text b { font-weight: 400; }

/* --- 32. 404 page ------------------------------------------------- */
.error-404 { padding: 128px 0; }
.error-404__h1 {
  font-family: var(--font-sans);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 20px 0;
}
.error-404__h1 em,
.error-404__h1 i {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cobalt);
}
.error-404__lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 520px;
}
.error-404__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}
@media (max-width: 980px) {
  .error-404 { padding: 80px 0; }
}