/* ==========================================================================
   SumnerOne — Master CSS
   Foundational tokens + the component system that has landed across the
   site. A new page can link this stylesheet, write semantic markup using
   the classes below, and get a brand-correct page without copying any
   CSS from reference pages.

   STRUCTURE
   ─────────
    1. Tokens                  (:root)
    2. Reset & base
    3. Type primitives         (.s1-* — opt-in legacy)
    4. Layout                  (.container, .container--narrow, .container--reading)
    5. Editorial kicker        (universal em-dash glyph for all eyebrow labels)
    6. Card fold accent        (.has-fold-corner — document-fold corner pseudo-element)
    7. Buttons                 (.btn-primary, .btn-primary--cyan, .btn-primary--saffron, .btn-secondary, .btn-nav, .cta-group)
    8. Trust bar marquee       (.trust-bar)
    9. Utility                 (.tbd-tag, .visually-hidden)
   10. Responsive
   11. Form inputs             (.form-field, .input, .select, .textarea, .checkbox, .radio)
   12. Badges                  (.badge, .badge--navy/cyan/neutral/saffron/success)
   13. Saffron button variant  (.btn-primary--saffron)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS — Fonts (Webflow build — Google Fonts only)
   -------------------------------------------------------------------------- */

/* DM Sans — one family across the site: display, subhead, body, eyebrows,
   editorial. The Cormorant Garamond serif accent was retired 2026-07-20
   (read thin as running text); editorial now shares the DM Sans stack.
   Local fonts/*.ttf paths from the design-system repo are intentionally
   removed from this build because Webflow's hosted environment can't
   resolve relative font paths; DM Sans is loaded from Google Fonts. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..800;1,9..40,300..800&display=swap");

:root {
  /* ----- Color — Primary ------------------------------------------------ */
  --s1-navy:         #00395C;
  --s1-cyan:         #00B3E0;
  --s1-navy-hover:   #00294A;
  --s1-cyan-hover:   #009EC7;

  /* ----- Color — Neutrals ---------------------------------------------- */
  --s1-parchment:    #F7F4EF;
  --s1-light-gray:   #F0F4F8;
  --s1-mid-gray:     #8A9BAE;   /* decorative strokes/icons ONLY — never text (2.85:1) */
  --s1-muted:        #52677A;   /* minimum-contrast text gray (5.9:1 white / 5.4:1 parchment) */
  --s1-cyan-deep:    #00799C;   /* eyebrow/label cyan on light grounds (4.5:1+) — DL v2.1 */
  --s1-dark-text:    #1A2A3A;
  --s1-white:        #FFFFFF;

  /* ----- Color — Restricted (campaign / sustainability only) ---------- */
  --s1-saffron:      #F7A947;
  --s1-apple-green:  #8DC63F;

  /* ----- Gradient tones ------------------------------------------------ */
  --s1-grad-deep:    #5BC2E7;
  --s1-grad-light:   #99D6EA;
  --s1-gradient:     linear-gradient(135deg, #00395C 0%, #00B3E0 100%);
  --s1-gradient-h:   linear-gradient(90deg,  #00395C 0%, #00B3E0 100%);

  /* ----- Navy Wash overlay (for World B photography) ------------------ */
  --s1-navy-wash:    rgba(0, 57, 92, 0.50);
  --s1-navy-wash-soft: rgba(0, 57, 92, 0.40);
  --s1-navy-wash-strong: rgba(0, 57, 92, 0.55);

  /* ----- Inverse foreground (text on navy ground) --------------------- */
  --on-navy-1:       rgba(255, 255, 255, 0.88);
  --on-navy-2:       rgba(255, 255, 255, 0.80);
  --on-navy-3:       rgba(255, 255, 255, 0.72);
  --on-navy-mute:    rgba(255, 255, 255, 0.48);
  --border-on-navy:  rgba(255, 255, 255, 0.16);
  --surface-on-navy: rgba(255, 255, 255, 0.04);
  --surface-on-navy-hover: rgba(255, 255, 255, 0.07);
  --border-on-navy-card:   rgba(255, 255, 255, 0.12);

  /* ----- Semantic — surfaces ------------------------------------------ */
  --bg-primary:      var(--s1-white);
  --bg-warm:         var(--s1-parchment);
  --bg-cool:         var(--s1-light-gray);
  --bg-inverse:      var(--s1-navy);
  --bg-card:         var(--s1-white);

  /* ----- Semantic — foreground ---------------------------------------- */
  --fg-1:            var(--s1-dark-text);
  --fg-2:            var(--s1-muted);   /* was mid-gray (AA fail) — Outcomes DL v2.1 */
  --fg-3:            #B9C3D0;
  --fg-inverse:      var(--s1-white);
  --fg-accent:       var(--s1-cyan);
  --fg-brand:        var(--s1-navy);

  /* ----- Semantic — borders / dividers -------------------------------- */
  --border-1:        #E4EAF0;
  --border-2:        #D4DCE6;
  --border-inverse:  rgba(255, 255, 255, 0.16);
  --line:            rgba(0, 57, 92, 0.14);  /* DL v3: navy-tinted hairline (mockup system) */
  --line-dark:       rgba(0, 57, 92, 0.22);

  /* ----- Type families — DM Sans owns everything. The Cormorant Garamond
     editorial accent (DL v2.1 D2) was retired 2026-07-20; --font-editorial
     is kept as a semantic alias now pointing at the DM Sans stack --------- */
  --font-display:    "DM Sans", "Calibri", system-ui, -apple-system, sans-serif;
  --font-editorial:  "DM Sans", "Calibri", system-ui, -apple-system, sans-serif;
  --font-subhead:    "DM Sans", "Aptos", "Calibri", system-ui, -apple-system, sans-serif;
  --font-body:       "DM Sans", "Calibri", system-ui, -apple-system, sans-serif;
  --font-mono:       ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ----- Type scale — Display (Outcomes DL v2.1 H1 fix) ---------------- */
  --display-xl:      clamp(1.9rem, 1.2rem + 2.4vw, 2.75rem);  /* H1 */
  --display-lg:      clamp(1.6rem, 1.1rem + 1.8vw, 2.25rem);  /* narrative H1 */
  --display-md:      clamp(1.4rem, 1rem + 1.4vw, 1.9rem);     /* H2 */
  --display-sm:      1.5rem;

  /* ----- Type scale — Subhead (DM Sans) ------------------------------- */
  --subhead-lg:      22px;
  --subhead-md:      18px;
  --subhead-sm:      15px;
  --label:           13px;
  --eyebrow:         12px;

  /* ----- Type scale — Body (DM Sans) ---------------------------------- */
  --body-lg:         18px;
  --body-md:         16px;
  --body-sm:         14px;
  --caption:         12px;

  /* ----- DM Sans bold display range (24-32px) ------------------------- */
  --strong-xl:       32px;
  --strong-lg:       28px;
  --strong-md:       24px;
  --strong-metric:   48px;

  /* ----- Line heights ------------------------------------------------- */
  --lh-display:      1.1;    /* Outcomes DL v2.1 (was 1.05) */
  --lh-subhead:      1.3;
  --lh-body:         1.55;
  --lh-tight:        1.15;

  /* ----- Letter spacing ----------------------------------------------- */
  --track-display:   -0.02em;  /* Outcomes DL v2.1 (was -0.01em) */
  --track-eyebrow:   0.08em;
  --track-label:     0.04em;
  --track-tight:     -0.02em;

  /* ----- Spacing scale ------------------------------------------------ */
  --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;

  /* ----- Layout ------------------------------------------------------- */
  --container-max:        1280px;
  --container-narrow-max:  880px;
  --container-reading-max: 760px;
  --container-pad:        var(--space-8);
  --container-pad-mobile: var(--space-5);
  --header-height:        72px;
  --stagebar-height:      49px;  /* playbook stage bar, the second sticky layer */

  /* ----- Radii — Outcomes DL v2.1, role-based --------------------------- */
  --radius-xs:       4px;     /* form fields, badges, table cells */
  --radius-sm:       8px;     /* tags, small cards (was 2px) */
  --radius-md:       12px;    /* dropdown panels (was 4px) */
  --radius-lg:       16px;    /* cards, hero panels (was 8px) */
  --radius-pill:     999px;

  /* ----- Shadows — Outcomes DL v2.1 soft depth --------------------------- */
  --shadow-sm:       0 1px 2px rgba(0, 57, 92, 0.06);
  --shadow-card:     0 10px 30px rgba(0, 57, 92, 0.06);  /* DL v3 row 5: resting card shadow (mockup) */
  /* DL v3 (Liz): the homepage's navy→cyan-tinted gradient, promoted to a
     shared hero ground. White text is 7.5:1 even at the lightest stop. */
  --s1-gradient-hero: linear-gradient(135deg, #00263F 0%, #00395C 45%, #0A5A82 100%);
  --shadow-md:       0 10px 30px rgba(0, 57, 92, 0.10);
  --shadow-lg:       0 18px 50px rgba(0, 57, 92, 0.14);
  --shadow-navy:     0 16px 48px rgba(0, 57, 92, 0.28);

  /* ----- Motion ------------------------------------------------------- */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:        140ms;
  --dur-base:        220ms;
  --dur-slow:        360ms;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Sticky chrome offset for in-page anchors. .site-header is position:sticky,
   so without this an anchor jump lands with its heading hidden underneath.

   DERIVED, not hardcoded, deliberately. This was set to a flat 96px on
   3 August, then the playbook stage bar added ~49px of additional sticky
   chrome and the number silently became wrong again: 122px of chrome against
   96px of padding put every heading 26px behind the bar. Adding a second
   sticky layer must not require remembering to update a third number. */
html {
  scroll-behavior: smooth;
  --scroll-offset: calc(var(--header-height) + var(--space-5));
  scroll-padding-top: var(--scroll-offset);
}
/* Playbook pages carry a second sticky layer under the header. */
html:has(.playbook-stages) {
  --scroll-offset: calc(var(--header-height) + var(--stagebar-height) + var(--space-5));
}

body {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  /* DL v3 row 4 (Liz, 2026-07-05): FLAT BAND RHYTHM. Page ground is flat
     white; sections carry their own flat tinted bands (white / parchment /
     cool / navy) separated by --line hairlines. The one gradient moment
     left is the hero (mockup-authentic). The v2.1 fixed body gradient is
     retired. */
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
button { font: inherit; }

/* ==========================================================================
   3. TYPE PRIMITIVES — .s1-* classes (legacy, opt-in)
   ========================================================================== */

.s1-type {
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.s1-type h1, .s1-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--fg-brand);
  margin: 0 0 var(--space-5);
}
.s1-type h2, .s1-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--fg-brand);
  margin: 0 0 var(--space-4);
}
.s1-type h3, .s1-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display-md);
  line-height: var(--lh-tight);
  color: var(--fg-brand);
  margin: 0 0 var(--space-4);
}
.s1-type .s1-h3-strong, .s1-h3-strong {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--display-sm);
  line-height: var(--lh-tight);
  color: var(--fg-brand);
  margin: 0 0 var(--space-4);
}
.s1-type h4, .s1-h4 {
  font-family: var(--font-subhead);
  font-weight: 600;
  font-size: var(--subhead-lg);
  line-height: var(--lh-subhead);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
.s1-type h5, .s1-h5 {
  font-family: var(--font-subhead);
  font-weight: 600;
  font-size: var(--subhead-md);
  line-height: var(--lh-subhead);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}
.s1-type h6, .s1-h6 {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--subhead-sm);
  line-height: var(--lh-subhead);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}
.s1-type p, .s1-p {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

/* Editorial kicker — canonical eyebrow class. The .eyebrow alias is the
   recommended class on new pages. DM Sans bold (Cormorant reads too thin
   at 13px). The cyan kicker bar is what differentiates this from a
   generic-UI eyebrow (DL v3 row 1). */
.s1-eyebrow,
.eyebrow {
  font-family: var(--font-subhead);
  font-size: var(--label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s1-navy);  /* DL v3: navy label; navy-band contexts flip to white */
}
.s1-eyebrow::before,
.eyebrow::before {
  content: '';  /* DL v3: the cyan kicker bar */
  display: inline-block;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--s1-cyan);
  vertical-align: 0.18em;
  margin-right: var(--space-2);
}

.s1-label {
  font-family: var(--font-subhead);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  color: var(--fg-1);
}
/* Lead paragraph — the muted intro voice under headlines (DL v3 row 17).
   Same register as .section__lede inside .section-header; use .lead when
   the paragraph stands alone (hero decks, panel intros). */
.lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 62ch;
}
.section--navy .lead,
.s1-on-navy .lead { color: var(--on-navy-2); }
.s1-caption {
  font-family: var(--font-body);
  font-size: var(--caption);
  color: var(--fg-2);
  line-height: var(--lh-body);
}
.s1-pullquote {
  font-family: var(--font-editorial);
  font-size: var(--display-md);
  line-height: 1.2;
  font-style: italic;
  color: var(--fg-brand);
}

.s1-on-navy {
  color: var(--fg-inverse);
  background: var(--s1-navy);
}
.s1-on-navy .s1-h1,
.s1-on-navy .s1-h2,
.s1-on-navy .s1-h3,
.s1-on-navy .s1-pullquote { color: var(--fg-inverse); }
.s1-on-navy .s1-eyebrow   { color: var(--s1-white); }  /* DL v3: white on navy; bar stays cyan */
.s1-on-navy .s1-caption   { color: var(--on-navy-3); }

/* ==========================================================================
   4. LAYOUT — Containers
   Three widths. .container is standard page width. .container--narrow is
   for editorial sections (hero copy, single-column reading).
   .container--reading is the tightest measure for long prose.
   ========================================================================== */

.container,
.container--narrow,
.container--reading {
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.container          { max-width: var(--container-max); }
.container--narrow  { max-width: var(--container-narrow-max); }
.container--reading { max-width: var(--container-reading-max); }

/* ==========================================================================
   8. EDITORIAL KICKER — navy label + cyan bar (DL v3 row 1, adopted from
   the design-reference mockups). Any class acting as an "eyebrow" or
   "kicker label" picks up the same treatment: DM Sans 800, 13px,
   uppercase, 0.08em tracking, navy text, 28×2px cyan bar prefix. On navy
   bands the text flips to white; the bar is always cyan. Supersedes both
   the em-dash glyph and the v2.1 deep-cyan text treatment.
   New pages should use .eyebrow or .section__eyebrow. The other names
   here are for backward-compat with reference pages.
   ========================================================================== */

.eyebrow,
.section__eyebrow,
.hero__eyebrow,
.cta-section__eyebrow,
.cta-band__eyebrow,
.vertical-hero__eyebrow,
.vertical-cta__eyebrow,
.tldr-band__label,
.trust-bar__caption,
.role-selector__label,
.role-block__role,
.related-content__group-label,
.service-tile__label,
.pillar-card__num,
.pillar-card__audience-label,
.mark-row__label,
.continuum__badge {
  font-family: var(--font-subhead);
  font-size: var(--label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s1-navy);  /* DL v3: navy label; navy-band contexts flip to white */
}

.eyebrow::before,
.section__eyebrow::before,
.hero__eyebrow::before,
.cta-section__eyebrow::before,
.cta-band__eyebrow::before,
.vertical-hero__eyebrow::before,
.vertical-cta__eyebrow::before,
.tldr-band__label::before,
.trust-bar__caption::before,
.role-selector__label::before,
.role-block__role::before,
.related-content__group-label::before,
.service-tile__label::before,
.mark-row__label::before,
.pillar-card__num::before,
.pillar-card__audience-label::before {
  content: '';  /* DL v3: the cyan kicker bar */
  display: inline-block;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--s1-cyan);
  vertical-align: 0.18em;
  margin-right: var(--space-2);
}

/* Muted eyebrow — for secondary labels (group labels, audience labels).
   Color shifts to muted gray; the cyan bar stays as the brand mark. */
.eyebrow--mute,
.section__eyebrow--mute {
  color: var(--fg-2);
}

/* ==========================================================================
   9. CARD FOLD ACCENT
   The "document-fold corner" — a small cyan triangle that fades in on
   hover. This is a SumnerOne brand differentiator, referencing the
   literal visual language of a folded document corner — on-brand for a
   70-year print and document company.

   In Webflow, this is applied via the .has-fold-corner opt-in class.
   Component-specific selectors (.card, .outcome-card, .pillar-card,
   .proof-card, .article-card, .persona-card) have been retired here
   because those components are now defined as ws_* classes in Jerome's
   Webflow style panel. To apply the fold-corner accent to a ws_* card,
   add .has-fold-corner to the element's class list in Webflow.
   ========================================================================== */

.has-fold-corner {
  position: relative;
}
.has-fold-corner::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 24px;
  height: 24px;
  background: linear-gradient(45deg, transparent 50%, var(--s1-cyan) 50%);
  border-top-right-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard),
              top var(--dur-base) var(--ease-standard),
              height var(--dur-base) var(--ease-standard);
  pointer-events: none;
  z-index: 2;
}
.has-fold-corner:hover::after,
.has-fold-corner.is-open::after {
  top: -2px;
  height: 25px;
  opacity: 1;
}

/* ==========================================================================
  10. BUTTONS
   Three button roles: nav (small navy in header), primary (large CTA),
   secondary (text + arrow link).

   .btn-primary defaults to navy bg / white text — for use on warm,
   white, or cool backgrounds. On navy ground (inside .section--navy,
   .cta-section, or .hero) it auto-flips to cyan bg / navy text so the
   CTA pops. Explicit .btn-primary--cyan modifier still works.
   ========================================================================== */

