/* Psych of Sales: style.css. GENERATED by build.py: the :root block comes from brand.tokens.json (the only
   color literals in this file), then the font faces, then assets/css/site.css. Edit those, not this file. */
:root{
  --c-carbon: #111318;
  --c-carbon-2: #1C1F26;
  --c-carbon-3: #2E323B;
  --c-sheet: #FFFFFF;
  --c-bond: #F3F3F0;
  --c-rule: #DADBD6;
  --c-control: #85888F;
  --c-graphite: #4F5560;
  --c-ultramarine: #2438D0;
  --c-ultramarine-deep: #1A2AA6;
  --c-periwinkle: #DDE2FF;
  --c-wash: #E9ECFF;
  --c-highlighter: #FFE14A;
  --c-fog: #A9AEB8;
  --c-danger: #B3261E;
  --c-danger-wash: #FDECEA;
  --a-shadow-sm: rgba(17,19,24,0.06);
  --a-shadow-md: rgba(17,19,24,0.14);
  --a-shadow-sheet: rgba(17,19,24,0.32);
  --a-field-rule: rgba(255,255,255,0.24);
  --a-mark-soft: rgba(255,225,74,0.38);

  /* semantic roles: components use these */
  --s-surface-page: var(--c-sheet);
  --s-surface-raised: var(--c-sheet);
  --s-surface-alt: var(--c-bond);
  --s-surface-field: var(--c-ultramarine);
  --s-surface-field-raised: var(--c-ultramarine-deep);
  --s-surface-deep: var(--c-carbon);
  --s-surface-deep-raised: var(--c-carbon-2);
  --s-border-light: var(--c-rule);
  --s-border-deep: var(--c-carbon-3);
  --s-border-control: var(--c-control);
  --s-text-on-light: var(--c-carbon);
  --s-text-on-light-quiet: var(--c-graphite);
  --s-text-on-field: var(--c-sheet);
  --s-text-on-field-quiet: var(--c-periwinkle);
  --s-text-on-deep: var(--c-sheet);
  --s-text-on-deep-quiet: var(--c-fog);
  --s-accent-on-light: var(--c-ultramarine);
  --s-accent-on-light-hover: var(--c-ultramarine-deep);
  --s-accent-on-field: var(--c-sheet);
  --s-accent-on-field-hover: var(--c-highlighter);
  --s-accent-on-deep: var(--c-periwinkle);
  --s-action-bg: var(--c-ultramarine);
  --s-action-bg-hover: var(--c-ultramarine-deep);
  --s-action-text: var(--c-sheet);
  --s-action-bg-on-field: var(--c-sheet);
  --s-action-bg-on-field-hover: var(--c-highlighter);
  --s-action-text-on-field: var(--c-ultramarine);
  --s-action-text-on-field-hover: var(--c-carbon);
  --s-action-bg-on-deep: var(--c-sheet);
  --s-action-text-on-deep: var(--c-carbon);
  --s-focus-on-light: var(--c-ultramarine);
  --s-focus-on-field: var(--c-highlighter);
  --s-focus-on-deep: var(--c-highlighter);
  --s-mark: var(--c-highlighter);
  --s-mark-text: var(--c-carbon);
  --s-redact: var(--c-carbon);
  --s-reading: var(--c-wash);
  --s-check-pass: var(--c-ultramarine);
  --s-check-miss: var(--c-danger);
  --s-success-bg: var(--c-wash);
  --s-success-text: var(--c-ultramarine-deep);
  --s-error-bg: var(--c-danger-wash);
  --s-error-text: var(--c-danger);
  --s-logo-tile: var(--c-ultramarine);
  --s-logo-open: var(--c-sheet);
  --s-logo-close: var(--c-highlighter);
  --s-logo-ink-on-light: var(--c-carbon);
  --s-logo-accent-on-light: var(--c-ultramarine);
  --s-logo-tile-on-dark: var(--c-highlighter);
  --s-logo-open-on-dark: var(--c-carbon);
  --s-logo-close-on-dark: var(--c-ultramarine);
  --s-logo-ink-on-dark: var(--c-sheet);
  --s-logo-accent-on-dark: var(--c-highlighter);
  --s-logo-mono: var(--c-carbon);
  /* type, space and layout */
  --font-display: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Courier Prime", "Courier New", ui-monospace, Menlo, monospace;
  --type-display-1: clamp(2.75rem, 1rem + 5vw, 5.75rem);
  --type-display-1-line: 0.94;
  --type-display-1-weight: 800;
  --type-display-1-width: 118%;
  --type-display-1-tracking: -0.035em;
  --type-display-2: clamp(2.25rem, 1.2rem + 3.6vw, 4.375rem);
  --type-display-2-line: 0.98;
  --type-display-2-weight: 800;
  --type-display-2-width: 116%;
  --type-display-2-tracking: -0.03em;
  --type-display-3: clamp(1.875rem, 1.2rem + 2.3vw, 3.375rem);
  --type-display-3-line: 1.02;
  --type-display-3-weight: 780;
  --type-display-3-width: 112%;
  --type-display-3-tracking: -0.025em;
  --type-heading: clamp(1.1875rem, 1.1rem + 0.35vw, 1.4375rem);
  --type-heading-line: 1.25;
  --type-heading-weight: 700;
  --type-heading-width: 100%;
  --type-heading-tracking: -0.01em;
  --type-lead: clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem);
  --type-lead-line: 1.5;
  --type-lead-weight: 400;
  --type-lead-width: 100%;
  --type-body: 1.0625rem;
  --type-body-line: 1.65;
  --type-body-weight: 400;
  --type-body-width: 100%;
  --type-small: 0.875rem;
  --type-small-line: 1.5;
  --type-small-weight: 400;
  --type-small-width: 100%;
  --type-label: 0.78125rem;
  --type-label-line: 1.3;
  --type-label-weight: 700;
  --type-label-tracking: 0.12em;
  --type-record: 0.9375rem;
  --type-record-line: 1.6;
  --type-record-weight: 400;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --wide: 1240px;
  --measure: 66ch;
  --gutter: clamp(16px, 4.2vw, 56px);
  --header-h: 76px;
  --band: max(var(--gutter), calc((100% - var(--wide)) / 2));
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-mark: 640ms;
}

@font-face{font-family:"Mona Sans";font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url("../fonts/mona-sans-var.woff2") format("woff2")}
@font-face{font-family:"Mona Sans";font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url("../fonts/mona-sans-arrows-var.woff2") format("woff2");unicode-range:U+2192}
@font-face{font-family:"Mona Sans";font-style:italic;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url("../fonts/mona-sans-italic-var.woff2") format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/courier-prime-400.woff2") format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/courier-prime-700.woff2") format("woff2")}

/* Psych of Sales: the site stylesheet, v2 "On the record" (2026-10-25). build.py puts the token block and the font faces
   in front of this file. Colors appear here only as var(--c-*), var(--s-*) or var(--a-*): lint.py fails on any other color
   anywhere in the build. Surfaces set a small set of context variables (--bg, --fg, --accent ...) so links, buttons and focus
   rings follow the ground they sit on. Three grounds: light (sheet and bond), the field (ultramarine: heroes and call to
   action bands) and deep (carbon: the footer). Mobile first; the desktop navigation starts at 1080px. The v1 stylesheet is
   in ../../../_retired/brand-v1/site-css/. */

/* ---------------------------------------------------------------------------------------------- context */
:root {
  --bg: var(--s-surface-page);
  --fg: var(--s-text-on-light);
  --fg-quiet: var(--s-text-on-light-quiet);
  --accent: var(--s-accent-on-light);
  --accent-hover: var(--s-accent-on-light-hover);
  --focus: var(--s-focus-on-light);
  --line: var(--s-border-light);
  --btn-bg: var(--s-action-bg);
  --btn-fg: var(--s-action-text);
  --btn-bg-hover: var(--s-action-bg-hover);
  --btn-fg-hover: var(--s-action-text);
  --btn2-fg: var(--s-text-on-light);
  --btn2-hover-bg: var(--s-text-on-light);
  --btn2-hover-fg: var(--s-surface-page);
  --label: var(--s-accent-on-light);
  --raised: var(--s-surface-raised);
  --font-wide: var(--type-display-2-width);
  /* the spacing presets WordPress markup still names in a few inline styles (sizes only) */
  --wp--preset--spacing--20: 10px;
  --wp--preset--spacing--30: 20px;
  --wp--preset--spacing--40: 30px;
  --wp--preset--spacing--50: clamp(30px, 5vw, 50px);
  --wp--preset--spacing--60: clamp(30px, 7vw, 70px);
  --wp--preset--spacing--70: clamp(50px, 7vw, 90px);
}
.on-field, .ps-hero, .rec-hero, .cta-band, .rec-band {
  --bg: var(--s-surface-field);
  --fg: var(--s-text-on-field);
  --fg-quiet: var(--s-text-on-field-quiet);
  --accent: var(--s-accent-on-field);
  --accent-hover: var(--s-accent-on-field-hover);
  --focus: var(--s-focus-on-field);
  --line: var(--a-field-rule);
  --btn-bg: var(--s-action-bg-on-field);
  --btn-fg: var(--s-action-text-on-field);
  --btn-bg-hover: var(--s-action-bg-on-field-hover);
  --btn-fg-hover: var(--s-action-text-on-field-hover);
  --btn2-fg: var(--s-text-on-field);
  --btn2-hover-bg: var(--s-text-on-field);
  --btn2-hover-fg: var(--s-surface-field);
  --label: var(--s-mark);
  --raised: var(--s-surface-field-raised);
}
.on-deep, .site-footer {
  --bg: var(--s-surface-deep);
  --fg: var(--s-text-on-deep);
  --fg-quiet: var(--s-text-on-deep-quiet);
  --accent: var(--s-accent-on-deep);
  --accent-hover: var(--s-text-on-deep);
  --focus: var(--s-focus-on-deep);
  --line: var(--s-border-deep);
  --btn-bg: var(--s-action-bg-on-deep);
  --btn-fg: var(--s-action-text-on-deep);
  --btn-bg-hover: var(--s-mark);
  --btn-fg-hover: var(--s-mark-text);
  --label: var(--s-mark);
  --raised: var(--s-surface-deep-raised);
}

