/* ==========================================================================
   Professional AI Solutions — Unified Site Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base & Design System (Tokens, Typography, Layout, Header, Footer, Modals)
   -------------------------------------------------------------------------- */
/* ==========================================================================
   Design system: tokens, base, layout, components
   Palette: deep plum (institutional) + LSE red (signal) on white.
   Type: Schibsted Grotesk (display) + Inter (text).
   ========================================================================== */

    :root {
      color-scheme: light;

      /* Brand */
      --plum-950: #130A1F;
      --plum-900: #1C0F2E;
      --plum-800: #2A1745;
      --plum-700: #3B1F5E;
      --plum-600: #4C2B78;
      --plum-500: #5E3B92;
      --plum-300: #A98BD1;
      --plum-100: #EFEAF6;
      --plum-50: #F7F4FB;

      --red: #DA291C;
      --red-dark: #8F1A10;
      --red-soft: #FBE9E7;

      /* Surfaces and ink */
      --paper: #FFFFFF;
      --paper-2: #F7F5FA;
      --paper-3: #EFEDF3;
      --ink: #1D1830;
      --ink-2: #514A62;
      --ink-3: #6B6481;
      --line: #E4E0EC;
      --line-strong: #CFC9DB;

      /* Status bands (fixed meaning, always with label) */
      --band-not-ready: #DA291C;
      --band-developing: #D98E04;
      --band-ready: #1F9D55;
      --band-leading: #3B1F5E;
      --band-not-ready-soft: #FBE9E7;
      --band-developing-soft: #FBF1DC;
      --band-ready-soft: #E3F4EA;
      --band-leading-soft: #EFEAF6;

      /* Dimension identity hues (labels always present) */
      --dim-strategy: #6250D6;
      --dim-leadership: #2A78D6;
      --dim-data: #1BAF7A;
      --dim-technology: #0E8FA8;
      --dim-governance: #008300;
      --dim-people: #EDA100;
      --dim-culture: #EB6834;
      --dim-workflow: #DA291C;
      --dim-customer: #D55181;

      /* Roadmap chapter hues */
      --ch-why-now: #3B1F5E;
      --ch-assess: #2A78D6;
      --ch-strategy: #6250D6;
      --ch-foundations: #1BAF7A;
      --ch-redesign: #DA291C;
      --ch-pilot: #EB6834;
      --ch-change: #D55181;
      --ch-scale: #008300;

      /* Type */
      --font-display: "Schibsted Grotesk", "Inter", system-ui, -apple-system, sans-serif;
      --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

      --fs-display-1: clamp(2.75rem, 7vw, 5.75rem);
      --fs-display-2: clamp(2.125rem, 4.4vw, 3.75rem);
      --fs-h3: clamp(1.5rem, 2.4vw, 2.125rem);
      --fs-h4: clamp(1.2rem, 1.6vw, 1.4rem);
      --fs-lead: clamp(1.15rem, 1.6vw, 1.4rem);
      --fs-body: 1.0625rem;
      --fs-small: 0.9375rem;
      --fs-caption: 0.8125rem;

      /* Layout */
      --container: 1200px;
      --container-narrow: 820px;
      --gutter: clamp(16px, 4vw, 40px);
      --section: clamp(5rem, 11vw, 9.5rem);
      --radius: 18px;
      --radius-lg: 28px;
      --radius-pill: 999px;

      --shadow-sm: 0 1px 2px rgba(29, 24, 48, 0.06), 0 4px 14px rgba(29, 24, 48, 0.05);
      --shadow-md: 0 2px 6px rgba(29, 24, 48, 0.06), 0 16px 40px rgba(29, 24, 48, 0.08);
      --shadow-lg: 0 10px 30px rgba(29, 24, 48, 0.10), 0 40px 90px rgba(29, 24, 48, 0.12);

      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    }

    /* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
    }

    body {
      margin: 0;
      font-family: var(--font-text);
      font-size: var(--fs-body);
      line-height: 1.6;
      color: var(--ink);
      background: var(--paper);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-feature-settings: "cv11", "ss01", "calt";
      overflow-x: hidden;
    }

    img,
    svg {
      display: block;
      max-width: 100%;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font: inherit;
      color: inherit;
      background: none;
      border: 0;
      padding: 0;
      cursor: pointer;
    }

    input,
    select,
    textarea {
      font: inherit;
      color: inherit;
    }

    ul,
    ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    p {
      margin: 0 0 1em;
    }

    p:last-child {
      margin-bottom: 0;
    }

    strong {
      font-weight: 600;
    }

    :focus-visible {
      outline: 3px solid var(--red);
      outline-offset: 3px;
      border-radius: 6px;
    }

    h1[tabindex="-1"]:focus {
      outline: none;
    }

    .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;
    }

    .skip-link {
      position: absolute;
      left: 16px;
      top: -60px;
      z-index: 1000;
      background: var(--ink);
      color: #fff;
      padding: 10px 16px;
      border-radius: 8px;
    }

    .skip-link:focus {
      top: 16px;
    }

    /* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
    h1,
    h2,
    h3,
    h4,
    .display-1,
    .display-2 {
      font-family: var(--font-display);
      font-weight: 700;
      letter-spacing: -0.028em;
      line-height: 1.04;
      margin: 0;
      color: var(--ink);
      text-wrap: balance;
    }

    .display-1 {
      font-size: var(--fs-display-1);
      letter-spacing: -0.038em;
      line-height: 0.98;
    }

    .display-2,
    h2 {
      font-size: var(--fs-display-2);
      letter-spacing: -0.032em;
    }

    h3 {
      font-size: var(--fs-h3);
      letter-spacing: -0.022em;
      line-height: 1.12;
    }

    h4 {
      font-size: var(--fs-h4);
      letter-spacing: -0.012em;
      line-height: 1.25;
      font-weight: 600;
    }

    .lead {
      font-size: var(--fs-lead);
      line-height: 1.45;
      color: var(--ink-2);
      text-wrap: pretty;
      max-width: 46ch;
    }

    .small {
      font-size: var(--fs-small);
    }

    .caption {
      font-size: var(--fs-caption);
      color: var(--ink-3);
      letter-spacing: 0.01em;
    }

    .muted {
      color: var(--ink-2);
    }

    .measure {
      max-width: 62ch;
      text-wrap: pretty;
    }

    .center {
      text-align: center;
    }

    .center .lead,
    .center .measure {
      margin-left: auto;
      margin-right: auto;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-text);
      font-size: var(--fs-caption);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--plum-700);
      margin-bottom: 1.25rem;
    }

    .eyebrow::before {
      content: "";
      width: 22px;
      height: 2px;
      background: var(--red);
      border-radius: 2px;
    }

    .eyebrow.plain::before {
      display: none;
    }

    .tnum {
      font-variant-numeric: tabular-nums;
    }

    .on-dark,
    .on-dark h1,
    .on-dark h2,
    .on-dark h3,
    .on-dark h4 {
      color: #fff;
    }

    .on-dark .lead,
    .on-dark .muted {
      color: rgba(255, 255, 255, 0.74);
    }

    .on-dark .eyebrow {
      color: var(--plum-300);
    }

    .on-dark .caption {
      color: rgba(255, 255, 255, 0.56);
    }

    /* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
    .container {
      width: 100%;
      max-width: var(--container);
      margin: 0 auto;
      padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
      padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
    }

    .container.narrow {
      max-width: var(--container-narrow);
    }

    .section {
      padding-top: var(--section);
      padding-bottom: var(--section);
      position: relative;
    }

    .section.tight {
      padding-top: calc(var(--section) * 0.6);
      padding-bottom: calc(var(--section) * 0.6);
    }

    .section.flush-top {
      padding-top: 0;
    }

    .section-alt {
      background: var(--paper-2);
    }

    .section-dark {
      background: var(--plum-900);
      color: #fff;
    }

    .section-dark.deep {
      background: var(--plum-950);
    }

    .section-head {
      max-width: 760px;
      margin-bottom: clamp(2.5rem, 5vw, 4rem);
    }

    .section-head .lead {
      margin-top: 1.25rem;
    }

    .section-head.center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .grid {
      display: grid;
      gap: clamp(1rem, 2.4vw, 1.75rem);
    }

    .grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    @media (max-width: 1000px) {
      .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 680px) {

      .grid-2,
      .grid-3,
      .grid-4 {
        grid-template-columns: 1fr;
      }
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      gap: clamp(2rem, 6vw, 6rem);
      align-items: center;
    }

    .split.reverse {
      grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    }

    @media (max-width: 900px) {

      .split,
      .split.reverse {
        grid-template-columns: 1fr;
        gap: 2.5rem;
      }
    }

    .stack>*+* {
      margin-top: var(--stack, 1rem);
    }

    .row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }

    hr.rule {
      border: 0;
      height: 1px;
      background: var(--line);
      margin: 0;
    }

    /* --------------------------------------------------------------------------
   Buttons, chips, links
   -------------------------------------------------------------------------- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 22px;
      border-radius: var(--radius-pill);
      font-weight: 600;
      font-size: var(--fs-small);
      letter-spacing: 0.005em;
      line-height: 1;
      border: 1.5px solid transparent;
      white-space: nowrap;
      transition: transform 0.25s var(--ease-out), background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.25s;
    }

    .btn:active {
      transform: translateY(1px) scale(0.99);
    }

    .btn-primary {
      background: var(--red);
      color: #fff;
      box-shadow: 0 6px 18px rgba(218, 41, 28, 0.22);
    }

    .btn-primary:hover {
      background: #C42217;
      box-shadow: 0 10px 26px rgba(218, 41, 28, 0.28);
      transform: translateY(-1px);
    }

    .btn-dark {
      background: var(--ink);
      color: #fff;
    }

    .btn-dark:hover {
      background: var(--plum-800);
      transform: translateY(-1px);
    }

    .btn-ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--line-strong);
    }

    .btn-ghost:hover {
      border-color: var(--ink);
      transform: translateY(-1px);
    }

    .on-dark .btn-ghost {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.35);
    }

    .on-dark .btn-ghost:hover {
      border-color: #fff;
    }

    .btn-light {
      background: #fff;
      color: var(--ink);
    }

    .btn-light:hover {
      background: var(--plum-50);
      transform: translateY(-1px);
    }

    .btn-lg {
      min-height: 56px;
      padding: 0 28px;
      font-size: var(--fs-body);
    }

    .btn-sm {
      min-height: 38px;
      padding: 0 16px;
      font-size: var(--fs-caption);
    }

    .btn[disabled],
    .btn[aria-disabled="true"] {
      opacity: 0.45;
      pointer-events: none;
    }

    .btn .arrow {
      width: 16px;
      height: 16px;
      transition: transform 0.25s var(--ease-out);
    }

    .btn:hover .arrow {
      transform: translateX(3px);
    }

    @media (max-width: 560px) {
      .btn {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .btn .arrow {
        flex: none;
      }
    }

    .link {
      color: var(--plum-700);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .link:hover {
      color: var(--red);
    }

    .link .arrow {
      width: 14px;
      height: 14px;
    }

    .on-dark .link {
      color: #fff;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      padding: 0 12px;
      border-radius: var(--radius-pill);
      background: var(--paper-2);
      color: var(--ink-2);
      font-size: var(--fs-caption);
      font-weight: 600;
      letter-spacing: 0.01em;
      border: 1px solid var(--line);
    }

    .chip .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--c, var(--plum-700));
    }

    .on-dark .chip {
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
      border-color: rgba(255, 255, 255, 0.14);
    }

    /* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
    .card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: clamp(1.25rem, 2.6vw, 2rem);
      box-shadow: var(--shadow-sm);
      transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.3s;
    }

    .card.hover:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: var(--line-strong);
    }

    .card.soft {
      background: var(--paper-2);
      border-color: transparent;
      box-shadow: none;
    }

    .card.plum {
      background: var(--plum-50);
      border-color: transparent;
      box-shadow: none;
    }

    .card.dark {
      background: var(--plum-800);
      border-color: rgba(255, 255, 255, 0.08);
      color: #fff;
    }

    .card h3,
    .card h4 {
      margin-bottom: 0.6rem;
    }

    .card .caption {
      margin-top: 1rem;
    }

    .feature-card {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      min-height: 100%;
    }

    .feature-card .icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: var(--plum-50);
      color: var(--plum-700);
      margin-bottom: 0.5rem;
    }

    .feature-card .icon svg {
      width: 22px;
      height: 22px;
    }

    .feature-card .spacer {
      flex: 1;
    }

    .feature-card ul {
      display: grid;
      gap: 8px;
      color: var(--ink-2);
      font-size: var(--fs-small);
    }

    .feature-card ul li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }

    .feature-card ul li::before {
      content: "";
      flex: 0 0 6px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--red);
      margin-top: 0.6em;
    }

    /* Stat tiles */
    .stat {
      padding: clamp(1.25rem, 2.4vw, 1.75rem) 0;
      border-top: 1px solid var(--line);
    }

    .stat .value {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1;
      color: var(--ink);
    }

    .stat .value em {
      font-style: normal;
      color: var(--red);
    }

    .stat .label {
      margin-top: 0.75rem;
      color: var(--ink-2);
      font-size: var(--fs-small);
      max-width: 32ch;
    }

    .stat .cite {
      margin-top: 0.5rem;
    }

    .on-dark .stat {
      border-top-color: rgba(255, 255, 255, 0.14);
    }

    .on-dark .stat .value {
      color: #fff;
    }

    /* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: saturate(180%) blur(18px);
      -webkit-backdrop-filter: saturate(180%) blur(18px);
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s, background 0.3s;
    }

    .nav.scrolled {
      border-bottom-color: var(--line);
      background: rgba(255, 255, 255, 0.97);
    }

    .nav .container {
      max-width: 1320px;
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 64px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.25rem;
      letter-spacing: -0.02em;
      color: var(--ink);
      text-decoration: none;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .brand-mark {
      width: 28px;
      height: 28px;
      flex: none;
    }

    .nav-links {
      display: flex;
      gap: 4px;
      align-items: center;
      flex-shrink: 0;
    }

    .nav-links a {
      padding: 6px 12px;
      border-radius: 8px;
      font-size: var(--fs-small);
      font-weight: 500;
      color: var(--ink-2);
      white-space: nowrap;
      transition: color 0.2s, background 0.2s;
    }

    .nav-links a:hover {
      color: var(--ink);
      background: var(--paper-2);
    }

    .nav-links a[aria-current="page"] {
      color: var(--ink);
      font-weight: 600;
    }

    .nav-cta {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .nav-cta .btn {
      white-space: nowrap;
    }

    .lang-switch {
      display: inline-flex;
      align-items: center;
      background: var(--paper-2);
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-full);
      padding: 2px;
      font-family: inherit;
      font-size: var(--fs-caption);
      font-weight: 600;
      letter-spacing: 0.04em;
      line-height: 1;
      margin-right: 2px;
      flex-shrink: 0;
      user-select: none;
    }

    .lang-switch .lang-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 26px;
      height: 24px;
      padding: 0 6px;
      border-radius: var(--radius-full);
      color: var(--ink-2);
      text-decoration: none;
      font-size: 0.75rem;
      transition: all 0.15s ease;
      cursor: pointer;
    }

    .lang-switch a.lang-btn:hover {
      color: var(--ink);
      background: rgba(0, 0, 0, 0.05);
    }

    .lang-switch .lang-btn.active {
      background: var(--plum-700);
      color: #fff;
      cursor: default;
    }

    .nav-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: transparent;
      border: 1px solid var(--line-strong);
      color: var(--ink);
      place-items: center;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      flex-shrink: 0;
    }

    .nav-toggle:hover {
      border-color: var(--ink);
      background: var(--paper-2);
    }

    .nav-toggle svg {
      width: 22px;
      height: 22px;
    }

    @media (max-width: 1140px) {
      .nav-cta .btn-ghost {
        display: none;
      }
    }

    @media (max-width: 960px) {
      .nav-links {
        display: none;
      }

      .nav-toggle {
        display: grid;
      }

      .nav.open .nav-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 12px var(--gutter) 20px;
        gap: 2px;
        box-shadow: var(--shadow-md);
        max-height: calc(100vh - 65px);
        max-height: calc(100dvh - 65px);
        overflow-y: auto;
      }

      .nav.open .nav-links a {
        padding: 14px 12px;
        font-size: 1.05rem;
      }
    }

    @media (max-width: 560px) {
      .nav-cta .btn-primary {
        display: none;
      }

      .brand {
        font-size: 1.05rem;
      }

      .nav.open .nav-links .nav-menu-cta {
        margin-top: 10px;
        display: inline-flex;
      }
    }

    /* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
    .footer {
      background: var(--plum-950);
      color: rgba(255, 255, 255, 0.78);
      padding: clamp(3rem, 6vw, 5rem) 0 2rem;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.4fr;
      gap: 2.5rem;
    }

    @media (max-width: 900px) {
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 560px) {
      .footer-grid {
        grid-template-columns: 1fr;
      }
    }

    .footer .brand {
      color: #fff;
    }

    .footer h4 {
      color: #fff;
      font-size: var(--fs-small);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 1rem;
      font-weight: 600;
    }

    .footer ul {
      display: grid;
      gap: 10px;
    }

    .footer a:hover {
      color: #fff;
    }

    .footer .legal {
      margin-top: 3rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      font-size: var(--fs-caption);
      color: rgba(255, 255, 255, 0.5);
    }

    .footer .contact-line {
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: var(--fs-small);
    }

    .footer .contact-line a {
      color: #fff;
    }

    /* --------------------------------------------------------------------------
   Contact modal
   -------------------------------------------------------------------------- */
    .modal {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .modal[open],
    .modal.open {
      display: flex;
    }

    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(19, 10, 31, 0.6);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }

    .modal-panel {
      position: relative;
      background: #fff;
      border-radius: var(--radius-lg);
      padding: clamp(1.5rem, 4vw, 2.5rem);
      width: min(560px, 100%);
      box-shadow: var(--shadow-lg);
      animation: modal-in 0.35s var(--ease-out);
    }

    .modal-panel {
      max-height: calc(100vh - 40px);
      max-height: calc(100dvh - 40px);
      overflow-y: auto;
    }

    @keyframes modal-in {
      from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--ink-2);
    }

    .modal-close:hover {
      background: var(--paper-2);
      color: var(--ink);
    }

    .modal-panel h3 {
      margin-bottom: 0.5rem;
    }

    .contact-options {
      display: grid;
      gap: 12px;
      margin-top: 1.5rem;
    }

    .contact-option {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      transition: border-color 0.2s, background 0.2s;
    }

    .contact-option:hover {
      border-color: var(--ink);
      background: var(--paper-2);
    }

    .contact-option .ico {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: var(--plum-50);
      color: var(--plum-700);
      display: grid;
      place-items: center;
      flex: none;
    }

    .contact-option .ico svg {
      width: 20px;
      height: 20px;
    }

    .co-link {
      display: flex;
      align-items: center;
      gap: 14px;
      flex: 1;
      min-width: 0;
    }

    .contact-option .copy-btn {
      flex: none;
    }

    .contact-option .t {
      font-weight: 600;
    }

    .contact-option .s {
      font-size: var(--fs-caption);
      color: var(--ink-3);
    }

    /* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
    .field {
      display: grid;
      gap: 6px;
    }

    .field label {
      font-size: var(--fs-small);
      font-weight: 600;
      color: var(--ink);
    }

    .field .hint {
      font-size: var(--fs-caption);
      color: var(--ink-3);
    }

    .input,
    .select {
      width: 100%;
      min-height: 50px;
      padding: 0 16px;
      border-radius: 12px;
      border: 1.5px solid var(--line-strong);
      background: #fff;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .input:focus,
    .select:focus {
      outline: none;
      border-color: var(--plum-700);
      box-shadow: 0 0 0 4px rgba(59, 31, 94, 0.12);
    }

    .input[aria-invalid="true"] {
      border-color: var(--red);
    }

    .select {
      appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23514A62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 40px;
    }

    .checkbox {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: var(--fs-small);
      color: var(--ink-2);
    }

    .checkbox input {
      width: 20px;
      height: 20px;
      margin-top: 2px;
      accent-color: var(--plum-700);
      flex: none;
    }

    .form-error {
      color: var(--red);
      font-size: var(--fs-caption);
      min-height: 1.2em;
    }

    /* --------------------------------------------------------------------------
   Motion: reveals are scroll-driven CSS animations (no JS, visible at rest in
   browsers without support); the hero uses a short load sequence.
   -------------------------------------------------------------------------- */
    @keyframes reveal-in {
      from {
        opacity: 0;
        transform: translateY(22px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes load-in {
      from {
        opacity: 0;
        transform: translateY(14px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    @supports (animation-timeline: view()) {
      .reveal {
        animation: reveal-in 1s var(--ease-out) both;
        animation-timeline: view();
        animation-range: entry 0% entry 45%;
      }

      .reveal[data-delay="1"] {
        animation-range: entry 5% entry 50%;
      }

      .reveal[data-delay="2"] {
        animation-range: entry 10% entry 55%;
      }

      .reveal[data-delay="3"] {
        animation-range: entry 15% entry 60%;
      }

      .reveal[data-delay="4"] {
        animation-range: entry 20% entry 65%;
      }

      .hero .reveal,
      .pb-hero .reveal,
      .uc-hero .reveal {
        animation: load-in 0.7s var(--ease-out) both;
        animation-timeline: auto;
        animation-range: normal;
      }

      .hero .reveal[data-delay="1"],
      .pb-hero .reveal[data-delay="1"],
      .uc-hero .reveal[data-delay="1"] {
        animation-delay: 0.08s;
      }

      .hero .reveal[data-delay="2"],
      .pb-hero .reveal[data-delay="2"],
      .uc-hero .reveal[data-delay="2"] {
        animation-delay: 0.16s;
      }

      .hero .reveal[data-delay="3"],
      .pb-hero .reveal[data-delay="3"],
      .uc-hero .reveal[data-delay="3"] {
        animation-delay: 0.24s;
      }

      .hero .reveal[data-delay="4"],
      .pb-hero .reveal[data-delay="4"],
      .uc-hero .reveal[data-delay="4"] {
        animation-delay: 0.32s;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal {
        animation: none !important;
        opacity: 1;
        transform: none;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
    }

    .copy-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 40px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      font-size: var(--fs-caption);
      font-weight: 600;
      color: var(--ink-2);
      background: #fff;
    }

    .copy-btn:hover {
      border-color: var(--ink);
      color: var(--ink);
    }

    .copy-btn.done {
      border-color: var(--band-ready);
      color: #145F35;
    }

    /* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
    .mt-1 {
      margin-top: 0.5rem;
    }

    .mt-2 {
      margin-top: 1rem;
    }

    .mt-3 {
      margin-top: 1.5rem;
    }

    .mt-4 {
      margin-top: 2rem;
    }

    .mt-6 {
      margin-top: 3rem;
    }

    .mb-2 {
      margin-bottom: 1rem;
    }

    .mb-3 {
      margin-bottom: 1.5rem;
    }

    .w-full {
      width: 100%;
    }

    .show-mobile {
      display: none;
    }

    @media (max-width: 680px) {
      .hide-mobile {
        display: none !important;
      }

      .show-mobile {
        display: initial;
      }
    }

    .badge-red {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--red-soft);
      color: var(--red-dark);
      font-weight: 600;
      font-size: var(--fs-caption);
      padding: 6px 12px;
      border-radius: var(--radius-pill);
    }

    .badge-plum {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--plum-100);
      color: var(--plum-700);
      font-weight: 600;
      font-size: var(--fs-caption);
      padding: 6px 12px;
      border-radius: var(--radius-pill);
    }

    /* Print */
    @media print {

      .nav,
      .footer,
      .no-print,
      .modal {
        display: none !important;
      }

      body {
        background: #fff;
        color: #000;
      }

      .section {
        padding: 1.5rem 0;
      }
    }

    .footer .contact-line a.btn {
      color: var(--ink);
    }

    .nav-menu-cta {
      display: none;
    }

/* --------------------------------------------------------------------------
   2. Core Components (Workflow, Stats, Products, Principles, Stages, FAQ)
   -------------------------------------------------------------------------- */
/* Home page: hero, workflow strip, dimension ring, paradigm steps, stages, FAQ, CTA */

    .hero {
      padding-top: clamp(3.5rem, 8vw, 7rem);
      padding-bottom: clamp(3rem, 6vw, 5rem);
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: -20% -10% auto -10%;
      height: 70%;
      pointer-events: none;
      z-index: -1;
      background:
        radial-gradient(60% 50% at 20% 20%, rgba(59, 31, 94, 0.08), transparent 70%),
        radial-gradient(40% 40% at 85% 10%, rgba(218, 41, 28, 0.07), transparent 70%);
    }

    .hero-copy {
      max-width: 880px;
    }

    .hero-copy .lead {
      margin-top: 1.5rem;
      max-width: 56ch;
    }

    .hero-actions {
      margin-top: 2.25rem;
    }

    .hero-meta {
      margin-top: 1.5rem;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    /* Workflow strip */
    .workflow-strip {
      margin: clamp(3rem, 6vw, 5rem) 0 0;
      padding: clamp(1.25rem, 2.5vw, 2rem);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
    }

    .ws-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 1rem;
      margin-bottom: 1.25rem;
      flex-wrap: wrap;
    }

    .ws-stage {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: var(--fs-h4);
      letter-spacing: -0.01em;
    }

    .ws-pause {
      min-height: 40px;
      margin-left: auto;
    }

    .ws-pause[hidden] {
      display: none;
    }

    .ws-total {
      text-align: right;
      display: grid;
      gap: 2px;
    }

    .ws-time {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.4rem, 2.6vw, 2rem);
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--ink);
    }

    .ws-row {
      display: flex;
      gap: 10px;
      align-items: stretch;
      min-height: 124px;
    }

    .ws-tile {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      border-radius: 14px;
      border: 1.5px solid var(--line-strong);
      background: #fff;
      padding: 10px 12px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      overflow: hidden;
      transition: background 0.5s, border-color 0.5s, color 0.5s;
    }

    .ws-tile .ws-tag {
      height: 18px;
      align-self: flex-start;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 999px;
      opacity: 0;
      transform: translateY(-6px);
      line-height: 14px;
    }

    .ws-tile .ws-name {
      font-size: var(--fs-small);
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.005em;
      margin-top: auto;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .ws-tile .ws-min {
      font-size: var(--fs-caption);
      color: var(--ink-3);
      white-space: nowrap;
    }

    .ws-tile .ws-glyph {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      opacity: 0;
      color: #fff;
    }

    .ws-tile .ws-glyph svg {
      width: 20px;
      height: 20px;
    }

    .ws-tile.is-auto {
      background: var(--plum-700);
      border-color: var(--plum-700);
      color: #fff;
    }

    .ws-tile.is-auto .ws-min {
      color: rgba(255, 255, 255, 0.7);
    }

    .ws-tile.is-auto .ws-tag {
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
    }

    .ws-tile.is-aug {
      background: var(--plum-50);
      border-color: var(--plum-500);
    }

    .ws-tile.is-aug .ws-tag {
      background: var(--plum-700);
      color: #fff;
    }

    .ws-tile.is-human {
      background: #fff;
      border-color: var(--ink);
    }

    .ws-tile.is-human .ws-tag {
      background: var(--ink);
      color: #fff;
    }

    .ws-tile.collapsed .ws-name,
    .ws-tile.collapsed .ws-min,
    .ws-tile.collapsed .ws-tag {
      opacity: 0;
    }

    .ws-tile.collapsed .ws-glyph {
      opacity: 1;
    }

    .ws-check {
      flex: 0 0 0px;
      width: 0;
      position: relative;
      align-self: stretch;
      opacity: 0;
    }

    .ws-check::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 6px;
      bottom: 6px;
      width: 3px;
      margin-left: -1.5px;
      background: var(--red);
      border-radius: 3px;
    }

    .ws-check::after {
      content: "";
      position: absolute;
      left: 50%;
      top: -5px;
      width: 12px;
      height: 12px;
      margin-left: -6px;
      border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 0 4px var(--red-soft);
    }

    .ws-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 22px;
      margin-top: 1.25rem;
      font-size: var(--fs-caption);
      color: var(--ink-2);
    }

    .ws-key {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .ws-key .k {
      width: 14px;
      height: 14px;
      border-radius: 4px;
      border: 1.5px solid var(--line-strong);
      display: inline-block;
    }

    .ws-key .k-auto {
      background: var(--plum-700);
      border-color: var(--plum-700);
    }

    .ws-key .k-aug {
      background: var(--plum-50);
      border-color: var(--plum-500);
    }

    .ws-key .k-human {
      background: #fff;
      border-color: var(--ink);
    }

    .ws-key .k-check {
      width: 4px;
      border-radius: 3px;
      background: var(--red);
      border-color: var(--red);
    }

    .ws-caption {
      margin-top: 1rem;
      font-size: var(--fs-small);
      color: var(--ink-2);
    }

    @media (max-width: 760px) {
      .ws-row {
        flex-wrap: wrap;
      }

      .ws-tile {
        flex: 1 1 calc(25% - 8px);
        min-height: 84px;
        padding: 10px;
      }

      .ws-tile .ws-name {
        white-space: normal;
        font-size: var(--fs-caption);
      }

      .ws-check {
        display: none;
      }
    }

    /* Stats */
    .stats {
      display: grid;
      gap: 0;
    }

    .stats .stat:last-child {
      border-bottom: 1px solid var(--line);
    }

    /* Products */
    .products .card {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .products .p-kicker {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .products .p-num {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 2rem;
      letter-spacing: -0.04em;
      color: var(--plum-700);
      line-height: 1;
    }

    .products .p-dur {
      color: var(--ink-3);
      font-size: var(--fs-caption);
    }

    .products .card ul {
      display: grid;
      gap: 8px;
      color: var(--ink-2);
      font-size: var(--fs-small);
      margin-top: 0.25rem;
    }

    .products .card ul li {
      display: flex;
      gap: 10px;
    }

    .products .card ul li::before {
      content: "";
      flex: 0 0 6px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--red);
      margin-top: 0.6em;
    }

    .products .card .spacer {
      flex: 1;
    }

    .products .card.coming {
      opacity: 0.86;
    }

    .products .card.coming .p-num {
      color: var(--ink-3);
    }

    /* Dimension ring */
    .dim-ring-wrap {
      display: flex;
      justify-content: center;
    }

    .dim-ring {
      position: relative;
      width: min(520px, 100%);
      aspect-ratio: 1;
    }

    .dim-ring svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .dim-node {
      position: absolute;
      width: 34%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
      font-size: var(--fs-caption);
      font-weight: 600;
      line-height: 1.2;
      transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
      cursor: default;
      text-align: left;
    }

    .dim-node .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--c);
      flex: none;
    }

    .dim-node:hover,
    .dim-node.active {
      transform: translate(-50%, -50%) scale(1.06);
      box-shadow: var(--shadow-md);
      border-color: var(--c);
    }

    .dim-ring .core {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      width: 34%;
    }

    .dim-ring .core .big {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.2rem, 4vw, 3.2rem);
      letter-spacing: -0.04em;
      line-height: 1;
      color: var(--ink);
    }

    .dim-ring .core .lbl {
      font-size: var(--fs-caption);
      color: var(--ink-3);
      margin-top: 6px;
    }

    @media (max-width: 560px) {
      .dim-ring {
        aspect-ratio: auto;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .dim-ring svg,
      .dim-ring .core {
        display: none;
      }

      .dim-node {
        position: static;
        transform: none;
        width: auto;
      }

      .dim-node:hover,
      .dim-node.active {
        transform: none;
      }
    }

    /* Paradigm steps */
    .paradigm-steps {
      display: grid;
      gap: 10px;
    }

    .p-step {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 14px;
      align-items: start;
      padding: 16px 18px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    .p-step .n {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      font-family: var(--font-display);
      font-weight: 700;
      background: rgba(255, 255, 255, 0.1);
    }

    .p-step.hot .n {
      background: var(--red);
    }

    .p-step .t {
      font-weight: 600;
    }

    .p-step .d {
      color: rgba(255, 255, 255, 0.7);
      font-size: var(--fs-small);
      margin-top: 2px;
    }

    /* Principles */
    .principles {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0;
      border-top: 1px solid var(--line);
    }

    .principle {
      padding: 1.5rem 1.25rem 1.5rem 0;
      border-bottom: 1px solid var(--line);
    }

    .principle+.principle {
      border-left: 1px solid var(--line);
      padding-left: 1.25rem;
    }

    .principle .mark {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--red);
      margin-bottom: 1rem;
    }

    .principle h4 {
      margin-bottom: 0.5rem;
    }

    .principle p {
      color: var(--ink-2);
      font-size: var(--fs-small);
    }

    @media (max-width: 1000px) {
      .principles {
        grid-template-columns: repeat(2, 1fr);
      }

      .principle+.principle {
        border-left: 0;
        padding-left: 0;
      }

      .principle:nth-child(even) {
        border-left: 1px solid var(--line);
        padding-left: 1.25rem;
      }
    }

    @media (max-width: 600px) {
      .principles {
        grid-template-columns: 1fr;
      }

      .principle:nth-child(even) {
        border-left: 0;
        padding-left: 0;
      }
    }

    /* Stages (services) */
    .stages {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      position: relative;
    }

    .stage {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 1.5rem;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
    }

    .stage:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .stage .s-num {
      font-family: var(--font-display);
      font-size: var(--fs-caption);
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--red);
    }

    .stage h3 {
      font-size: 1.5rem;
    }

    .stage .promise {
      color: var(--ink-2);
    }

    .stage ul {
      display: grid;
      gap: 6px;
      font-size: var(--fs-small);
      color: var(--ink-2);
      margin-top: 0.5rem;
    }

    .stage ul li {
      display: flex;
      gap: 10px;
    }

    .stage ul li::before {
      content: "";
      flex: 0 0 6px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--plum-500);
      margin-top: 0.6em;
    }

    .stage .meta {
      margin-top: auto;
      padding-top: 0.75rem;
      border-top: 1px solid var(--line);
      font-size: var(--fs-caption);
      color: var(--ink-3);
      display: grid;
      gap: 4px;
    }

    .stage::after {
      content: "";
      position: absolute;
      right: -14px;
      top: 50%;
      width: 14px;
      height: 2px;
      background: var(--line-strong);
    }

    .stage:last-child::after {
      display: none;
    }

    @media (max-width: 1000px) {
      .stages {
        grid-template-columns: repeat(2, 1fr);
      }

      .stage::after {
        display: none;
      }
    }

    @media (max-width: 600px) {
      .stages {
        grid-template-columns: 1fr;
      }
    }

    /* Experience */
    .exp-grid {
      align-items: start;
    }

    .exp-lines {
      display: grid;
      gap: 0;
    }

    .exp-line {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 20px;
      align-items: baseline;
      padding: 1.1rem 0;
      border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .exp-line:last-child {
      border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .exp-line .v {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.8rem, 3.2vw, 2.6rem);
      letter-spacing: -0.04em;
      color: #fff;
      line-height: 1;
      min-width: 3.2ch;
    }

    .exp-line .v em {
      font-style: normal;
      color: var(--red);
    }

    .exp-line .t {
      color: rgba(255, 255, 255, 0.8);
    }

    .grounding {
      padding: clamp(1.5rem, 3vw, 2.25rem);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    .grounding h3 {
      color: #fff;
    }

    .grounding .muted {
      color: rgba(255, 255, 255, 0.72);
    }

    /* FAQ */
    .faq {
      border-top: 1px solid var(--line);
    }

    .faq-item {
      border-bottom: 1px solid var(--line);
    }

    .faq-q {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      padding: 1.25rem 0;
      text-align: left;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: var(--fs-h4);
      letter-spacing: -0.01em;
    }

    .faq-q .pm {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1.5px solid var(--line-strong);
      display: grid;
      place-items: center;
      flex: none;
      transition: transform 0.3s var(--ease-out), background 0.2s, border-color 0.2s;
    }

    .faq-q .pm svg {
      width: 14px;
      height: 14px;
    }

    .faq-q[aria-expanded="true"] .pm {
      transform: rotate(45deg);
      background: var(--ink);
      border-color: var(--ink);
      color: #fff;
    }

    .faq-a {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.4s var(--ease-out);
    }

    .faq-a>div {
      overflow: hidden;
    }

    .faq-a.open {
      grid-template-rows: 1fr;
    }

    .faq-a p {
      color: var(--ink-2);
      padding-bottom: 1.25rem;
      max-width: 68ch;
    }

    /* CTA */
    .cta-panel {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 2rem;
      flex-wrap: wrap;
      padding: clamp(2rem, 4vw, 3.5rem);
      border-radius: var(--radius-lg);
      background: var(--plum-50);
      border: 1px solid var(--plum-100);
    }

    .cta-panel h2 {
      font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    }

    .cta-panel .lead {
      max-width: 44ch;
    }

    /* Why-now without stats: single column */
    .split.solo {
      grid-template-columns: 1fr;
    }

    .split.solo>div:first-child {
      max-width: 760px;
    }

    .exp-line .v .cap {
      width: 1.1em;
      height: 1.1em;
      color: var(--red);
      display: inline-block;
      vertical-align: -0.1em;
    }

    .ws-tile .ws-name .short {
      display: none;
    }

    @media (max-width: 760px) {
      .ws-tile .ws-name .long {
        display: none;
      }

      .ws-tile .ws-name .short {
        display: inline;
      }
    }

    /* Dimension ring entrance: scroll-driven, visible at rest where unsupported */
    @keyframes node-in {
      from {
        opacity: 0;
        scale: 0.6;
      }

      to {
        opacity: 1;
        scale: 1;
      }
    }

    @keyframes ring-draw {
      from {
        stroke-dashoffset: 300;
      }

      to {
        stroke-dashoffset: 0;
      }
    }

    @supports (animation-timeline: view()) {
      .dim-node {
        animation: node-in 0.6s var(--ease-out) both;
        animation-timeline: view();
        animation-range: entry calc(10% + var(--i, 0) * 5%) entry calc(40% + var(--i, 0) * 5%);
      }

      .dim-ring svg line {
        stroke-dasharray: 60;
        animation: ring-draw 1s linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .dim-node,
      .dim-ring svg line {
        animation: none !important;
      }
    }

/* --------------------------------------------------------------------------
   3. Assessment Page (Statements, Scales, Radar, Score Cards, Report)
   -------------------------------------------------------------------------- */
/* Assessment: progress, screens, statements, scale, gate, report */

    .assess-body {
      background: var(--paper-2);
    }

    .assess {
      min-height: 70vh;
      padding-bottom: var(--section);
    }

    /* Progress */
    .assess-progress {
      position: sticky;
      top: 64px;
      z-index: 90;
      background: rgba(247, 245, 250, 0.9);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
    }

    .ap-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      padding: 10px 0 8px;
    }

    .ap-steps {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .ap-step {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: var(--fs-caption);
      font-weight: 600;
      color: var(--ink-3);
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid transparent;
    }

    .ap-step .d {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--line-strong);
    }

    .ap-step.done {
      color: var(--ink-2);
    }

    .ap-step.done .d {
      background: var(--c);
    }

    .ap-step.current {
      color: var(--ink);
      background: #fff;
      border-color: var(--line);
    }

    .ap-step.current .d {
      background: var(--c);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent);
    }

    .ap-step span.lbl {
      display: none;
    }

    .ap-step.current span.lbl {
      display: inline;
    }

    @media (min-width: 1400px) {
      .ap-step span.lbl {
        display: inline;
      }
    }

    .ap-meta {
      font-size: var(--fs-caption);
      color: var(--ink-2);
      white-space: nowrap;
    }

    .ap-sep {
      margin: 0 8px;
      color: var(--line-strong);
    }

    .ap-bar {
      height: 3px;
      background: var(--line);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: -1px;
    }

    .ap-bar span {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--plum-700), var(--red));
      transition: width 0.5s var(--ease-out);
    }

    /* Keep focused and auto-scrolled content clear of the sticky nav and progress header */
    html[data-page="assessment"],
    html:has(.assess-body) {
      scroll-padding-top: 160px;
    }

    @media (max-width: 560px) {
      .ap-steps {
        display: none;
      }

      .ap-row {
        justify-content: flex-end;
        padding: 8px 0 6px;
      }

      html[data-page="assessment"],
      html:has(.assess-body) {
        scroll-padding-top: 116px;
      }
    }

    /* Screens */
    .screen {
      padding-top: clamp(2.5rem, 6vw, 5rem);
      animation: screen-in 0.5s var(--ease-out);
    }

    @keyframes screen-in {
      from {
        opacity: 0;
        transform: translateY(14px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .screen-head {
      max-width: 760px;
      margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    }

    .screen-head .lead {
      margin-top: 1rem;
    }

    .screen-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      margin-top: 2rem;
      flex-wrap: wrap;
    }

    .screen-nav .hint {
      font-size: var(--fs-caption);
      color: var(--ink-3);
    }

    /* Intro */
    .intro-grid {
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
    }

    @media (max-width: 900px) {
      .intro-grid {
        grid-template-columns: 1fr;
      }
    }

    .intro-dims {
      display: grid;
      gap: 8px;
    }

    .intro-dim {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      font-size: var(--fs-small);
    }

    .intro-dim .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--c);
      flex: none;
    }

    .intro-dim .n {
      font-weight: 600;
    }

    .intro-dim .t {
      color: var(--ink-3);
      margin-left: auto;
      font-size: var(--fs-caption);
      white-space: nowrap;
    }

    .intro-facts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 1.5rem 0;
    }

    .intro-fact {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px 16px;
    }

    .intro-fact .v {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.6rem;
      letter-spacing: -0.03em;
    }

    .intro-fact .l {
      font-size: var(--fs-caption);
      color: var(--ink-3);
    }

    @media (max-width: 560px) {
      .intro-facts {
        grid-template-columns: 1fr 1fr;
      }
    }

    .resume-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
      padding: 14px 18px;
      border-radius: 14px;
      background: var(--plum-50);
      border: 1px solid var(--plum-100);
      margin-bottom: 1.5rem;
    }

    /* Profile */
    .profile-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    @media (max-width: 760px) {
      .profile-grid {
        grid-template-columns: 1fr;
      }
    }

    .profile-q {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 1.25rem;
    }

    .profile-q .q {
      font-weight: 600;
      margin-bottom: 0.75rem;
    }

    .opts {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .opt {
      min-height: 40px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1.5px solid var(--line-strong);
      background: #fff;
      font-size: var(--fs-small);
      font-weight: 500;
      transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
    }

    .opt:hover {
      border-color: var(--ink);
    }

    .opt[aria-pressed="true"] {
      background: var(--plum-700);
      border-color: var(--plum-700);
      color: #fff;
    }

    /* Dimension screen */
    .dim-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 1rem 2rem;
      align-items: end;
      max-width: none;
    }

    .dim-head .kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: var(--fs-caption);
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-2);
      margin-bottom: 0.75rem;
    }

    .dim-head .kicker .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--c);
    }

    .dim-head .lead {
      max-width: 60ch;
    }

    .dim-head .scale-key {
      display: none;
    }

    @media (max-width: 900px) {
      .dim-head {
        grid-template-columns: 1fr;
      }
    }

    .statements {
      display: grid;
      gap: 12px;
    }

    .statement {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: clamp(1rem, 2.2vw, 1.5rem) clamp(1rem, 2.4vw, 1.75rem);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 1rem 2rem;
      align-items: center;
      transition: border-color 0.2s, box-shadow 0.2s;
      scroll-margin-top: 140px;
    }

    .statement.answered {
      border-color: var(--line);
    }

    .statement.focus {
      border-color: var(--plum-500);
      box-shadow: 0 0 0 4px rgba(59, 31, 94, 0.08);
    }

    .statement .s-num {
      font-size: var(--fs-caption);
      color: var(--ink-3);
      font-weight: 600;
      letter-spacing: 0.06em;
      margin-bottom: 4px;
    }

    .statement .s-hint {
      margin-top: 6px;
      font-size: var(--fs-caption);
      color: var(--ink-3);
      line-height: 1.4;
    }

    .statement .s-text {
      font-size: clamp(1rem, 1.3vw, 1.125rem);
      font-weight: 500;
      line-height: 1.45;
      letter-spacing: -0.005em;
      text-wrap: pretty;
    }

    @media (max-width: 900px) {
      .statement {
        grid-template-columns: 1fr;
      }
    }

    .scale {
      display: flex;
      align-items: flex-start;
      gap: 6px;
    }

    .scale .pt {
      display: grid;
      justify-items: center;
      gap: 6px;
      width: 76px;
    }

    .scale .pt button {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1.5px solid var(--line-strong);
      background: var(--paper-2);
      display: grid;
      place-items: center;
      font-weight: 600;
      font-size: var(--fs-caption);
      color: var(--ink-3);
      transition: transform 0.15s var(--ease-out), background 0.15s, border-color 0.15s, color 0.15s;
    }

    .scale .pt button:hover {
      border-color: var(--plum-500);
      transform: scale(1.06);
    }

    .scale .pt button[aria-checked="true"] {
      background: var(--plum-700);
      border-color: var(--plum-700);
      color: #fff;
      transform: scale(1.08);
      box-shadow: 0 6px 16px rgba(59, 31, 94, 0.25);
    }

    .scale .pt .l {
      font-size: 11px;
      line-height: 1.15;
      text-align: center;
      color: var(--ink-3);
    }

    .scale .pt.unsure {
      margin-left: 8px;
      padding-left: 12px;
      border-left: 1px solid var(--line);
    }

    .scale .pt.unsure button {
      border-radius: 999px;
      width: 72px;
      font-size: 12px;
    }

    .scale .pt.unsure button[aria-checked="true"] {
      background: var(--ink-2);
      border-color: var(--ink-2);
    }

    @media (max-width: 560px) {
      .scale {
        gap: 4px;
      }

      .scale .pt {
        width: calc((100% - 16px - 72px) / 5);
        min-width: 40px;
      }

      .scale .pt button {
        width: 40px;
        height: 40px;
      }

      .scale .pt .l {
        display: none;
      }

      .scale .pt:first-child .l,
      .scale .pt:nth-child(5) .l {
        display: block;
      }

      .scale .pt.unsure {
        width: 72px;
        margin-left: 4px;
        padding-left: 8px;
      }

      .scale .pt.unsure button {
        width: 64px;
      }
    }

    @media (max-width: 360px) {
      .scale {
        flex-wrap: wrap;
        row-gap: 8px;
      }

      .scale .pt.unsure {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        justify-items: start;
      }
    }

    /* Gate */
    .gate {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
    }

    @media (max-width: 900px) {
      .gate {
        grid-template-columns: 1fr;
      }
    }

    .gate-form {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: clamp(1.5rem, 3vw, 2.25rem);
      display: grid;
      gap: 1rem;
      box-shadow: var(--shadow-md);
    }

    .gate-form .two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    @media (max-width: 560px) {
      .gate-form .two {
        grid-template-columns: 1fr;
      }
    }

    .gate-preview {
      display: grid;
      gap: 10px;
      margin-top: 1.5rem;
    }

    .gate-preview .row-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      font-size: var(--fs-small);
    }

    .gate-preview .row-item .ico {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: var(--plum-50);
      color: var(--plum-700);
      display: grid;
      place-items: center;
      flex: none;
    }

    .gate-preview .row-item .ico svg {
      width: 16px;
      height: 16px;
    }

    /* Report */
    .report-hero {
      background: var(--plum-900);
      color: #fff;
      border-radius: var(--radius-lg);
      padding: clamp(1.75rem, 4vw, 3.25rem);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 2rem;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .report-hero::after {
      content: "";
      position: absolute;
      right: -10%;
      top: -30%;
      width: 50%;
      height: 160%;
      background: radial-gradient(closest-side, rgba(218, 41, 28, 0.22), transparent 70%);
      pointer-events: none;
    }

    .report-hero>* {
      position: relative;
    }

    .report-hero .band-chip {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.1);
      font-weight: 600;
      font-size: var(--fs-small);
    }

    .report-hero .band-chip .d {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--c);
    }

    .report-hero h1 {
      color: #fff;
      font-size: clamp(2rem, 4.6vw, 3.6rem);
      margin-top: 1rem;
    }

    .report-hero .lead {
      color: rgba(255, 255, 255, 0.78);
      margin-top: 1rem;
      max-width: 56ch;
    }

    .report-hero .meta {
      margin-top: 1.25rem;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .report-hero .meta .chip {
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
      border-color: rgba(255, 255, 255, 0.14);
    }

    .score-dial {
      width: 190px;
      height: 190px;
      position: relative;
      display: grid;
      place-items: center;
    }

    .score-dial svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }

    .score-dial .v {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 3rem;
      letter-spacing: -0.04em;
      line-height: 1;
    }

    .score-dial .v small {
      font-size: 1rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.6);
      letter-spacing: 0;
    }

    .score-dial .l {
      font-size: var(--fs-caption);
      color: rgba(255, 255, 255, 0.6);
      margin-top: 4px;
    }

    @media (max-width: 760px) {
      .report-hero {
        grid-template-columns: 1fr;
      }

      .score-dial {
        margin: 0 auto;
      }
    }

    .report-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 1.5rem;
    }

    .binding {
      margin-top: 2rem;
      border-radius: var(--radius-lg);
      border: 1.5px solid var(--red);
      background: #fff;
      padding: clamp(1.5rem, 3vw, 2.25rem);
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 2rem;
    }

    @media (max-width: 900px) {
      .binding {
        grid-template-columns: 1fr;
      }
    }

    .binding .eyebrow {
      color: var(--red-dark);
    }

    .binding .eyebrow::before {
      background: var(--red);
    }

    .binding ol {
      display: grid;
      gap: 10px;
      counter-reset: s;
    }

    .binding ol li {
      display: grid;
      grid-template-columns: 30px 1fr;
      gap: 12px;
      align-items: start;
      counter-increment: s;
    }

    .binding ol li::before {
      content: counter(s);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--red);
      color: #fff;
      font-weight: 700;
      font-size: var(--fs-caption);
      display: grid;
      place-items: center;
    }

    .report-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 1.25rem;
      margin-top: 1.25rem;
    }

    @media (max-width: 900px) {
      .report-grid {
        grid-template-columns: 1fr;
      }
    }

    .chart-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: clamp(1.25rem, 3vw, 2rem);
    }

    .chart-card h3 {
      font-size: 1.35rem;
      margin-bottom: 0.25rem;
    }

    .radar {
      width: 100%;
      max-width: 440px;
      margin: 0 auto;
    }

    .radar text {
      font-family: var(--font-text);
      font-size: 11.5px;
      fill: var(--ink-2);
      font-weight: 600;
    }

    .radar .grid {
      fill: none;
      stroke: var(--line);
      stroke-width: 1;
    }

    .radar .axis {
      stroke: var(--line);
      stroke-width: 1;
    }

    .radar .ready-ring {
      fill: none;
      stroke: var(--band-ready);
      stroke-dasharray: 4 4;
      stroke-width: 1.2;
      opacity: 0.9;
    }

    .radar .area {
      fill: rgba(59, 31, 94, 0.16);
      stroke: var(--plum-700);
      stroke-width: 2.2;
      stroke-linejoin: round;
    }

    .radar .pt {
      fill: #fff;
      stroke: var(--plum-700);
      stroke-width: 2.2;
    }

    .radar .pt.low {
      fill: var(--red);
      stroke: var(--red);
    }

    .radar-legend {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      font-size: var(--fs-caption);
      color: var(--ink-2);
      margin-top: 0.75rem;
      justify-content: center;
    }

    .radar-legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .radar-legend i {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      display: inline-block;
    }

    .bars {
      display: grid;
      gap: 12px;
    }

    .bar {
      display: grid;
      grid-template-columns: 150px 1fr 54px;
      gap: 12px;
      align-items: center;
      font-size: var(--fs-small);
    }

    .bar .n {
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .bar .n .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--c);
      flex: none;
    }

    .bar .track {
      height: 10px;
      background: var(--paper-3);
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }

    .bar .track::after {
      content: "";
      position: absolute;
      left: calc(50% + 0px);
      top: -2px;
      bottom: -2px;
      width: 1px;
      background: var(--line-strong);
    }

    .bar .fill {
      height: 100%;
      width: 0;
      border-radius: 6px;
      background: var(--c);
      transition: width 1s var(--ease-out);
    }

    .bar .v {
      text-align: right;
      font-weight: 600;
    }

    .bar .v small {
      color: var(--ink-3);
      font-weight: 500;
    }

    .bar.binding-row .n {
      color: var(--red-dark);
    }

    @media (max-width: 560px) {
      .bar {
        grid-template-columns: 110px 1fr 48px;
      }
    }

    .band-key {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 18px;
      margin-top: 1rem;
      font-size: var(--fs-caption);
      color: var(--ink-2);
    }

    .band-key span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .band-key i {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      display: inline-block;
    }

    .dim-report {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }

    .dim-report+.dim-report {
      margin-top: 12px;
    }

    .dim-report-head {
      width: 100%;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto;
      gap: 1rem;
      align-items: center;
      padding: 1.1rem 1.5rem;
      text-align: left;
    }

    .dim-report-head:focus-visible {
      outline-offset: -4px;
      border-radius: calc(var(--radius-lg) - 2px);
    }

    .dim-report-head .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--c);
    }

    .dim-report-head .t {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 1.15rem;
      letter-spacing: -0.01em;
    }

    .dim-report-head .s {
      font-size: var(--fs-caption);
      color: var(--ink-3);
    }

    .dim-report-head .score {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.4rem;
      letter-spacing: -0.03em;
    }

    .dim-report-head .score small {
      font-size: 0.8rem;
      color: var(--ink-3);
      font-weight: 500;
    }

    .dim-report-head .pm {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1.5px solid var(--line-strong);
      display: grid;
      place-items: center;
      transition: transform 0.3s var(--ease-out);
    }

    .dim-report-head .pm svg {
      width: 14px;
      height: 14px;
    }

    .dim-report-head[aria-expanded="true"] .pm {
      transform: rotate(45deg);
      background: var(--ink);
      border-color: var(--ink);
      color: #fff;
    }

    .dim-report-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.45s var(--ease-out);
    }

    .dim-report-body.open {
      grid-template-rows: 1fr;
    }

    .dim-report-body>div {
      overflow: hidden;
    }

    .dim-report-inner {
      padding: 0 1.5rem 1.5rem;
      display: grid;
      gap: 1.25rem;
      border-top: 1px solid var(--line);
      padding-top: 1.25rem;
    }

    .band-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 999px;
      font-weight: 600;
      font-size: var(--fs-caption);
      background: var(--bg);
      color: var(--fg);
    }

    .band-pill .d {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--fg);
    }

    .next-steps {
      display: grid;
      gap: 10px;
    }

    .next-steps li {
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 10px;
      font-size: var(--fs-small);
    }

    .next-steps li .k {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--plum-50);
      color: var(--plum-700);
      font-weight: 700;
      font-size: 12px;
      display: grid;
      place-items: center;
    }

    .considerations {
      display: grid;
      gap: 10px;
    }

    .consider {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 1rem;
      padding: 12px 14px;
      border-radius: 12px;
      background: var(--paper-2);
      font-size: var(--fs-small);
    }

    .consider .a {
      display: grid;
      gap: 4px;
    }

    .consider .a .lbl {
      font-size: var(--fs-caption);
      color: var(--ink-3);
    }

    .consider .a .val {
      font-weight: 600;
    }

    .consider .a .val.unsure {
      color: var(--ink-3);
    }

    .consider .s {
      color: var(--ink);
    }

    .consider .s .q {
      font-weight: 600;
      display: block;
      margin-bottom: 4px;
    }

    .consider .s .c {
      color: var(--ink-2);
    }

    @media (max-width: 560px) {
      .consider {
        grid-template-columns: 1fr;
      }
    }

    .plan {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: clamp(1.5rem, 3vw, 2.25rem);
      margin-top: 1.25rem;
    }

    .plan-cols {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-top: 1.25rem;
    }

    @media (max-width: 760px) {
      .plan-cols {
        grid-template-columns: 1fr;
      }
    }

    .plan-col {
      border-top: 3px solid var(--plum-700);
      padding-top: 1rem;
    }

    .plan-col:nth-child(2) {
      border-top-color: var(--plum-500);
    }

    .plan-col:nth-child(3) {
      border-top-color: var(--red);
    }

    .plan-col h4 {
      font-size: 1rem;
      margin-bottom: 0.5rem;
    }

    .plan-col .w {
      font-size: var(--fs-caption);
      color: var(--ink-3);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .plan-col ul {
      display: grid;
      gap: 8px;
      font-size: var(--fs-small);
      color: var(--ink-2);
    }

    .plan-col ul li {
      display: flex;
      gap: 10px;
    }

    .plan-col ul li .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--c);
      margin-top: 0.5em;
      flex: none;
    }

    .report-cta {
      margin-top: 2rem;
      background: var(--plum-50);
      border: 1px solid var(--plum-100);
      border-radius: var(--radius-lg);
      padding: clamp(1.5rem, 3vw, 2.5rem);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

    .section-label {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      margin: 2.5rem 0 1rem;
    }

    .section-label h2 {
      font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    }

    /* Print */
    @media print {
      .assess-body {
        background: #fff;
      }

      .assess-progress,
      .report-actions,
      .report-cta,
      .nav,
      .footer {
        display: none !important;
      }

      .report-hero {
        background: #1C0F2E !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .dim-report-body {
        grid-template-rows: 1fr !important;
      }

      .dim-report-head .pm {
        display: none;
      }

      .dim-report,
      .chart-card,
      .plan,
      .binding {
        break-inside: avoid;
      }

      .bar .fill {
        transition: none;
      }

      * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
    }

    /* Report hero refinements */
    .report-hero .btn-ghost {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.4);
    }

    .report-hero .btn-ghost:hover {
      border-color: #fff;
    }

    .report-hero::after {
      z-index: 0;
    }

    .report-hero>* {
      z-index: 1;
    }

    .score-dial {
      overflow: visible;
    }

    .score-dial .l {
      white-space: nowrap;
    }

    .report-hero h1 em {
      color: #fff;
    }