.btn-nav {
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  font-weight: 600;
  color: var(--s1-white);
  background: var(--s1-navy);
  padding: 10px var(--space-5);
  border-radius: var(--radius-pill);  /* DL v2.1 */
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.btn-nav:hover { background: var(--s1-navy-hover); color: var(--s1-white); }

/* Saffron variant — reserved for talk-to-us actions (Contact Us, Call Us,
   schedule-a-conversation). Differentiates relational CTAs from generic
   primary actions. Use sparingly: never more than one saffron CTA visible
   at a time. */
.btn-nav--saffron {
  background: var(--s1-saffron);
  color: #6B4416;
}
.btn-nav--saffron:hover {
  background: #ED9525;
  color: #6B4416;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-subhead);
  font-size: var(--subhead-sm);
  font-weight: 600;
  color: var(--s1-white);
  background: var(--s1-navy);
  padding: 16px var(--space-7);
  border-radius: var(--radius-pill);  /* DL v2.1 */
  border: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.btn-primary:hover { background: var(--s1-navy-hover); color: var(--s1-white); }
.btn-primary svg { width: 18px; height: 18px; }

.btn-primary--cyan,
.section--navy .btn-primary,
.cta-section .btn-primary,
.hero .btn-primary {
  background: var(--s1-cyan);
  color: var(--s1-navy);
}
.btn-primary--cyan:hover,
.section--navy .btn-primary:hover,
.cta-section .btn-primary:hover,
.hero .btn-primary:hover {
  background: var(--s1-cyan-hover);
  color: var(--s1-navy);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-subhead);
  font-size: var(--subhead-sm);
  font-weight: 500;
  color: var(--s1-navy);
  text-decoration: none;
  padding: 16px var(--space-5);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}
.btn-secondary:hover { color: var(--s1-cyan); }
.btn-secondary svg { width: 18px; height: 18px; }

/* Capsule variant (DL v3, Liz): outlined pill for quiet in-component
   actions — e.g. the ops-ladder "View <tier>" links. */
.btn-secondary--capsule {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-pill);
  background: var(--s1-white);
  min-height: 44px;
  padding: 10px var(--space-5);
  justify-content: center;
  font-weight: 700;
}
.btn-secondary--capsule:hover {
  color: var(--s1-navy);
  border-color: rgba(0, 179, 224, 0.72);
  background: rgba(0, 179, 224, 0.06);
}

/* White primary variant — for navy/glow CTA grounds (DL v3 row 14) */
.btn-primary--white {
  background: var(--s1-white);
  color: var(--s1-navy);
}
.btn-primary--white:hover {
  background: var(--s1-parchment);
  color: var(--s1-navy);
}

/* DL v3 row 15: tactile hover lift on filled buttons + capsules (mockup).
   Reduced-motion users get color/shadow changes only. */
.btn-primary,
.btn-primary--cyan,
.btn-primary--saffron,
.btn-primary--white,
.btn-secondary--capsule,
.vertical-hero__cta {
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.btn-primary:hover,
.btn-primary--cyan:hover,
.btn-primary--saffron:hover,
.btn-primary--white:hover,
.btn-secondary--capsule:hover,
.vertical-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
  /* Smooth scrolling is motion too, and this property is set on html
     globally, so it must be reset here or every anchor jump animates. */
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn-primary:hover,
  .btn-primary--cyan:hover,
  .btn-primary--saffron:hover,
  .btn-primary--white:hover,
  .btn-secondary--capsule:hover,
  .vertical-hero__cta:hover { transform: none; }
  html { scroll-behavior: auto; }
}

.section--navy .btn-secondary,
.cta-section .btn-secondary,
.hero--inverse .btn-secondary {
  color: var(--on-navy-2);
}
.section--navy .btn-secondary:hover,
.cta-section .btn-secondary:hover,
.hero--inverse .btn-secondary:hover {
  color: var(--s1-white);
}

.cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.cta-group--start { justify-content: flex-start; }

/* CTA section (full-width navy CTA — see print-you-can-trust) */
.cta-section {
  /* DL v3 row 14: mockup final-CTA ground — radial cyan glow over a
     navy gradient (was flat navy) */
  background: radial-gradient(circle at 10% 20%, rgba(0, 179, 224, 0.22), transparent 34%),
              linear-gradient(135deg, var(--s1-navy), #002F4D);
  padding: var(--space-10) 0;
  text-align: center;
  color: var(--s1-white);
}
.cta-section__eyebrow {
  color: var(--s1-white);  /* DL v3: white label on navy band; bar stays cyan */
  margin-bottom: var(--space-5);
  display: block;
}
.cta-section__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display-md);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--s1-white);
  margin-bottom: var(--space-6);
}
.cta-section__body {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: var(--lh-body);
  color: var(--on-navy-2);
  max-width: 640px;
  margin: 0 auto var(--space-7);
}

/* CTA on warm (light-bg call-to-action band — see education vertical-cta) */
.cta-band {
  background: var(--bg-warm);
  padding: var(--space-10) 0;
  text-align: center;
  position: relative;
}
.cta-band {
  /* DL v3 note 3: hairline separator (was a 64x3px centered cyan tick) */
  border-top: 1px solid var(--line);
}
.cta-band__eyebrow {
  color: var(--s1-navy);  /* DL v3: navy label on parchment */
  margin-bottom: var(--space-5);
  display: block;
}
.cta-band__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display-md);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--s1-navy);
  margin: 0 auto var(--space-6);
  max-width: 760px;
}
.cta-band__body {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: var(--lh-body);
  color: var(--fg-1);
  max-width: 720px;
  margin: 0 auto var(--space-7);
}

/* ==========================================================================
  16. TRUST BAR — Logo marquee
   Auto-scrolling row of customer names/logos. Pause on hover. Edges
   masked so logos fade rather than clip. Set A and Set B should match
   for seamless looping.
   ========================================================================== */

.trust-bar {
  background: var(--s1-white);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-1);
  overflow: hidden;
}
.trust-bar__caption {
  color: var(--fg-2);
  text-align: center;
  margin-bottom: var(--space-5);
  display: block;
}
.trust-bar__marquee {
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.trust-bar__track {
  display: flex;
  gap: var(--space-9);
  width: max-content;
  animation: trust-scroll 48s linear infinite;
}
.trust-bar__marquee:hover .trust-bar__track { animation-play-state: paused; }
.trust-bar__logo {
  font-family: var(--font-subhead);
  font-weight: 600;
  font-size: var(--subhead-md);
  color: var(--fg-2);
  letter-spacing: -0.01em;
  white-space: nowrap;
  filter: grayscale(1);
  opacity: 0.78;
}
@keyframes trust-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
  17. UTILITIES
   ========================================================================== */

.tbd-tag {
  display: inline-block;
  background: rgba(247, 169, 71, 0.18);
  color: #B97D20;
  border: 1px solid rgba(247, 169, 71, 0.4);
  border-radius: var(--radius-pill);
  font-family: var(--font-subhead);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  padding: 2px 8px;
  margin-left: var(--space-2);
  vertical-align: middle;
}

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

/* ==========================================================================
  18. RESPONSIVE
   Two breakpoints carry most of the system: 1100px (multi-col grids
   collapse) and 900px (containers tighten, header nav collapses).
   Page-specific grids should override at 1100px as needed.
   ========================================================================== */

@media (max-width: 1100px) {
  .article-list { grid-template-columns: 1fr 1fr; }
  .stat-strip   { grid-template-columns: 1fr 1fr; }
  .two-col      { grid-template-columns: 1fr; }
  .two-col__sticky { position: static; }
}

@media (max-width: 900px) {
  .container,
  .container--narrow,
  .container--reading { padding: 0 var(--container-pad-mobile); }

  .site-header__inner,
  .site-footer__inner { padding: 0 var(--container-pad-mobile); }

  .site-header__nav { display: none; }

  .article-list { grid-template-columns: 1fr; }
  .stat-strip   { grid-template-columns: 1fr; gap: var(--space-5); }

  .hero { padding: var(--space-9) 0 var(--space-8); }
  .closer { font-size: 22px; padding: var(--space-5); }
  .editorial-close { font-size: 20px; }
}

/* ==========================================================================
  19. FORM INPUTS
   Field, label, input/select/textarea, helper text. Cyan focus ring.
   Legible at 16px (DM Sans body) so iOS doesn't auto-zoom on focus.
   Use .form-field as the wrapper; .form-row for side-by-side fields.
   ========================================================================== */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-5);
}
.form-field__label {
  font-family: var(--font-subhead);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  color: var(--fg-1);
}
.form-field__label--required::after {
  content: ' *';
  color: var(--s1-cyan);
}

/* Generic input, select, textarea — share most properties */
.input,
.select,
.textarea {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--s1-white);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xs);  /* DL v2.1: form fields stay near-rectilinear */
  padding: 10px var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
  width: 100%;
}
.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--s1-mid-gray);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--s1-cyan);
  box-shadow: 0 0 0 3px rgba(0, 179, 224, 0.18);
}
.input::placeholder,
.textarea::placeholder { color: var(--fg-2); }  /* DL v2.1: placeholders are text */
.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--bg-cool);
  color: var(--fg-2);
  cursor: not-allowed;
}

/* Select gets a chevron via CSS (works in all evergreen browsers) */
.select {
  appearance: none;
  -webkit-appearance: none;
  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 fill='none' stroke='%2300395C' stroke-width='1.5' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-7);
}

.textarea {
  resize: vertical;
  min-height: 120px;
}

/* Helper / error text below the field */
.form-field__help {
  font-family: var(--font-body);
  font-size: var(--caption);
  color: var(--fg-2);
  line-height: var(--lh-body);
}
.form-field__help--error { color: #C53030; }
.form-field--error .input,
.form-field--error .select,
.form-field--error .textarea { border-color: #C53030; }
.form-field--error .input:focus,
.form-field--error .select:focus,
.form-field--error .textarea:focus {
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.18);
}

/* On navy ground — invert surface and borders */
.section--navy .form-field__label,
.cta-section .form-field__label { color: var(--s1-white); }
.section--navy .input,
.section--navy .select,
.section--navy .textarea,
.cta-section .input,
.cta-section .select,
.cta-section .textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-on-navy-card);
  color: var(--s1-white);
}
.section--navy .input::placeholder,
.section--navy .textarea::placeholder,
.cta-section .input::placeholder,
.cta-section .textarea::placeholder { color: var(--on-navy-3); }

/* Checkbox / radio — keep it simple, accent-color is the brand cyan */
.checkbox,
.radio {
  accent-color: var(--s1-cyan);
  width: 16px; height: 16px;
  margin-right: var(--space-2);
  vertical-align: middle;
}

/* ==========================================================================
  20. BADGES
   Small inline pills. Distinct from .tbd-tag (saffron placeholder) — use
   .badge for status, category, or count chips that ship in real copy.
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-subhead);
  font-size: var(--caption);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}
.badge--navy {
  background: rgba(0, 57, 92, 0.08);
  color: var(--s1-navy);
}
.badge--cyan {
  background: rgba(0, 179, 224, 0.12);
  color: var(--s1-cyan);
}
.badge--neutral {
  background: var(--bg-cool);
  color: var(--fg-2);
  border-color: var(--border-1);
}
.badge--saffron {
  background: rgba(247, 169, 71, 0.18);
  color: #B97D20;
  border-color: rgba(247, 169, 71, 0.4);
}
.badge--success {
  background: rgba(141, 198, 63, 0.16);
  color: #4A7A1F;
}
/* On navy, badges flip surfaces */
.section--navy .badge--navy,
.cta-section .badge--navy {
  background: rgba(255, 255, 255, 0.10);
  color: var(--s1-white);
}
.section--navy .badge--neutral,
.cta-section .badge--neutral {
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-navy-3);
  border-color: var(--border-on-navy-card);
}

/* Badge with a leading dot — used in continuum-style step indicators */
.badge__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}

/* ==========================================================================
  21. SAFFRON BUTTON VARIANT
   Saffron remains brand-restricted (campaign / sustainability use), but
   .btn-primary--saffron is now an approved CTA color. Same shape as the
   other primary variants; saffron bg with deep-amber text for contrast.
   ========================================================================== */

.btn-primary--saffron {
  background: var(--s1-saffron);
  color: #6B4416;
}
.btn-primary--saffron:hover {
  background: #ED9525;
  color: #6B4416;
}

/* On navy, the saffron CTA stays warm — just nudge the hover. */
.section--navy .btn-primary--saffron,
.cta-section .btn-primary--saffron,
.hero .btn-primary--saffron {
  background: var(--s1-saffron);
  color: #6B4416;
}
.section--navy .btn-primary--saffron:hover,
.cta-section .btn-primary--saffron:hover,
.hero .btn-primary--saffron:hover {
  background: #ED9525;
  color: #6B4416;
}

/* ==========================================================================
  22. SITE CHROME — site-header, breadcrumb, banner-note, site-footer
  Lifted from the print-you-can-trust + education-vertical sample patterns.
  Banner-note is the slim editorial bar called out in CLAUDE.md.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--s1-white);  /* fallback for browsers without backdrop-filter */
  border-bottom: 1px solid var(--line);
}
/* DL v3 row 16 (Liz, 2026-07-05): frosted-glass topbar from the mockups.
   Content scrolling under the sticky bar frosts through at 90% white +
   14px blur. Browsers without support keep the solid white above. */
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .site-header {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Text fallback when no <img> is present */
  font-family: var(--font-editorial);
  font-weight: 600;
  font-size: 22px;
  color: var(--s1-navy);
  letter-spacing: -0.01em;
}
.site-header__logo img,
.site-header__logo svg {
  display: block;
  height: 36px;
  width: auto;
}
.site-header__nav {
  display: flex;
  align-items: center;
  /* Was --space-6 (32px). Reduced 2026-08-02: with six items each also
     carrying 28px of pill padding (see the .site-header__nav-item rule in the
     tap-target section), the row was spending ~330px on chrome and forcing
     every label to wrap to two lines. Shorter labels alone did not fix it. */
  gap: var(--space-4);
  height: 100%;
}
/* nav-group is intentionally static — dropdowns break out to .site-header
   so the panel can span full container width. */
.site-header__nav-group {
  position: static;
  display: flex;
  align-items: center;
  height: 100%;
}
.site-header__nav-item {
  position: relative;
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  font-weight: 500;
  color: var(--fg-1);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  align-self: center;
  transition: color var(--dur-fast) var(--ease-standard);
}
.site-header__nav-item:hover { color: var(--s1-navy); }  /* DL v3: capsule signals hover; text stays navy (cyan text on white failed AA) */
.site-header__nav-item--has-dropdown::after {
  content: '▾';
  font-size: 10px;
  color: var(--fg-2);
  transition: transform var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
/* Active state — caret rotation when the dropdown is open. The cyan
   underline is retired (DL v3, Liz: capsule OR underline, not both —
   the v6 nav uses the capsule alone; see the appended pill rules). */
.site-header__nav-item.is-active { color: var(--s1-navy); }
.site-header__nav-item.is-active.site-header__nav-item--has-dropdown::after {
  transform: rotate(180deg);
  color: var(--s1-navy);
}
.nav-hidden { display: none !important; }

/* Mega-dropdown panel — anchors to .site-header (sticky positioning context)
   so it spans the full container width. Each nav-group's dropdown is
   absolutely positioned across the header bottom edge. JS manages
   one-open-at-a-time. */
.site-header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--s1-white);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--s1-navy);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              visibility 0s linear var(--dur-fast);
}
.site-header__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.site-header__dropdown-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-7) var(--container-pad) var(--space-8);
}
.site-header__dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.site-header__dropdown-grid--three-col {
  grid-template-columns: 1fr 1.4fr 1fr;
}
.site-header__dropdown-grid--single {
  grid-template-columns: 1fr;
  max-width: 360px;
}
.site-header__dropdown-col {
  display: flex;
  flex-direction: column;
}
.site-header__dropdown-label {
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: var(--space-5);
}
.site-header__dropdown-link {
  display: block;
  padding: var(--space-3) 0;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-standard);
}
.site-header__dropdown-link + .site-header__dropdown-link {
  border-top: 1px solid transparent;
}
.site-header__dropdown-link__title {
  display: block;
  font-family: var(--font-subhead);
  font-size: var(--body-md);
  font-weight: 700;
  color: var(--s1-navy);
  line-height: 1.25;
  margin-bottom: 4px;
  transition: color var(--dur-fast) var(--ease-standard);
}
.site-header__dropdown-link__sub {
  display: block;
  font-family: var(--font-body);
  font-size: var(--body-sm);
  font-weight: 400;
  color: var(--fg-2);
  line-height: var(--lh-subhead);
}

/* Icon variant — used by the Start Here menu only, added 2026-08-02. Those
   three items are full sentences rather than product names, so as a plain
   stack they read as three paragraphs of text and the menu loses its scan
   value. An icon per item gives the eye an anchor to sort on. The tint
   matches the nav item's own hover state so the header keeps one language. */
.site-header__dropdown-link--icon {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas: "icon title" "icon sub";
  column-gap: var(--space-4);
  align-items: start;
}
.site-header__dropdown-link--icon .site-header__dropdown-link__title { grid-area: title; }
.site-header__dropdown-link--icon .site-header__dropdown-link__sub   { grid-area: sub; }
.site-header__dropdown-link__icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(0, 179, 224, 0.11);
  color: var(--s1-navy);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.site-header__dropdown-link__icon svg { width: 20px; height: 20px; }
.site-header__dropdown-link--icon:hover .site-header__dropdown-link__icon {
  background: var(--s1-cyan);
  color: var(--s1-white);
}
.site-header__dropdown-link:hover .site-header__dropdown-link__title {
  color: var(--s1-cyan);
}

/* Education Hub — featured Who We Serve destination. Faint cyan tint plus a
   "Hub" tag, scoped by href so the repeated nav block needs no per-page class. */
.site-header__dropdown-link[href$="who-we-serve/education/"] {
  background: rgba(0, 179, 224, 0.07);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  margin-left: calc(var(--space-3) * -1);
  margin-right: calc(var(--space-3) * -1);
}
.site-header__dropdown-link[href$="who-we-serve/education/"] .site-header__dropdown-link__title {
  display: inline-block;
}
.site-header__dropdown-link__tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 8px;
  font-family: var(--font-subhead);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s1-cyan-deep);
  background: rgba(0, 179, 224, 0.14);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