/* ------------------------------------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  background: var(--s-surface-page);
  color: var(--s-text-on-light);
  font-family: var(--font-text);
  font-size: var(--type-body);
  line-height: var(--type-body-line);
  font-weight: 400;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}
img, svg { max-width: 100%; }
img { height: auto; }
p, ul, ol, dl, figure, blockquote, h1, h2, h3, h4, h5, h6 { margin: 0; }
strong, b { font-weight: 650; }
::selection { background: var(--s-mark); color: var(--s-mark-text); }

h1, h2 { font-family: var(--font-display); text-wrap: balance; color: inherit; }
h1 {
  font-size: var(--type-display-2); line-height: var(--type-display-2-line); font-weight: var(--type-display-2-weight);
  font-stretch: var(--type-display-2-width); letter-spacing: var(--type-display-2-tracking);
}
h2 {
  font-size: var(--type-display-3); line-height: var(--type-display-3-line); font-weight: var(--type-display-3-weight);
  font-stretch: var(--type-display-3-width); letter-spacing: var(--type-display-3-tracking);
}
h3, h4, h5, h6 { font-family: var(--font-text); font-weight: 700; letter-spacing: var(--type-heading-tracking); font-stretch: 100%; }
h3 { font-size: var(--type-heading); line-height: var(--type-heading-line); }
h4, h5, h6 { font-size: 1.0625rem; line-height: 1.35; }
p, li { text-wrap: pretty; }

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 1px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100; padding: 12px 18px;
  background: var(--s-surface-deep); color: var(--s-text-on-deep); font-weight: 650; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* the record's voice: Courier capitals for eyebrows, tabs, labels */
.eyebrow, .rec-label {
  display: flex; align-items: center; gap: 10px; margin: 0;
  color: var(--label); font: var(--type-label-weight) var(--type-label)/var(--type-label-line) var(--font-mono);
  letter-spacing: var(--type-label-tracking); text-transform: uppercase;
}
.eyebrow::before {
  content: ""; flex: none; width: 11px; height: 11px; background: var(--s-mark);
}
.eyebrow--field { color: var(--s-mark); }
.eyebrow--field::before { background: var(--s-mark); }

/* the highlighter: one mark per view, on the words that matter. It is drawn as a background image so it can sweep in
   (site.js marks headings as they arrive; the hero's is already marked). The band runs from 18% to 83% of the inline box:
   Mona Sans's content area is 1.41em tall (ascender 1.09, descender 0.32), so this covers the cap height plus 0.10em above
   and 0.07em below, 0.90em in all, which stays inside a 0.94em display line and never paints over the line above. */
mark, .hl {
  color: var(--s-mark-text); background-color: transparent;
  background-image: linear-gradient(transparent 18%, var(--s-mark) 18%, var(--s-mark) 83%, transparent 83%);
  background-repeat: no-repeat; background-size: 100% 100%; background-position: 0 0;
  padding: 0 0.07em; margin: 0 -0.03em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hl-swipe .hl { transition: background-size var(--t-mark) var(--ease); }
.hl-pending .hl { background-size: 0% 100%; }

.redact { display: inline-block; width: 5.2em; height: 0.82em; background: var(--s-redact); vertical-align: -0.06em; }

/* --------------------------------------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--s-surface-page);
  border-bottom: 1px solid var(--s-border-light);
}
.header-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; margin-right: auto; color: var(--s-text-on-light); text-decoration: none; padding: 6px 0; }
.brand-logo { display: block; height: 27px; width: auto; }
@media (min-width: 600px) { .brand-logo { height: 31px; } }

.nav-toggle {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--s-text-on-light); cursor: pointer;
}
.js .nav-toggle { display: inline-flex; }
.nav-toggle .icon-close, .menu-open .nav-toggle .icon-open { display: none; }
.menu-open .nav-toggle .icon-close { display: block; }

.site-nav { width: 100%; }
.js .site-nav { display: none; }
.js .menu-open .site-nav {
  display: block; position: fixed; z-index: 49; left: 0; right: 0; top: var(--header-h); bottom: 0; overflow-y: auto;
  background: var(--s-surface-page); border-top: 1px solid var(--s-border-light);
  padding: 8px var(--gutter) 48px;
}
html.menu-locked { overflow: hidden; }

.nav-list, .sub-list { list-style: none; margin: 0; padding: 0; }
.nav-item { border-bottom: 1px solid var(--s-border-light); }
.nav-link, .sub-link {
  display: block; padding: 14px 0; color: var(--s-text-on-light); text-decoration: none;
  font-weight: 600; font-size: 1.125rem; line-height: 1.3;
}
.sub-link { padding: 10px 0 10px 2px; font-size: 1.0625rem; font-weight: 450; }
.nav-link[aria-current], .sub-link[aria-current="page"], .sub-overview[aria-current="page"] {
  color: var(--s-accent-on-light); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 2px;
}
.nav-link:hover, .sub-link:hover { color: var(--s-accent-on-light); }
.sub-toggle { display: none; background: transparent; border: 0; color: inherit; font: inherit; }
.sub-title, .sub-group, .sub-tier-title {
  margin: 18px 0 2px; color: var(--s-text-on-light-quiet);
  font: 700 0.75rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.sub-group { margin-top: 12px; }
.sub-tier-title { color: var(--s-text-on-light); }
.sub-overview {
  display: block; margin: 10px 0 2px; padding: 12px 14px; background: var(--s-surface-alt); color: var(--s-text-on-light);
  font-weight: 650; font-size: 1rem; text-decoration: none; border-left: 3px solid var(--s-accent-on-light);
}
.sub-overview:hover { color: var(--s-accent-on-light); }
.sub-panel { padding-bottom: 12px; }
.nav-cta { border-bottom: 0; padding-top: 24px; }
.nav-cta .btn { width: 100%; }

@media (min-width: 1080px) {
  .header-bar { flex-wrap: nowrap; }
  .js .nav-toggle, .nav-toggle { display: none; }
  .site-nav, .js .site-nav { display: block; width: auto; }
  .nav-list { display: flex; align-items: center; gap: 2px; }
  .nav-item { border: 0; position: relative; }
  .nav-item.mobile-only { display: none; }
  .nav-link, .sub-toggle {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--s-text-on-light); font: 550 0.96875rem/1.2 var(--font-text); cursor: pointer;
  }
  .nav-link:hover, .sub-toggle:hover { color: var(--s-accent-on-light); }
  .nav-link[aria-current] { text-decoration: none; box-shadow: inset 0 -2px 0 var(--s-accent-on-light); border-radius: 0; }
  .has-sub.is-current > .sub-toggle { color: var(--s-accent-on-light); box-shadow: inset 0 -2px 0 var(--s-accent-on-light); border-radius: 0; }
  .sub-toggle .chev { transition: transform var(--t-fast) var(--ease); }
  .sub-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .sub-title { display: none; }
  .sub-panel {
    display: none; position: absolute; z-index: 60; top: calc(100% + 12px); left: 0; min-width: 300px; padding: 10px;
    background: var(--s-surface-raised); border: 1px solid var(--s-border-light); border-top: 3px solid var(--s-accent-on-light);
    box-shadow: 0 22px 48px var(--a-shadow-md), 0 2px 6px var(--a-shadow-sm);
  }
  .sub-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; }
  .has-sub.is-open > .sub-panel { display: block; }
  html:not(.js) .has-sub:hover > .sub-panel { display: block; }
  .sub-link { padding: 9px 12px; font-size: 0.96875rem; font-weight: 550; }
  .sub-link:hover { background: var(--s-reading); }
  .sub-link[aria-current="page"] { background: var(--s-reading); text-decoration: none; }
  .sub-group { margin: 12px 12px 4px; }
  .sub-overview { margin: 10px 0 0; }
  /* the Services menu at full size: Diagnose, Fix and Run side by side, anchored to the right of the header */
  .header-bar { position: relative; }
  .nav-item.has-tiers { position: static; }
  .sub-panel--tiers { left: auto; right: var(--gutter); top: calc(100% - 8px); width: min(940px, calc(100% - 2 * var(--gutter))); padding: 14px; }
  .sub-panel--tiers::before { top: -26px; height: 26px; }
  .has-sub.is-open > .sub-panel--tiers, html:not(.js) .has-sub:hover > .sub-panel--tiers { display: block; }
  .sub-tiers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
  .sub-tier { min-width: 0; padding: 0 10px; }
  .sub-tier + .sub-tier { border-left: 1px solid var(--s-border-light); }
  .sub-tier-title { margin: 6px 12px 8px; color: var(--s-text-on-light-quiet); }
  .sub-tier .sub-group { margin: 12px 12px 4px; }
  .nav-cta { padding: 0 0 0 14px; }
  .nav-cta .btn { width: auto; min-height: 44px; padding: 9px 18px; font-size: 0.96875rem; }
}