/* --------------------------------------------------------------------------
   4. Roadmap Page (Rail, Chapters, Diagrams, Checklists, Gates)
   -------------------------------------------------------------------------- */
/* Roadmap: rail, chapter screens, diagrams, moves, worked example, checklist, gates */

    .roadmap-body {
      background: #fff;
    }

    .roadmap {
      min-height: 70vh;
      padding-bottom: var(--section);
    }

    /* Rail */
    .rm-rail {
      position: sticky;
      top: 64px;
      z-index: 90;
      background: rgba(255, 255, 255, 0.88);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
    }

    .rail-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      padding: 10px 0 8px;
    }

    .rail-steps {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }

    .rail-step button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 32px;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: var(--fs-caption);
      font-weight: 600;
      color: var(--ink-3);
      border: 1px solid transparent;
      transition: background 0.2s, color 0.2s;
    }

    .rail-step button:hover {
      background: var(--paper-2);
      color: var(--ink);
    }

    .rail-step .d {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--line-strong);
    }

    .rail-step.done .d,
    .rail-step.current .d {
      background: var(--c);
    }

    .rail-step.current button {
      color: var(--ink);
      background: var(--paper-2);
      border-color: var(--line);
    }

    .rail-step .lbl {
      display: none;
    }

    .rail-step.current .lbl {
      display: inline;
    }

    @media (min-width: 1400px) {
      .rail-step .lbl {
        display: inline;
      }
    }

    .rail-meta {
      font-size: var(--fs-caption);
      color: var(--ink-2);
      white-space: nowrap;
    }

    @media (max-width: 900px) {
      .rail-step button {
        min-height: 40px;
        min-width: 40px;
        justify-content: center;
      }
    }

    @media (max-width: 560px) {
      .rail-meta {
        display: none;
      }

      .rail-steps {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        width: 100%;
        gap: 0;
        overflow: visible;
      }

      .rail-step button {
        position: relative;
        width: 100%;
        min-width: 0;
        padding: 0;
      }

      /* Labels stay in the accessibility tree; the chapter h1 shows the title */
      .rail-step .lbl,
      .rail-step.current .lbl {
        display: inline;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }
    }

    .rail-bar {
      height: 3px;
      background: var(--line);
      overflow: hidden;
      margin-bottom: -1px;
    }

    .rail-bar span {
      display: block;
      height: 100%;
      width: 0;
      background: var(--c, var(--plum-700));
      transition: width 0.5s var(--ease-out), background 0.5s;
    }

    .rail-step button:focus-visible {
      outline-offset: -2px;
    }

    /* Keep focused content clear of the sticky nav and rail */
    html[data-page="roadmap"],
    html:has(.roadmap-body) {
      scroll-padding-top: 120px;
    }

    /* Screens */
    .rm-screen {
      padding-top: clamp(2.5rem, 6vw, 5rem);
      animation: rm-in 0.5s var(--ease-out);
    }

    @keyframes rm-in {
      from {
        opacity: 0;
        transform: translateY(14px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    /* Intro journey */
    .journey {
      position: relative;
      margin: clamp(2rem, 5vw, 4rem) 0;
      padding: 0 0 1rem;
    }

    .journey-line {
      position: absolute;
      left: 3%;
      right: 3%;
      top: 22px;
      height: 3px;
      background: var(--line);
      border-radius: 3px;
      overflow: hidden;
    }

    .journey-line span {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--plum-700), var(--red));
    }

    .journey-nodes {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 8px;
      position: relative;
    }

    .journey-node {
      text-align: center;
      display: grid;
      justify-items: center;
      gap: 10px;
      cursor: pointer;
    }

    .journey-node .n {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--c);
      color: color-mix(in srgb, var(--c) 70%, #000);
      font-family: var(--font-display);
      font-weight: 700;
      display: grid;
      place-items: center;
      transition: transform 0.3s var(--ease-out), background 0.3s, color 0.3s;
    }

    .journey-node:hover .n,
    .journey-node:focus-visible .n {
      transform: scale(1.1);
      background: color-mix(in srgb, var(--c) 70%, #000);
      color: #fff;
    }

    .journey-node .t {
      font-size: var(--fs-caption);
      font-weight: 600;
      line-height: 1.2;
      color: var(--ink-2);
    }

    .journey-node .dur {
      font-size: 11px;
      color: var(--ink-3);
    }

    .journey-node.center .n {
      width: 56px;
      height: 56px;
      margin-top: -5px;
      box-shadow: 0 0 0 6px rgba(218, 41, 28, 0.1);
    }

    @media (max-width: 900px) {
      .journey-nodes {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 1.75rem;
      }

      .journey-line {
        display: none;
      }
    }

    @media (max-width: 480px) {
      .journey-nodes {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .tailored-banner {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 16px 18px;
      border-radius: 14px;
      background: var(--plum-50);
      border: 1px solid var(--plum-100);
      margin: 1.5rem 0;
    }

    .tailored-banner .ico {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--plum-700);
      color: #fff;
      display: grid;
      place-items: center;
      flex: none;
    }

    .tailored-banner .ico svg {
      width: 18px;
      height: 18px;
    }

    .tailored-banner ul {
      display: grid;
      gap: 6px;
      margin-top: 6px;
      font-size: var(--fs-small);
      color: var(--ink-2);
    }

    .tailored-banner ul li {
      display: flex;
      gap: 8px;
    }

    .tailored-banner ul li .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--c);
      margin-top: 0.55em;
      flex: none;
    }

    /* Chapter header */
    .ch-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 1.5rem 3rem;
      align-items: end;
      margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    }

    .ch-head .kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: var(--fs-caption);
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--c) 70%, #000);
      margin-bottom: 0.75rem;
    }

    .ch-head .kicker .num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--c) 70%, #000);
      color: #fff;
      display: grid;
      place-items: center;
      font-family: var(--font-display);
      font-size: 0.85rem;
      letter-spacing: 0;
    }

    .ch-head .lead {
      margin-top: 1rem;
      max-width: 60ch;
    }

    .ch-head .side {
      display: grid;
      gap: 8px;
      justify-items: end;
    }

    @media (max-width: 900px) {
      .ch-head {
        grid-template-columns: 1fr;
      }

      .ch-head .side {
        justify-items: start;
      }
    }

    /* Diagram card */
    .diagram {
      margin: 1.5rem 0 2.5rem;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: clamp(1.25rem, 3vw, 2.25rem);
      overflow: hidden;
    }

    .diagram-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 1rem;
      margin-bottom: 1rem;
      flex-wrap: wrap;
    }

    .diagram-head h3 {
      font-size: 1.25rem;
    }

    .diagram .svg-wrap svg {
      width: 100%;
      height: auto;
      max-height: 440px;
    }

    .diagram text {
      font-family: var(--font-text);
      fill: var(--ink);
    }

    .diagram .lbl {
      font-size: 14px;
      font-weight: 600;
    }

    .diagram .sub {
      font-size: 12.5px;
      fill: var(--ink-3);
    }

    .diagram .big {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 22px;
      letter-spacing: -0.02em;
    }

    .diagram .svg-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 0 -4px;
      padding: 0 4px;
    }

    @media (max-width: 760px) {
      .diagram .svg-wrap svg {
        min-width: 720px;
        max-height: none;
      }

      .diagram .svg-wrap::after {
        content: "Swipe to see the whole diagram";
        display: block;
        font-size: var(--fs-caption);
        color: var(--ink-3);
        margin-top: 6px;
      }
    }

    .diagram .axis {
      stroke: var(--line-strong);
      stroke-width: 1.2;
    }

    .diagram .grid {
      stroke: var(--line);
      stroke-width: 1;
      stroke-dasharray: 3 4;
    }

    .diagram-caption {
      margin-top: 1rem;
      font-size: var(--fs-small);
      color: var(--ink-2);
      max-width: 70ch;
    }

    .diagram .replay {
      font-size: var(--fs-caption);
    }

    /* Body text */
    .ch-body {
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: clamp(1.5rem, 4vw, 4rem);
      align-items: start;
    }

    @media (max-width: 900px) {
      .ch-body {
        grid-template-columns: 1fr;
      }
    }

    .ch-body .why {
      color: var(--ink-2);
      font-size: var(--fs-lead);
      line-height: 1.5;
    }

    .ch-body .why p {
      text-wrap: pretty;
    }

    .frameworks {
      display: grid;
      gap: 10px;
    }

    .framework {
      padding: 12px 14px;
      border-radius: 12px;
      background: var(--paper-2);
      border: 1px solid var(--line);
      font-size: var(--fs-small);
    }

    .framework .n {
      font-weight: 600;
    }

    .framework .c {
      color: var(--ink-3);
      font-size: var(--fs-caption);
    }

    .framework .o {
      color: var(--ink-2);
      margin-top: 4px;
    }

    .side-label {
      font-size: var(--fs-caption);
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 0.75rem;
    }

    /* Moves */
    .moves {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
      margin-top: 1.5rem;
    }

    .move {
      padding: 1.25rem 1.4rem;
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid var(--line);
      border-top: 3px solid var(--c);
      box-shadow: var(--shadow-sm);
    }

    .move h4 {
      margin-bottom: 0.5rem;
    }

    .move p {
      color: var(--ink-2);
      font-size: var(--fs-small);
    }

    /* Section blocks inside chapter */
    .ch-section {
      margin-top: clamp(2.5rem, 5vw, 4rem);
    }

    .ch-section>h3 {
      margin-bottom: 0.5rem;
    }

    .ch-section>.muted {
      max-width: 68ch;
    }

    /* Pitfalls and good */
    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
    }

    @media (max-width: 760px) {
      .two-col {
        grid-template-columns: 1fr;
      }
    }

    .list-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 1.25rem 1.4rem;
    }

    .list-card h4 {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 0.75rem;
    }

    .list-card h4 .ico {
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: grid;
      place-items: center;
    }

    .list-card h4 .ico svg {
      width: 14px;
      height: 14px;
    }

    .list-card.bad h4 .ico {
      background: var(--red-soft);
      color: var(--red-dark);
    }

    .list-card.good h4 .ico {
      background: var(--band-ready-soft);
      color: #145F35;
    }

    .list-card ul {
      display: grid;
      gap: 10px;
      font-size: var(--fs-small);
    }

    .list-card ul li {
      display: grid;
      grid-template-columns: 8px 1fr;
      gap: 12px;
    }

    .list-card ul li .m {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-top: 0.5em;
    }

    .list-card.bad ul li .m {
      background: var(--red);
    }

    .list-card.good ul li .m {
      background: var(--band-ready);
    }

    .list-card ul li .w {
      color: var(--ink-3);
      display: block;
      margin-top: 2px;
    }

    /* Method steps (redesign) */
    .method {
      display: grid;
      gap: 0;
      counter-reset: m;
      border-left: 2px solid var(--line);
      margin-left: 14px;
      padding-left: 0;
    }

    .method li {
      position: relative;
      padding: 0 0 1.5rem 2rem;
      counter-increment: m;
    }

    .method li::before {
      content: counter(m);
      position: absolute;
      left: -16px;
      top: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--c);
      color: #fff;
      font-weight: 700;
      font-size: 0.85rem;
      display: grid;
      place-items: center;
      font-family: var(--font-display);
    }

    .method li:last-child {
      padding-bottom: 0;
    }

    .method li .t {
      font-weight: 600;
      font-size: 1.05rem;
    }

    .method li .d {
      color: var(--ink-2);
      font-size: var(--fs-small);
      margin-top: 2px;
    }

    .rules {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }

    .rule {
      padding: 12px 14px;
      border-radius: 12px;
      background: var(--paper-2);
      font-size: var(--fs-small);
    }

    .rule .k {
      font-weight: 600;
    }

    .rule .v {
      color: var(--ink-2);
    }

    /* Worked example */
    .lab {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: clamp(1.25rem, 3vw, 2rem);
      box-shadow: var(--shadow-sm);
    }

    .lab-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }

    .lab-totals {
      display: flex;
      gap: 2rem;
    }

    .lab-total .l {
      font-size: var(--fs-caption);
      color: var(--ink-3);
    }

    .lab-total .v {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.4rem, 2.4vw, 2rem);
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .lab-total .v.after {
      color: var(--red);
    }

    .lab-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--fs-small);
    }

    .lab-table th {
      text-align: left;
      font-size: var(--fs-caption);
      color: var(--ink-3);
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 8px 10px;
      border-bottom: 1px solid var(--line);
    }

    .lab-table td {
      padding: 10px;
      border-bottom: 1px solid var(--line);
      vertical-align: middle;
    }

    .lab-table td.task {
      font-weight: 600;
    }

    .lab-table td .why {
      display: block;
      color: var(--ink-3);
      font-weight: 400;
      font-size: var(--fs-caption);
      margin-top: 2px;
    }

    .seg {
      display: inline-flex;
      border: 1.5px solid var(--line-strong);
      border-radius: 999px;
      overflow: hidden;
    }

    .seg button {
      min-height: 40px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-3);
      border-right: 1.5px solid var(--line-strong);
      transition: background 0.15s, color 0.15s;
    }

    .seg button:focus-visible {
      outline-offset: -3px;
      border-radius: 999px;
    }

    .seg button:last-child {
      border-right: 0;
    }

    .seg button[aria-pressed="true"].auto {
      background: var(--plum-700);
      color: #fff;
    }

    .seg button[aria-pressed="true"].aug {
      background: var(--plum-100);
      color: var(--plum-700);
    }

    .seg button[aria-pressed="true"].human {
      background: var(--ink);
      color: #fff;
    }

    .seg button[aria-pressed="true"].elim {
      background: var(--line);
      color: var(--ink);
      text-decoration: line-through;
    }

    .lab .mins {
      font-variant-numeric: tabular-nums;
      text-align: right;
    }

    .lab .mins.after {
      font-weight: 600;
    }

    .lab-bars {
      display: grid;
      gap: 8px;
      margin-top: 1.25rem;
    }

    .lab-bar {
      display: grid;
      grid-template-columns: 70px 1fr 90px;
      gap: 12px;
      align-items: center;
      font-size: var(--fs-small);
    }

    .lab-bar .track {
      height: 14px;
      border-radius: 7px;
      background: var(--paper-3);
      overflow: hidden;
      display: flex;
    }

    .lab-bar .track i {
      display: block;
      height: 100%;
      transition: width 0.6s var(--ease-out);
    }

    .lab-bar .track i.auto {
      background: var(--plum-700);
    }

    .lab-bar .track i.aug {
      background: var(--plum-300);
    }

    .lab-bar .track i.human {
      background: var(--ink);
    }

    .lab-bar .v {
      text-align: right;
      font-weight: 600;
    }

    .lab-flow {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-top: 1.25rem;
    }

    .lab-flow .f {
      padding: 8px 12px;
      border-radius: 10px;
      font-size: var(--fs-caption);
      font-weight: 600;
      background: var(--paper-2);
      border: 1px solid var(--line);
    }

    .lab-flow .f.check {
      background: var(--red-soft);
      color: var(--red-dark);
      border-color: var(--red-soft);
    }

    .lab-flow .f.ai {
      background: var(--plum-700);
      color: #fff;
      border-color: var(--plum-700);
    }

    .lab-flow .arr {
      color: var(--ink-3);
    }

    @media (max-width: 760px) {
      .lab-table thead {
        display: none;
      }

      .lab-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px 10px;
        padding: 10px 0;
        border-bottom: 1px solid var(--line);
      }

      .lab-table td {
        padding: 0;
        border: 0;
      }

      .lab-table td.task {
        grid-column: 1 / -1;
      }

      .lab-table td.mins[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 400;
        color: var(--ink-3);
      }

      .lab-totals {
        flex-wrap: wrap;
        gap: 0.75rem 1.5rem;
      }

      .lab-bar {
        grid-template-columns: 52px minmax(0, 1fr) auto;
      }
    }

    /* Checklist */
    .checklist {
      display: grid;
      gap: 8px;
    }

    .check {
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 12px;
      align-items: start;
      padding: 12px 14px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid var(--line);
      cursor: pointer;
      font-size: var(--fs-small);
      transition: border-color 0.2s, background 0.2s;
    }

    .check:hover {
      border-color: var(--line-strong);
    }

    .check input {
      width: 22px;
      height: 22px;
      margin: 1px 0 0;
      accent-color: color-mix(in srgb, var(--c, var(--plum-700)) 70%, #000);
    }

    .check.on {
      background: var(--paper-2);
    }

    .check.on span {
      color: var(--ink-2);
    }

    .check-summary {
      font-size: var(--fs-caption);
      color: var(--ink-3);
      margin-top: 8px;
    }

    /* Decision gate */
    .gate-panel {
      margin-top: clamp(2.5rem, 5vw, 4rem);
      border-radius: var(--radius-lg);
      background: var(--plum-900);
      color: #fff;
      padding: clamp(1.5rem, 3vw, 2.5rem);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 1.5rem;
      align-items: center;
    }

    .gate-panel .eyebrow {
      color: var(--plum-300);
    }

    .gate-panel h3 {
      color: #fff;
    }

    .gate-panel p {
      color: rgba(255, 255, 255, 0.78);
    }

    @media (max-width: 760px) {
      .gate-panel {
        grid-template-columns: minmax(0, 1fr);
      }

      .gate-panel .btn {
        width: 100%;
      }
    }

    /* Evidence callouts */
    .evidence {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 12px;
    }

    .ev {
      padding: 1rem 1.1rem;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
    }

    .ev .f {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.7rem;
      letter-spacing: -0.03em;
      color: color-mix(in srgb, var(--c) 75%, #000);
      line-height: 1;
    }

    .ev .c {
      font-size: var(--fs-small);
      color: var(--ink-2);
      margin-top: 6px;
    }

    .ev .s {
      font-size: var(--fs-caption);
      color: var(--ink-3);
      margin-top: 6px;
    }

    /* Chapter nav */
    .ch-nav {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: clamp(2.5rem, 5vw, 4rem);
    }

    .ch-nav a,
    .ch-nav button {
      display: grid;
      gap: 4px;
      text-align: left;
      padding: 1.1rem 1.4rem;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: #fff;
      transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.2s;
    }

    .ch-nav a:hover,
    .ch-nav button:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--line-strong);
    }

    .ch-nav .k {
      font-size: var(--fs-caption);
      color: var(--ink-3);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .ch-nav .t {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 1.15rem;
      letter-spacing: -0.01em;
    }

    .ch-nav .next {
      text-align: right;
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
    }

    .ch-nav .next .k {
      color: rgba(255, 255, 255, 0.6);
    }

    .ch-nav .next:hover {
      background: var(--plum-800);
    }

    @media (max-width: 560px) {
      .ch-nav {
        grid-template-columns: 1fr;
      }

      .ch-nav .next {
        text-align: left;
      }
    }

    /* End screen */
    .end-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
      margin: 1.5rem 0;
    }

    .end-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
      font-size: var(--fs-small);
    }

    .end-item .d {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--c);
      flex: none;
    }

    .end-item .p {
      margin-left: auto;
      color: var(--ink-3);
      font-size: var(--fs-caption);
      white-space: nowrap;
    }

    @media print {

      .rm-rail,
      .ch-nav,
      .diagram .replay,
      .nav,
      .footer {
        display: none !important;
      }
    }

    @media (max-width: 560px) {
      .lab {
        overflow-x: auto;
      }

      .seg button {
        padding: 6px 7px;
        font-size: 11px;
      }
    }