.breadcrumb {
  background: var(--s1-white);
  border-bottom: 1px solid var(--border-1);
  padding: var(--space-3) 0;
}
.breadcrumb__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  font-family: var(--font-subhead);
  font-size: var(--caption);
  color: var(--fg-2);
}
.breadcrumb a {
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.breadcrumb a:hover { color: var(--s1-cyan); }
.breadcrumb__sep {
  margin: 0 var(--space-2);
  color: var(--border-2);
}
.breadcrumb__current {
  color: var(--fg-1);
  font-weight: 500;
}

.banner-note {
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border-1);
  padding: var(--space-3) 0;
  text-align: center;
}
.banner-note__copy {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-2);
  letter-spacing: 0.01em;
}

.site-footer {
  background: var(--s1-navy);
  padding: var(--space-8) 0;
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  gap: var(--space-6);
  flex-wrap: wrap;
}
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Text fallback when no <img> is present */
  font-family: var(--font-editorial);
  font-weight: 600;
  font-size: 22px;
  color: var(--s1-white);
  letter-spacing: -0.01em;
}
.site-footer__logo img,
.site-footer__logo svg {
  display: block;
  height: 32px;
  width: auto;
}
.site-footer__promise {
  font-family: var(--font-subhead);
  font-weight: 600;
  font-size: var(--body-sm);
  color: var(--s1-cyan);
}
.site-footer__meta {
  font-family: var(--font-body);
  font-size: var(--caption);
  color: var(--on-navy-mute);
}

/* Footer link row — added Phase 2 (2026-08-02) per the 2 Aug build brief:
   "Footer also carries production capability, techleadership, careers
   pointing at www, and the phone number." The footer previously held only
   logo, promise and copyright, so existing customers who landed on Outcomes
   had nowhere to go. NOTE: content/sumnerone-component-manifest.md still
   describes site-footer as logo + tagline + copyright only; update it so the
   two do not drift. */
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
}
.site-footer__link {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  color: var(--on-navy-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  transition: color var(--dur-base) var(--ease-standard);
}
.site-footer__link:hover { color: var(--s1-white); }
.site-footer__link svg { width: 14px; height: 14px; }
.site-footer__divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin: var(--space-6) auto 0;
  max-width: var(--container-max);
}
.site-footer__inner--meta {
  margin-top: var(--space-5);
  justify-content: flex-start;
}

/* .site-header__utility removed 2026-08-02. The www link lived inline in the
   nav row for one phase; its 35 characters were a material cause of the row
   running out of width and every label wrapping to two lines. It now lives
   inside the About dropdown, styled as an ordinary dropdown link, and it is
   also in the footer. */

/* ==========================================================================
  23. SECTION PRIMITIVES — sections, eyebrow, headline, lede, prose, two-col
   ========================================================================== */

.section { padding: var(--space-10) 0; }
.section--white     { background: var(--s1-white); }
.section--light-gray,
.section--cool      { background: var(--bg-cool); }
.section--parchment,
.section--warm      { background: var(--bg-warm); }
.section--navy      { background: var(--s1-navy); color: var(--s1-white); }
/* DL v3 note 3: tinted bands separate from neighbors with thin hairlines
   (the mockups' section rhythm) — never thick cyan rules. */
.section--light-gray,
.section--cool,
.section--parchment,
.section--warm {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section__eyebrow {
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  /* DL v3: color comes from the kicker group (navy on light); bright cyan here was an AA miss */
  margin-bottom: var(--space-4);
  display: block;
}
.section--navy .section__eyebrow { color: var(--s1-white); }  /* DL v3: white label on navy; bar stays cyan */
.section__eyebrow--mute { color: var(--fg-2); }
.section__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display-md);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--fg-brand);
  margin-bottom: var(--space-5);
  max-width: 880px;
}
.section__headline--inverse,
.section--navy .section__headline { color: var(--s1-white); }
.section__headline--wide { max-width: 720px; }
.section__lede {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: var(--lh-body);
  color: var(--fg-1);
  max-width: 760px;
  margin-bottom: var(--space-7);
}
.section--navy .section__lede { color: var(--on-navy-2); }

/* ==========================================================================
   Section header — editorial split (DL v3 row 3, from design-reference).
   Headline column left, muted lead bottom-right-aligned. Opt-in wrapper
   around the existing primitives:
     <div class="section-header">
       <div><p class="section__eyebrow">…</p><h2 class="section__headline">…</h2></div>
       <p class="section__lede">…</p>
     </div>
   ========================================================================== */
.section-header {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(260px, 0.52fr);
  gap: var(--space-7);
  align-items: end;
  margin-bottom: var(--space-6);
}
.section-header .section__headline { margin-bottom: 0; max-width: none; }
.section-header .section__lede {
  margin-bottom: 0;
  font-size: var(--body-md);
  color: var(--fg-2);
}
.section--navy .section-header .section__lede { color: var(--on-navy-2); }
@media (max-width: 1080px) {
  .section-header { grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
}

.prose {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.prose p + p { margin-top: var(--space-5); }
.prose--inverse { color: var(--on-navy-1); }
.prose--inverse p + p { margin-top: var(--space-5); }

.prose ul,
.prose ol {
  margin-left: var(--space-6);
  margin-bottom: var(--space-5);
  padding-left: var(--space-4);
}
.prose li { margin-bottom: var(--space-2); }
.prose p + ul,
.prose p + ol { margin-top: var(--space-5); }
.prose ul + p,
.prose ol + p { margin-top: var(--space-5); }

.prose h2 {
  margin-top: var(--space-9);
  margin-bottom: var(--space-4);
}
.prose h3 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}
.prose h4 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}
.prose > h2:first-child,
.prose > h3:first-child,
.prose > h4:first-child { margin-top: 0; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: start;
}
.two-col--sidebar { grid-template-columns: 280px 1fr; }
.two-col__sticky {
  position: sticky;
  top: calc(var(--header-height) + var(--space-7));
}

/* ==========================================================================
  24. HERO VARIANTS — hero (pillar), vertical-hero (verticals)
   ========================================================================== */

.hero {
  /* DL v2.1: light-first hero; navy survives as .hero--inverse */
  background: linear-gradient(135deg, var(--s1-parchment) 0%, var(--s1-light-gray) 100%);
  padding: var(--space-10) 0 var(--space-9);
  position: relative;
  overflow: hidden;
}
.hero::after {
  /* DL v3 note 3: thin hairline separator (was 3px cyan) */
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.hero__eyebrow {
  color: var(--s1-navy);  /* DL v3: navy label + cyan bar on light hero */
  margin-bottom: var(--space-5);
  display: block;
}
.hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--s1-navy);
  margin-bottom: var(--space-5);
  max-width: 24ch;
}
.hero__subhead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--subhead-lg);
  color: var(--fg-2);
  margin-bottom: var(--space-7);
  line-height: 1.45;
  max-width: 62ch;
}
.hero__body {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: var(--lh-body);
  color: var(--fg-1);
  max-width: 680px;
}
.hero__body p + p { margin-top: var(--space-4); }

/* Hero — Narrative variant (long sentence-style headlines on playbook + hub pages).
   Steps the headline + subhead down so multi-line statements don't overpower the page. */
.hero--narrative .hero__headline { font-size: var(--display-lg); max-width: 32ch; }
.hero--narrative .hero__subhead   { font-size: var(--subhead-md); }

/* Hero — Inverse variant (navy band hero for pages that earn it — DL v2.1) */
.hero--inverse { background: var(--s1-navy); }
.hero--inverse .hero__eyebrow  { color: var(--s1-white); }  /* DL v3: white label on navy; bar stays cyan */
.hero--inverse .hero__headline { color: var(--s1-white); }
.hero--inverse .hero__subhead  { color: var(--on-navy-2); }
.hero--inverse .hero__body     { color: var(--on-navy-1); }

/* Hero — Gradient variant (the home/vertical navy→cyan ground on a standard
   hero; endpoint pages — DL v3, from Liz's program draft) */
.hero--gradient { background: var(--s1-gradient-hero); }
.hero--gradient .hero__eyebrow  { color: var(--s1-white); }
.hero--gradient .hero__headline { color: var(--s1-white); }
.hero--gradient .hero__subhead  { color: var(--on-navy-2); }
.hero--gradient .hero__body     { color: var(--on-navy-1); }
.hero--gradient .btn-secondary  { color: var(--on-navy-1); }

/* Hero — Door variant (radial cyan accent; door template only — DL v2.1) */
.hero--door {
  background: radial-gradient(circle at 12% 16%, rgba(0,179,224,0.12), transparent 30%),
              linear-gradient(135deg, var(--s1-parchment) 0%, var(--s1-light-gray) 100%);
}

/* ==========================================================================
   Hero — SPLIT variant with card aside (DL v3 row 2, from design-reference).
   Headline column left; a white panel right that previews the page's logic.
   The aside carries either a dotted mini-flow (door pages: "I have a
   problem → figure out what's underneath → show me the model") or a
   numbered mini-proof (model pages). Combine: class="hero hero--split"
   (door/inverse variants compose). Inside the container:
     <div class="hero__grid"> <div>…headline column…</div>
       <aside class="hero-card">…</aside> </div>
   ========================================================================== */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.68fr);
  gap: var(--space-7);
  align-items: center;
}
.hero-card {
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}
.hero-card__title {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--strong-md);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--s1-navy);
  margin-bottom: var(--space-4);
}
.hero-card__body {
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.hero-card__flow {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.hero-card__flow li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--s1-navy);
}
.hero-card__flow li:first-child { border-top: 0; padding-top: 0; }
.hero-card__flow li::before {
  content: '';
  width: 10px;
  height: 10px;
  margin-top: 7px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--s1-cyan);
}
/* Numbered proof variant — cyan-deep numerals (AA on the white card) */
.hero-card__flow--numbered { counter-reset: hcf; }
.hero-card__flow--numbered li::before {
  counter-increment: hcf;
  content: counter(hcf, decimal-leading-zero);
  width: auto;
  height: auto;
  margin-top: 1px;
  background: none;
  border-radius: 0;
  color: var(--s1-cyan-deep);
  font-weight: 800;
  font-size: var(--body-sm);
}
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Playbook at-a-glance diagram — full-width responsive SVG wrapper. */
.playbook-diagram {
  margin-top: var(--space-7);
  margin-left: auto;
  margin-right: auto;
  max-width: 1150px;
}
.playbook-diagram__image {
  display: block;
  width: 100%;
  height: auto;
}

.vertical-hero {
  /* DL v3 (Liz, 2026-07-05): verticals adopt the homepage's navy→cyan
     gradient ground — the brand-warm hero variant. Text uses on-navy tiers. */
  background: var(--s1-gradient-hero);
  padding: var(--space-10) 0 var(--space-9);
  position: relative;
  overflow: hidden;
}
.vertical-hero::after {
  /* DL v3 note 3: thin hairline separator (was 3px cyan) */
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.vertical-hero__eyebrow {
  color: var(--s1-white);  /* DL v3: white label on gradient; bar stays cyan */
  margin-bottom: var(--space-5);
  display: block;
}
.vertical-hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--s1-white);
  margin-bottom: var(--space-5);
  max-width: 32ch;
}
.vertical-hero__subhead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--subhead-lg);
  color: var(--on-navy-2);
  margin-bottom: var(--space-7);
  line-height: 1.45;
  max-width: 62ch;
}
.vertical-hero__body {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: var(--lh-body);
  color: var(--on-navy-1);
  max-width: 760px;
  margin-bottom: var(--space-7);
}
.vertical-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-subhead);
  font-size: var(--subhead-sm);
  font-weight: 600;
  color: var(--s1-navy);
  background: var(--s1-cyan);
  padding: 16px var(--space-7);
  border-radius: var(--radius-pill);  /* DL v2.1 */
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.vertical-hero__cta:hover { background: var(--s1-cyan-hover); color: var(--s1-navy); }
.vertical-hero__cta svg { width: 18px; height: 18px; }

/* ==========================================================================
  25. TLDR BAND
   ========================================================================== */

.tldr-band {
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border-1);
  padding: var(--space-7) 0;
}
.tldr-band__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-7);
  align-items: start;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.tldr-band__label { color: var(--s1-navy); }
.tldr-band__copy {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  max-width: 760px;
}

/* ==========================================================================
  26. STAT STRIP
   ========================================================================== */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-1);
}
.section--navy .stat-strip { border-top-color: var(--border-on-navy); }
.stat-item__number {
  font-family: var(--font-subhead);
  font-size: var(--strong-metric);
  font-weight: 700;
  color: var(--s1-cyan);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  margin-bottom: var(--space-3);
}
.stat-item__label {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  color: var(--fg-2);
  line-height: var(--lh-body);
}
.section--navy .stat-item__label { color: var(--on-navy-3); }

/* ==========================================================================
  27. CARD GRIDS — outcome, pillar, persona, proof, hover-grid/checklist,
                   pillar-mini, proof-stat
   ========================================================================== */

.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.outcome-card {
  background: var(--s1-white);
  border: 1px solid var(--line);  /* DL v3 row 5 */
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-standard),
              border-top-color var(--dur-base) var(--ease-standard),
              border-top-width var(--dur-base) var(--ease-standard);
}
.outcome-card:hover {
  box-shadow: var(--shadow-md);
  border-top: 2px solid var(--s1-cyan);
}
.outcome-card__icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: rgba(0, 179, 224, 0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--s1-cyan);
  margin-bottom: var(--space-4);
}
.outcome-card__icon svg { width: 18px; height: 18px; }
.outcome-card__title {
  font-family: var(--font-subhead);
  font-size: var(--subhead-md);
  font-weight: 700;
  color: var(--s1-navy);
  margin-bottom: var(--space-4);
}
.outcome-card__questions {
  font-family: var(--font-subhead);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--fg-1);
  margin-bottom: var(--space-5);
}
.outcome-card__body {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard),
              margin var(--dur-base) var(--ease-standard);
  margin-bottom: 0;
}
.outcome-card.is-open .outcome-card__body {
  max-height: 800px;
  opacity: 1;
  margin-bottom: var(--space-5);
}
.outcome-card__toggle {
  margin-top: auto;
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  font-weight: 600;
  color: var(--s1-cyan);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--dur-fast) var(--ease-standard);
}
.outcome-card__toggle:hover { color: var(--s1-navy); }
.outcome-card__toggle svg {
  width: 16px; height: 16px;
  transition: transform var(--dur-base) var(--ease-standard);
}
.outcome-card.is-open .outcome-card__toggle svg { transform: rotate(180deg); }

.outcomes-closer {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-7);
  background: var(--s1-navy);
  border-radius: var(--radius-lg);
  color: var(--s1-white);
  font-family: var(--font-subhead);
  font-weight: 700;
  font-style: italic;
  font-size: 28px;
  line-height: 1.3;
  text-align: center;
}
.outcomes-closer strong { color: var(--s1-cyan); font-weight: 600; font-style: italic; }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
/* ==========================================================================
   MODEL CARD — wayfinding card for door → model routing (DL v3 row 6,
   from design-reference). Cyan top-accent bar grows on hover; parchment
   "best fit" footer answers "is this me?"; explore link lands last.
   Use in a .model-grid (3-up on doors). Distinct from pillar-card: model
   cards ROUTE (one link, one job), pillar cards SUMMARIZE.
   ========================================================================== */
.model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (max-width: 1100px) { .model-grid { grid-template-columns: 1fr; } }
.model-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-dark);
  background: var(--s1-white);
  box-shadow: 0 12px 40px rgba(0, 57, 92, 0.06);
  overflow: hidden;
}
.model-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--s1-cyan);
  transform: scaleX(0.32);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard);
}
.model-card:hover::before,
.model-card:focus-within::before { transform: scaleX(1); }
.model-card__mode {
  color: var(--fg-2);
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.model-card__title {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--strong-md);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--s1-navy);
  margin-bottom: var(--space-3);
}
.model-card__body {
  color: var(--fg-2);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  margin-bottom: var(--space-4);
}
.model-card__fit {
  margin-top: auto;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--s1-parchment);
  color: var(--fg-2);
  font-size: var(--body-sm);
  line-height: var(--lh-body);
}
.model-card__fit strong { color: var(--s1-navy); }
/* The __fit panel gained a second job: a labeled deeper-reading pointer, so
   the card's single __link stays free for the commercial action. Global
   `a { color: inherit }` would render that pointer as plain text, so it
   needs an affordance here. Quieter than __link by design. */