/* ---------------------------------------------------------------------- draft strip, demo banner, breadcrumbs */
.draft-strip {
  background: var(--s-surface-alt); color: var(--s-text-on-light-quiet); border-bottom: 1px solid var(--s-border-light);
  font: 700 0.75rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 0;
}
.draft-strip__stamp { display: inline-block; margin-right: 10px; padding: 2px 8px; background: var(--s-mark); color: var(--s-mark-text); }
.demo-banner {
  background: var(--s-error-bg); color: var(--s-error-text); border-bottom: 1px solid var(--s-error-text);
  font: 700 0.8125rem/1.4 var(--font-mono); letter-spacing: 0.04em; padding: 10px 0;
}
.breadcrumbs { color: var(--s-text-on-light-quiet); }
.has-hero .breadcrumbs { background: var(--s-surface-field); color: var(--s-text-on-field-quiet); --focus: var(--s-focus-on-field); }
.breadcrumbs ol {
  list-style: none; margin: 0; padding: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0;
  font: 700 0.75rem/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li + li::before { content: "/"; margin: 0 10px; opacity: 0.8; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.has-hero .breadcrumbs a { color: var(--s-text-on-field); }
.breadcrumbs a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------------------------- page structure */
.pos-main { display: block; margin: 0; padding: 0; }
.pos-main > .wp-block-group, .pos-main > .wp-block-group > .wp-block-group, .pos-main .entry-content { margin: 0; padding: 0; max-width: none; }
.pos-main .entry-content > *, .pos-main > .ps-hero, .page-body > *, .article > *, .rec-home > *, .tier-nav { padding-inline: var(--band); }

/* --------------------------------------------------------------------------------------- buttons */
.wp-block-buttons, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wp-block-button { margin: 0; }
.wp-block-button__link, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px; padding: 13px 24px; border: 1.5px solid transparent; border-radius: var(--radius-sm);
  font: 650 1rem/1.2 var(--font-text); font-stretch: 100%; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link, .btn-primary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover, .btn-primary:hover {
  background: var(--btn-bg-hover); color: var(--btn-fg-hover); border-color: var(--btn-bg-hover); text-decoration: none;
}
.is-style-outline > .wp-block-button__link, .btn-secondary { background: transparent; color: var(--btn2-fg); border-color: currentColor; }
.is-style-outline > .wp-block-button__link:hover, .btn-secondary:hover { background: var(--btn2-hover-bg); color: var(--btn2-hover-fg); border-color: var(--btn2-hover-bg); text-decoration: none; }
.arrow-link { font-weight: 650; white-space: nowrap; }
.arrow-link::after { content: " \2192"; }

/* ---------------------------------------------------------------------------------- the home hero */
.rec-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: clamp(40px, 5vw, 72px); align-items: center;
  background: var(--bg); color: var(--fg);
  padding-block: clamp(44px, 6.5vw, 104px) clamp(60px, 7.5vw, 120px);
}
@media (min-width: 1024px) { .rec-hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); } }
.rec-hero__copy > * + * { margin-top: 26px; }
.rec-hero__title {
  font-size: var(--type-display-2); line-height: var(--type-display-2-line); font-weight: var(--type-display-2-weight);
  font-stretch: var(--type-display-2-width); letter-spacing: var(--type-display-2-tracking); text-wrap: initial;
}
.rec-hero__title > span { display: block; }
.rec-hero__title .hl { padding: 0 0.06em; margin: 0 -0.06em; }
.rec-hero__lead { max-width: 36em; font-size: var(--type-lead); line-height: var(--type-lead-line); color: var(--fg); }
.rec-hero .actions { margin-top: 36px; }
.rec-ladder {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font: 700 0.8125rem/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-quiet);
}
.rec-ladder a { color: var(--fg-quiet); text-decoration: none; }
.rec-ladder a:hover { color: var(--s-mark); text-decoration: underline; }
/* a quiet texture on the field: the guillemets, very large, ultramarine on ultramarine */
.ps-hero::after, .rec-band::after, .cta-band::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: var(--s-surface-field-raised);
  -webkit-mask: url("../brand/mark.svg") center / contain no-repeat; mask: url("../brand/mark.svg") center / contain no-repeat;
}