/* --------------------------------------------------------------------------
   5. Playbook Page (Methods Grid, Deliverables, Sections)
   -------------------------------------------------------------------------- */
.pb-hero {
      padding: clamp(4rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 4rem);
    }

    .pb-hero .lead {
      max-width: 60ch;
    }

    .pb-promise {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 3rem;
    }

    .pb-promise .p {
      padding: 1.25rem;
      border-radius: var(--radius);
      background: var(--paper-2);
      display: grid;
      gap: 6px;
    }

    .pb-promise .p .k {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.5rem;
      letter-spacing: -0.03em;
      color: var(--plum-700);
    }

    .pb-promise .p .t {
      color: var(--ink-2);
      font-size: var(--fs-small);
    }

    @media (max-width: 900px) {
      .pb-promise {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 520px) {
      .pb-promise {
        grid-template-columns: 1fr;
      }
    }

    .stage-detail {
      display: grid;
      grid-template-columns: 120px 1fr 1fr;
      gap: 2rem;
      padding: 2rem 0;
      border-top: 1px solid var(--line);
      align-items: start;
    }

    .stage-detail:last-child {
      border-bottom: 1px solid var(--line);
    }

    .stage-detail .num {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.5rem, 5vw, 4rem);
      letter-spacing: -0.05em;
      color: var(--red);
      line-height: 1;
    }

    .stage-detail h3 {
      font-size: clamp(1.5rem, 2.4vw, 2rem);
    }

    .stage-detail ul {
      display: grid;
      gap: 8px;
      color: var(--ink-2);
      font-size: var(--fs-small);
    }

    .stage-detail ul li {
      display: flex;
      gap: 10px;
    }

    .stage-detail ul li::before {
      content: "";
      flex: 0 0 6px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--plum-500);
      margin-top: 0.6em;
    }

    .stage-detail .meta {
      font-size: var(--fs-caption);
      color: var(--ink-3);
      display: grid;
      gap: 4px;
      margin-top: 1rem;
    }

    @media (max-width: 900px) {
      .stage-detail {
        grid-template-columns: 1fr;
        gap: 1rem;
      }
    }

    .engage {
      margin: 0 0 3rem;
      padding: clamp(1.25rem, 3vw, 2rem);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
    }

    .engage-grid {
      display: grid;
      grid-template-columns: 1.3fr 1.9fr 4.2fr 2.6fr;
      gap: 0;
      align-items: end;
    }

    .eg {
      position: relative;
      padding-right: 14px;
    }

    .eg .t {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.15rem;
      letter-spacing: -0.01em;
    }

    .eg .d {
      font-size: var(--fs-caption);
      color: var(--ink-3);
      margin: 2px 0 10px;
      min-height: 2.6em;
    }

    .eg .bar {
      height: 14px;
      border-radius: 7px;
      background: var(--c);
      transform-origin: left center;
    }

    .eg.run .bar {
      background: linear-gradient(90deg, var(--c), rgba(218, 41, 28, 0.08));
      border-radius: 7px 0 0 7px;
    }

    .eg .stop {
      position: absolute;
      right: 4px;
      bottom: -6px;
      width: 2px;
      height: 26px;
      background: var(--ink);
      border-radius: 2px;
    }

    .eg .stop::after {
      content: "stop point";
      position: absolute;
      top: 30px;
      right: -28px;
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-3);
      white-space: nowrap;
    }

    .eg.run .stop {
      display: none;
    }

    .eg .n {
      font-size: var(--fs-caption);
      color: var(--ink-2);
      margin-top: 22px;
    }

    @keyframes grow-x {
      from {
        transform: scaleX(0);
      }

      to {
        transform: scaleX(1);
      }
    }

    @supports (animation-timeline: view()) {
      .eg .bar {
        animation: grow-x 1s var(--ease-out) both;
        animation-timeline: view();
      }

      .eg:nth-child(1) .bar {
        animation-range: entry 10% cover 30%;
      }

      .eg:nth-child(2) .bar {
        animation-range: entry 20% cover 35%;
      }

      .eg:nth-child(3) .bar {
        animation-range: entry 30% cover 40%;
      }

      .eg:nth-child(4) .bar {
        animation-range: entry 40% cover 45%;
      }
    }

    @media (max-width: 760px) {
      .eg .bar {
        width: var(--w, 100%);
      }

      .engage-grid {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .eg {
        padding-right: 0;
      }

      .eg .stop {
        display: none;
      }

      .eg .n {
        margin-top: 8px;
      }

      .eg .d {
        min-height: 0;
      }
    }

    .ev-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 14px;
    }

    .ev-card {
      padding: 1.25rem 1.35rem;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: #fff;
      display: grid;
      gap: 8px;
      align-content: start;
    }

    .ev-card .f {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2rem, 3.4vw, 2.6rem);
      letter-spacing: -0.04em;
      line-height: 1;
      color: var(--plum-700);
    }

    .ev-card .c {
      color: var(--ink);
      font-size: var(--fs-small);
    }

    .ev-card .s {
      color: var(--ink-3);
      font-size: var(--fs-caption);
    }

    .artefacts {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .artefact {
      padding: 1.25rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      display: grid;
      gap: 6px;
    }

    .artefact .ico {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--plum-50);
      color: var(--plum-700);
      display: grid;
      place-items: center;
      margin-bottom: 6px;
    }

    .artefact .ico svg {
      width: 18px;
      height: 18px;
    }

    .artefact .t {
      font-weight: 600;
    }

    .artefact .d {
      font-size: var(--fs-small);
      color: var(--ink-2);
    }

    @media (max-width: 1000px) {
      .artefacts {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 560px) {
      .artefacts {
        grid-template-columns: 1fr;
      }
    }

/* --------------------------------------------------------------------------
   6. Use Cases Page (Grid, Slots, Sector Cards)
   -------------------------------------------------------------------------- */
.uc-hero {
      padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
    }

    .uc-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 14px;
      margin-top: 2.5rem;
    }

    .uc-slot {
      border: 1.5px dashed var(--line-strong);
      border-radius: var(--radius);
      padding: 1.25rem;
      min-height: 150px;
      display: grid;
      align-content: space-between;
      gap: 1rem;
      color: var(--ink-3);
      background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(59, 31, 94, 0.025) 10px 20px);
    }

    .uc-slot .k {
      font-size: var(--fs-caption);
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .uc-slot .t {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 1.1rem;
      color: var(--ink-2);
      letter-spacing: -0.01em;
    }

    .uc-slot .f {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .uc-slot .f span {
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--line);
    }