.model-card__fit a {
  color: var(--s1-navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.model-card__fit a:hover { color: var(--s1-cyan-hover); }
.model-card__link {
  display: inline-block;
  margin-top: var(--space-5);
  color: var(--s1-navy);
  font-weight: 800;
  text-decoration: none;
}
.model-card__link:hover { color: var(--s1-cyan-hover); }

/* ==========================================================================
   OPS LADDER — tier rows for packaged-plan endpoints (DL v3 row 9, from
   design-reference). Calm rows, not pricing cards: name+mode | description
   | action. The core component of the Workplace Print Plans page.
   ========================================================================== */
.ops-ladder {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.ops-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) var(--space-6);
  background: var(--s1-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.ops-row__name {
  font-family: var(--font-subhead);
  font-weight: 800;
  font-size: var(--strong-md);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--s1-navy);
}
.ops-row__mode {
  color: var(--fg-2);
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  margin-top: var(--space-1);
}
.ops-row__body {
  color: var(--fg-2);
  font-size: var(--body-md);
  line-height: var(--lh-body);
}
@media (max-width: 900px) {
  .ops-row { grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
}

/* ==========================================================================
   QUESTIONS LIST — numbered "questions to ask any provider" (DL v3 row 11,
   from design-reference). Navy counter circles; one card per question.
   ========================================================================== */
.questions-list {
  display: grid;
  gap: var(--space-3);
  counter-reset: q;
  margin-top: var(--space-7);
}
.question-item {
  counter-increment: q;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--s1-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.question-item::before {
  content: counter(q);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--s1-navy);
  color: var(--s1-white);
  font-family: var(--font-subhead);
  font-weight: 800;
}
.question-item__title {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--subhead-lg);
  line-height: 1.25;
  color: var(--s1-navy);
  margin-bottom: var(--space-2);
}
.question-item__body {
  color: var(--fg-2);
  font-size: var(--body-md);
  line-height: var(--lh-body);
}
@media (max-width: 720px) {
  .question-item { grid-template-columns: 1fr; }
}

/* ==========================================================================
   QUICK CHECK — single-question quiz panel (DL v3 row 7, from
   design-reference "choice-panel"). The door funnel's "quick check" stage:
   pick the closest frustration, get pointed at the first useful place to
   look. One question, one result — NOT the multi-question diagnostic
   instrument (that feeds the leadership brief; this routes attention).
   Markup: .quick-check > .section-header + .quick-check__choices
   (buttons with aria-pressed) + .quick-check__result[aria-live=polite].
   JS: buttons toggle aria-pressed; result HTML swaps from a data map —
   see the component library for the reference script.
   ========================================================================== */
.quick-check {
  border-radius: var(--radius-lg);
  background: var(--s1-white);
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-lg);
  padding: clamp(26px, 4vw, 40px);
}
.quick-check .section-header { margin-bottom: var(--space-5); }
.quick-check__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.quick-check__choice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: 44px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(247, 244, 239, 0.44);
  color: var(--s1-dark-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.quick-check__choice:hover,
.quick-check__choice[aria-pressed="true"] {
  border-color: rgba(0, 179, 224, 0.72);
  background: rgba(0, 179, 224, 0.10);
}
.quick-check__radio {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--s1-cyan);
  background: var(--s1-white);
  flex: 0 0 auto;
}
.quick-check__choice[aria-pressed="true"] .quick-check__radio {
  background: var(--s1-navy);
  border-color: var(--s1-navy);
  box-shadow: inset 0 0 0 4px var(--s1-white);
}
/* The live regions stay in the DOM from page load so assistive tech has
   something to observe; they collapse when empty rather than being hidden,
   because a region that appears together with its content is frequently
   never announced. */
.quick-check__result:empty,
#story-built:empty { display: none; }
.quick-check__result {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-left: 3px solid var(--s1-cyan);
  background: var(--bg-cool);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--fg-2);
  font-size: var(--body-md);
  line-height: var(--lh-body);
}
.quick-check__result strong { color: var(--s1-navy); }
.quick-check__result a { color: var(--s1-navy); font-weight: 700; }
/* Grouped variant (DL v3, from Liz's program draft): choices split into
   labeled groups (e.g. Education / Enterprise), each single-column, with
   two-line choice copy (name + first-person pain line). */
.quick-check__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.quick-check__group {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: rgba(247, 244, 239, 0.38);
}
.quick-check__group-title {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--subhead-md);
  color: var(--s1-navy);
  margin-bottom: var(--space-3);
}
.quick-check__group .quick-check__choices { grid-template-columns: 1fr; }
.quick-check__group .quick-check__choice { background: var(--s1-white); }
.quick-check__choice-copy { display: grid; gap: 2px; }
.quick-check__choice-name { color: var(--s1-navy); font-weight: 700; letter-spacing: -0.01em; }
.quick-check__choice-pain { color: var(--fg-2); font-size: var(--body-sm); line-height: 1.35; font-weight: 500; }

@media (max-width: 720px) {
  .quick-check__choices { grid-template-columns: 1fr; }
  .quick-check__groups { grid-template-columns: 1fr; }
}

/* ==========================================================================
   STORY PICKER — the four value stories on the In-Plant door, as a row of
   four choice cards with ONE shared reveal panel BELOW the row.

   Rebuilt 7 August 2026. It was four <details> that each opened in place, and
   it broke for a reason worth recording: a later rule in this same stylesheet
   also claimed `.story-picker` (the playbooks' stage-6 picker, now renamed
   `.draft-picker`) and forced these four into 170px-minimum columns. The
   route buttons inside an opened story could not fit that width and spilled
   over their own card into the neighbor. Liz's call was to keep the row of
   four and move the buttons out from under the card entirely, which is the
   better structure regardless of the collision: two long capsule buttons
   ("Enterprise: Practitioner & Service Delivery") need the full container
   width, and a quarter-width column was never going to give it to them.

   Mechanism: hidden-but-focusable radios precede the row, and
   `:checked ~ .story-picker__panel[data-story=...]` reveals the matching
   panel. No JS. Native radio semantics carry arrow keys, focus order and
   screen-reader announcement. All eight route links stay in static markup,
   so they remain crawlable whatever is selected.
   ========================================================================== */
/* `min-width: 0` on the grid children throughout. Grid items default to an
   `auto` minimum, so any wide descendant (a nowrap capsule button) becomes a
   floor the container cannot shrink under, and the overflow surfaces several
   levels up from whatever actually caused it. */
.story-picker { display: grid; }
.story-picker__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: stretch;
  min-width: 0;
}
.story-picker__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  min-height: 44px;
  cursor: pointer;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(247, 244, 239, 0.44);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.story-picker__item:hover {
  border-color: rgba(0, 179, 224, 0.72);
  background: rgba(0, 179, 224, 0.10);
}
.story-picker__radio {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--s1-cyan);
  background: var(--s1-white);
  flex: 0 0 auto;
}
.story-picker__copy { display: grid; gap: 2px; flex: 1 1 auto; }
.story-picker__name { color: var(--s1-navy); font-weight: 700; letter-spacing: -0.01em; }
.story-picker__sub { color: var(--fg-2); font-size: var(--body-sm); line-height: 1.35; font-weight: 500; }

/* Selected + focus state. The input sits before .story-picker__tabs, so it
   reaches its own label through the general sibling combinator. Focus is
   styled on the LABEL because the input itself is clipped to 1px: without
   this, keyboard arrow-key selection would move an invisible focus ring. */
#story-1:checked ~ .story-picker__tabs [for="story-1"],
#story-2:checked ~ .story-picker__tabs [for="story-2"],
#story-3:checked ~ .story-picker__tabs [for="story-3"],
#story-4:checked ~ .story-picker__tabs [for="story-4"] {
  border-color: rgba(0, 179, 224, 0.72);
  background: rgba(0, 179, 224, 0.10);
}
#story-1:checked ~ .story-picker__tabs [for="story-1"] .story-picker__radio,
#story-2:checked ~ .story-picker__tabs [for="story-2"] .story-picker__radio,
#story-3:checked ~ .story-picker__tabs [for="story-3"] .story-picker__radio,
#story-4:checked ~ .story-picker__tabs [for="story-4"] .story-picker__radio {
  background: var(--s1-navy);
  border-color: var(--s1-navy);
  box-shadow: inset 0 0 0 4px var(--s1-white);
}
#story-1:focus-visible ~ .story-picker__tabs [for="story-1"],
#story-2:focus-visible ~ .story-picker__tabs [for="story-2"],
#story-3:focus-visible ~ .story-picker__tabs [for="story-3"],
#story-4:focus-visible ~ .story-picker__tabs [for="story-4"] {
  outline: 2px solid var(--s1-navy);
  outline-offset: 2px;
}

/* The shared panel. Hidden until its radio is checked; nothing is checked on
   load, so the row of four sits alone until the reader chooses. */
.story-picker__panel { display: none; min-width: 0; }
#story-1:checked ~ [data-story="story-1"],
#story-2:checked ~ [data-story="story-2"],
#story-3:checked ~ [data-story="story-3"],
#story-4:checked ~ [data-story="story-4"] {
  display: block;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.story-picker__reveal-lead {
  color: var(--fg-2);
  font-size: var(--body-sm);
  line-height: var(--lh-body);
  margin-bottom: var(--space-3);
}
.story-picker__routes { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Four across needs a real container. Below 1100 the cards starve, so go to
   2x2 (the layout Liz weighed against the row) and then to a stack. The
   panel is full-width at every step, which is the whole point of moving it
   out from under the card.

   `minmax(0, 1fr)` at every step, never a bare `1fr`. A bare `1fr` is
   `minmax(auto, 1fr)`, and an `auto` minimum refuses to shrink below the
   content's min-content width, which turns a grid child into a floor under
   the whole container rather than something that fits it. */
@media (max-width: 1100px) {
  .story-picker__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .story-picker__tabs { grid-template-columns: minmax(0, 1fr); }
  .story-picker__routes { flex-direction: column; align-items: stretch; }
  /* `.btn-secondary--capsule` is `white-space: nowrap` site-wide, which is
     right for a capsule that fits. "Enterprise: Practitioner & Service
     Delivery" does not fit a phone: it has a hard ~270px min-content floor
     that propagated up and pushed this whole component 86px past the panel
     holding it. Let these two wrap, here only. Unscoping this would change
     every capsule on the property. */
  .story-picker__routes .btn-secondary--capsule {
    white-space: normal;
    text-align: center;
  }
}

/* ==========================================================================
   OPS LIST — numbered steps on navy bands (DL v3 row 12, from
   design-reference). "How we operationalize it": cyan-tinted number
   circles + translucent rows on .section--navy grounds.
   ========================================================================== */
.ops-list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-7);
  counter-reset: ops;
}
.ops-list__item {
  counter-increment: ops;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-on-navy);
  border: 1px solid var(--border-on-navy);
}
.ops-list__item::before {
  content: counter(ops, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-pill);
  background: rgba(0, 179, 224, 0.18);
  color: var(--s1-white);
  font-family: var(--font-subhead);
  font-weight: 800;
}
.ops-list__item h3 {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--subhead-lg);
  line-height: 1.25;
  color: var(--s1-white);
  margin-bottom: var(--space-2);
}
.ops-list__item p {
  color: var(--on-navy-2);
  font-size: var(--body-md);
  line-height: var(--lh-body);
}
@media (max-width: 720px) {
  .ops-list__item { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DRIFT CHECK — split checklist panel (DL v3 row 8, from design-reference).
   Navy intro column teaches the frame; white column asks the questions.
   Multi-select checkboxes + a reveal button + a hidden result. The model
   page's check pattern (the quick-check is the door's single-select cousin).
   ========================================================================== */
.drift-check {
  border-radius: var(--radius-lg);
  background: var(--s1-white);
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.drift-check__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
}
.drift-check__intro {
  padding: var(--space-6);
  background: var(--s1-navy);
  color: var(--s1-white);
}
.drift-check__intro .section__eyebrow { color: var(--s1-white); }  /* bar stays cyan */
.drift-check__title {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--strong-lg);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--s1-white);
  margin: var(--space-3) 0 var(--space-4);
}
.drift-check__intro p { color: var(--on-navy-2); font-size: var(--body-md); line-height: var(--lh-body); }
.drift-check__panel { padding: var(--space-6); }
.drift-check__choices { display: grid; gap: var(--space-2); }
.drift-check__choice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(247, 244, 239, 0.42);
  color: var(--s1-dark-text);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.drift-check__choice input {
  margin-top: 3px;
  accent-color: var(--s1-cyan);
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.drift-check__choice.is-on {
  border-color: rgba(0, 179, 224, 0.72);
  background: rgba(0, 179, 224, 0.10);
}
.drift-check__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
}
.drift-check__result {
  display: none;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-left: 3px solid var(--s1-cyan);
  background: var(--bg-cool);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--fg-2);
  font-size: var(--body-md);
  line-height: var(--lh-body);
}
.drift-check__result.is-visible { display: block; }
.drift-check__result strong { display: block; margin-bottom: var(--space-2); color: var(--s1-navy); }
@media (max-width: 1080px) {
  .drift-check__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   GOOD GRID — "what good looks like" joined cells (DL v3 row 13, from
   design-reference). One rounded container, internal hairline dividers.
   ========================================================================== */
.good-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-md);
  background: var(--s1-white);
  margin-top: var(--space-7);
}
.good-grid__item {
  padding: var(--space-6);
  border-left: 1px solid var(--line);
}
.good-grid__item:first-child { border-left: 0; }
.good-grid__item h3 {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--subhead-lg);
  line-height: 1.25;
  color: var(--s1-navy);
  margin-bottom: var(--space-2);
}
.good-grid__item p {
  color: var(--fg-2);
  font-size: var(--body-sm);
  line-height: var(--lh-body);
}
@media (max-width: 1080px) {
  .good-grid { grid-template-columns: 1fr; }
  .good-grid__item { border-left: 0; border-top: 1px solid var(--line); }
  .good-grid__item:first-child { border-top: 0; }
}

.pillar-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.pillar-card-grid--three {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
  .pillar-card-grid--three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .pillar-card-grid,
  .pillar-card-grid--three { grid-template-columns: 1fr; }
}
.pillar-card {
  background: var(--s1-white);
  border: 1px solid var(--line);  /* DL v3 row 5 */
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--dur-base) var(--ease-standard),
              border-top-color var(--dur-base) var(--ease-standard),
              border-top-width var(--dur-base) var(--ease-standard);
}
.pillar-card:hover {
  box-shadow: var(--shadow-md);
  border-top: 2px solid var(--s1-cyan);
}
.pillar-card__num {
  color: var(--s1-cyan);
  margin-bottom: var(--space-4);
  display: block;
}
.pillar-card__title {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--strong-xl);
  line-height: var(--lh-tight);
  color: var(--s1-navy);
  margin-bottom: var(--space-4);
}
.pillar-card__sub {
  font-family: var(--font-subhead);
  font-weight: 600;
  font-style: italic;
  font-size: 17px;
  color: var(--s1-cyan);
  line-height: 1.45;
  margin-bottom: var(--space-5);
}
.pillar-card__body {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin-bottom: var(--space-5);
}
.pillar-card__audience {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  color: var(--fg-2);
  line-height: var(--lh-body);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-1);
  margin-bottom: var(--space-5);
}
.mark-row__label,
.pillar-card__audience-label {
  display: block;
  color: var(--fg-2);
  margin-bottom: var(--space-2);
}
.pillar-card__link {
  margin-top: auto;
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  font-weight: 600;
  color: var(--s1-navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--dur-fast) var(--ease-standard);
}
.pillar-card__link:hover { color: var(--s1-cyan); }
.pillar-card__link svg { width: 16px; height: 16px; }

.persona-grid,
.personas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.persona-card {
  background: var(--s1-white);
  border: 1px solid var(--line);  /* DL v3 row 5 */
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow var(--dur-base) var(--ease-standard),
              border-top-color var(--dur-base) var(--ease-standard),
              border-top-width var(--dur-base) var(--ease-standard);
}
.persona-card:hover {
  box-shadow: var(--shadow-md);
  border-top: 2px solid var(--s1-cyan);
}
.persona-card__role {
  font-family: var(--font-subhead);
  font-size: var(--strong-md);
  font-weight: 700;
  line-height: 1.2;
  color: var(--s1-navy);
  margin-bottom: var(--space-4);
}
.persona-card__body {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
  margin-bottom: var(--space-9);
}
.proof-card {
  background: var(--surface-on-navy);
  border: 1px solid var(--border-on-navy-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.proof-card:hover {
  background: var(--surface-on-navy-hover);
  border-color: rgba(0, 179, 224, 0.5);
}
.proof-card__media {
  aspect-ratio: 3 / 2;
  background-color: var(--s1-navy);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.proof-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--s1-navy-wash);
  pointer-events: none;
  z-index: 1;
}
.proof-card__media[data-placeholder] {
  background-color: #002B47;
  background-image:
    radial-gradient(ellipse at 20% 25%, rgba(0, 179, 224, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(0, 179, 224, 0.08) 0%, transparent 55%);
}
.proof-card__media[data-placeholder]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: 1;
}
.proof-card__media-icon {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: rgba(0, 179, 224, 0.14);
  border: 1px solid rgba(0, 179, 224, 0.36);
  display: flex; align-items: center; justify-content: center;
  color: var(--s1-cyan);
}
.proof-card__media-icon svg { width: 16px; height: 16px; }
.proof-card__media:not([data-placeholder]) .proof-card__media-icon { display: none; }
.proof-card__media-caption {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-5);
  right: var(--space-5);
  z-index: 2;
  font-family: var(--font-subhead);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s1-white);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.proof-card__media-caption::before {
  content: '';
  flex-shrink: 0;
  width: 20px; height: 1px;
  background: var(--s1-cyan);
}
.proof-card__content {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.proof-card__metric {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--strong-metric);
  line-height: 1;
  color: var(--s1-cyan);
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.proof-card__metric-label {
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  color: var(--on-navy-3);
  margin-bottom: var(--space-5);
}
.proof-card__institution {
  font-family: var(--font-subhead);
  font-size: var(--subhead-md);
  font-weight: 700;
  color: var(--s1-white);
  margin-bottom: var(--space-3);
}
.proof-card__body {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  line-height: var(--lh-body);
  color: var(--on-navy-2);
}

.hover-grid,
.checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.hover-grid__item,
.checklist__item {
  background: var(--s1-white);
  border: 1px solid var(--line);  /* DL v3 row 5 */
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.hover-grid__item:hover,
.checklist__item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--s1-cyan);
}
.hover-grid__number,
.checklist__number {
  /* DL v3: DM Sans numerals (D2 — no serif in components); deep cyan for AA at this size */
  font-family: var(--font-subhead);
  font-size: var(--strong-xl);
  font-weight: 800;
  color: var(--s1-cyan-deep);
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  font-variant-numeric: lining-nums tabular-nums;
}
.hover-grid__text,
.checklist__text { flex: 1; }
.hover-grid__title,
.checklist__title {
  font-family: var(--font-subhead);
  font-size: var(--subhead-sm);
  font-weight: 600;
  color: var(--fg-1);
  margin-bottom: var(--space-2);
}
.hover-grid__desc,
.checklist__desc {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.hover-grid__footer,
.checklist__footer {
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6);
  background: var(--s1-navy);
  border-radius: var(--radius-lg);
  color: var(--on-navy-1);
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
}
.hover-grid__footer strong,
.checklist__footer strong { color: var(--s1-cyan); font-weight: 600; }