/* --------------------------------------------------------------------- the exhibit: a transcript sheet */
.exhibit { position: relative; margin: 0; max-width: 600px; justify-self: end; width: 100%; }
.exhibit__sheet {
  position: relative; background: var(--s-surface-raised); color: var(--s-text-on-light);
  padding: 30px clamp(18px, 2.4vw, 28px) 22px; box-shadow: 0 30px 60px var(--a-shadow-sheet), 0 2px 0 var(--a-shadow-sm);
  --fg: var(--s-text-on-light); --fg-quiet: var(--s-text-on-light-quiet); --accent: var(--s-accent-on-light); --focus: var(--s-focus-on-light);
}
.exhibit__sheet::before {
  content: ""; position: absolute; z-index: -1; inset: 10px -10px -10px 10px; background: var(--s-surface-raised);
  box-shadow: 0 18px 40px var(--a-shadow-md); transform: rotate(1.4deg);
}
.exhibit__tab {
  position: absolute; top: -15px; left: clamp(18px, 2.4vw, 28px); margin: 0; padding: 7px 11px;
  background: var(--s-mark); color: var(--s-mark-text);
  font: 700 0.78125rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.exhibit__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 11px;
  border-bottom: 2px solid var(--s-text-on-light);
  font: 700 0.75rem/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.exhibit__wave { position: relative; height: 42px; margin: 16px 0 12px; color: var(--s-accent-on-light); }
.wave { display: block; width: 100%; height: 100%; }
.exhibit__pin {
  position: absolute; top: -18px; left: 81.8%; transform: translateX(-50%); padding: 2px 6px;
  background: var(--s-text-on-light); color: var(--s-surface-raised);
  font: 700 0.625rem/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.exhibit__pin::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 52px; transform: translateX(-50%); background: var(--s-text-on-light);
}
.exhibit__note {
  margin: 14px 0 0; padding: 4px 0 4px 12px; border-left: 3px solid var(--s-accent-on-light);
  color: var(--s-accent-on-light); font-size: 0.96875rem; line-height: 1.45;
}
.exhibit__note strong { color: var(--s-text-on-light); }
.exhibit__caption { margin-top: 18px; color: var(--fg-quiet); font: 400 0.8125rem/1.45 var(--font-mono); }
@media (max-width: 1023px) { .exhibit { justify-self: start; } }

/* the transcript. Narrow: a script layout, the time and the speaker over the line. Wide: four columns, like a court
   transcript. */
.transcript { list-style: none; margin: 0; padding: 0; font: 400 var(--type-record)/var(--type-record-line) var(--font-mono); }
.tline {
  display: grid; grid-template-columns: 2.2em auto minmax(0, 1fr); grid-template-areas: "no ts sp" "no tx tx" "no note note";
  column-gap: 0.75em; row-gap: 2px; padding: 5px 0; align-items: baseline;
}
.tline__no { grid-area: no; color: var(--s-text-on-light-quiet); font-size: 0.86em; }
.tline__ts { grid-area: ts; color: var(--s-text-on-light-quiet); font-size: 0.86em; }
.tline__sp { grid-area: sp; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.86em; }
.tline__tx { grid-area: tx; }
.tline--warn .tline__tx { text-decoration: underline wavy var(--s-accent-on-light); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.transcript .hl { background-image: linear-gradient(transparent 4%, var(--s-mark) 4%, var(--s-mark) 96%, transparent 96%); padding: 1px 4px; margin: 0 -4px; }
.transcript--compact { margin-top: 2px; font-size: 0.875rem; }
@media (min-width: 1024px) {
  .transcript--compact .tline { grid-template-columns: 1.7em 3.1em 4.3em minmax(0, 1fr); grid-template-areas: "no ts sp tx"; column-gap: 0.5em; padding: 3px 0; }
}
@media (min-width: 720px) {
  .transcript--full .tline { grid-template-columns: 2.4em 3.9em 5.8em minmax(0, 1fr); grid-template-areas: "no ts sp tx" ". . . note"; column-gap: 0.6em; }
}

/* the scorecard: the four checks, each mark with its word beside it */
.scorecard { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 2px solid var(--s-text-on-light); display: grid; gap: 8px 18px; }
@media (min-width: 480px) { .scorecard { grid-template-columns: 1fr 1fr; } }
.scorecard__item { display: flex; align-items: center; gap: 9px; min-width: 0; font: 700 0.75rem/1.25 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.scorecard__name { min-width: 0; }
.scorecard__verdict { margin-left: auto; font: 650 0.75rem/1 var(--font-text); letter-spacing: 0.02em; text-transform: none; }
.scorecard__mark { position: relative; flex: none; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 2px; }
.exhibit .scorecard__verdict { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-pass .scorecard__mark, .is-pass .scorecard__verdict { color: var(--s-check-pass); }
.is-miss .scorecard__mark, .is-miss .scorecard__verdict { color: var(--s-check-miss); }
.is-pass .scorecard__mark::after {
  content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 9px;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg);
}
.is-miss .scorecard__mark::before, .is-miss .scorecard__mark::after {
  content: ""; position: absolute; left: 6px; top: 1px; width: 2.5px; height: 12px; background: currentColor; transform: rotate(45deg);
}
.is-miss .scorecard__mark::after { transform: rotate(-45deg); }

/* ------------------------------------------------------------------------------------ home sections */
.rec-section { position: relative; padding-block: clamp(64px, 8.5vw, 128px); background: var(--bg); color: var(--fg); }
.rec-head { max-width: 860px; }
.rec-head > * + * { margin-top: 22px; }
.rec-head h2 { max-width: 20ch; }
.rec-intro { max-width: 38em; font-size: var(--type-lead); line-height: var(--type-lead-line); color: var(--fg); }
.rec-after { margin-top: 40px; max-width: 46em; font-size: 1.125rem; }

/* the read-along: the signature. Without JavaScript, or under reduced motion, it is the finished, marked transcript. */
.rec-readalong { background: var(--s-surface-alt); }
.readalong {
  position: relative; max-width: 1080px; margin: clamp(40px, 5vw, 64px) 0 0; background: var(--s-surface-raised);
  box-shadow: 0 1px 0 var(--a-shadow-sm), 0 24px 60px var(--a-shadow-sm);
}
.readalong__bar {
  position: sticky; top: var(--header-h); z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 12px clamp(16px, 2.6vw, 32px); background: var(--s-surface-deep); color: var(--s-text-on-deep);
  font: 700 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.readalong__label { color: var(--s-text-on-deep-quiet); white-space: nowrap; }
.readalong__label .redact { background: var(--s-border-deep); width: 4.4em; }
.readalong__wave { position: relative; display: block; height: 28px; color: var(--s-border-deep); }
.readalong__played {
  position: absolute; inset: 0; color: var(--s-text-on-deep);
  clip-path: inset(0 calc((1 - var(--rd-progress, 1)) * 100%) 0 0);
}
.readalong__wave::after {
  content: ""; position: absolute; top: -4px; bottom: -4px; left: 81.8%; width: 3px; background: var(--s-mark);
}
.readalong__time { font-size: 0.875rem; color: var(--s-text-on-deep); font-variant-numeric: tabular-nums; }
.transcript--full { padding: 18px 0 8px; font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); }
.transcript--full .tline {
  position: relative; padding: 11px clamp(16px, 2.6vw, 32px); border-bottom: 1px solid var(--s-surface-alt);
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.transcript--full .tline--end .tline__tx { color: var(--s-text-on-light-quiet); }
.tnote {
  grid-area: note; display: block; margin: 10px 0 4px; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--s-accent-on-light); color: var(--s-accent-on-light);
  font: italic 500 0.96875rem/1.45 var(--font-text); font-stretch: 100%;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.tnote__tag {
  display: inline-block; margin-right: 6px; font: 700 0.6875rem/1.4 var(--font-mono); font-style: normal;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-accent-on-light);
}
.tnote--leak .tnote__tag { padding: 1px 6px; background: var(--s-mark); color: var(--s-mark-text); }
@media (min-width: 1024px) {
  .transcript--full .tline { grid-template-columns: 2.4em 3.9em 5.8em minmax(0, 1fr) minmax(220px, 300px); grid-template-areas: "no ts sp tx note"; }
  .tnote { margin: 0 0 0 18px; }
}
.readalong__fix { margin: 8px clamp(16px, 2.6vw, 32px) 0; padding: 22px 0 6px; border-top: 2px solid var(--s-text-on-light); }
.readalong__fixlabel { color: var(--s-accent-on-light); font: 700 0.75rem/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.readalong__fixline {
  margin-top: 10px; color: var(--s-accent-on-light); font: italic 500 clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem)/1.4 var(--font-text);
}
.readalong__fixline .tline__sp { margin-right: 10px; color: var(--s-text-on-light); font-family: var(--font-mono); font-style: normal; font-size: 0.75em; }
.scorecard--wide { margin: 22px clamp(16px, 2.6vw, 32px) 0; }
@media (min-width: 900px) {
  .scorecard--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scorecard--wide .scorecard__item { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; }
  .scorecard--wide .scorecard__verdict { grid-column: 2; margin: 4px 0 0; }
}
.readalong__caption { margin: 22px clamp(16px, 2.6vw, 32px) 0; padding-bottom: 28px; color: var(--s-text-on-light-quiet); font: 400 0.8125rem/1.5 var(--font-mono); }
/* live mode (site.js adds .is-live): the lines read themselves as the reader scrolls */
.readalong.is-live .tline:not(.is-read) { color: var(--s-text-on-light-quiet); }
.readalong.is-live .tline.is-reading { background: var(--s-reading); box-shadow: inset 3px 0 0 var(--s-accent-on-light); }
.readalong.is-live .tline--leak .hl { transition: background-size var(--t-mark) var(--ease); }
.readalong.is-live .tline--leak:not(.is-read) .hl { background-size: 0% 100%; }
.readalong.is-live.is-done .scorecard--wide .is-miss .scorecard__mark { background: var(--s-error-bg); }

/* the evidence index: six places a deal slips */
.evidence { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; border-top: 2px solid var(--s-text-on-light); }
.evidence__row { display: grid; gap: 8px 24px; padding: 24px 0; border-bottom: 1px solid var(--s-border-light); align-items: baseline; }
@media (min-width: 960px) { .evidence__row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.25fr); padding: 30px 0; } }
.evidence__tab {
  display: inline-grid; place-items: center; width: 34px; height: 34px; background: var(--s-mark); color: var(--s-mark-text);
  font: 700 1rem/1 var(--font-mono);
}
.evidence__name {
  font-family: var(--font-display); font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); line-height: 1.05;
  font-weight: 780; font-stretch: 112%; letter-spacing: -0.02em;
}
.evidence__q { font-size: 1.125rem; line-height: 1.45; }
.evidence__how { color: var(--fg-quiet); font-size: 1rem; line-height: 1.5; }
.evidence__how strong { color: var(--fg); }

/* the ladder: Diagnose, Fix, Run */
.rec-ladder-section { background: var(--s-surface-alt); }
.ladder { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: 18px; counter-reset: none; }
@media (min-width: 960px) { .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ladder__step {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.6vw, 36px);
  background: var(--s-surface-raised); border: 1px solid var(--s-border-light); border-top: 4px solid var(--s-text-on-light);
}
.ladder__step:first-child { border-top-color: var(--s-accent-on-light); }
.ladder__step:first-child::before {
  content: "Start here"; position: absolute; top: -17px; right: 20px; padding: 6px 10px; background: var(--s-mark); color: var(--s-mark-text);
  font: 700 0.6875rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.ladder__no { color: var(--s-text-on-light-quiet); font: 700 0.8125rem/1 var(--font-mono); letter-spacing: 0.12em; }
.ladder__name {
  font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.875rem); line-height: 1; font-weight: 800;
  font-stretch: 116%; letter-spacing: -0.03em;
}
.ladder__line { color: var(--s-accent-on-light); font: italic 500 1.25rem/1.3 var(--font-text); }
.ladder__links { list-style: none; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--s-border-light); display: grid; gap: 8px; }
.ladder__links a { font-weight: 650; }
.ladder__links li > a:only-child::after, .ladder__links li > a:first-child:last-child::after { content: " \2192"; }
.rec-ladder-section > .actions { margin-top: 36px; }

/* rules we keep: the one dark beat in the middle of the home page */
.rec-rules {
  --bg: var(--s-surface-deep); --fg: var(--s-text-on-deep); --fg-quiet: var(--s-text-on-deep-quiet); --accent: var(--s-accent-on-deep);
  --accent-hover: var(--s-text-on-deep); --focus: var(--s-focus-on-deep); --line: var(--s-border-deep); --label: var(--s-mark);
  background: var(--bg); color: var(--fg);
}
@media (min-width: 1024px) {
  .rec-rules { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .rec-rules > .rec-head { position: sticky; top: calc(var(--header-h) + 40px); }
}
.rules { list-style: none; margin: 32px 0 0; padding: 0; counter-reset: rule; border-top: 2px solid var(--fg); }
@media (min-width: 1024px) { .rules { margin-top: 0; } }
.rules li {
  counter-increment: rule; position: relative; padding: 22px 0 22px 64px; border-bottom: 1px solid var(--line);
  font-size: 1.125rem; line-height: 1.55;
}
.rules li::before {
  content: counter(rule, decimal-leading-zero); position: absolute; left: 0; top: 24px;
  color: var(--label); font: 700 0.875rem/1.3 var(--font-mono); letter-spacing: 0.08em;
}

/* who it's for */
.rec-who { background: var(--s-surface-alt); }
.chips { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips a {
  display: inline-flex; align-items: center; min-height: 46px; padding: 10px 16px; border: 1.5px solid var(--s-text-on-light);
  border-radius: var(--radius-sm); color: var(--s-text-on-light); background: var(--s-surface-raised); font-weight: 600; text-decoration: none;
}
.chips a:hover { background: var(--s-accent-on-light); border-color: var(--s-accent-on-light); color: var(--s-action-text); }

/* the call to action band (home, hub) and the migrated pages' closing sections */
.rec-band, .cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--bg); color: var(--fg); }
.rec-band { padding-block: clamp(72px, 9vw, 136px); }
.rec-band > * { position: relative; max-width: 760px; }
.rec-band > * + * { margin-top: 24px; }
.rec-band h2 { font-size: var(--type-display-2); line-height: var(--type-display-2-line); font-weight: 800; font-stretch: 116%; letter-spacing: -0.03em; max-width: 16ch; }
.rec-band h2 span { display: block; font-family: var(--font-text); font-style: italic; font-weight: 420; font-stretch: 100%; letter-spacing: -0.02em; color: var(--fg-quiet); }
.rec-band p { font-size: var(--type-lead); line-height: var(--type-lead-line); max-width: 36em; }
.rec-band .actions { margin-top: 36px; }
.rec-band::after, .cta-band::after { right: -4%; top: 50%; width: min(42vw, 560px); aspect-ratio: 1.6; transform: translateY(-50%); }
@media (max-width: 899px) { .rec-band::after, .cta-band::after { display: none; } }

.rec-talent { padding-block: 26px 30px; background: var(--s-surface-alt); border-top: 1px solid var(--s-border-light); font-size: 1rem; }

/* ----------------------------------------------------------------- inner pages: the hero and sections */
.ps-hero {
  position: relative; overflow: hidden; isolation: isolate; border-top: 0;
  background: var(--bg); color: var(--fg);
  padding-block: clamp(40px, 5.5vw, 80px) clamp(56px, 7vw, 104px);
}
.has-hero .breadcrumbs + .pos-main .ps-hero, .has-hero .breadcrumbs + .pos-main .entry-content > .ps-hero:first-child { padding-top: clamp(26px, 3.6vw, 48px); }
.ps-hero > * { position: relative; z-index: 1; margin: 0; }
.ps-hero > * + * { margin-top: 22px; }
.ps-hero h1 { max-width: 18ch; color: var(--fg); }
.ps-hero > p { max-width: 60ch; color: var(--fg); }
.ps-hero > h1 + p, .ps-hero > .lead { font-size: var(--type-lead); line-height: var(--type-lead-line); margin-top: 26px; }
.ps-hero > p > em:only-child { font-style: italic; }
.ps-hero > p:last-child:has(> em:only-child) { color: var(--fg-quiet); font-size: 1rem; max-width: 58ch; }
.ps-hero > .wp-block-buttons, .ps-hero > .actions { margin-top: 34px; }
.ps-hero > .eyebrow + h1 { margin-top: 20px; }
.ps-hero::after { right: -5%; bottom: -24%; width: min(40vw, 520px); aspect-ratio: 1.6; opacity: 0.7; }
@media (max-width: 899px) { .ps-hero::after { display: none; } }

.ps-section, .section {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--line);
  background: var(--bg); color: var(--fg);
}
.ps-hero + .ps-section, .ps-hero + .page-body > .section:first-child, .ps-hero + .page-body > .tier-nav, .cta-band + *, .ps-section + .cta-band { border-top: 0; }
.ps-section > *, .section > * { margin: 0; }
.ps-section > * + *, .section > * + * { margin-top: 16px; }
.ps-section > h2 + *, .section > h2 + * { margin-top: 26px; }
.ps-section > h2, .section > h2 { max-width: 22ch; }
.ps-section > p, .section > p, .ps-section li, .section li { max-width: var(--measure); }
.ps-section > h3, .section > h3 { margin-top: 34px; }

/* card grids sit on the bond band */
.ps-section:has(> .wp-block-columns), .section:has(> .cards), .section.index-section, .section.related { background: var(--s-surface-alt); }

/* the editorial split: a text section puts its heading in the left column on wide screens */
@media (min-width: 1024px) {
  .ps-section:not(.ps-hero):not(.cta-band):not(:has(> .wp-block-columns, > .ps-card, > .wp-block-query, > .wp-block-buttons, > h2 ~ h2, form)),
  .section.faq {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: start;
  }
  .ps-section:not(.ps-hero):not(.cta-band):not(:has(> .wp-block-columns, > .ps-card, > .wp-block-query, > .wp-block-buttons, > h2 ~ h2, form)) > h2,
  .section.faq > h2 {
    grid-column: 1; grid-row: 1 / span 40; position: sticky; top: calc(var(--header-h) + 36px);
  }
  .ps-section:not(.ps-hero):not(.cta-band):not(:has(> .wp-block-columns, > .ps-card, > .wp-block-query, > .wp-block-buttons, > h2 ~ h2, form)) > :not(h2),
  .section.faq > :not(h2) { grid-column: 2; }
  .ps-section:not(.ps-hero):not(.cta-band):not(:has(> .wp-block-columns, > .ps-card, > .wp-block-query, > .wp-block-buttons, > h2 ~ h2, form)) > h2 + *,
  .section.faq > h2 + * { margin-top: 0; }
}