.pillar-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.pillar-mini {
  background: var(--s1-white);
  border: 1px solid var(--line);  /* DL v3 row 5 */
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              border-top-color var(--dur-base) var(--ease-standard),
              border-top-width var(--dur-base) var(--ease-standard);
}
.pillar-mini:hover {
  box-shadow: var(--shadow-md);
  border-top: 2px solid var(--s1-cyan);
}
.pillar-mini__num {
  font-family: var(--font-subhead);
  font-size: 22px;
  font-weight: 700;
  color: var(--s1-cyan);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.pillar-mini__title {
  font-family: var(--font-subhead);
  font-size: var(--body-md);
  font-weight: 600;
  color: var(--s1-navy);
  line-height: var(--lh-subhead);
}
.pillar-mini__arrow {
  margin-top: auto;
  color: var(--fg-2);
  transition: color var(--dur-fast) var(--ease-standard);
}
.pillar-mini:hover .pillar-mini__arrow { color: var(--s1-cyan); }
.pillar-mini__arrow svg { width: 18px; height: 18px; }

.proof-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.proof-stat__metric {
  font-family: var(--font-subhead);
  font-size: var(--strong-metric);
  font-weight: 700;
  color: var(--s1-cyan);
  line-height: 1;
  letter-spacing: -0.02em;
}
.proof-stat__metric-label {
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
.proof-stat__desc {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

/* ==========================================================================
  28. FRAMEWORK & APPROACH — continuum, approach-list, framework
   ========================================================================== */

.continuum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
  position: relative;
}
.continuum::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(var(--space-4) / 2 + 28px);
  right: calc(var(--space-4) / 2 + 28px);
  height: 2px;
  background: var(--border-1);
  z-index: 0;
}
.continuum__card {
  background: var(--s1-white);
  border: 1px solid var(--line);  /* DL v3 row 5 */
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 1;
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.continuum__card:hover { box-shadow: var(--shadow-md); }
.continuum__card--active {
  /* DL v3 row 10: mockup active treatment — cyan border + lifted shadow */
  border-color: rgba(0, 179, 224, 0.72);
  box-shadow: var(--shadow-md);
}
.continuum__card--building {
  border-top: 2px solid var(--s1-cyan);
  opacity: 0.88;
}
.continuum__badge {
  /* DL v3 row 10: level badge as a pill chip (mockup .level) */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-cool);
  color: var(--s1-navy);
  margin-bottom: var(--space-4);
}
.continuum__badge--active { background: rgba(0, 179, 224, 0.11); }
.continuum__badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-2);
}
.continuum__badge-dot--active { background: var(--s1-cyan); }
.continuum__title {
  font-family: var(--font-subhead);
  font-size: var(--subhead-sm);
  font-weight: 700;
  color: var(--fg-1);
  margin-bottom: var(--space-3);
}
.continuum__body {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.continuum__tag {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-subhead);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
}
.continuum__tag--today {
  background: rgba(0, 57, 92, 0.08);
  color: var(--s1-navy);
}
.continuum__tag--building {
  background: rgba(0, 179, 224, 0.12);
  color: var(--s1-cyan-deep);  /* DL v3: bright cyan at 11px failed AA */
}
.continuum__summary {
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-warm);
  border-left: 2px solid var(--s1-navy);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
/* Continuum lede — 1-line visible summary shown above the expandable full body. */
.continuum__lede {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin-top: var(--space-1);
}

/* Progressive disclosure — native <details>/<summary> used inside continuum + framework cards.
   Content stays in the DOM (SEO + AEO indexable); the toggle hides/reveals the long-form body. */
.continuum__details,
.framework__details {
  margin-top: var(--space-4);
  border-top: 1px solid var(--border-1);
}
.continuum__details-toggle,
.framework__details-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-2);
  font-family: var(--font-subhead);
  font-size: var(--subhead-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--s1-cyan);
  list-style: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.continuum__details-toggle::-webkit-details-marker,
.framework__details-toggle::-webkit-details-marker { display: none; }
.continuum__details-toggle::after,
.framework__details-toggle::after {
  content: '↓';
  font-size: 0.9em;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.continuum__details[open] > .continuum__details-toggle::after,
.framework__details[open] > .framework__details-toggle::after {
  transform: rotate(180deg);
}
.continuum__details-toggle:hover,
.framework__details-toggle:hover { color: var(--s1-cyan-hover); }
.continuum__details[open] .continuum__body,
.framework__details[open] .framework__desc {
  padding-top: var(--space-2);
}

/* Feature-definition toggle — inline "What's this?" inside section-table row
   headers. Native <details>/<summary>: the plain-language definition stays in
   the DOM (AEO-indexable) and reveals on demand so the matrix stays scannable.
   Styled after the continuum/framework details toggles for consistency. */
.feature-def {
  margin-top: var(--space-2);
  font-weight: 400;
}
.feature-def__toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  min-height: 44px;
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--s1-cyan);
  list-style: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.feature-def__toggle::-webkit-details-marker { display: none; }
.feature-def__toggle::marker { content: ""; }
.feature-def__toggle:hover { color: var(--s1-cyan-hover); }
.feature-def__toggle i,
.feature-def__toggle svg { width: 15px; height: 15px; }
.feature-def__body {
  margin-top: var(--space-1);
  max-width: 48ch;
  font-family: var(--font-body);
  font-size: var(--body-sm);
  font-weight: 400;
  color: var(--fg-2);
  line-height: var(--lh-body);
}

.approach-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-7);
}
.approach-item {
  display: flex;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-on-navy);
}
.approach-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.approach-item__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: rgba(0, 179, 224, 0.16);
  display: flex; align-items: center; justify-content: center;
  color: var(--s1-cyan);
}
.approach-item__icon svg { width: 20px; height: 20px; }
.approach-item__title {
  font-family: var(--font-subhead);
  font-size: var(--strong-md);
  font-weight: 700;
  line-height: 1.2;
  color: var(--s1-white);
  margin-bottom: var(--space-3);
}
.approach-item__body {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--on-navy-2);
}

.approach-item__metrics {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-on-navy);
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  color: var(--on-navy-3);
}
.approach-item__metrics-label {
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--s1-cyan);
  display: inline-block;
  margin-right: var(--space-3);
}

.framework {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-7);
}
/* Two-up. Every in-plant playbook carries exactly four modules, which at
   three columns leaves the fourth stranded alone on a second row. A modifier
   rather than a change to .framework, because the models pages and
   hear-to-serve run five and six items and read correctly at three. */
.framework--pair { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .framework--pair { grid-template-columns: 1fr; } }

.framework__item {
  padding: var(--space-6);
  background: var(--s1-white);
  border: 1px solid var(--line);  /* DL v3 row 5 */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;  /* grid children default to min-width:auto; without this a nowrap
                    child (e.g. an in-card capsule chip) blows the 1fr track past
                    the container and overflows the page. */
}
/* In-card capsule actions (module compare-chips) carry long labels; let them wrap
   so they fit the card instead of forcing the grid track wide. .btn-secondary is
   nowrap by default — override only inside framework cards. */
.framework .btn-secondary--capsule { white-space: normal; }
.framework__num {
  /* DL v3: DM Sans numerals (D2 — no serif in components); deep cyan for AA at this size */
  font-family: var(--font-subhead);
  font-size: 48px;
  font-weight: 800;
  color: var(--s1-cyan-deep);
  line-height: 1;
  margin-bottom: var(--space-4);
  font-variant-numeric: lining-nums tabular-nums;
}
.framework__title {
  font-family: var(--font-subhead);
  font-size: var(--subhead-md);
  font-weight: 700;
  color: var(--s1-navy);
  margin-bottom: var(--space-3);
}
.framework__desc {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
/* ==========================================================================
   PLAYBOOK STAGE BAR — the six-part Playbook Model, always visible.
   Sticks directly under .site-header so the reader always knows which stage
   they are in and can jump between them. Scroll-spy only: position is derived
   from scroll on every frame and never stored, so there is no state, no
   login, and no percent-complete that could silently reset and lie.
   Horizontal rather than a left rail because --container-max is 1280px and
   there is not enough margin at ordinary widths for a labelled rail without
   breaking the full-bleed band rhythm.
   ========================================================================== */
.playbook-stages {
  position: sticky;
  top: var(--header-height);                      /* clears .site-header */
  z-index: 90;
  background: var(--s1-white);
  border-bottom: 1px solid var(--line);
}
.playbook-stages__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;               /* the bar scrolls, never the page */
  scrollbar-width: none;
}
.playbook-stages__inner::-webkit-scrollbar { display: none; }
.playbook-stages__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  min-height: 44px;               /* tap target */
  padding: var(--space-3) var(--space-3);
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard),
              border-bottom-color var(--dur-fast) var(--ease-standard);
}
.playbook-stages__item:hover { color: var(--s1-navy); }
.playbook-stages__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-warm);
  color: var(--fg-2);
  font-size: var(--caption);
  font-weight: 800;
}
.playbook-stages__item.is-current {
  color: var(--s1-navy);
  border-bottom-color: var(--s1-cyan);
}
.playbook-stages__item.is-current .playbook-stages__num {
  background: var(--s1-navy);
  color: var(--s1-white);
}
@media (max-width: 900px) {
  /* header height is one token site-wide, so the bar tracks it here too */
  .playbook-stages__item { font-size: var(--caption); }
}

/* ==========================================================================
   MARK LIST — the control shared by stage 1 (jobs) and stage 3 (coalition) of the playbook model, "See the Need".
   A stack of jobs the reader sorts themselves. We deliberately do NOT say
   which jobs come through their shop: every attempt to assert that was wrong,
   because in-plants differ. The reader marks, and the marks route to a module,
   so stage 1 hands off to stage 2 instead of merely sitting above it.
   Buttons reuse .quick-check__choice / __radio, the site's existing
   choice pattern. Stateless: nothing is stored or sent.
   ========================================================================== */
.mark-list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}
/* When the list IS the panel, that top margin is 32px of dead space stacked
   on the panel's own 40px of padding: 73px between the panel edge and the
   first row, which read as a rendering fault rather than as breathing room.
   The margin is still right when something sits above the list. */
.quick-check > .mark-list:first-child { margin-top: 0; }
.mark-row {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-2);
}
.mark-row:first-child { border-top: 1px solid var(--border-2); }
.mark-row__main { flex: 1 1 auto; min-width: 0; }
/* 20px, not --strong-md's 24px. At 24px four of five row titles wrapped to
   two lines in the label column, which set the height of every row and made
   a five-question sorter read like five headings stacked on each other.
   These are list items the reader scans, not section headings. */
.mark-row__title {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 20px;
  line-height: var(--lh-tight);
  color: var(--s1-navy);
  margin: 0 0 var(--space-2);
}
.mark-row__gloss {
  font-size: var(--body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 var(--space-3);
}
.mark-row__coalition {
  font-size: var(--caption);
  color: var(--fg-2);
  margin: 0;
}
.mark-row__choices {
  flex: 0 0 auto;
  width: 320px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.mark-row__choices .quick-check__choice {
  padding: var(--space-3);
  font-size: var(--caption);
  font-weight: 600;
}
/* Three-up marks. The width was 420px, which is 64% of a .mark-row inside
   .container--narrow: the label column was starved to ~219px, so row titles
   wrapped to three lines while ~24px of the button column sat unused, and
   one five-question sorter ran 1,640px tall. The stack breakpoint is on the
   VIEWPORT, so it never fires for a row that is narrow because its container
   is narrow rather than because the window is. 348px gives the label back
   roughly 130px without shrinking any tap target below the 44px floor. */
/* 324px, and the inner gap tightens too. At 312 with a 12px radio gap the
   text column was 53px against the 62px that "Necessary" needs on one line,
   so every third button in the COALITION sorter overflowed its border by
   9px. 312 was tuned against the job sorter's labels and never re-checked
   against the coalition sorter's, which are longer and cannot wrap: these
   are single words. Widest label the three-up has to survive on one line is
   "Necessary"; check against that, not against the shortest set. */
.mark-row__choices--three {
  width: 324px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.mark-row__choices--three .quick-check__choice {
  padding: var(--space-3) var(--space-2);
  gap: var(--space-2);
}
@media (max-width: 900px) {
  .mark-row { flex-direction: column; gap: var(--space-4); }
  .mark-row__choices,
  .mark-row__choices--three { width: 100%; }
  /* STACK the three-up here. width:100% alone left repeat(3, 1fr) in force,
     which at 375px is ~81px a cell against the 96px "Necessary" needs, so
     the word ran 16px outside its own border and into the next button. The
     desktop rule above was widened to fix exactly this and the mobile
     override quietly reintroduced it one breakpoint down: a fix checked at
     one width is not a fix. Check BOTH sorters at BOTH widths, and measure
     scrollWidth against clientWidth per button rather than looking at the
     container, which does not overflow either way. */
  .mark-row__choices--three { grid-template-columns: 1fr; }
}

/* Stage 6 picker — which marked job, and which marked partner, the draft is
   about. Added because stage 6 silently used the most recently marked of
   each: a reader who marked three jobs got a note about one of them, with
   nothing on the page saying so, and marking the same three in a different
   order produced a different note. Buttons reuse .quick-check__choice, so
   the picker looks like every other mark on the page, because it is one.
   Added here once rather than styled inline per page, per the modules-forward
   workplan section 4 component note.

   NAMED `.draft-picker`, not `.story-picker`. It was `.story-picker` until
   7 August 2026, which collided with the in-plant door's story accordion of
   the same name (defined ~1,100 lines earlier). This rule is later in the
   file, so it won: the door's four stories were forced into 170px-minimum
   columns they were never built for, and the route buttons inside an opened
   story overflowed their own card into the neighboring one. Two different
   components cannot share a class name (LOCKED design rule 5, one name per
   concept), and a collision between distant rules in one stylesheet reads as
   a layout bug on a page nobody edited. */
.draft-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

/* Voiceover — the spoken line for a scorecard metric. This is the most
   useful writing on the playbook and it was buried in the third column of a
   six-row table, which is where good copy goes to die. Promoted to the lead
   element: the quote is the object, the metric name is the caption. */
.voiceover-list { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.voiceover {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--s1-white);
  padding: var(--space-6);
}
.voiceover__quote {
  position: relative;
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: 1.45;
  color: var(--s1-navy);
  margin: 0 0 var(--space-4);
}
.voiceover__quote i,
.voiceover__quote svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--s1-cyan); margin-top: 4px; }
.voiceover__metric {
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--s1-navy);
  margin: 0 0 var(--space-2);
}
.voiceover__shows { font-size: var(--body-sm); line-height: var(--lh-body); color: var(--fg-2); margin: 0; }

/* Stage 6 summary — assembled from what the reader marked in stages 1 and 3. */
.summary-line {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-2);
}
.summary-line:first-child { border-top: 1px solid var(--border-2); }
.summary-line__label {
  flex: 0 0 128px;
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
.summary-line__value { flex: 1 1 auto; color: var(--s1-navy); font-weight: 600; }
@media (max-width: 700px) {
  .summary-line { flex-direction: column; gap: var(--space-2); }
  .summary-line__label { flex: none; }
}

/* Module card media slot. The practitioner exception to the image plan: this
   audience runs the shop, and the finished artifact is the proof of craft.
   Placeholder until photography lands; see _reorg/_IMAGE_PLAN.md section 6a (the practitioner exception). */
.framework__media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: linear-gradient(140deg, var(--bg-warm) 0%, var(--bg-cool) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.framework__media svg {
  width: 22%;
  height: auto;
  color: var(--s1-cyan);
  opacity: 0.3;
}

/* Proof points as chips rather than a comma-run. Three metrics in a sentence
   read as prose and get skipped; as chips they read as a set you could go and
   measure. */
.framework__desclabel {
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  margin: var(--space-4) 0 var(--space-3);
}
.proof-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.proof-chip {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-warm);
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: var(--caption);
  line-height: 1.35;
  color: var(--fg-1);
}

/* Framework "more" — a module card's exit to its playbook's detail article.
   Added 3 August with the in-plant modules-forward run. The <details>
   disclosure came off the module cards and the long build detail relocated to
   an article, so each card needs a visible route to that depth. Quieter than
   the compare chip below it, which is the commercial exit. */
.framework__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  font-weight: 700;
  color: var(--s1-navy);
  text-decoration: none;
}
.framework__more:hover { color: var(--s1-cyan-hover); }
.framework__more svg { width: 16px; height: 16px; }

/* When a module card carries its description directly (no <details> wrapper),
   the desc has to supply the rule and spacing that .framework__details used to
   provide. Scoped to a DIRECT child so the seven playbooks still using the
   disclosure are untouched: there, __desc sits inside __details. */
.framework__item > .framework__desc {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-1);
}

/* Framework lede — italic 1-line tagline. Shown above the full description,
   which is expandable on playbooks still using the <details> pattern and
   always visible on those rebuilt by the modules-forward run. */
.framework__lede {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin-bottom: var(--space-2);
}
.framework__footer {
  grid-column: 1 / -1;
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-warm);
  border-left: 2px solid var(--s1-navy);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

/* ==========================================================================
  29. LIST PATTERNS — honest-list, article-list, related-content
   ========================================================================== */

.honest-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-7);
}
.honest-item {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-2);
  align-items: flex-start;
}
.honest-item:first-child { border-top: 1px solid var(--border-2); }
.honest-item__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: var(--s1-navy);
  display: flex; align-items: center; justify-content: center;
  color: var(--s1-cyan);
  margin-top: 2px;
}
.honest-item__icon svg { width: 18px; height: 18px; }
.honest-item__text {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.honest-item__text strong {
  font-family: var(--font-subhead);
  font-size: var(--strong-md);
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg-brand);
  display: block;
  margin-bottom: var(--space-3);
}