/* the closing call to action on migrated pages: a field band that leads into the footer */
.cta-band { padding-block: clamp(56px, 7vw, 104px); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band > h2 { max-width: 18ch; font-size: var(--type-display-2); line-height: var(--type-display-2-line); font-weight: 800; font-stretch: 116%; }
.cta-band > p { max-width: 52ch; font-size: var(--type-lead); line-height: var(--type-lead-line); }

/* the home page's old closing note (still on migrated pages that carry one) joins the dark ending */
.pos-main .entry-content > .wp-block-group:not(.ps-section):not(.ps-hero) {
  --bg: var(--s-surface-deep); --fg: var(--s-text-on-deep); --fg-quiet: var(--s-text-on-deep-quiet); --accent: var(--s-accent-on-deep);
  --accent-hover: var(--s-text-on-deep); --focus: var(--s-focus-on-deep); --line: var(--s-border-deep);
  padding-block: 28px 32px; background: var(--bg); color: var(--fg); border-top: 1px solid var(--line); font-size: 0.96875rem;
}

/* -------------------------------------------------------------------------------------- lists, text */
.pos-main .wp-block-list, .pos-main ul:not([class]), .ticks { list-style: none; padding-left: 1.7em; }
.pos-main .wp-block-list > li, .pos-main ul:not([class]) > li, .ticks > li { position: relative; margin-top: 0.6em; }
.pos-main .wp-block-list > li::before, .pos-main ul:not([class]) > li::before, .ticks > li::before {
  content: ""; position: absolute; left: -1.45em; top: 0.6em; width: 0.42em; height: 0.42em;
  border-top: 2.2px solid var(--accent); border-right: 2.2px solid var(--accent); transform: rotate(45deg);
}
.pos-main ol:not([class]) { padding-left: 1.5em; }
.pos-main ol:not([class]) > li { margin-top: 0.55em; padding-left: 0.2em; }
.pos-main ol:not([class]) > li::marker { color: var(--accent); font-family: var(--font-mono); font-weight: 700; }
.has-small-font-size { font-size: 0.875rem; }
.has-large-font-size { font-size: 1.25rem; }
.has-x-large-font-size { font-size: 1.75rem; }
.has-text-align-right { text-align: right; }

/* -------------------------------------------------------------------------------------------- cards */
.wp-block-columns, .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.wp-block-column { min-width: 0; }
.wp-block-column > .ps-card { height: 100%; }
.ps-card, .card {
  background: var(--s-surface-raised); color: var(--s-text-on-light);
  border: 1px solid var(--s-border-light); border-top: 3px solid var(--s-text-on-light); border-radius: 0;
  padding: clamp(22px, 2.4vw, 32px); box-shadow: 0 1px 2px var(--a-shadow-sm);
  --bg: var(--s-surface-raised); --fg: var(--s-text-on-light); --fg-quiet: var(--s-text-on-light-quiet);
  --accent: var(--s-accent-on-light); --accent-hover: var(--s-accent-on-light-hover); --focus: var(--s-focus-on-light);
  --btn-bg: var(--s-action-bg); --btn-fg: var(--s-action-text); --btn-bg-hover: var(--s-action-bg-hover); --btn-fg-hover: var(--s-action-text);
  --btn2-fg: var(--s-text-on-light); --btn2-hover-bg: var(--s-text-on-light); --btn2-hover-fg: var(--s-surface-page);
}
.ps-card > *, .card > * { margin: 0; }
.ps-card > * + *, .card > * + * { margin-top: 12px; }
.ps-card h3, .card h3 { font-size: var(--type-heading); }
.ps-card > h3 + *, .card > h3 + * { margin-top: 12px; }
.ps-price { font-size: 1.0625rem; color: var(--fg-quiet); line-height: 1.3; }
.ps-price strong {
  font: 800 clamp(2rem, 1.6rem + 1.4vw, 2.75rem)/1 var(--font-display); font-stretch: 116%; color: var(--fg); letter-spacing: -0.03em;
}

/* ---------------------------------------------------------------------------------------------- forms */
.ps-section:has(form) > .ps-card { max-width: 900px; padding: clamp(22px, 3.2vw, 44px); box-shadow: 0 14px 36px var(--a-shadow-sm); }
.ps-form { margin: 0; }
.ps-form-grid { display: grid; gap: 20px; }
.ps-form-row { display: grid; gap: 20px; }
@media (min-width: 720px) {
  .ps-form-row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-form-row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ps-form-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ps-form label { font: 600 0.9375rem/1.35 var(--font-text); color: var(--s-text-on-light); }
.ps-form input:not([type="hidden"]), .ps-form select, .ps-form textarea {
  width: 100%; min-height: 50px; margin: 0; padding: 12px 14px;
  font: 400 1rem/1.4 var(--font-text); color: var(--s-text-on-light);
  background-color: var(--s-surface-raised); border: 1px solid var(--s-border-control); border-radius: var(--radius-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ps-form textarea { min-height: 116px; resize: vertical; }
.ps-form ::placeholder { color: var(--s-text-on-light-quiet); opacity: 1; }
.ps-form input:hover, .ps-form select:hover, .ps-form textarea:hover { border-color: var(--s-text-on-light); }
.ps-form input:focus, .ps-form select:focus, .ps-form textarea:focus {
  outline: 2px solid var(--s-focus-on-light); outline-offset: 1px; border-color: var(--s-focus-on-light);
}
.ps-form select {
  appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--s-text-on-light-quiet) 50%), linear-gradient(135deg, var(--s-text-on-light-quiet) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.ps-field-help { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--s-text-on-light-quiet); }
.ps-form-actions { margin-top: 28px; }
.ps-form-actions .wp-block-button, .ps-form-actions .wp-block-button__link { width: 100%; }
@media (min-width: 720px) { .ps-form-actions .wp-block-button, .ps-form-actions .wp-block-button__link { width: auto; } }
.ps-form-submit { min-width: 240px; }
.ps-form-message { margin: 16px 0 0; max-width: none; font-size: 0.96875rem; line-height: 1.5; color: var(--s-text-on-light); }
.ps-form-message:not(:empty) { padding: 12px 16px; border-left: 3px solid currentColor; }
.ps-form-message.pos-error { background: var(--s-error-bg); color: var(--s-error-text); }
.ps-form-message.pos-success { background: var(--s-success-bg); color: var(--s-success-text); }
.ps-form-message.pos-loading { background: var(--s-surface-alt); color: var(--s-text-on-light); }

/* ------------------------------------------------------------- start page, free tools (2026-10-26) */
/* inline field errors, the fieldset and the door choices of the Start my study form */
.ps-field-error { margin: 0; font-size: 0.875rem; line-height: 1.45; font-weight: 600; color: var(--s-error-text); }
.ps-form input[aria-invalid="true"] { border-color: var(--s-error-text); box-shadow: 0 0 0 1px var(--s-error-text); }
.ps-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ps-fieldset > legend { padding: 0; margin: 0 0 10px; font: 600 0.9375rem/1.35 var(--font-text); color: var(--s-text-on-light); }
.ps-fieldset > .ps-field-error { margin-top: 10px; }
.ps-choices { display: grid; gap: 10px; }
.ps-form .ps-choice {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer;
  background: var(--s-surface-raised); border: 1px solid var(--s-border-control); border-radius: var(--radius-sm);
  font: 400 1rem/1.4 var(--font-text); color: var(--s-text-on-light);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.ps-form .ps-choice input[type="radio"] {
  flex: none; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; cursor: pointer; accent-color: var(--s-accent-on-light);
}
.ps-form .ps-choice:hover { border-color: var(--s-text-on-light); }
.ps-form .ps-choice:has(input:checked) { border-color: var(--s-accent-on-light); background: var(--s-reading); box-shadow: inset 0 0 0 1px var(--s-accent-on-light); }
.ps-form .ps-choice:has(input:focus-visible) { outline: 2px solid var(--s-focus-on-light); outline-offset: 2px; }
.ps-fieldset[aria-invalid="true"] .ps-choice { border-color: var(--s-error-text); }
.ps-choice__text { display: grid; gap: 2px; min-width: 0; }
.ps-choice__where { font: 700 0.75rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-text-on-light-quiet); }
.start-card { max-width: 640px; padding: clamp(22px, 3.2vw, 40px); box-shadow: 0 14px 36px var(--a-shadow-sm); }
.start-fine { margin-top: 18px; }
.start-done {
  padding: 18px 20px; background: var(--s-success-bg); color: var(--s-success-text); border-left: 3px solid currentColor;
  font-size: 1.0625rem; line-height: 1.5;
}
.start-done p { margin: 0; max-width: none; }
.start-done:focus-visible { outline: 2px solid var(--s-focus-on-light); outline-offset: 2px; }

/* the calculators: a form card, then the result panel (written into the live region by assets/js/tools.js) */
.tool-card { max-width: 860px; padding: clamp(22px, 3.2vw, 40px); box-shadow: 0 14px 36px var(--a-shadow-sm); }
.tool-actions { margin-top: 28px; }
.tool-actions .btn { min-width: 150px; }
.tool-week { margin: 0; padding: 0; border: 0; min-width: 0; }
.tool-week > legend { padding: 0; margin: 0 0 14px; font: 700 0.75rem/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-text-on-light-quiet); }
.tool-week > .ps-form-field + .ps-form-field { margin-top: 20px; }
.tool-result {
  max-width: 860px; margin-top: 28px; padding: clamp(22px, 3vw, 36px);
  background: var(--s-surface-alt); border: 1px solid var(--s-border-light); border-top: 3px solid var(--s-accent-on-light);
}
.tool-result > h3 { font-size: var(--type-heading); }
.tool-result > * + * { margin-top: 14px; }
.tool-empty { margin: 0; color: var(--s-text-on-light-quiet); }
.tool-lede { margin: 0; max-width: 60ch; font-size: 1.0625rem; line-height: 1.55; }
.tool-small { margin: 0; max-width: 60ch; font-size: 0.875rem; line-height: 1.5; color: var(--s-text-on-light-quiet); }
.tool-note { margin: 0; padding-top: 14px; border-top: 1px solid var(--s-border-light); font-size: 0.875rem; line-height: 1.5; color: var(--s-text-on-light-quiet); }
.tool-empty { max-width: 70ch; }
/* the gaps between the blocks of a result (these selectors outrank the margin resets above) */
.tool-result .tool-body > * + * { margin-top: 18px; }
.tool-result .tool-body > .tool-small + .tool-small { margin-top: 8px; }
.tool-result > .tool-note { margin-top: 24px; }
.tool-flag {
  margin: 0; padding: 14px 16px; background: var(--s-surface-raised); border-left: 4px solid var(--s-accent-on-light);
  font-weight: 600; line-height: 1.5;
}
.tool-flag--warn { background: var(--s-error-bg); border-left-color: var(--s-error-text); }
.tool-stats { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (min-width: 520px) { .tool-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool-stat { padding: 14px 16px; background: var(--s-surface-raised); border: 1px solid var(--s-border-light); }
.tool-stat dt { font: 700 0.75rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-text-on-light-quiet); }
.tool-stat dd { display: grid; gap: 4px; margin: 6px 0 0; }
.tool-stat__value { font: 800 clamp(1.5rem, 1.25rem + 1vw, 2rem)/1.05 var(--font-display); font-stretch: 112%; letter-spacing: -0.02em; color: var(--s-text-on-light); }
.tool-stat__detail { font-size: 0.875rem; line-height: 1.4; color: var(--s-text-on-light-quiet); }
.tool-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--s-surface-raised); border: 1px solid var(--s-border-light); font-size: 0.9375rem; line-height: 1.35; }
.tool-table th, .tool-table td { padding: 12px 14px; border-bottom: 1px solid var(--s-border-light); text-align: right; vertical-align: top; overflow-wrap: break-word; }
.tool-table thead th { border-bottom: 2px solid var(--s-text-on-light); font: 700 0.6875rem/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--s-text-on-light-quiet); }
.tool-table tbody th { font-weight: 600; color: var(--s-text-on-light); }
.tool-table th:first-child { width: 34%; text-align: left; }
.tool-table tbody tr:last-child > * { border-bottom: 0; }
.tool-change__pct { display: block; font-weight: 700; }
.tool-change__amount { display: block; color: var(--s-text-on-light-quiet); }
/* on a phone each row becomes a small card: the measure, then the three values, each with its own name */
@media (max-width: 599px) {
  .tool-table, .tool-table tbody, .tool-table tr, .tool-table th, .tool-table td { display: block; }
  .tool-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tool-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 14px 14px 12px; border-bottom: 1px solid var(--s-border-light); }
  .tool-table tbody tr:last-child { border-bottom: 0; }
  .tool-table tbody th:first-child { grid-column: 1 / -1; width: auto; padding: 0; border: 0; text-align: left; }
  .tool-table td { padding: 0; border: 0; text-align: left; }
  .tool-table td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font: 700 0.625rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--s-text-on-light-quiet);
  }
}
.tool-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tool-funnel .tool-funnel__step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; max-width: none; padding: 14px 16px; background: var(--s-surface-raised); border: 1px solid var(--s-border-light); }
.tool-funnel .tool-funnel__step.is-biggest { border-left: 4px solid var(--s-accent-on-light); padding-left: 13px; }
.tool-funnel__name { font-weight: 650; }
.tool-funnel__rate { font: 800 1.5rem/1 var(--font-display); font-stretch: 112%; letter-spacing: -0.02em; text-align: right; }
.tool-funnel__detail { grid-column: 1 / -1; font-size: 0.875rem; line-height: 1.45; color: var(--s-text-on-light-quiet); }

/* "What your numbers say": the bridge from a result to the paid study. It stays hidden until tools.js has a result to show it for
   (the display rules for [hidden] are explicit because nothing here may switch a hidden case back on) */
.tool-bridge {
  max-width: 860px; margin-top: 20px; padding: clamp(22px, 3vw, 36px);
  background: var(--s-surface-raised); border: 1px solid var(--s-border-light); border-top: 3px solid var(--s-text-on-light);
}
.tool-bridge[hidden], .tool-bridge__case[hidden] { display: none; }
.tool-bridge > h3 { font-size: var(--type-heading); }
.tool-bridge > * + * { margin-top: 14px; }
.tool-bridge__case > * { margin: 0; }
.tool-bridge__case > * + * { margin-top: 20px; }
.tool-bridge__text { max-width: 60ch; font-size: 1.0625rem; line-height: 1.55; }
.tool-bridge__next { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--s-border-light); }
.tool-bridge__label { margin: 0; font: 700 0.75rem/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-text-on-light-quiet); }
.tool-bridge__links { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 28px; }
.tool-bridge__links .arrow-link { display: inline-block; padding-block: 8px; white-space: normal; }

/* ------------------------------------------------------------------------------------ questions (details) */
details.ps-card, details.card { padding: 0; border-top-width: 1px; }
.faq-list { display: grid; gap: 10px; }
.ps-section > details + details { margin-top: 10px; }
details > summary {
  position: relative; list-style: none; cursor: pointer; padding: 20px 60px 20px 24px;
  font: 650 1.0625rem/1.45 var(--font-text); color: var(--fg);
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: ""; position: absolute; right: 26px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--t-fast) var(--ease);
}
details[open] > summary::after { transform: translateY(-25%) rotate(225deg); }
details[open] { border-left: 3px solid var(--s-accent-on-light); }
details > summary strong { font-weight: 650; }
details > :not(summary) { margin: 0; padding-inline: 24px; }
details > :not(summary) + :not(summary) { margin-top: 12px; }
details > :last-child:not(summary) { padding-bottom: 22px; }
details > ul:not([class]), details > .wp-block-list { padding-left: calc(24px + 1.7em); }

/* ----------------------------------------------------------------------------------------------- 404 */
.ps-404 { min-height: 56vh; }
.ps-404-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px !important; }
.ps-404-links a {
  display: inline-flex; align-items: center; min-height: 50px; padding: 12px 20px; border: 1.5px solid currentColor;
  border-radius: var(--radius-sm); color: var(--fg); font-weight: 650; text-decoration: none;
}
.ps-404-links a:hover { background: var(--s-mark); border-color: var(--s-mark); color: var(--s-mark-text); }