.article-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.article-card {
  background: var(--s1-white);
  border: 1px solid var(--line);  /* DL v3 row 5 */
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow var(--dur-base) var(--ease-standard),
              border-top-color var(--dur-base) var(--ease-standard),
              border-top-width var(--dur-base) var(--ease-standard);
}
.article-card:hover {
  box-shadow: var(--shadow-md);
  border-top: 2px solid var(--s1-cyan);
}
.article-card__icon {
  flex-shrink: 0;
  color: var(--fg-2);
  transition: color var(--dur-fast) var(--ease-standard);
}
.article-card:hover .article-card__icon { color: var(--s1-cyan); }
.article-card__icon svg { width: 20px; height: 20px; }
.article-card__title {
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  font-weight: 500;
  color: var(--fg-1);
  line-height: var(--lh-subhead);
}

.related-content,
.related-reading {
  padding: var(--space-9) 0;
  background: var(--bg-cool);
}
.related-content__headline,
.related-reading__headline {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--display-sm);
  color: var(--fg-brand);
  margin-bottom: var(--space-7);
}
.related-content__group-label {
  margin: var(--space-7) 0 var(--space-4);
  display: block;
  color: var(--fg-2);
}

/* ==========================================================================
  30. TABLES — section-table
   ========================================================================== */

.section-table {
  margin-top: var(--space-7);
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--body-sm);
}
.section-table__caption {
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  text-align: left;
  margin-bottom: var(--space-3);
  caption-side: top;
}
.section-table thead th {
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  font-weight: 700;
  color: var(--s1-navy);
  text-align: left;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-cool);
  border-bottom: 2px solid var(--s1-navy);
}
.section-table tbody td,
.section-table tbody th {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-1);
  color: var(--fg-1);
  vertical-align: top;
  line-height: var(--lh-body);
}
/* Row-header cells (scope="row"): left-aligned, normal weight so an inner
   <strong> can emphasize just the feature name, matching the body cells. */
.section-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 400;
}
.section-table tbody tr:last-child td,
.section-table tbody tr:last-child th { border-bottom: none; }
.section-table tbody tr:hover td,
.section-table tbody tr:hover th { background: var(--bg-warm); }

/* ==========================================================================
  31. INTERACTIVE — buyer-landscape (role selector + filtered blocks)
   ========================================================================== */

.buyer-landscape__intro {
  max-width: 760px;
  margin-bottom: var(--space-7);
}
.role-selector {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-1);
}
.role-selector__label {
  color: var(--fg-2);
  width: 100%;
  text-align: center;
  margin-bottom: var(--space-3);
}
.role-chip {
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  font-weight: 700;  /* DL v3 row 18: chips join the bold label register */
  color: var(--fg-1);
  background: var(--s1-white);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  padding: 8px var(--space-5);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.role-chip:hover {
  border-color: var(--s1-cyan);
  color: var(--s1-cyan);
}
.role-chip.is-active {
  background: var(--s1-navy);
  color: var(--s1-white);
  border-color: var(--s1-navy);
}
.role-block {
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--border-1);
}
.role-block:last-child { border-bottom: none; }
.role-block.is-hidden { display: none; }
.role-block__role {
  /* DL v3: inherits navy from the kicker group (bright cyan on light was an AA miss) */
  margin-bottom: var(--space-3);
  display: block;
}
.role-block__title {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--strong-xl);
  line-height: 1.2;
  color: var(--s1-navy);
  margin-bottom: var(--space-5);
}
.role-block__body {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  max-width: 760px;
}
.role-block__body p + p { margin-top: var(--space-4); }
.role-block__body ul,
.role-block__body ol {
  margin-left: var(--space-6);
  margin-bottom: var(--space-5);
  padding-left: var(--space-4);
}
.role-block__body li { margin-bottom: var(--space-2); }
.role-block__body p + ul,
.role-block__body p + ol { margin-top: var(--space-3); }
.role-block__body ul + p,
.role-block__body ol + p { margin-top: var(--space-5); }

/* ==========================================================================
  32. SERVICE TILES + partner-proof commitment (on navy)
   ========================================================================== */

.service-models {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.service-tile {
  background: var(--surface-on-navy);
  border: 1px solid var(--border-on-navy-card);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  border-top: 2px solid var(--s1-cyan);
}
.service-tile__label {
  color: var(--s1-cyan);
  margin-bottom: var(--space-3);
  display: block;
}
.service-tile__title {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  color: var(--s1-white);
  margin-bottom: var(--space-4);
}
.service-tile__body {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--on-navy-2);
}
.partner-proof__commitment {
  max-width: 880px;
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-on-navy);
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: var(--lh-body);
  color: var(--on-navy-1);
}

/* ==========================================================================
  33. EDITORIAL — callout
   ========================================================================== */

.callout {
  background: var(--bg-warm);
  border-left: 3px solid var(--s1-cyan);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-6) var(--space-7);
  margin-top: var(--space-7);
  margin-bottom: var(--space-7);
}
.callout__title {
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--s1-navy);
  margin-bottom: var(--space-3);
  display: block;
}
.callout__body {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-style: normal;
  font-size: 26px;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--s1-navy);
}
.callout__body + .callout__body { margin-top: var(--space-4); }
.section--navy .callout {
  background: var(--surface-on-navy);
  border-left-color: var(--s1-cyan);
}
.section--navy .callout__title { color: var(--s1-cyan); }
.section--navy .callout__body  { color: var(--s1-white); }

/* Statement variant of .callout — a confident reframe line set in the page
   heading typeface (DM Sans) rather than the Cormorant editorial body, for
   moments that need weight without the display-serif treatment. The lead
   sentence carries in bold navy; the rest continues in the same size. Reusable. */
.callout--statement .callout__body {
  font-family: var(--font-subhead);
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--fg-1);
}
.callout--statement .callout__body strong {
  font-weight: 700;
  color: var(--s1-navy);
}

/* Callout — Link variant (cross-page wayfinding).
   Modifier of .callout: drops the parchment box + left rule in favor of a
   thin horizontal rule treatment. Uses the same .callout__title / .callout__body
   structure, restyled. Anchor inside .callout__body is the focal element. */
.callout.callout--link,
.callout--link {
  background: transparent;
  border-left: none;
  border-radius: 0;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  padding: var(--space-5) 0;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}
.callout--link .callout__title {
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--s1-cyan);
  margin-bottom: var(--space-3);
}
.callout--link .callout__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: var(--body-md);
  line-height: var(--lh-body);
  letter-spacing: 0;
  color: var(--s1-navy);
  max-width: 720px;
}
.callout--link .callout__body a {
  font-family: var(--font-subhead);
  font-weight: 600;
  font-size: var(--subhead-md);
  color: var(--s1-cyan);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.callout--link .callout__body a:hover {
  color: var(--s1-cyan-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.section--navy .callout--link {
  background: transparent;
  border-top-color: rgba(255,255,255,0.18);
  border-bottom-color: rgba(255,255,255,0.18);
}
.section--navy .callout--link .callout__body { color: var(--on-navy-1); }

/* Source quote — third-party verbatim citation embedded in prose.
   Distinct from .callout (our editorial voice on a parchment card).
   DM Sans italic at body-md; never Cormorant Garamond — it reads thin
   below display sizes. */
.source-quote {
  border-left: 2px solid var(--s1-cyan);
  padding-left: var(--space-5);
  margin: var(--space-5) 0;
}
.source-quote__text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
.source-quote__attribution {
  font-family: var(--font-subhead);
  font-size: var(--caption);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0;
}
.section--navy .source-quote__text       { color: var(--s1-white); }
.section--navy .source-quote__attribution { color: var(--on-navy-3); }

/* ==========================================================================
  34. TOC — table of contents
   ========================================================================== */

.toc {
  background: var(--bg-cool);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  margin-bottom: var(--space-8);
}
.toc__label {
  color: var(--fg-2);
  margin-bottom: var(--space-4);
  display: block;
}
.toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.toc__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.toc__num {
  font-family: var(--font-subhead);
  font-size: var(--caption);
  font-weight: 700;
  color: var(--s1-cyan);
  letter-spacing: var(--track-eyebrow);
  min-width: 28px;
}
.toc__link {
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  font-weight: 500;
  color: var(--s1-navy);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.toc__link:hover { color: var(--s1-cyan); }

/* ==========================================================================
  35. CTA EXTENSIONS — close line + vertical-cta variant
  Base file Section 10 defines .cta-section + .cta-band. These add the
  italic editorial close line and the warm-bg vertical-cta variant.
   ========================================================================== */

.cta-section__close {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-style: italic;
  font-size: var(--strong-md);
  line-height: 1.3;
  color: var(--s1-cyan);
  max-width: 640px;
  margin: 0 auto var(--space-8);
}

/* Trust-bullets pattern inside a centered CTA band.
   Centers the list block; left-aligns the items inside so bullets
   hug their text instead of floating off to the left. */
.cta-section ul {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-7);
  display: inline-block;
  text-align: left;
  color: var(--on-navy-2);
}
.cta-section li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
}
.cta-section li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--s1-cyan);
}

.vertical-cta {
  background: var(--bg-warm);
  padding: var(--space-10) 0;
  text-align: center;
  position: relative;
}
.vertical-cta {
  /* DL v3 note 3: hairline separator (was a 64x3px centered cyan tick) */
  border-top: 1px solid var(--line);
}
.vertical-cta__eyebrow {
  color: var(--s1-cyan);
  margin-bottom: var(--space-5);
  display: block;
}
.vertical-cta__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display-md);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--s1-navy);
  margin: 0 auto var(--space-6);
  max-width: 760px;
}
.vertical-cta__body {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: var(--lh-body);
  color: var(--fg-1);
  max-width: 720px;
  margin: 0 auto var(--space-7);
}
.vertical-cta__close {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-style: italic;
  font-size: var(--strong-md);
  line-height: 1.3;
  color: var(--s1-navy);
  max-width: 640px;
  margin: 0 auto var(--space-8);
}

/* ==========================================================================
  36. BLOG / TAYA — article-header, direct-answer, key-insights,
                    article-body, article-tip, related-articles-cluster,
                    why-partner, next-steps, faq-accordion, author-bio
   ========================================================================== */

.article-header {
  background: var(--s1-white);
  padding: var(--space-9) 0 var(--space-7);
  border-bottom: 1px solid var(--border-1);
}
.article-header__category {
  color: var(--s1-navy);  /* DL v3: navy label on light ground */
  margin-bottom: var(--space-4);
  display: block;
}
.article-header__h1 {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--display-md);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--s1-navy);
  margin-bottom: var(--space-5);
  max-width: 900px;
}
.article-header__year {
  font-family: var(--font-subhead);
  font-style: italic;
  font-weight: 500;
  color: var(--s1-cyan);
}
.article-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  color: var(--fg-2);
}
.article-header__meta strong {
  color: var(--fg-1);
  font-weight: 600;
}

.direct-answer {
  background: rgba(0, 179, 224, 0.06);
  border-left: 3px solid var(--s1-cyan);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-6) var(--space-7);
  margin-top: var(--space-7);
  margin-bottom: var(--space-7);
}
.direct-answer__label {
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--s1-cyan);
  margin-bottom: var(--space-3);
  display: block;
}
.direct-answer__body {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.key-insights {
  background: var(--s1-white);
  border: 1px solid var(--line);  /* DL v3 row 5 */
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  margin-bottom: var(--space-7);
}
.key-insights__label {
  color: var(--fg-2);
  margin-bottom: var(--space-4);
  display: block;
}
.key-insights__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.key-insights__list li {
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.key-insights__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 2px;
  background: var(--s1-cyan);
}

.article-body {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: var(--lh-body);
  color: var(--fg-1);
  max-width: var(--container-reading-max);
}
.article-body h2 {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--strong-lg);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--s1-navy);
  margin-top: var(--space-9);
  margin-bottom: var(--space-4);
}
.article-body h3 {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--subhead-lg);
  color: var(--s1-navy);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}
.article-body p { margin-bottom: var(--space-4); }
.article-body ul,
.article-body ol {
  margin-left: var(--space-6);
  margin-bottom: var(--space-5);
}
.article-body li { margin-bottom: var(--space-2); }

.article-tip {
  background: var(--bg-warm);
  border-left: 3px solid var(--s1-cyan);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
}
.article-tip__label {
  color: var(--s1-cyan);
  margin-bottom: var(--space-2);
  display: block;
}
.article-tip__body {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.article-tip__attribution {
  font-family: var(--font-subhead);
  font-size: var(--caption);
  color: var(--fg-2);
  margin-top: var(--space-2);
  font-style: italic;
}

.related-articles-cluster {
  margin: var(--space-7) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.related-articles-cluster__label {
  color: var(--fg-2);
  margin-bottom: var(--space-3);
  display: block;
}
.related-articles-cluster__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.related-articles-cluster__link {
  font-family: var(--font-subhead);
  font-size: var(--body-md);
  font-weight: 500;
  color: var(--s1-navy);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.related-articles-cluster__link:hover { color: var(--s1-cyan); }

.why-partner {
  background: var(--bg-cool);
  padding: var(--space-9) 0;
}
.why-partner__eyebrow {
  color: var(--s1-cyan);
  margin-bottom: var(--space-4);
  display: block;
}
.why-partner__headline {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--strong-lg);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--s1-navy);
  margin-bottom: var(--space-6);
}
.why-partner__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.why-partner__list li {
  position: relative;
  padding-left: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.why-partner__list li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  color: var(--s1-cyan);
  font-weight: 700;
}

.next-steps {
  background: var(--bg-warm);
  padding: var(--space-9) 0;
}
.next-steps__eyebrow {
  color: var(--s1-cyan);
  margin-bottom: var(--space-4);
  display: block;
}
.next-steps__headline {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--strong-lg);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--s1-navy);
  margin-bottom: var(--space-6);
}
.next-steps__list {
  counter-reset: nextstep;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.next-steps__list li {
  counter-increment: nextstep;
  position: relative;
  padding-left: var(--space-7);
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.next-steps__list li::before {
  content: counter(nextstep, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  font-weight: 700;
  color: var(--s1-cyan);
  letter-spacing: var(--track-eyebrow);
}

.faq-accordion {
  margin-top: var(--space-7);
  border-top: 1px solid var(--border-1);
}
.faq-accordion__item {
  border-bottom: 1px solid var(--border-1);
}
.faq-accordion__question {
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-5) 0;
  font-family: var(--font-subhead);
  font-size: var(--subhead-md);
  font-weight: 600;
  color: var(--s1-navy);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: color var(--dur-fast) var(--ease-standard);
}
.faq-accordion__question:hover { color: var(--s1-cyan); }
.faq-accordion__icon {
  flex-shrink: 0;
  color: var(--s1-cyan);
  transition: transform var(--dur-base) var(--ease-standard);
}
.faq-accordion__icon svg { width: 18px; height: 18px; }
.faq-accordion__item.is-open .faq-accordion__icon { transform: rotate(180deg); }
.faq-accordion__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-standard),
              padding var(--dur-base) var(--ease-standard);
  padding: 0;
}
.faq-accordion__item.is-open .faq-accordion__answer {
  max-height: 600px;
  padding-bottom: var(--space-5);
}
.faq-accordion__answer-body {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.faq-accordion__answer-body p + p { margin-top: var(--space-3); }

.author-bio {
  background: var(--bg-cool);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-8);
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}
.author-bio__photo {
  flex-shrink: 0;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--s1-navy);
  color: var(--s1-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-editorial);
  font-weight: 600;
  font-size: 28px;
}
.author-bio__content { flex: 1; }
.author-bio__name {
  font-family: var(--font-subhead);
  font-size: var(--subhead-md);
  font-weight: 700;
  color: var(--s1-navy);
  margin-bottom: var(--space-1);
}
.author-bio__role {
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  color: var(--fg-2);
  margin-bottom: var(--space-3);
}
.author-bio__body {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

/* ==========================================================================
  37. COMPONENT-LEVEL RESPONSIVE (additions to base Section 18)
  Base file handles container padding, header nav collapse, .stat-strip,
  .article-list, .two-col, .hero padding. These add the new grids
  introduced above.
   ========================================================================== */

@media (max-width: 1100px) {
  .outcomes-grid,
  .pillars,
  .proof-grid,
  .framework,
  .pillar-mini-grid,
  .continuum { grid-template-columns: 1fr 1fr; }
  .tldr-band__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .site-header__dropdown--two-col { min-width: 380px; }
}

@media (max-width: 900px) {
  .outcomes-grid,
  .pillars,
  .proof-grid,
  .framework,
  .pillar-mini-grid,
  .persona-grid,
  .personas,
  .checklist,
  .hover-grid,
  .continuum,
  .service-models { grid-template-columns: 1fr; gap: var(--space-5); }
  .continuum::before { display: none; }
  .vertical-hero { padding: var(--space-9) 0 var(--space-8); }
  .outcomes-closer { font-size: 22px; padding: var(--space-5); }
  .vertical-cta__close,
  .cta-section__close { font-size: 20px; }
  .tldr-band__inner { padding: 0 var(--container-pad-mobile); }
  .author-bio { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
  38. CARD FOLD-CORNER ACCENT (auto-applied)
  The document-fold cyan corner that appears on hover for any card with a
  cyan top-border hover state. Restores the behavior from the original
  print-you-can-trust + education-vertical sample pages. The base file
  (Section 9) keeps the .has-fold-corner opt-in class for ad-hoc use.
   ========================================================================== */

.outcome-card,
.pillar-card,
.pillar-mini { position: relative; }

.outcome-card::after,
.pillar-card::after,
.persona-card::after,
.pillar-mini::after,
.article-card::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 24px;
  height: 24px;
  background: linear-gradient(45deg, transparent 50%, var(--s1-cyan) 50%);
  border-top-right-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard),
              top var(--dur-base) var(--ease-standard),
              height var(--dur-base) var(--ease-standard);
  pointer-events: none;
  z-index: 2;
}

.outcome-card:hover::after,
.outcome-card.is-open::after,
.pillar-card:hover::after,
.persona-card:hover::after,
.pillar-mini:hover::after,
.article-card:hover::after {
  top: -2px;
  height: 25px;
  opacity: 1;
}

/* ==========================================================================
  39. TRUST-BAR IMAGE SUPPORT
  Base trust-bar (Section 16) renders text logos. When real institution
  logos arrive, wrap an <img> inside .trust-bar__logo — these rules size
  and treat it consistently with the text version (mid-gray, grayscale,
  faded). Swap to actual brand color by adding .trust-bar__logo--color.
   ========================================================================== */

.trust-bar__logo img,
.trust-bar__logo svg {
  display: block;
  height: 32px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.78;
  transition: filter var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
}
.trust-bar__marquee:hover .trust-bar__logo img,
.trust-bar__marquee:hover .trust-bar__logo svg {
  filter: grayscale(0);
  opacity: 1;
}
.trust-bar__logo--color img,
.trust-bar__logo--color svg {
  filter: none;
  opacity: 1;
}

/* ==========================================================================
  40. OUTCOMES DIAGNOSTIC  (PLANNED — no WS_ equivalent yet)
   Embedded, on-page, no-backend self-recognition instrument. Six parts,
   progressive reveal, in-memory state. Reuses .form-field / .input / .select
   / .checkbox / .radio / .btn-* from the form + button sections above.
   Jerome: this is the visual reference for the Webflow build of the
   Communications Reality + In-House Print Reality diagnostics.
   ========================================================================== */

.diagnostic {
  background: var(--s1-white);
  border: 1px solid var(--line);  /* DL v3 row 5 */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-7);
  max-width: var(--container-narrow-max);
  margin: 0 auto;
}
@media (max-width: 640px) {
  .diagnostic { padding: var(--space-5); }
}