/* ----------------------------------------------------------------- the services hub and growth templates */
.page-hero .lead { max-width: 60ch; }
.tier-nav { position: sticky; top: var(--header-h); z-index: 4; background: var(--s-surface-page); border-bottom: 1px solid var(--s-border-light); }
.tier-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(8px, 3vw, 40px); overflow-x: auto; }
.tier-nav a {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 16px 2px; color: var(--s-text-on-light); text-decoration: none;
  font-weight: 700; font-size: 1.0625rem; white-space: nowrap; box-shadow: inset 0 -3px 0 transparent;
}
.tier-nav a span { color: var(--s-text-on-light-quiet); font: 700 0.75rem/1 var(--font-mono); letter-spacing: 0.12em; }
.tier-nav a:hover { color: var(--s-accent-on-light); box-shadow: inset 0 -3px 0 var(--s-accent-on-light); }
.tier { scroll-margin-top: calc(var(--header-h) + 64px); }
.tier--fix { background: var(--s-surface-alt); }
.exhibits { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: 30px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.exhibit-card {
  position: relative; padding: 34px clamp(20px, 2.4vw, 30px) 26px; background: var(--s-surface-raised);
  border: 1px solid var(--s-border-light); box-shadow: 0 1px 2px var(--a-shadow-sm);
}
.exhibit-card > * + * { margin-top: 10px; }
.exhibit-card__tab {
  position: absolute; top: -13px; left: clamp(20px, 2.4vw, 30px); padding: 6px 10px; background: var(--s-mark); color: var(--s-mark-text);
  font: 700 0.6875rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.exhibit-card h3 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 780; font-stretch: 110%; line-height: 1.1; letter-spacing: -0.015em; }
/* the Diagnose tier holds four cards (the three doors and the Buyer Study): two by two, so none is left alone on a row */
@media (min-width: 640px) { .tier--diagnose .exhibits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-pending {
  display: inline-block; padding: 4px 8px; border: 1px dashed var(--s-border-control); color: var(--s-text-on-light-quiet);
  font: 700 0.75rem/1.4 var(--font-mono); letter-spacing: 0.04em;
}
.deliverable { display: grid; gap: 18px; margin-top: 36px; }
@media (min-width: 900px) { .deliverable { grid-template-columns: 1fr 1fr; } }
.deliverable > div { padding: clamp(22px, 2.6vw, 34px); background: var(--s-surface-alt); border-top: 3px solid var(--s-text-on-light); }
.deliverable > div:first-child { border-top-color: var(--s-accent-on-light); }
.deliverable h3 { font-size: var(--type-heading); }
.deliverable .ticks { margin: 14px 0 0; }
.tier > .actions { margin-top: 36px; }
.offers { list-style: none; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.offer { padding: clamp(22px, 2.4vw, 30px); background: var(--s-surface-raised); border: 1px solid var(--s-border-light); border-top: 3px solid var(--s-text-on-light); scroll-margin-top: calc(var(--header-h) + 64px); }
.offer > * + * { margin-top: 10px; }
.offer h3 a { color: var(--s-text-on-light); text-decoration-color: var(--s-accent-on-light); }
.offer h3 a::after { content: " \2192"; color: var(--s-accent-on-light); }
.offer:target { border-top-color: var(--s-accent-on-light); box-shadow: 0 0 0 3px var(--s-mark); }
.related-list, .index-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.related-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.related-link {
  display: block; height: 100%; padding: 18px 20px; background: var(--s-surface-raised); color: var(--s-text-on-light);
  border: 1px solid var(--s-border-light); border-top: 3px solid var(--s-text-on-light); font-weight: 650; text-decoration: none;
}
.related-link:hover { border-top-color: var(--s-accent-on-light); color: var(--s-accent-on-light); text-decoration: none; }
.index-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.index-card { position: relative; }
.index-title { font-family: var(--font-text); font-weight: 700; font-size: var(--type-heading); line-height: 1.3; max-width: none; font-stretch: 100%; letter-spacing: 0; }
.index-title a { color: var(--fg); text-decoration: none; }
.index-title a::after { content: ""; position: absolute; inset: 0; }
.index-card:hover { border-top-color: var(--s-accent-on-light); }
.index-card:hover .index-title a { color: var(--s-accent-on-light); }
.index-meta { color: var(--fg-quiet); font: 400 0.8125rem/1.4 var(--font-mono); letter-spacing: 0.04em; }
.index-section > .index-grid { margin-top: 0; }
.has-body .page-body > .rec-band { padding-inline: var(--band); }

/* ------------------------------------------------------------------------------------ the article page */
.article-head { padding-block: clamp(36px, 5vw, 72px) clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.article-head > * + * { margin-top: 20px; }
.article-head h1 { max-width: 22ch; }
.dek { font-size: var(--type-lead); line-height: 1.55; max-width: 62ch; color: var(--fg); }
.byline { color: var(--fg-quiet); font-size: 0.9375rem; }
.sep { margin-inline: 6px; }
.article-layout { display: grid; gap: 40px; padding-block: clamp(36px, 5vw, 64px); }
.toc { border-left: 2px solid var(--line); padding-left: 18px; }
.toc-title { color: var(--fg-quiet); font: 700 0.75rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.toc ol { list-style: none; margin: 12px 0 0; padding: 0; }
.toc li { margin-top: 8px; font-size: 0.9375rem; line-height: 1.4; }
.toc a { color: var(--fg); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
@media (min-width: 1024px) {
  .article-layout.has-toc { grid-template-columns: 240px minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); align-items: start; }
  .toc { position: sticky; top: calc(var(--header-h) + 32px); }
}
.prose { max-width: var(--measure); font-size: 1.0625rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.8em; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); }
.prose h3 { margin-top: 1.6em; }
.prose > p:first-child { font-size: var(--type-lead); }
.prose blockquote { padding-left: 24px; border-left: 3px solid var(--accent); }
.prose blockquote p { font: italic 500 1.375rem/1.45 var(--font-text); color: var(--fg); }
.table-wrap { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.prose caption { caption-side: top; text-align: left; padding-bottom: 10px; color: var(--fg-quiet); font: 700 0.8125rem/1.4 var(--font-mono); letter-spacing: 0.04em; }
.prose th, .prose td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose thead th { border-bottom: 2px solid var(--fg); font-weight: 650; }
.article-foot { padding-block: 0 clamp(48px, 6vw, 80px); }
.author-card { max-width: var(--measure); border-top: 1px solid var(--line); padding-top: 24px; }
.author-card > * + * { margin-top: 6px; }
.author-name { font-weight: 650; }
.author-name a { color: var(--fg); }
.author-role { color: var(--fg-quiet); font-size: 0.9375rem; }
.article-foot .related { margin-top: 48px; padding-inline: 0; border-top: 0; background: transparent; padding-block: 0; }

/* ------------------------------------------------------------------ the Sales Psychology Library (2026-10-26) */
/* An article is the hero on the field (the series label as its eyebrow, the H1, the standfirst, the Updated date), the text in one
   column, the door and newsletter boxes on a bond band, then the Sources. Tables and the chart are "record sheets": Courier
   capitals for labels and titles, a heavy rule under the title, hairlines between rows, nothing but tokens. The one highlighter
   mark a view may carry is the hero's eyebrow; nothing below uses the highlighter. */
.ps-hero > .lib-date { margin-top: 18px; max-width: none; color: var(--fg-quiet); font-size: var(--type-small); line-height: var(--type-small-line); }
.tpl-library .ps-hero h1 { max-width: 22ch; }
.page-body > .lib-article { padding-inline: 0; }
.lib-prose {
  max-width: var(--measure); margin: clamp(40px, 5.5vw, 80px) var(--band) clamp(48px, 6vw, 88px);
  font-size: var(--type-body); line-height: var(--type-body-line);
}
.lib-prose > * + * { margin-top: 1.1em; }
.lib-prose h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); line-height: 1.1; }
.lib-prose h3 { margin-top: 1.9em; }
.lib-prose h2 + *, .lib-prose h3 + * { margin-top: 0.8em; }
.lib-prose > .actions { margin-top: 1.6em; }
.lib-prose > .lib-record { margin-top: 2em; }
.lib-prose > .lib-record + * { margin-top: 1.7em; }

/* the record sheets: a title in Courier capitals over a heavy rule, then the rows */
.lib-record { margin: 0; }
.lib-record caption, .lib-record__title {
  margin: 0; padding: 0 0 11px; border-bottom: 2px solid var(--s-text-on-light); text-align: left; color: var(--s-text-on-light);
  font: 700 0.75rem/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.lib-record figcaption { margin-top: 12px; max-width: 72ch; color: var(--s-text-on-light-quiet); font: 400 0.8125rem/1.5 var(--font-mono); }
.lib-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.lib-table th, .lib-table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--s-border-light); text-align: left; vertical-align: baseline; overflow-wrap: break-word; }
.lib-table td { color: var(--s-text-on-light); }
.lib-table th {
  color: var(--s-text-on-light-quiet); font: 700 0.75rem/1.45 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.lib-table tbody th { width: 36%; }
/* a table with a header row (four columns, five or more) sizes its columns to what is in them: a fixed layout hands every column an
   equal share, which is wrong for a table of short times and one-word answers. Words never break inside a cell (overflow-wrap
   break-word keeps each column at least as wide as its longest word), and the phone sizes below keep five columns inside 328px. */
.lib-table--cols { table-layout: auto; }
.lib-table--cols tbody th { width: auto; }
.lib-table--cols thead th, .lib-table--cols thead td { padding-top: 10px; padding-bottom: 8px; font-size: 0.6875rem; letter-spacing: 0.06em; vertical-align: bottom; }
.lib-table--cols tbody td:last-child { color: var(--s-accent-on-light); font-weight: 650; }
@media (max-width: 599px) {
  .lib-table { font-size: 0.9375rem; }
  .lib-table th, .lib-table td { padding: 10px 10px 10px 0; }
  .lib-table th { letter-spacing: 0.04em; }
  .lib-table tbody th { width: 38%; }
  .lib-table--cols { font-size: 0.875rem; }
  .lib-table--cols th, .lib-table--cols td { padding-right: 6px; }
  .lib-table--cols thead th, .lib-table--cols thead td { font-size: 0.625rem; letter-spacing: 0.02em; }
  .lib-table--cols tbody th { font-size: 0.6875rem; letter-spacing: 0.02em; }
}

/* a picture of a chart (the Figure notation): the site's own copy of the PNG, scaled to the column, with a hairline so its light
   ground reads as a sheet on the page; the caption sits under it like every figure's */
.lib-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--s-border-light); }

/* the chart: an inline SVG drawn in percentages of its width, so its text keeps its size from 320px up; bars are ultramarine */
.lib-chart__svg { display: block; width: 100%; margin-top: 6px; overflow: visible; }
.lib-chart__label { fill: currentColor; color: var(--s-text-on-light); font: 500 1rem var(--font-text); }
.lib-chart__value { fill: currentColor; color: var(--s-text-on-light); font: 700 1rem var(--font-mono); }
.lib-chart__bar { fill: var(--c-ultramarine); }
.lib-chart__rule { stroke: var(--s-border-light); stroke-width: 1; }

/* the door box and the newsletter box: the site's card on a bond band */
.lib-next { padding: clamp(40px, 5vw, 72px) var(--band); background: var(--s-surface-alt); border-block: 1px solid var(--s-border-light); }
.lib-boxes { display: grid; gap: 18px; max-width: var(--wide); }
@media (min-width: 800px) { .lib-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lib-boxes--single { grid-template-columns: minmax(0, 640px); }
.tpl-library-index .lib-next { background: var(--s-surface-page); border-top: 0; }    /* the index's cards sit on bond, so its box sits on the page */
.lib-box { display: flex; flex-direction: column; align-items: flex-start; }
.lib-box > * { margin: 0; }
.lib-box > * + * { margin-top: 12px; }
.lib-box > h2, .lib-box > h3 {
  font: 700 var(--type-heading)/var(--type-heading-line) var(--font-text); font-stretch: 100%; letter-spacing: var(--type-heading-tracking);
}
.lib-box p { max-width: 46ch; }
.lib-box .actions { margin-top: auto; padding-top: 20px; }
.lib-box--door { border-top-color: var(--s-accent-on-light); }

/* the sources: the article's last section */
.lib-sources { padding: clamp(40px, 5vw, 72px) var(--band) clamp(56px, 7vw, 96px); }
.lib-sources > * { max-width: var(--measure); }
.lib-sources h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); line-height: 1.1; }
.lib-sources ol { margin-top: 1.2em; font-size: 0.9375rem; line-height: 1.55; }
.lib-sources li { overflow-wrap: anywhere; }

/* the index: a card per article (the series label without the eyebrow's mark, the title, the standfirst, the Updated date) */
.lib-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 460px)); }
.lib-card > * + * { margin-top: 12px; }
.lib-card__dek { color: var(--s-text-on-light); font-size: 1rem; line-height: 1.55; }
.lib-card .index-meta { margin-top: 16px; }

/* ---------------------------------------------------------------------------------------------- footer */
.site-footer { background: var(--bg); color: var(--fg); padding-top: clamp(56px, 7vw, 104px); }
.footer-main { display: block; }
/* the signature: the lockup set large, the way the record closes */
.footer-brand {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 48px;
  padding-bottom: clamp(36px, 4.5vw, 56px); margin-bottom: clamp(36px, 4.5vw, 56px); border-bottom: 1px solid var(--line);
}
.footer-logo { display: inline-block; max-width: 100%; }
.footer-logo img { display: block; height: clamp(40px, 6.8vw, 96px); width: auto; max-width: 100%; }
.footer-tagline { margin: 0; max-width: 32ch; color: var(--fg-quiet); font-size: 1rem; }
.footer-cols { columns: 3 190px; column-gap: 32px; }
.footer-col { break-inside: avoid; margin-bottom: 36px; }
.footer-heading {
  margin: 0 0 14px; color: var(--s-mark);
  font: 700 0.75rem/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li + li { margin-top: 10px; }
.footer-col a { color: var(--fg); font-size: 0.9375rem; line-height: 1.4; text-decoration: none; }
.footer-col a:hover { color: var(--accent); text-decoration: underline; }
.footer-col a[aria-current="page"] { color: var(--accent); }
.footer-contact p { margin: 0 0 10px; color: var(--fg-quiet); font-size: 0.9375rem; line-height: 1.45; }
.footer-contact a { color: var(--accent); text-decoration: underline; }
.footer-base {
  display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 56px; padding-block: 24px 36px;
  border-top: 1px solid var(--line); color: var(--fg-quiet); font: 400 0.8125rem/1.5 var(--font-mono);
}
.footer-base p { margin: 0; }
.footer-base .ps-cookie-note { flex-basis: 100%; }
.footer-base a { color: var(--fg); }

/* ------------------------------------------------------------------------------------------- motion, print */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .site-footer, .breadcrumbs, .demo-banner, .draft-strip, .nav-toggle, .ps-form-actions, .readalong__bar { display: none !important; }
  .ps-hero, .cta-band, .rec-hero, .rec-band { padding-block: 24px; }
}