.diagnostic__eyebrow {
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
  margin: 0 0 var(--space-3);
}
.diagnostic__heading {
  font-family: var(--font-display);
  font-size: var(--display-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
.diagnostic__sub {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 var(--space-6);
  max-width: 56ch;
}

/* Rep field-validation marker — visible in prototype only */
.diagnostic__validation-note {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--caption);
  line-height: 1.5;
  color: #8a6d1f;
  background: rgba(247, 169, 71, 0.12);
  border-left: 3px solid var(--s1-saffron);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-6);
}

/* Progressive steps — hidden until revealed */
.diagnostic__step { display: none; }
.diagnostic__step.is-active { display: block; }
.diagnostic__step + .diagnostic__step.is-active,
.diagnostic__step.is-active ~ .diagnostic__step.is-active {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-1);
}
.diagnostic__step-title {
  font-family: var(--font-subhead);
  font-size: var(--strong-md);
  font-weight: 600;
  line-height: var(--lh-subhead);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}
.diagnostic__step-intro {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 var(--space-5);
  max-width: 60ch;
}

/* Symptom checklist (Part 2) — selectable cards */
.diagnostic__symptoms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}
@media (max-width: 640px) {
  .diagnostic__symptoms { grid-template-columns: 1fr; }
}
.symptom {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.symptom:hover { border-color: var(--s1-mid-gray); }
/* Selected state is JS-driven (.is-on toggled on change) for cross-renderer reliability */
.symptom.is-on {
  border-color: var(--s1-cyan);
  background: rgba(0, 179, 224, 0.05);
}
.symptom .checkbox { margin: 2px 0 0; flex: none; }
.symptom__text {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

/* Identity grid (Part 1) */
.diagnostic__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin: 0 0 var(--space-5);
}
@media (max-width: 640px) {
  .diagnostic__grid { grid-template-columns: 1fr; }
}
.diagnostic__grid .form-field--full { grid-column: 1 / -1; }

/* Focus selection (Part 3) — single-select chips */
.diagnostic__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}
.chip {
  font-family: var(--font-subhead);
  font-size: var(--subhead-sm);
  color: var(--fg-1);
  background: var(--s1-white);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  padding: 10px var(--space-5);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:hover { border-color: var(--s1-mid-gray); }
.chip.is-on {
  border-color: var(--s1-cyan);
  background: var(--s1-navy);
  color: var(--s1-white);
}

/* Current-state rows (Part 4) — the spine, Yes/No/Unknown */
.cs-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-1);
}
.cs-row:first-child { border-top: 1px solid var(--border-1); }
@media (max-width: 640px) {
  .cs-row { grid-template-columns: 1fr; gap: var(--space-3); }
}
.cs-row__prompt {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.cs-row__options { display: flex; gap: var(--space-2); }
.cs-option {
  position: relative;
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  color: var(--fg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  padding: 8px var(--space-4);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.cs-option input { position: absolute; opacity: 0; pointer-events: none; }
.cs-option:hover { border-color: var(--s1-mid-gray); }
.cs-option.is-on {
  border-color: var(--s1-navy);
  background: var(--s1-navy);
  color: var(--s1-white);
}
/* "Unknown" is the finding, give it the cyan accent when chosen */
.cs-option--unknown.is-on {
  border-color: var(--s1-cyan);
  background: var(--s1-cyan);
  color: var(--s1-navy);
}

/* Stakes x Readiness scales (Part 5) */
.scale-row { margin: 0 0 var(--space-5); }
.scale-row__prompt {
  font-family: var(--font-body);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
.scale { display: flex; gap: var(--space-2); }
.scale__item {
  flex: 1;
  text-align: center;
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  color: var(--fg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  padding: 10px var(--space-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.scale__item input { position: absolute; opacity: 0; pointer-events: none; }
.scale__item:hover { border-color: var(--s1-mid-gray); }
.scale__item.is-on {
  border-color: var(--s1-navy);
  background: var(--s1-navy);
  color: var(--s1-white);
}
.scale__ends {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: var(--caption);
  color: var(--fg-2);
  margin-top: var(--space-2);
}

/* Actions */
.diagnostic__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
.diagnostic__skip {
  font-family: var(--font-subhead);
  font-size: var(--subhead-sm);
  color: var(--fg-2);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.diagnostic__skip:hover { color: var(--s1-cyan); }

/* Part 6 — the forwardable read */
.diagnostic__read {
  background: var(--s1-navy);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  margin-top: var(--space-6);
}
/* Links inside the read (navy ground — cyan passes AA here). Styled here so
   the shared Snapshot engine emits plain anchors (no inline styles). */
.diagnostic__read a { color: var(--s1-cyan); font-weight: 600; }
@media (max-width: 640px) {
  .diagnostic__read { padding: var(--space-5); }
}
.diagnostic__read-eyebrow {
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--s1-cyan);
  margin: 0 0 var(--space-4);
}
.diagnostic__read-block { margin: 0 0 var(--space-6); }
.diagnostic__read-label {
  font-family: var(--font-subhead);
  font-size: var(--subhead-sm);
  font-weight: 600;
  color: var(--on-navy-mute);
  margin: 0 0 var(--space-2);
}
.diagnostic__read-body {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: var(--lh-body);
  color: var(--on-navy-1);
  margin: 0;
}
.diagnostic__read-body strong { color: var(--s1-white); }

/* Optional, post-read email capture (non-gated) */
.diagnostic__capture {
  border-top: 1px solid var(--border-on-navy);
  padding-top: var(--space-5);
  margin-top: var(--space-5);
}
.diagnostic__capture-label {
  font-family: var(--font-body);
  font-size: var(--body-md);
  color: var(--on-navy-2);
  margin: 0 0 var(--space-3);
}
.diagnostic__capture-consent {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  color: var(--on-navy-3);
  margin: 0;
}
.diagnostic__capture-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.diagnostic__capture-row .input { flex: 1; min-width: 240px; }

/* Diagnostic B — stub variant */
.diagnostic--stub {
  border-style: dashed;
  border-color: var(--border-2);
  box-shadow: none;
  background: var(--s1-parchment);
}
.diagnostic__stub-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--caption);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-3);
  margin: 0 0 var(--space-4);
}

/* ==========================================================================
  41. PLAYBOOK "TWO DOORS" FORK  (PLANNED — no WS_ equivalent yet)
   A lightweight orientation signpost placed directly after the "Playbook at
   a glance" section on every In-Plant playbook page. Reads as a fork, not a
   second hero: two paneled "doors" (decide vs. build) over a single CTA pair
   pointing at the scorecard form and /contact/. Jerome: this is the visual
   reference for the Webflow build of the playbook fork.
   ========================================================================== */

.playbook-fork__intro {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0 0 var(--space-6);
}

.playbook-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin: 0 0 var(--space-6);
}
@media (max-width: 760px) {
  .playbook-fork { grid-template-columns: 1fr; }
}

.playbook-fork__door {
  background: var(--s1-white);
  border: 1px solid var(--line);  /* DL v3 row 5 */
  border-top: 3px solid var(--s1-cyan);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
}

.playbook-fork__door-body {
  font-family: var(--font-body);
  font-size: var(--body-base);
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}
.playbook-fork__door-body strong {
  color: var(--s1-navy);
  font-weight: 600;
}

.playbook-fork__cta {
  margin-top: var(--space-6);
}

/* ==========================================================================
   14. OUTCOMES DESIGN LANGUAGE v2.1 — global additions (approved 2026-07-04)
   Record: _reorg/design-language/OUTCOMES_DESIGN_LANGUAGE.md
   ========================================================================== */

/* Focus — visible everywhere, re-derived for light-first grounds.
   Navy ring on light (12.6:1); cyan ring inside navy band contexts (4.9:1). */
:where(a, button, [tabindex], input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--s1-navy);
  outline-offset: 2px;
}
.s1-on-navy :focus-visible,
.section--navy :focus-visible,
.cta-section :focus-visible,
.hero--inverse :focus-visible {
  outline-color: var(--s1-cyan);
}

/* Tap targets — 44px minimum on primary interactives (enforced, not advisory) */
.btn-primary,
.btn-secondary,
.btn-nav,
.vertical-hero__cta {
  min-height: 44px;
}

/* Nav — pill hover treatment (from nav v6, colors at AA) */
.site-header__nav-item {
  min-height: 44px;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  /* A nav label must never wrap. Without this the row degrades by stacking
     every label onto two lines rather than by overflowing, which reads as
     broken rather than as tight. Added 2026-08-02 with the nav simplification. */
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.site-header__nav-item:hover,
.site-header__nav-item.is-active,
.site-header__nav-item[aria-expanded="true"] {
  background: rgba(0, 179, 224, 0.11);
  border-color: rgba(0, 179, 224, 0.34);
}


/* ==========================================================================
   DL v3 ROW 5 — card anatomy: resting soft shadow (mockup treatment).
   Cards read as objects, not outlined boxes. Hover states defined earlier
   (higher specificity) still deepen to --shadow-md.
   ========================================================================== */
.outcome-card,
.pillar-card,
.persona-card,
.hover-grid__item,
.checklist__item,
.pillar-mini,
.continuum__card,
.framework__item,
.article-card,
.playbook-fork__door {
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   SELF-SERVICE FLOW — Phase 6, 2026-08-02.

   The Core self-service path is a four-stage flow on one page. Everything
   that could be reused was: `quick-check` is the stage panel, `form-field`
   and `input` are the sizer controls, `quick-check__result` is the readout.
   What is added here is only what none of those cover: the stage rail, the
   sizer's two-path volume control, and the price figure.

   The SIZER IS SHARED (decision D9). Core shows a price; Connected and
   Complete pass the same configuration into a price request in Phase 7.
   Build against these classes there rather than forking them.
   ========================================================================== */

.flow-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  padding: 0;
  list-style: none;
}
.flow-rail__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--s1-white);
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  font-weight: 600;
  color: var(--fg-2);
  min-height: 44px;
}
.flow-rail__step[aria-current="step"] {
  border-color: rgba(0, 179, 224, 0.72);
  background: rgba(0, 179, 224, 0.10);
  color: var(--s1-navy);
}
.flow-rail__step[data-state="done"] { color: var(--s1-navy); }
.flow-rail__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--bg-cool);
  color: var(--s1-navy);
  font-size: var(--caption);
  font-weight: 700;
  flex-shrink: 0;
}
.flow-rail__step[aria-current="step"] .flow-rail__num,
.flow-rail__step[data-state="done"] .flow-rail__num {
  background: var(--s1-cyan);
  color: var(--s1-white);
}

.flow-stage + .flow-stage { margin-top: var(--space-6); }
.flow-stage[hidden] { display: none; }

/* Sizer — the volume control is the interesting part. "I don't know" is the
   PRIMARY path, not a fallback, because buyers do not know their volume.
   It is listed first and is the default selection. */
.sizer__paths { margin-bottom: var(--space-5); }
.sizer__panel { margin-top: var(--space-5); }
.sizer__panel[hidden] { display: none; }
.sizer__estimate {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--s1-cyan);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-warm);
  font-family: var(--font-body);
  font-size: var(--body-sm);
  color: var(--fg-1);
  line-height: var(--lh-body);
}
.sizer__estimate strong { color: var(--s1-navy); }

/* Price readout. The brief calls for price "discoverable, not the
   centerpiece", so the figure is held BELOW the H1 scale at every viewport:
   clamp(1.6, …, 2.1) against --display-xl's clamp(1.9, …, 2.75).
   The first draft set it at clamp(2, …, 2.75), which made it larger than
   the H1 below roughly 1000px while carrying a comment claiming the
   opposite. Check the numbers, not the comment, if you change this. */
.price-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.price-readout__figure {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.1rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--s1-navy);
}
.price-readout__unit {
  font-family: var(--font-subhead);
  font-size: var(--body-md);
  font-weight: 600;
  color: var(--fg-2);
}
.price-readout__band {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--body-sm);
  color: var(--fg-2);
}

/* Configuration recap — what she told us, shown back before the number, so
   the figure is visibly a consequence rather than an assertion. */
.config-recap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--s1-white);
  margin-bottom: var(--space-5);
}
.config-recap__item { display: grid; gap: 2px; }
.config-recap__label {
  font-family: var(--font-subhead);
  font-size: var(--caption);
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
.config-recap__value {
  font-family: var(--font-subhead);
  font-size: var(--body-md);
  font-weight: 700;
  color: var(--s1-navy);
}

/* Stage CTA spacing and the sizer's validation message — added with the
   Phase 6 revision so the flow stops using inline styles, which CLAUDE.md
   bars outright. */
.cta-group--stage { margin-top: var(--space-6); }
.stage-2-error {
  border-left: 3px solid var(--s1-saffron, #E8A33D);
  margin-top: var(--space-5);
}
.stage-2-error[hidden] { display: none; }


/* ==========================================================================
   42. IN-PLANT PLAYBOOK LAYOUT — the left rail, and bands as layers

   Playbook pages only (production-industrial/<family>/<page>/). Two things
   land here together because neither works without the other:

   A. .pb-rail replaces the horizontal .playbook-stages bar at 1240px and up.
      Below that the bar is untouched and the rail is not rendered. The rail
      does two jobs the bar cannot do alone: which stage am I in, AND which
      of the eight playbooks am I in. See _IN_PLANT_RAIL_AND_TEST_RELOCATION.md
      section 6.3 for why those are different needs.
   B. The white / light-gray full-bleed alternation becomes Carbon-style
      LAYERS: one continuous cool ground, each section a white card on it.
      A full-bleed band cannot run under a rail. Approved by Liz 6 Aug 2026
      as a SCOPED exception to DL v3 row 4; every other page on the property
      keeps full-bleed bands. See that doc's section 2.2.

   Everything here is scoped by .pb-layout / .pb-main / .pb-rail. Nothing in
   this section can reach a page that does not carry those classes.
   ========================================================================== */

.pb-layout { background: var(--bg-cool); }
.pb-layout__inner { max-width: 1200px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8); }

/* Every section keeps its markup and its id. Only its ground moves: from a
   full-bleed band to a card sitting on the shared ground. */
.pb-main .section { background: transparent; padding: var(--space-3) 0; }
.pb-main .section > .container,
.pb-main .section > .container--narrow,
.pb-main .section > .container--reading {
  background: var(--s1-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-7);
}
/* The navy CTA band is an accent, not a member of the alternation. It stays
   navy but becomes a card, so the rail has an unbroken ground beside it. */
.pb-main .section--navy > .container,
.pb-main .section--navy > .container--narrow { background: var(--s1-navy); border-color: var(--border-on-navy-card); }
.pb-main .section > .container > .section-header { margin-bottom: var(--space-5); }

/* On a phone the gutter is the scarcest thing on the page. Keep the layer,
   shrink the frame: 48px of card padding inside a 327px card left 231px of
   measure, which is worse than the band it replaced. */
@media (max-width: 900px) {
  .pb-layout__inner { padding: var(--space-4) var(--space-3) var(--space-6); }
  .pb-main .section { padding: var(--space-2) 0; }
  .pb-main .section > .container,
  .pb-main .section > .container--narrow,
  .pb-main .section > .container--reading { padding: var(--space-5); border-radius: var(--radius-md); }
}

.pb-rail { display: none; }

@media (min-width: 1240px) {
  /* The rail absorbs the stage bar. One source of "where am I", not two
     sticky layers stacked on each other. */
  .playbook-stages { display: none; }

  /* THE TRAP. html:has(.playbook-stages) adds --stagebar-height to
     --scroll-offset unconditionally. Above this breakpoint the bar is
     hidden and that 49px is a lie, which parks every anchor jump 49px low.
     Derive it per breakpoint. Never hardcode an anchor offset: this is the
     same class of defect as the two-numbers-that-never-checked-each-other
     bug already fixed in the stage spy. */
  html:has(.playbook-stages) { --scroll-offset: calc(var(--header-height) + var(--space-5)); }

  .pb-layout__inner { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .pb-main .container, .pb-main .container--narrow, .pb-main .container--reading { max-width: 100%; }

  .pb-rail {
    display: block;
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    max-height: calc(100vh - var(--header-height) - var(--space-6));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--s1-white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-4) 0;
  }
}

/* Flex with a min-height rather than display:block, because the DL's 44px tap
   target is a floor and an eyebrow-sized link fails it: this shipped at 31px
   and the a11y check caught it. */
.pb-rail__eyebrow { display: flex; align-items: center; min-height: 44px; font-size: var(--eyebrow); font-weight: 700; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--s1-cyan-deep); padding: 0 var(--space-4); text-decoration: none; }
.pb-rail__eyebrow:hover { color: var(--s1-navy); }

.pb-rail__group-toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-2);
  background: none; border: 0; border-top: 1px solid var(--line);
  padding: var(--space-3) var(--space-4); min-height: 44px;
  font-family: var(--font-body); font-size: var(--body-sm); font-weight: 600; line-height: 1.3;
  color: var(--s1-navy); text-align: left; cursor: pointer;
}
.pb-rail__group-toggle:hover { background: rgba(0, 57, 92, 0.04); }
.pb-rail__chev { flex: none; width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-standard); }
.pb-rail__group-toggle[aria-expanded="true"] .pb-rail__chev { transform: rotate(180deg); }

.pb-rail__list { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.pb-rail__link {
  display: flex; align-items: center; min-height: 44px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5);
  font-size: var(--body-sm); line-height: 1.35; color: var(--fg-2); text-decoration: none;
  border-left: 3px solid transparent;
}
.pb-rail__link:hover { color: var(--s1-navy); background: rgba(0, 57, 92, 0.04); }
.pb-rail__link--hub { font-style: italic; }

/* Current item: a filled block, not color alone. Carbon's treatment, and our
   own AA floor pushes the same way. */
.pb-rail__link.is-page { background: var(--bg-cool); color: var(--s1-navy); font-weight: 700; border-left-color: var(--s1-cyan); }

.pb-rail__stages { list-style: none; margin: 0; padding: 0 0 var(--space-2); background: var(--bg-cool); }
.pb-rail__stage {
  display: flex; align-items: center; gap: var(--space-3); min-height: 44px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5);
  font-size: var(--body-sm); line-height: 1.3; color: var(--fg-2); text-decoration: none;
  border-left: 3px solid transparent;
}
.pb-rail__stage:hover { color: var(--s1-navy); }
/* Numerals mirror the shipped stage bar exactly: warm dot at rest, filled
   navy with white text when current. Do not invent a second treatment for
   the same state. */
.pb-rail__num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-warm); color: var(--fg-2); display: inline-flex; align-items: center; justify-content: center; font-size: var(--caption); font-weight: 800; }
.pb-rail__stage.is-current { color: var(--s1-navy); font-weight: 600; border-left-color: var(--s1-cyan); background: var(--s1-white); }
.pb-rail__stage.is-current .pb-rail__num { background: var(--s1-navy); color: var(--s1-white); }

.pb-rail__standalone { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; border-top: 1px solid var(--line); padding: var(--space-3) var(--space-4); font-size: var(--body-sm); font-weight: 600; color: var(--s1-navy); text-decoration: none; }
.pb-rail__standalone:hover { background: rgba(0, 57, 92, 0.04); }
.pb-rail__standalone i { width: 16px; height: 16px; }

/* ==========================================================================
   STEP RAIL — the three-beat orientation device in a door hero's aside.
   Replaces explanatory prose with navigation: each step anchors to the
   section that performs it, so the aside orients and routes at the same
   time instead of describing what the page is about to do.

   Markup: ol.step-rail > li.step-rail__step > a.step-rail__link >
           span.step-rail__num + span.step-rail__label
   The connector is drawn once on the list rather than per item, so it does
   not have to be re-measured when a label wraps to two lines.
   ========================================================================== */
.step-rail {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.step-rail::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: rgba(0, 179, 224, 0.45);
}
.step-rail__link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 44px;
  padding: var(--space-3) 0;
  text-decoration: none;
  color: var(--s1-navy);
}
.step-rail__num {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--s1-navy);
  color: var(--s1-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-subhead);
  font-size: var(--body-sm);
  font-weight: 800;
}
.step-rail__label {
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--subhead-md);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.step-rail__link:hover .step-rail__label { color: var(--s1-cyan-deep); }
.step-rail__link:hover .step-rail__num { background: var(--s1-cyan-deep); }

/* ==========================================================================
   CHOICE TILES: the door's frustration sorter, sized to be the visual
   event on the page rather than a row of ordinary cards. Distinct from
   .quick-check__choice, which is a compact list control and is load-bearing
   for the in-plant playbook sorters (.mark-row__choices reuses it). These
   two must not be merged: changing one to suit the other breaks the other.

   Six-column grid so five symptom tiles read 3-then-2 without a ragged
   hole: the last two carry --wide. The two entry tiles carry --open.

   --open is a psychological distinction, not a decorative one. "It is all
   of these" and "I am not sure" are permission to enter without having
   diagnosed yourself, so at rest they are quieter than the symptom tiles
   and carry no category label, which would make them read as a sixth and
   seventh symptom. Once chosen they take the identical selected state,
   because an admission is a real answer and must not look like a lesser one.

   REBUILT 10 August, second pass. The first pass made the tiles bigger and
   stopped there, which is why they still read as cards rather than as the
   instrument. Three changes carry the weight:

   1. An icon disc. Each tile now opens with a glyph, so the row is scanned
      as symbols before it is read as sentences. This is what makes it look
      like a control panel instead of a card grid.
   2. A resting arrow. The old tiles announced nothing until hover, and a
      check mark that appears only after clicking cannot invite the click
      that produces it. The arrow says "this goes somewhere" at rest, and
      swaps to the check in the same cell once chosen, so selection reads
      as an answered question rather than as a second widget.
   3. The accent bar is gone and the pain line moved up to --subhead-lg.
      The bar was a hover affordance competing with the arrow for the same
      job; the type is doing that job now, at rest, which is where a sorter
      needs its presence.

   Two-row grid rather than absolute positioning for the arrow: the arrow
   owns its own row, so a long pain line can never run underneath it.

   Markup: div.choice-tiles > button.choice-tile[aria-pressed] >
           span.choice-tile__icon + span.choice-tile__text
             (> span.choice-tile__kicker + span.choice-tile__pain)
           + span.choice-tile__go + span.choice-tile__check
   ========================================================================== */
.choice-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4);
}
.choice-tile {
  grid-column: span 2;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: var(--space-5);
  row-gap: var(--space-4);
  min-height: 190px;
  padding: var(--space-6);
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--s1-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.choice-tile--wide { grid-column: span 3; }
.choice-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 179, 224, 0.72);
}

/* The disc, not the glyph, is the tinted element. A filled icon on a white
   card reads as decoration; a disc reads as a button face, which is what a
   sorter tile is. */
.choice-tile__icon {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: rgba(0, 179, 224, 0.10);
  color: var(--s1-navy);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.choice-tile__icon svg { width: 26px; height: 26px; stroke-width: 1.6; }
.choice-tile__text {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.choice-tile__kicker {
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--s1-cyan-deep);
}
.choice-tile__pain {
  font-family: var(--font-subhead);
  font-size: var(--subhead-lg);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--s1-navy);
}
/* __go and __check share one grid cell and swap, so choosing an answer
   changes the mark in place instead of moving it. */
.choice-tile__go,
.choice-tile__check {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-base) var(--ease-emphasized);
}
.choice-tile__go {
  border: 1px solid rgba(0, 179, 224, 0.45);
  color: var(--s1-cyan-deep);
}
.choice-tile__go svg { width: 18px; height: 18px; }
.choice-tile:hover .choice-tile__go {
  background: var(--s1-cyan);
  border-color: var(--s1-cyan);
  color: var(--s1-navy);
  transform: translateX(3px);
}
.choice-tile__check {
  background: var(--s1-cyan);
  color: var(--s1-navy);
  display: none;
}
.choice-tile__check svg { width: 20px; height: 20px; }
.choice-tile[aria-pressed="true"] {
  background: var(--s1-navy);
  border-color: var(--s1-navy);
  box-shadow: var(--shadow-navy);
}
.choice-tile[aria-pressed="true"] .choice-tile__icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--s1-white);
}
.choice-tile[aria-pressed="true"] .choice-tile__kicker { color: var(--s1-cyan); }
.choice-tile[aria-pressed="true"] .choice-tile__pain { color: var(--s1-white); }
.choice-tile[aria-pressed="true"] .choice-tile__go { display: none; }
.choice-tile[aria-pressed="true"] .choice-tile__check { display: inline-flex; }

/* Entry tiles: parchment ground, no shadow, one row rather than two, so
   they sit lower in the visual order without looking unfinished. */
.choice-tile--open {
  grid-column: span 3;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  min-height: 0;
  background: var(--bg-warm);
  border-color: var(--line-dark);
  box-shadow: none;
}
.choice-tile--open .choice-tile__icon {
  width: 52px;
  height: 52px;
  background: rgba(0, 57, 92, 0.07);
  color: var(--s1-muted);
}
.choice-tile--open .choice-tile__icon svg { width: 24px; height: 24px; }
.choice-tile--open .choice-tile__pain {
  font-size: var(--subhead-md);
  font-weight: 500;
  color: var(--fg-2);
}
.choice-tile--open .choice-tile__go,
.choice-tile--open .choice-tile__check {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}
.choice-tile--open .choice-tile__go {
  border-color: var(--line-dark);
  color: var(--s1-muted);
}
.choice-tile--open:hover { box-shadow: var(--shadow-card); }
.choice-tile--open[aria-pressed="true"] { box-shadow: var(--shadow-navy); }
.choice-tile--open[aria-pressed="true"] .choice-tile__pain {
  color: var(--s1-white);
  font-weight: 600;
}

/* The readout is the .quick-check__result live region on a white ground,
   because the tiles sit on a tinted band rather than inside a white panel.
   It carries the same icon disc as the tiles so it reads as the answer
   slot belonging to that instrument rather than as a loose note. */
.choice-readout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-6);
  background: var(--s1-white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--s1-cyan);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: var(--shadow-card);
}
.choice-readout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: rgba(0, 179, 224, 0.10);
  color: var(--s1-navy);
}
.choice-readout__icon svg { width: 24px; height: 24px; stroke-width: 1.6; }

/* Two across below 1080. Five symptom tiles do not divide by two, so the
   last one takes the whole row rather than leaving a hole beside it, and
   the two entry tiles take a full row each beneath it. That grouping is
   not cosmetic: a naive 2-up reflow pairs the first entry tile with the
   last symptom tile and orphans the second, which reads as "six symptoms
   and a leftover" and destroys the distinction the --open treatment exists
   to make. --full-tablet has no effect above this breakpoint; --row, which
   is defined outside every media query, takes the whole row at all widths. */
@media (max-width: 1080px) {
  .choice-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-tile,
  .choice-tile--wide { grid-column: auto; }
  .choice-tile--full-tablet,
  .choice-tile--open { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .choice-tiles { grid-template-columns: 1fr; }
  .choice-tile,
  .choice-tile--wide,
  .choice-tile--open { grid-column: auto; }
  .choice-tile {
    min-height: 0;
    padding: var(--space-5);
    column-gap: var(--space-4);
  }
  .choice-tile__icon { width: 48px; height: 48px; }
  .choice-tile__icon svg { width: 22px; height: 22px; }
  .choice-tile__pain { font-size: var(--subhead-md); }
  .choice-readout {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .choice-tile:hover { transform: none; }
  .choice-tile:hover .choice-tile__go { transform: none; }
}

/* ==========================================================================
   BUILD UP — tiers shown as accumulation rather than as three independent
   packages. Each tier keeps every layer below it and adds exactly one, so
   the middle tier reads as the one before it plus a named addition instead
   of as a bigger box.

   The layer stack is pinned to the bottom of the card with margin-top:auto.
   Cards stretch to equal height, so the stacks bottom-align and grow
   upward: one bar, two bars, three bars. That growth IS the argument, and
   it is why the stack must not be moved above the body copy.

   Markup: ol.build-up > li.build-up__tier > .build-up__name +
           .build-up__mode + p.build-up__body + ul.build-up__layers >
           li.build-up__layer (--new on the one this tier adds)
   ========================================================================== */
.build-up {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
}
.build-up__tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--s1-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
/* The join between tiers is an addition, not a sequence, so it is a plus
   rather than an arrow. */
.build-up__tier + .build-up__tier::before {
  content: '+';
  position: absolute;
  left: calc((var(--space-5) / 2 + 14px) * -1);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--s1-white);
  border: 1px solid var(--line-dark);
  color: var(--s1-cyan-deep);
  font-family: var(--font-subhead);
  font-size: var(--subhead-md);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.build-up__name {
  font-family: var(--font-subhead);
  font-weight: 800;
  font-size: var(--strong-md);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--s1-navy);
}
.build-up__mode {
  margin-top: var(--space-1);
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
.build-up__body {
  margin-top: var(--space-4);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.build-up__layers {
  list-style: none;
  margin: auto 0 0;
  padding: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-2);
}
.build-up__layer {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--bg-cool);
  color: var(--fg-2);
  font-size: var(--body-sm);
  font-weight: 600;
  line-height: 1.3;
}
.build-up__layer--new {
  background: rgba(0, 179, 224, 0.12);
  border-left: 3px solid var(--s1-cyan);
  color: var(--s1-navy);
  font-weight: 700;
}
@media (max-width: 900px) {
  .build-up { grid-template-columns: 1fr; gap: var(--space-6); }
  .build-up__tier + .build-up__tier::before {
    left: 50%;
    top: calc((var(--space-6) / 2 + 14px) * -1);
    transform: translateX(-50%);
  }
  .build-up__layers { padding-top: var(--space-5); }
}

/* Three-column variant of the joined "what good looks like" cells.
   The stacking override has to be repeated here: .good-grid--three and the
   .good-grid rule inside the 1080 media query carry equal specificity, and
   this block is later in the file, so without it the modifier wins inside
   the media query and the cells stay three-across on a phone. */
.good-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) {
  .good-grid--three { grid-template-columns: 1fr; }
}

/* Quiet third route under a CTA band's button pair, for an exit that should
   stay reachable without competing with the two real ones. */
.cta-section__aside {
  margin-top: var(--space-5);
  font-size: var(--body-sm);
  color: var(--on-navy-2);
}
.cta-section__aside a {
  color: var(--s1-white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   CONTRAST PAIR — two adjacent statements on a navy band, for the moment a
   page stops arguing and states a principle. Deliberately almost copy-free:
   a claim and one supporting line each, then a single closing line. If a
   third column or a second paragraph ever seems necessary here, the content
   belongs in a model-card grid instead, not in this component.
   Markup: div.contrast-pair > div.contrast-pair__side >
           p.contrast-pair__claim + p.contrast-pair__body
           (+ p.contrast-pair__close as a sibling of .contrast-pair)
   ========================================================================== */
.contrast-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-7);
  border-top: 1px solid var(--border-on-navy-card);
  border-bottom: 1px solid var(--border-on-navy-card);
}
.contrast-pair__side { padding: var(--space-7) var(--space-6); }
.contrast-pair__side + .contrast-pair__side {
  border-left: 1px solid var(--border-on-navy-card);
}
.contrast-pair__claim {
  font-family: var(--font-subhead);
  font-weight: 800;
  font-size: var(--strong-lg);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--s1-white);
}
.contrast-pair__body {
  margin-top: var(--space-4);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--on-navy-2);
  max-width: 44ch;
}
.contrast-pair__close {
  margin-top: var(--space-6);
  font-family: var(--font-subhead);
  font-weight: 700;
  font-style: italic;
  font-size: var(--subhead-lg);
  line-height: 1.3;
  color: var(--s1-cyan);
}
@media (max-width: 800px) {
  .contrast-pair { grid-template-columns: 1fr; }
  .contrast-pair__side { padding: var(--space-6) 0; }
  .contrast-pair__side + .contrast-pair__side {
    border-left: 0;
    border-top: 1px solid var(--border-on-navy-card);
  }
}

/* ==========================================================================
   PROOF SCENES — three illustrative scenarios with a picture of the output.
   For a page arguing that physical pieces land differently, made entirely
   out of text on a screen. The media area is the point: until real
   photography exists these render the standard placeholder treatment
   (parchment-to-cool gradient, cyan glyph at low opacity) so an unfilled
   slot reads as pending rather than as a design choice.

   These are SCENARIOS, not case studies. Any copy here describes what a
   moment looks like, never what was achieved for a named customer, because
   nothing in the repo supports a claim of that kind.
   Markup: div.proof-scenes > article.proof-scene >
           div.proof-scene__media + div.proof-scene__body >
           p.proof-scene__kicker + p.proof-scene__text
   ========================================================================== */
.proof-scenes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.proof-scene {
  display: flex;
  flex-direction: column;
  background: var(--s1-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.proof-scene__media {
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(140deg, var(--bg-warm) 0%, var(--bg-cool) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.proof-scene__media svg {
  width: 30%;
  height: auto;
  color: var(--s1-cyan);
  opacity: 0.3;
}
.proof-scene__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.proof-scene__body { padding: var(--space-6); }
.proof-scene__kicker {
  font-family: var(--font-subhead);
  font-size: var(--eyebrow);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--s1-cyan-deep);
}
.proof-scene__text {
  margin-top: var(--space-3);
  font-size: var(--body-md);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
@media (max-width: 900px) {
  .proof-scenes { grid-template-columns: 1fr; }
}

/* The conceptual headline for a tier, above the detail. Optional: use it
   when the tier's name is a label rather than a promise, so the promise
   still gets to lead. */
.build-up__claim {
  margin-top: var(--space-3);
  font-family: var(--font-subhead);
  font-weight: 700;
  font-size: var(--subhead-md);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--s1-navy);
}

/* A tile that takes the whole row at every width. Distinct from
   --full-tablet, which only does so below 1080. Use when a single entry
   tile would otherwise sit at half width beside a hole. */
.choice-tile--row { grid-column: 1 / -1; }