/* ==========================================================================
   CorteX — IBEX Innovations
   Shared stylesheet for index / clinician / hospital-administrator / oem
   ========================================================================== */

:root {
  --cream:     #FAFAF5;
  --rose:      #CEA39F;
  --mauve:     #AE8DA2;
  --mauve-dk:  #8A6180;   /* eyebrow text: #AE8DA2 is 2.8:1 on cream */
  --plum:      #6A415F;
  --plum-deep: #4A2B44;
  --gold:      #C9A84C;
  --gold-dk:   #806413;
  --gold-lt:   #E8D5A3;
  --white:     #FFFFFF;
  --text:      #1E1018;
  --text-mid:  #4A2B44;
  --text-soft: #6B4F64;
  --line:      rgba(174,141,162,.20);
  --line-soft: rgba(174,141,162,.12);
  --shadow-sm: 0 4px 14px rgba(74,43,68,.06);
  --shadow-md: 0 12px 34px rgba(74,43,68,.10);
  --shadow-lg: 0 22px 50px rgba(74,43,68,.18);
  --header-h:  84px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
  padding-bottom: 55px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--plum); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 20000;
  background: var(--plum-deep); color: var(--cream);
  padding: 12px 20px; font-size: 13px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── HEADER ─────────────────────────────────────────────────────────────── */

header.sticky-header-wrapper {
  position: sticky; top: 0; z-index: 1000; width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* ── RESOURCE BAR — the collateral shelf, not an audience picker ─────────
   Reads as a set of named sales resources an OEM can take to each audience,
   which keeps the site framed as B2B toolkit rather than a role selector. */

nav.resource-bar {
  background: var(--plum-deep);
  border-bottom: 2px solid var(--gold);
  padding: .6rem 3rem;
}
.resource-inner {
  display: flex; align-items: center; gap: .7rem;
  flex-wrap: wrap; justify-content: flex-end;
}

.res-label {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
  margin-right: .5rem; white-space: nowrap;
}

.res-link {
  display: inline-block; padding: 5px 16px; border-radius: 50px;
  border: 1px solid rgba(201,168,76,.35);
  background: rgba(255,255,255,.08);
  color: var(--cream); text-decoration: none;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.res-link:hover { background: var(--gold); color: var(--plum-deep); border-color: var(--gold); }
.res-link[aria-current="page"] {
  background: var(--gold); color: var(--plum-deep);
  border-color: var(--gold); font-weight: 600;
}

.res-link[aria-current="page"]:hover {
  background: #B39540; 
  border-color: #B39540; 
  color: var(--white); 
}

nav.primary-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 3rem;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.nav-logo-img { height: 62px; width: auto; object-fit: contain; display: block; }

.nav-links { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; margin-left: auto; }
.nav-links a {
  color: var(--text-soft); text-decoration: none;
  font-size: 13px; font-weight: 500; transition: color .2s;
  padding: 2px 0; border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--plum-deep); }
.nav-links a { transition: color .2s, border-color .2s; }
.nav-links a.active { color: var(--plum-deep); font-weight: 600; border-bottom-color: var(--gold); }

/* Home is a page link rather than a section, so on the sub-pages it is set
   bold and never takes the section underline. */
.nav-links a.nav-home { color: var(--plum-deep); font-weight: 700; }
.nav-links a.nav-home:not(.active) { border-bottom-color: transparent; }

.nav-toggle-btn {
  display: none; background: transparent;
  border: 1px solid var(--plum-deep); color: var(--plum-deep);
  padding: 6px 12px; border-radius: 4px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  align-items: center; gap: 6px; font-family: inherit;
}
.nav-toggle-btn span { font-size: 16px; line-height: 1; }

/* ── LAYOUT PRIMITIVES ──────────────────────────────────────────────────── */

.panel { background: var(--cream); padding: 5rem 3rem; border-bottom: 1px solid var(--line-soft); }
.panel--white { background: var(--white); }
.panel--dark { background: var(--plum-deep); color: var(--cream); position: relative; overflow: hidden; }
.panel--dark::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--rose) 100%);
}
.panel--tight { padding-top: 3.5rem; padding-bottom: 3.5rem; }

.container { max-width: 1140px; margin: 0 auto; }
.container-narrow { max-width: 820px; margin: 0 auto; }

.section-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mauve-dk); margin-bottom: .5rem;
}
.panel--dark .section-tag { color: var(--gold); }

.section-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 2.9vw, 2.7rem);
  font-weight: 700; color: var(--plum-deep);
  margin-bottom: .7rem; line-height: 1.12;
}
.panel--dark .section-h2 { color: var(--cream); }

.section-h3 {
  font-size: 17px; font-weight: 600; color: var(--plum-deep);
  margin-bottom: .5rem; line-height: 1.35;
}
.panel--dark .section-h3 { color: var(--white); }

.section-lead {
  font-size: 16px; font-weight: 300; color: var(--text-soft);
  line-height: 1.7; margin-bottom: 2rem;
}
.panel--dark .section-lead { color: rgba(250,250,245,.78); }

.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; align-items: start; }

.bullet-list { list-style: none; }
.bullet-list li {
  position: relative; padding-left: 1.75rem; margin-bottom: 1.25rem;
  font-size: 15px; color: var(--text-soft);
}
.bullet-list li::before {
  content: '■'; position: absolute; left: 0; top: 1px;
  color: var(--gold); font-size: 11px;
}
.bullet-list li strong { color: var(--plum-deep); font-weight: 600; }
.panel--dark .bullet-list li { color: rgba(250,250,245,.82); }
.panel--dark .bullet-list li strong { color: var(--white); }

.note {
  font-size: 12.5px; color: var(--text-soft); line-height: 1.55;
  max-width: 78ch;
  margin-top: 1.25rem; padding-top: .85rem; border-top: 1px solid var(--line-soft);
}
.panel--dark .note { color: rgba(250,250,245,.6); border-top-color: rgba(255,255,255,.12); }
.note a { color: var(--gold-dk); }
.panel--dark .note a { color: var(--gold); }

/* ── BUTTONS ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block; background: var(--gold); color: var(--plum-deep);
  text-transform: uppercase; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; padding: 13px 26px; border-radius: 4px;
  border: 1px solid var(--gold); cursor: pointer;
  transition: background .2s, transform .1s, color .2s;
  text-decoration: none; text-align: center;
  font-family: inherit; box-shadow: 0 4px 12px rgba(201,168,76,.22);
}
.btn:hover { background: #B39540; border-color: #B39540; color: var(--white); }
.btn:active { transform: scale(.98); }

.btn--ghost {
  background: transparent; color: var(--plum-deep);
  border: 1px solid var(--plum); box-shadow: none;
}
.btn--ghost:hover { background: var(--plum-deep); color: var(--cream); border-color: var(--plum-deep); }

.panel--dark .btn--ghost,
.page-hero .btn--ghost { color: var(--cream); border-color: rgba(201,168,76,.75); background: rgba(46,26,42,.72); backdrop-filter: blur(3px); }
.panel--dark .btn--ghost:hover,
.page-hero .btn--ghost:hover { background: var(--gold); color: var(--plum-deep); border-color: var(--gold); }

.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }
.cta-center { text-align: center; margin-top: 2.5rem; }

/* ── HERO ───────────────────────────────────────────────────────────────── */

.hero-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(201,168,76,.4); background: rgba(201,168,76,.12);
  padding: 6px 14px; border-radius: 3px; margin-bottom: 1.5rem;
}
.hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 4.4vw, 3.9rem);
  font-weight: 700; line-height: 1.05; color: var(--cream);
  margin-bottom: 1.3rem; max-width: 22ch;
}
.hero h1 em { font-style: normal; color: var(--gold); }
.hero-sub {
  font-size: 18px; font-weight: 300; color: rgba(250,250,245,.86);
  line-height: 1.7; margin-bottom: 1rem; max-width: 640px;
}
.hero-sub strong { color: var(--gold-lt); font-weight: 600; }

/* ── PAGE HERO — one component, every page ──────────────────────────────
   Height, padding, masking and type are shared; each page supplies only its
   own image through --hero-webp / --hero-jpg (and optionally --hero-pos). */

.page-hero {
  position: relative; overflow: hidden;
  background: var(--plum-deep); color: var(--cream);
  border-bottom: 10px solid var(--gold);
  display: flex; align-items: center;
  min-height: clamp(460px, calc(84vh - var(--header-h)), 660px);
  /* Sits 4.5rem from the edge, but stops drifting left on very wide screens. */
  padding: 4rem max(4.5rem, calc((100% - 1440px) / 2 + 4.5rem));
}

.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--hero-jpg);
  background-image: image-set(var(--hero-webp) type("image/webp"), var(--hero-jpg) type("image/jpeg"));
  background-size: cover; background-repeat: no-repeat;
  background-position: var(--hero-pos, right center);
  -webkit-mask-image: linear-gradient(90deg, transparent 14%, rgba(0,0,0,1) 46%);
  mask-image: linear-gradient(90deg, transparent 14%, rgba(0,0,0,1) 46%);
}

.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(74,43,68,1) 0%, rgba(74,43,68,1) 30%,
    rgba(74,43,68,.72) 42%, rgba(74,43,68,.22) 60%, rgba(74,43,68,0) 74%);
}

.hero-inner { position: relative; z-index: 2; max-width: 780px; width: 100%; }

.page-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700; line-height: 1.05; color: var(--gold);
  margin-bottom: 1.2rem; max-width: 23ch;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.page-hero h1 .h1-sub {
  display: block; font-size: .5em; font-weight: 500;
  color: var(--cream); margin-top: .35rem; line-height: 1.2;
}
.page-hero .hero-sub {
  max-width: 640px; text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.page-hero .btn-row { margin-top: 1.75rem; }

/* ── CREDENTIALS ROW — quiet proof, placed away from the hero ───────────── */

.credentials {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .6rem 2.75rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.4rem 0; margin: 3rem 0 0;
}
.credentials > div { display: flex; align-items: baseline; gap: .55rem; }
.cred-fig {
  font-family: 'Cormorant Garamond', serif; font-size: 1.9rem;
  font-weight: 700; color: var(--plum-deep); line-height: 1; white-space: nowrap;
}
.cred-label {
  font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-soft); line-height: 1.3;
}
.panel--dark .credentials { border-color: rgba(201,168,76,.3); }
.panel--dark .cred-fig { color: var(--gold); }
.panel--dark .cred-label { color: rgba(250,250,245,.7); }

/* ── SIDE-BY-SIDE IMAGE FIGURE ──────────────────────────────────────────── */

.figure-panel {
  background: var(--plum-deep); border-radius: 10px; padding: 1.1rem;
  box-shadow: var(--shadow-md);
}
.figure-panel img { display: block; width: 100%; border-radius: 6px; }
.figure-panel figcaption {
  font-size: 12.5px; color: rgba(250,250,245,.75);
  line-height: 1.55; padding: .9rem .4rem .3rem;
}
.figure-panel figcaption b { color: var(--gold-lt); font-weight: 600; }

/* ── CHEVRON VALUE RIBBON (signature element) ───────────────────────────── */

.ribbon {
  display: flex; flex-wrap: wrap; margin-top: 2rem;
  border-radius: 6px; overflow: hidden;
}
.ribbon-seg {
  flex: 1 1 180px; padding: 1rem 1.5rem 1rem 2.4rem;
  display: flex; flex-direction: column; justify-content: center;
  font-size: 13px; position: relative;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
  margin-left: -16px;
}
.ribbon-seg:first-child {
  margin-left: 0; padding-left: 1.5rem;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}
.ribbon-seg:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 18px 50%); }
.ribbon-seg .r-role {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; opacity: .8; margin-bottom: .15rem;
}
.ribbon-seg .r-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 700; line-height: 1.1;
}
.ribbon-1 { background: var(--rose);      color: var(--text-mid); }
.ribbon-2 { background: #6E5630;      color: var(--cream); }
.ribbon-3 { background:var(--plum-deep);          color: var(--cream); }
.ribbon-4 { background: var(--plum-deep); color: var(--gold-lt); }
.ribbon-caption {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mauve-dk);
  text-align: center; margin-bottom: .35rem;
}

/* ── STAKEHOLDER CARDS (value chain) ────────────────────────────────────── */

.chain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 1.1rem; }
.chain-grid--3 { grid-template-columns: repeat(3, 1fr); }
.chain-card {
  border-radius: 8px; padding: 1.8rem 1.5rem;
  display: flex; flex-direction: column;
  border: 1px solid transparent;
}
.chain-card h3 {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 1rem;
}
.chain-card .chain-lead {
  font-family: 'Cormorant Garamond', serif; font-size: 1.85rem;
  font-weight: 700; line-height: 1.1; margin-bottom: .2rem;
  font-weight: 700; line-height: 1.1; margin-bottom: .2rem;
}
.chain-card .chain-lead-note {
  font-size: 11.5px; letter-spacing: .04em; margin-bottom: 1.2rem; opacity: .85;
}
.chain-card ul { list-style: none; font-size: 13.5px; line-height: 1.55; }
.chain-card ul li { position: relative; padding-left: 1.1rem; margin-bottom: .8rem; }
.chain-card ul li::before { content: '·'; position: absolute; left: .2rem; font-weight: 700; font-size: 18px; line-height: 1.1; }
.chain-card .chain-link {
  margin-top: auto; padding-top: 1.1rem; font-size: 12px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; display: inline-block;
}
.chain-card .chain-link::after { content: ' →'; }

.chain-patient  { background: #F2E7E2; color: var(--text-mid); border-color: rgba(206,163,159,.5); }
.chain-provider {background: #6E5630; color: var(--cream);  }
.chain-ibex     { background: var(--plum); color: var(--cream); }

.chain-patient .chain-lead  { color: var(--plum-deep); }
.chain-provider .chain-lead,
.chain-oem .chain-lead,
.chain-ibex .chain-lead     { color: var(--gold-lt); }
.chain-patient h3 { color: var(--plum); }
.chain-provider h3, .chain-oem h3, .chain-ibex h3 { color: var(--cream); }
.chain-patient .chain-link  { color: var(--plum-deep); }
.chain-provider .chain-link, .chain-oem .chain-link, .chain-ibex .chain-link { color: var(--gold-lt); }
.chain-card .chain-link:hover { text-decoration: underline; }

/* ── GENERIC CARD GRIDS ─────────────────────────────────────────────────── */

.card-grid { display: grid; gap: 1.5rem; margin-top: 2rem; align-items: stretch; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white); padding: 2rem 1.75rem; border-radius: 8px;
  border: 1px solid var(--line); display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card h3 { font-size: 16px; font-weight: 600; color: var(--plum-deep); margin-bottom: .5rem; line-height: 1.35; }
.card p { font-size: 14px; color: var(--text-soft); line-height: 1.6; }
.card .card-figure {
  font-family: 'Cormorant Garamond', serif; font-size: 3.4rem;
  font-weight: 700; color: var(--gold-dk); line-height: 1.05; margin-bottom: .3rem;
}
.card .card-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mauve-dk); margin-bottom: .6rem;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.panel--dark .card { background: rgba(255,255,255,.05); border-color: rgba(201,168,76,.28); }
/* The figure takes the dark gold on a light card and the light gold on a
   dark one; neither reads on the other ground. */
.panel--dark .card .card-figure { color: var(--gold); }
.panel--dark .card h3 { color: var(--white); }
.panel--dark .card p { color: rgba(250,250,245,.8); }
.panel--dark .card .card-kicker { color: var(--gold-lt); }

/* ── NUMBERED / SEQUENCED FLOW ──────────────────────────────────────────── */

.flow-list { display: flex; flex-direction: column; gap: 1.1rem; }
.flow-item {
  display: flex; gap: 1.4rem; background: var(--white);
  padding: 1.4rem 1.5rem; border-radius: 6px; border: 1px solid var(--line-soft);
}
.flow-step {
  font-family: 'Cormorant Garamond', serif; font-size: 1.9rem;
  font-weight: 700; color: var(--gold); min-width: 34px; line-height: 1.1;
}
.flow-item h3 { font-size: 15.5px; font-weight: 600; color: var(--plum-deep); margin-bottom: .2rem; }
.flow-item p { font-size: 14px; color: var(--text-soft); line-height: 1.55; }
.panel--dark .flow-item { background: rgba(255,255,255,.05); border-color: rgba(201,168,76,.2); }
.panel--dark .flow-item h3 { color: var(--white); }
.panel--dark .flow-item p { color: rgba(250,250,245,.78); }

/* ── PULL QUOTE ─────────────────────────────────────────────────────────── */

.pull-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  color: var(--gold); font-style: italic; font-weight: 600;
  line-height: 1.35; margin: 2rem 0 .75rem;
}
.panel:not(.panel--dark) .pull-quote { color: var(--plum); }
.quote-cite { font-size: 13.5px; color: rgba(250,250,245,.75); margin-bottom: 2.5rem; }
.panel:not(.panel--dark) .quote-cite { color: var(--text-soft); }

/* ── REPORT IMAGE + LIGHTBOX ────────────────────────────────────────────── */

.report-thumb {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; cursor: zoom-in; background: none;
  border: none; padding: 0; font-family: inherit; width: 100%;
  transition: transform .2s ease;
}
.report-thumb:hover { transform: translateY(-4px); }
.report-thumb img {
  width: 100%; max-width: 440px; height: auto; border-radius: 4px;
  box-shadow: var(--shadow-lg); display: inline-block;
}
.report-caption { display: block; width: 100%; font-size: 13px; color: var(--text-soft); font-weight: 500; margin-top: 1rem; }
.report-hint {
  display: block; width: 100%; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--gold-dk); margin-top: 4px; font-weight: 700;
}
.lightbox {
  position: fixed; inset: 0; background: rgba(30,16,24,.95);
  z-index: 12000; display: none; align-items: center; justify-content: center; padding: 2rem;
}
.lightbox.show { display: flex; }
.lightbox img { max-width: 95%; max-height: 90vh; object-fit: contain; border-radius: 6px; }
.lightbox-close {
  position: absolute; top: 1.2rem; right: 1.8rem; background: none; border: none;
  color: var(--cream); font-size: 2.4rem; cursor: pointer; line-height: 1; font-family: inherit;
}
.lightbox-close:hover { color: var(--gold); }

/* ── PRICING / LICENCE TIERS ────────────────────────────────────────────── */

.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; align-items: stretch; }
.tier {
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 2.2rem 1.6rem 1.6rem; display: flex; flex-direction: column; position: relative;
}
.tier--featured { border: 2px solid var(--gold); }
.tier-flag {
  position: absolute; top: -11px; left: 1.4rem;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  padding: 3px 11px; border-radius: 3px; background: var(--gold); color: var(--plum-deep);
}
.tier-name {
  display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; padding: 4px 14px; border-radius: 50px;
  background: rgba(174,141,162,.16); color: var(--plum-deep); margin-bottom: .85rem;
}
.tier-price {
  font-family: 'Cormorant Garamond', serif; font-size: 2.3rem;
  font-weight: 700; color: var(--plum-deep); line-height: 1.1;
}
.tier-price small { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 400; color: var(--text-soft); }
.tier-desc { font-size: 13.5px; color: var(--text-soft); margin: .5rem 0 1rem; line-height: 1.55; }
.tier-details { list-style: none; border-top: 1px solid var(--line-soft); padding-top: 1rem; margin-top: auto; }
.tier-details li { font-size: 13px; color: var(--text-soft); margin-bottom: .7rem; line-height: 1.45; }
.tier-details li strong { color: var(--plum-deep); font-weight: 600; }

/* ── CALCULATOR ─────────────────────────────────────────────────────────── */

.calc-wrap { display: grid; grid-template-columns: 1.45fr 1fr; gap: 2.5rem; align-items: stretch; margin-top: 1.6rem; }
.calc-panel {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 1.4rem; display: flex; flex-direction: column; gap: 0;
}
.calc-section { display: flex; flex-direction: column; gap: .75rem; }
.calc-divider { border: none; border-top: 1px solid var(--line-soft); margin: 1.2rem 0; }
.calc-head {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem; font-weight: 700; color: var(--plum-deep);
  line-height: 1.2; display: block;
}
.calc-cat {
  display: block; margin-bottom: .2rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mauve-dk);
}
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.calc-field.full { grid-column: 1 / -1; }
.calc-field label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: 4px;
}
.calc-input {
  display: flex; align-items: center; background: var(--cream);
  border: 1px solid var(--line); border-radius: 5px; overflow: hidden;
}
.calc-input:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,76,.2); }
.calc-input .affix {
  padding: 10px 12px; font-size: 14px; color: var(--text-soft);
  background: rgba(174,141,162,.07); font-weight: 600;
  border-right: 1px solid var(--line-soft);
}
.calc-input .affix.suffix { border-right: none; border-left: 1px solid var(--line-soft); }
.calc-input input {
  flex: 1; border: none; outline: none; background: transparent;
  padding: 10px 12px; font-size: 15px; color: var(--text);
  width: 100%; font-family: inherit;
}
.calc-results { display: flex; flex-direction: column; gap: 1.1rem; }
.calc-out {
  background: var(--plum-deep); border-radius: 10px; padding: 1.6rem;
  display: flex; flex-direction: column; justify-content: center;
}
.calc-out-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; flex-wrap: wrap; }
.calc-out-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-lt);
}
.calc-out-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 50px; margin-left: auto;
  color: var(--white); background: rgba(201,168,76,.45);
}
.calc-out-val {
  font-family: 'Cormorant Garamond', serif; font-size: 2.7rem;
  font-weight: 700; color: var(--gold); line-height: 1;
}
.calc-out--gold .calc-out-val { color: var(--gold-lt); }
.calc-out-note { font-size: 11.5px; color: rgba(250,250,245,.84); margin-top: .5rem; line-height: 1.45; }

/* ── TABLES ─────────────────────────────────────────────────────────────── */

.spec-table-wrap { overflow-x: auto; margin-top: 1.75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px; }
.spec-table th {
  background: var(--plum-deep); color: var(--cream); text-align: left;
  padding: .9rem 1.1rem; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.spec-table td { padding: .9rem 1.1rem; border-bottom: 1px solid var(--line-soft); color: var(--text-soft); vertical-align: top; }
.spec-table tr:last-child td { border-bottom: none; }
.spec-table td:first-child { color: var(--plum-deep); font-weight: 600; }
.spec-table tbody tr:nth-child(even) { background: rgba(174,141,162,.04); }
.panel--dark .pill { background: rgba(255,255,255,.06); color: rgba(250,250,245,.8); border-color: rgba(255,255,255,.18); }
.panel--dark .pill--live { background: var(--gold); color: var(--plum-deep); border-color: var(--gold); }

/* ── ACCREDITATION MARKS ────────────────────────────────────────────────── */

.accred-row {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem;
}
.accred {
  border: 1px solid var(--line); border-radius: 6px; background: var(--white);
  padding: .7rem 1.1rem; min-width: 108px;
}
.accred .a-mark { font-size: 14px; font-weight: 700; color: var(--plum-deep); letter-spacing: .02em; }
.accred .a-note { font-size: 10.5px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .07em; margin-top: 1px; }
.panel--dark .accred { background: rgba(255,255,255,.06); border-color: rgba(201,168,76,.28); }
.panel--dark .accred .a-mark { color: var(--gold-lt); }
.panel--dark .accred .a-note { color: rgba(250,250,245,.84); }
.form-group { margin-bottom: 1.2rem; }
.form-group label {
  display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-soft); margin-bottom: 5px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 5px; background: var(--cream); font-size: 14px;
  color: var(--text); font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,76,.2);
}
.form-consent { display: flex; align-items: flex-start; gap: 9px; margin: 1.5rem 0; }
.form-consent input { width: auto; margin-top: 3px; }
.form-consent label { font-size: 12px; color: var(--text-soft); line-height: 1.5; text-transform: none; letter-spacing: 0; font-weight: 400; }
.form-note { font-size: 13px; color: var(--text-soft); margin-bottom: 1.75rem; }
.form-status { margin-top: 1rem; font-size: 13.5px; font-weight: 600; color: var(--plum-deep); }

/* ── FOOTER + DISCLAIMER ────────────────────────────────────────────────── */

body > footer {
  padding: 2.5rem 3rem; background: var(--plum-deep); color: var(--cream);
  font-size: 13px; border-top: 1px solid rgba(201,168,76,.2);
}
.footer-inner { max-width: 1140px; margin: 0 auto; display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.footer-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
body > footer a { color: var(--gold-lt); text-decoration: none; }
body > footer a:hover { text-decoration: underline; }
.footer-addr { color: rgba(250,250,245,.7); font-size: 12.5px; line-height: 1.6; }

/* The bar is fixed, so the page must reserve its height. The regulatory text
   runs to three lines on a phone, so the height is measured at runtime like
   --header-h; the fallback covers the no-JS case. */
body { padding-bottom: var(--disclaimer-h, 160px) !important; }

.disclaimer-bar {
  position: fixed; bottom: 0; left: 0; width: 100%;
  background: #1E1018; border-top: 2px solid var(--gold);
  color: var(--cream); text-align: center; padding: .8rem 1rem;
  font-size: 12.5px; font-weight: 500; letter-spacing: .03em;
  z-index: 11000; box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */

@media (max-width: 1120px) {
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .chain-grid, .chain-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .calc-wrap { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .nav-toggle-btn { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; width: 100%;
    background: var(--cream); flex-direction: column; align-items: flex-start;
    padding: 1.1rem 1.6rem; gap: .9rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.1); border-bottom: 1px solid var(--line);
  }
  .nav-links.is-open { display: flex; }
  .card-grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --header-h: 84px; }
  nav.resource-bar, nav.primary-nav, .panel, body > footer {
    padding-left: 1.4rem; padding-right: 1.4rem;
  }
  .resource-inner { justify-content: flex-start; }
  .res-label { width: 100%; margin-right: 0; }
  .split-grid, .split-grid--wide-left { grid-template-columns: 1fr; gap: 2rem; }
  .card-grid--2, .card-grid--4, .chain-grid, .chain-grid--3 { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .panel { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .page-hero {
    padding: 3rem 1.4rem;
    min-height: clamp(380px, 62vh, 480px);
  }
  .page-hero::before {
    -webkit-mask-image: none; mask-image: none; opacity: .38;
    background-position: center;
  }
  .page-hero::after { background: linear-gradient(180deg, rgba(74,43,68,.90) 0%, rgba(74,43,68,.86) 100%); }
  .page-hero h1 { max-width: none; }
  .credentials { gap: 1rem 1.75rem; }
  .ribbon-seg {
    flex: 1 1 100%; margin-left: 0; padding: .9rem 1.3rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% 100%, 0 calc(100% - 12px));
  }
  .ribbon-seg:first-child, .ribbon-seg:last-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% 100%, 0 calc(100% - 12px)); }
  .ribbon-seg:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  .footer-inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card--hover:hover, .report-thumb:hover { transform: none; }
}

@media print {
  header.sticky-header-wrapper, .disclaimer-bar, .btn { display: none; }
  body { padding-bottom: 0 !important; }
}

/* ── ROUTE RIBBON — home page audience routing (signature element) ───────── */

.route-ribbon { display: flex; margin-top: 2.25rem; }
.route-seg {
  flex: 1 1 0; text-decoration: none; display: flex; flex-direction: column;
  padding: 2rem 1.75rem 1.75rem 3.1rem; margin-left: -26px;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%, 28px 50%);
  transition: filter .2s ease;
  position: relative;
}
.route-seg:first-child {
  margin-left: 0; padding-left: 2rem;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
}
.route-seg:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 28px 50%); }
.route-seg:hover { filter: brightness(1.14); }
.route-seg:focus-visible { outline-offset: -6px; }

.route-seg .rs-role {
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: .5rem;
}
.route-seg .rs-head {
  font-family: 'Cormorant Garamond', serif; font-size: 1.65rem;
  font-weight: 700; line-height: 1.12; margin-bottom: .55rem;
}
.route-seg .rs-proof { font-size: 13.5px; line-height: 1.55; margin-bottom: 1.1rem; }
.route-seg .rs-go {
  margin-top: auto; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.route-seg .rs-go::after { content: ' →'; }

.route-a { background: #F0E3DE; }
.route-a .rs-role { color: var(--plum); }
.route-a .rs-head { color: var(--plum-deep); }
.route-a .rs-proof { color: var(--text-soft); }
.route-a .rs-go { color: var(--plum-deep); }

.route-b { background: var(--plum); }
.route-b .rs-role { color: var(--gold-lt); }
.route-b .rs-head { color: var(--white); }
.route-b .rs-proof { color: rgba(250,250,245,.82); }
.route-b .rs-go { color: var(--gold-lt); }

.route-c { background: var(--plum-deep); }
.route-c .rs-role { color: var(--gold); }
.route-c .rs-head { color: var(--gold-lt); }
.route-c .rs-proof { color: rgba(250,250,245,.78); }
.route-c .rs-go { color: var(--gold); }

.route-axis {
  display: flex; align-items: center; gap: 1rem; margin-top: .5rem;
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mauve-dk);
}
.route-axis::after { content: ''; flex: 1; height: 1px; background: var(--line); }

@media (max-width: 900px) {
  .route-ribbon { flex-direction: column; }
  .route-seg {
    margin-left: 0; margin-top: -20px; padding: 2rem 1.6rem 2.4rem;
    clip-path: polygon(0 0, 50% 22px, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px));
  }
  .route-seg:first-child {
    margin-top: 0; padding-left: 1.6rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px));
  }
  .route-seg:last-child { clip-path: polygon(0 0, 50% 22px, 100% 0, 100% 100%, 0 100%); }
}

/* ── CASE CARDS ─────────────────────────────────────────────────────────── */

.case-card {
  background: var(--white); border: 1px solid var(--line);
  border-top: 4px solid var(--gold); border-radius: 8px;
  padding: 1.6rem 1.5rem; display: flex; flex-direction: column;
}
.case-age {
  font-family: 'Cormorant Garamond', serif; font-size: 2.6rem;
  font-weight: 700; color: var(--plum-deep); line-height: 1;
}
.case-age span {
  display: block; font-family: 'DM Sans', sans-serif; font-size: 10px;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mauve-dk); margin-top: .25rem;
}
.case-head { font-size: 14px; font-weight: 600; color: var(--plum); margin-bottom: .75rem; line-height: 1.35; }
.case-body { font-size: 13.5px; color: var(--text-soft); line-height: 1.6; margin: .9rem 0 1rem; }
.case-outcome {
  margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--plum-deep);
  background: rgba(201,168,76,.14); border-radius: 5px; padding: .6rem .8rem;
}

/* ── CONTACT MODAL ──────────────────────────────────────────────────────── */

.modal {
  position: fixed; inset: 0; z-index: 13000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 3rem 1.5rem;
  overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal [hidden] { display: none !important; }

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(30,16,24,.72);
  backdrop-filter: blur(3px);
}

.modal-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; margin: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--gold);
  border-radius: 10px;
  padding: 2.4rem 2.4rem 2rem;
  box-shadow: var(--shadow-lg);
  animation: modal-in .22s ease-out;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-close {
  position: absolute; top: .5rem; right: .9rem;
  background: none; border: none; cursor: pointer;
  font-size: 2rem; line-height: 1; color: var(--text-soft);
  font-family: inherit; padding: .25rem .4rem;
}
.modal-close:hover { color: var(--plum-deep); }

.modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem; font-weight: 700; color: var(--plum-deep);
  line-height: 1.15; margin-bottom: .6rem;
}

.modal-addr {
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--text-soft); line-height: 1.6;
}

body.modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .modal { padding: 1.5rem 1rem 4rem; }
  .modal-panel { padding: 2rem 1.4rem 1.6rem; }
}

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

/* Light-panel variant, in case the band is reused outside a dark section */
.panel:not(.panel--dark) .caveat-band { border-top-color: var(--line); }
.panel:not(.panel--dark) .caveat-title { color: var(--plum-deep); }
.panel:not(.panel--dark) .caveat { border-left-color: var(--gold); }
.panel:not(.panel--dark) .caveat-tag { color: var(--plum); }
.panel:not(.panel--dark) .caveat p { color: var(--text-soft); }

@media (max-width: 860px) {
  .caveat-grid { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* Light-panel variant, in case the band is reused outside a dark section */
.panel:not(.panel--dark) .caveat-band { border-top-color: var(--line); }
.panel:not(.panel--dark) .caveat-title { color: var(--plum-deep); }
.panel:not(.panel--dark) .caveat { border-left-color: var(--gold); }
.panel:not(.panel--dark) .caveat-tag { color: var(--plum); }
.panel:not(.panel--dark) .caveat p { color: var(--text-soft); }

@media (max-width: 860px) {
  .caveat-grid { grid-template-columns: 1fr; gap: 1.1rem; }
}
.panel--dark .trio-head { color: var(--gold); }

@media (max-width: 1100px) {
  .trio-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .trio-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── THREE COLUMNS — one block of content per column ────────────────────── */

.col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.col-3-head {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem; font-weight: 700; color: var(--gold-dk);
  line-height: 1.2; margin-bottom: 1rem;
}
.panel--dark .col-3-head { color: var(--gold); }

.col-3-video {
  display: block; width: 100%; max-width: 300px;
  aspect-ratio: 16/9; object-fit: contain;
  background: #000; border-radius: 6px;
  border: 1px solid var(--line);
}
.col-3-note {
  font-size: 13px; line-height: 1.6; color: var(--text-soft);
  margin-top: .8rem; max-width: 300px;
}

@media (max-width: 900px) {
  .col-3 { grid-template-columns: 1fr; gap: 2rem; }
  .col-3-video, .col-3-note { max-width: 360px; }
}

/* ── CALCULATOR: derived (read-only) fields ─────────────────────────────── */

.calc-input--derived {
  background: rgba(174,141,162,.10);
  border-style: dashed;
}
.calc-input--derived input {
  color: var(--plum-deep); font-weight: 600; cursor: default;
}
.calc-input--derived input:focus { outline: none; }
.calc-input--derived .affix.suffix {
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mauve-dk); background: transparent;
}

/* Three inputs across one line: encounters, opt-in, resulting assessments. */
.calc-grid--3 { grid-template-columns: 1fr .72fr 1fr; }
@media (max-width: 860px) { .calc-grid--3 { grid-template-columns: 1fr; } }

/* Per-section note on where the default numbers come from. */
.calc-explainer {
  font-size: 12.5px; line-height: 1.6; color: var(--text-soft);
  margin-top: 1rem; padding-left: .9rem;
  border-left: 2px solid var(--line);
}

/* ── CALCULATOR: additive result stack ──────────────────────────────────── */

.calc-results {
  gap: 0;
  display: flex; flex-direction: column;
  min-height: 100%;
}
.calc-results .calc-out {
  flex: 1 1 auto;          /* cards absorb the slack, keeping both columns level */
  min-height: 7.5rem;      /* floor so a short stack never looks starved */
}
.calc-results .calc-op,
.calc-results .calc-sum-rule { flex: 0 0 auto; }

.calc-results .calc-out { margin: 0; }

/* Operator sits between contributing cards, on the rule that joins them. */
.calc-op {
  position: relative;
  height: 30px;
  display: flex; align-items: center; justify-content: center;
}
.calc-op::before {
  content: ''; position: absolute; left: 26px; right: 26px; top: 50%;
  height: 1px; background: var(--line);
}
.calc-op::after {
  content: '+';
  position: relative; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream); border: 1px solid var(--line);
  color: var(--text-soft); font-size: 14px; font-weight: 600; line-height: 1;
}

/* Heavier rule marks the point where the column is summed. */
.calc-sum-rule {
  height: 26px; position: relative;
}
.calc-sum-rule::before,
.calc-sum-rule::after {
  content: ''; position: absolute; left: 0; right: 0;
  height: 1px; background: var(--plum-deep);
}
.calc-sum-rule::before { top: 12px; }
.calc-sum-rule::after  { top: 16px; }

/* Three streams read as a tonal progression of the site plum, each with its
   own accent keyline. The total repeats all three accents down its edge. */
.calc-out--direct    { background: var(--plum-deep); }
.calc-out--imaging   { background: var(--plum); }
.calc-out--nonimaging{ background: #7A4E69; }

.calc-out--direct .calc-out-val     { color: var(--gold); }
.calc-out--imaging .calc-out-val    { color: var(--gold-lt); }
.calc-out--nonimaging .calc-out-val { color: var(--gold-lt); }

.calc-out--imaging .calc-out-label    { color: var(--gold-lt); }
.calc-out--nonimaging .calc-out-label { color: var(--gold-lt); }

.calc-out--imaging .calc-out-tag    { background: rgba(232,213,163,.24); }
.calc-out--nonimaging .calc-out-tag { background: rgba(232,213,163,.24); }

.calc-out--direct     { border-left: 6px solid var(--gold); }
.calc-out--imaging    { border-left: 6px solid var(--gold-lt); }
.calc-out--nonimaging { border-left: 6px solid var(--mauve); }

.calc-out--total {
  background: #6E5630;
  border: 1px solid rgba(201,168,76,.55);
  position: relative; overflow: hidden;
}
.calc-out--total::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg,
    var(--gold) 0%, var(--gold) 33.3%,
    var(--gold-lt) 33.3%, var(--gold-lt) 66.6%,
    var(--mauve) 66.6%, var(--mauve) 100%);
}
.calc-out--total .calc-out-label { color: var(--white); }
.calc-out--total .calc-out-val { color: var(--gold-lt); font-size: 3rem; }

@media (max-width: 860px) {
  .calc-op { height: 26px; }
  .calc-out--total .calc-out-val { font-size: 2.4rem; }
}

/* ── Two-tier licensing grid ────────────────────────────────────────────── */
.tier-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1120px) { .tier-grid--2 { grid-template-columns: 1fr; } }

/* ── Accreditation marks forced onto a single row ───────────────────────── */
.accred-row--single { flex-wrap: nowrap; }
.accred-row--single .accred {
  flex: 1 1 0; min-width: 0; padding: .7rem .5rem; text-align: center;
}
.accred-row--single .a-mark { font-size: 12.5px; white-space: nowrap; }
.accred-row--single .a-note {
  font-size: 9px; letter-spacing: .04em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 520px) {
  .accred-row--single { flex-wrap: wrap; }
  .accred-row--single .accred { flex: 1 1 44%; }
}

/* ── HERO QUOTE — question left, answer answering back from the right ────
   The offset is the point: the reply lands as a separate beat rather than
   as the tail of the sentence. */

.hero-quote {
  margin: 0; padding: clamp(1rem, 2vw, 2rem) 0;
}
.hero-quote blockquote { margin: 0; }

.hero-quote-q,
.hero-quote-a {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  line-height: 1.16; text-wrap: balance;
}

.hero-quote-q {
  font-size: clamp(1.8rem, 3.7vw, 3.1rem);
  font-weight: 600; font-style: italic;
  color: var(--cream); max-width: 780px;
}

.hero-quote-a {
  font-size: clamp(2.3rem, 4.95vw, 4.15rem);
  font-weight: 700; color: var(--gold);
  text-align: right; margin-top: clamp(1rem, 2.2vw, 1.75rem);
}
.hero-quote-a::before,
.hero-quote-a::after {
  font-size: 1.5em; line-height: 0;
  color: var(--gold); opacity: .45;
  position: relative; top: .22em;
}
.hero-quote-a::before { content: '\201C'; margin-right: .06em; }
.hero-quote-a::after  { content: '\201D'; margin-left: .04em; }

.hero-quote figcaption {
  text-align: right; margin-top: .9rem;
  font-size: 12.5px; line-height: 1.6;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(250,250,245,.6);
}

.panel:not(.panel--dark) .hero-quote-q { color: var(--plum-deep); }
.panel:not(.panel--dark) .hero-quote-a { color: var(--gold-dk); }
.panel:not(.panel--dark) .hero-quote figcaption { color: var(--text-soft); }

#demand .section-tag { margin-top: 0; }

/* Table sitting on a dark panel */
.panel--dark .spec-table-wrap {
  background: rgba(255,255,255,.05);
  border-color: rgba(201,168,76,.28);
}
.panel--dark .spec-table th {
  background: rgba(0,0,0,.22); color: var(--gold-lt);
}
.panel--dark .spec-table td { color: rgba(250,250,245,.82); border-bottom-color: rgba(255,255,255,.10); }
.panel--dark .spec-table td:first-child { color: var(--white); }
.panel--dark .spec-table tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }

/* Four even columns, first slightly wider for its heading */
.demand-table { table-layout: fixed; min-width: 760px; }
.demand-table th:first-child, .demand-table td:first-child { width: 26%; }

@media (max-width: 860px) {
  .hero-quote-q { max-width: none; }
  .hero-quote-a, .hero-quote figcaption { text-align: left; }
}

/* ── DEMAND TABLE — respondent comparison ───────────────────────────────── */

.demand-table { border-collapse: separate; border-spacing: 0; }

.demand-table thead th {
  padding: 1.1rem 1.25rem; font-size: 11.5px; line-height: 1.4;
  vertical-align: bottom;
}
.demand-table tbody th {
  text-align: left; vertical-align: top;
  padding: 1.4rem 1.25rem;
  font-size: 14px; font-weight: 600; color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.10);
  /* Row labels read as prose, not as column headers. */
  text-transform: none; letter-spacing: 0; background: transparent;
}
.demand-table tbody th span {
  display: block; margin-top: .25rem;
  font-size: 11px; font-weight: 400; letter-spacing: .04em;
  color: rgba(250,250,245,.78);
}
.demand-table tbody td {
  padding: 1.4rem 1.25rem; vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.demand-table tbody tr:last-child th,
.demand-table tbody tr:last-child td { border-bottom: none; }

/* Faint dividers between respondents make the columns readable across rows. */
.demand-table th + th,
.demand-table td + td,
.demand-table th + td { border-left: 1px solid rgba(255,255,255,.07); }

.chip {
  display: inline-block; padding: 5px 13px; border-radius: 50px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(201,168,76,.35);
  font-size: 13px; font-weight: 600; color: var(--gold-lt); white-space: nowrap;
}

.figure-cell {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem; font-weight: 700; color: var(--gold-lt) !important; line-height: 1.1;
}
.figure-cell small {
  display: block; font-family: 'DM Sans', sans-serif;
  font-size: 10.5px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(250,250,245,.78); margin-top: .3rem;
}

/* ── PRICE SCALE — three price points on a shared axis ───────────────────── */

.price-scale { min-width: 150px; }

.ps-track {
  position: relative; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,.10); margin: .4rem 0 .85rem;
}
.ps-span {
  position: absolute; top: 0; bottom: 0; border-radius: 4px;
  background: linear-gradient(90deg, rgba(206,163,159,.55), rgba(201,168,76,.75));
}
.ps-pin {
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--plum-deep);
}
.ps-pin--good { background: var(--rose); }
.ps-pin--fair { background: var(--gold); width: 16px; height: 16px; }
.ps-pin--max  { background: var(--cream); }

.ps-key {
  list-style: none; margin: 0;
  display: flex; justify-content: space-between; gap: .5rem;
}
.ps-key li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(250,250,245,.78); line-height: 1.3;
}
.ps-key b {
  display: flex; align-items: center; gap: .3rem;
  font-family: 'Cormorant Garamond', serif; font-size: 1.2rem;
  font-weight: 700; color: var(--cream); letter-spacing: 0;
}
.ps-sw { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ps-sw--good { background: var(--rose); }
.ps-sw--fair { background: var(--gold); }
.ps-sw--max  { background: var(--cream); }

/* Adoption verdict */
.verdict {
  display: inline-block; padding: .55rem .85rem; border-radius: 6px;
  background: rgba(201,168,76,.14); border-left: 3px solid var(--gold);
  font-size: 13px; line-height: 1.45; color: rgba(250,250,245,.85);
}
.verdict b { display: block; color: var(--gold-lt); font-size: 15px; font-weight: 700; }

/* ── QUOTE BLOCK — supporting quote, quieter than the hero statement ─────── */

.quote-block {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 3px solid var(--gold);
  max-width: 940px;
}
.quote-block blockquote {
  margin: 0; font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-style: italic; font-weight: 600; line-height: 1.35;
  color: var(--cream); text-wrap: pretty;
}
.quote-block blockquote::before { content: '\201C'; }
.quote-block blockquote::after  { content: '\201D'; }
.quote-block figcaption {
  margin-top: 1rem; font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(250,250,245,.55);
}
.panel:not(.panel--dark) .quote-block blockquote { color: var(--plum-deep); }
.panel:not(.panel--dark) .quote-block figcaption { color: var(--text-soft); }

@media (max-width: 900px) {
  .demand-table { min-width: 720px; }
}

/* ── VALUE GRID — scannable commercial arguments ─────────────────────────
   Each point leads with a single anchor word or figure so the six messages
   register at a glance rather than needing to be read in full. */

.value-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin-top: 2.25rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
}
.value-card {
  background: var(--cream);
  padding: 2rem 1.75rem 1.9rem;
  display: flex; flex-direction: column;
  transition: background .2s ease;
}
.value-card:hover { background: var(--white); }

.vc-lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: var(--gold-dk); margin-bottom: .85rem;
  display: block;
}
.value-card h3 {
  font-size: 15.5px; font-weight: 600; color: var(--plum-deep);
  line-height: 1.35; margin-bottom: .5rem;
}
.value-card p {
  font-size: 13.5px; line-height: 1.6; color: var(--text-soft); margin: 0;
}

.panel--white .value-card { background: var(--white); }
.panel--white .value-card:hover { background: var(--cream); }

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

/* ── RIBBON, FLOW VARIANT — taller segments carrying a figure and a note ── */

.ribbon--flow { margin-top: 1rem; }
.ribbon--flow .ribbon-seg { padding: 1.5rem 1.5rem 1.5rem 2.9rem; flex: 1 1 200px; }
.ribbon--flow .ribbon-seg:first-child { padding-left: 1.75rem; }
.ribbon--flow .r-val {
  font-size: clamp(1.7rem, 2.4vw, 2.3rem); margin: .15rem 0 .3rem;
}
.ribbon--flow .r-sub {
  font-size: 11px; letter-spacing: .05em; line-height: 1.4; opacity: .75;
}
.ribbon-caption { text-align: left; margin-bottom: .5rem; }

@media (max-width: 900px) {
  .ribbon--flow .ribbon-seg,
  .ribbon--flow .ribbon-seg:first-child { padding: 1.1rem 1.4rem 1.6rem; }
}

/* Four-across variant of the value grid */
.value-grid--4 { grid-template-columns: repeat(4, 1fr); }
.value-grid--4 .value-card { padding: 1.75rem 1.4rem 1.6rem; }
.value-grid--4 .vc-lead { font-size: 2.3rem; }
.value-grid--4 .value-card h3 { font-size: 14.5px; }
.value-grid--4 .value-card p { font-size: 13px; }
@media (max-width: 1100px) { .value-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .value-grid--4 { grid-template-columns: 1fr; } }

/* Supporting line inside a ribbon segment */
.r-note {
  display: block; margin-top: .6rem; padding-top: .6rem;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: 11.5px; line-height: 1.45; opacity: .85;
}
.ribbon--flow .ribbon-seg:last-child { flex: 1.35 1 240px; }

/* Value cards on a dark panel */
.panel--dark .value-grid {
  background: rgba(255,255,255,.12);
  border-color: rgba(201,168,76,.28);
}
.panel--dark .value-card { background: var(--plum-deep); }
.panel--dark .value-card:hover { background: #57334F; }
.panel--dark .vc-lead { color: var(--gold); }
.panel--dark .value-card h3 { color: var(--white); }
.panel--dark .value-card p { color: rgba(250,250,245,.72); }

/* ── VALUE BAND — the four sales-force arguments, stated at full size ─────
   A step up from .value-grid: no card boxes, so nothing competes with the
   figures themselves. Columns are divided by gold hairlines and each one is
   explicitly attributed, because the whole point of the section is that two
   of these numbers belong to the OEM and two to their customer. */

.vband { margin-top: 2.1rem; }

.vband-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.vband-col {
  position: relative;
  padding: .35rem 2rem 0;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.vband-col:first-child { padding-left: 0; }
.vband-col:last-child  { padding-right: 0; }
.vband-col + .vband-col::before {
  content: ''; position: absolute; left: 0; top: .2rem; bottom: .2rem;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(201,168,76,0) 0%, rgba(201,168,76,.45) 18%,
    rgba(201,168,76,.45) 82%, rgba(201,168,76,0) 100%);
}

/* Who the number belongs to. */
.vb-who {
  display: inline-flex; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-lt);
  border: 1px solid rgba(201,168,76,.45);
  border-radius: 2px; padding: .32rem .55rem .28rem;
  margin-bottom: 1.1rem;
}

.vb-fig {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700; line-height: .92;
  font-size: clamp(2.9rem, 4.4vw, 4.3rem);
  color: var(--gold);
  letter-spacing: -.01em;
}
.vb-fig-sub {
  display: block; margin-top: .7rem;
  font-size: 11.5px; line-height: 1.5;
  letter-spacing: .07em; text-transform: uppercase;
  color: rgba(232,213,163,.78);
  max-width: 22ch;
}
.vband-note {
  margin: 1.4rem 0 0;
  font-size: 11.5px; letter-spacing: .04em;
  color: var(--text-soft);
}

/* ── VALUE BAND ON A LIGHT PANEL ─────────────────────────────────────────
   Separate boxes rather than hairline columns, carrying the same colourways
   the toolkit uses for the value chain: bronze for the manufacturer, plum for
   the provider, blush for the patient. */
.panel:not(.panel--dark) .vb-who { color: var(--gold-dk); border-color: rgba(143,112,22,.4); }
.panel:not(.panel--dark) .vb-fig { color: var(--gold-dk); }
.panel:not(.panel--dark) .vb-fig-sub { color: var(--text-soft); }
.panel:not(.panel--dark) .vband-note { color: var(--text-soft); }

/* One card carries a phrase rather than a figure, so it is set as a statement
   in plum: deliberately off the pattern the three numbers establish. */
.vb-say {
  display: block;
  margin: auto 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.45rem, 2.05vw, 2.05rem);
  font-weight: 700; line-height: 1.16;
  color: var(--plum-deep);
  text-wrap: balance;
}
.panel--dark .vb-say { color: var(--cream); }

.vband-grid:has(.vb-card) { gap: 1.25rem; }
.vb-card {
  border-radius: 10px;
  padding: 1.8rem 1.6rem 1.9rem;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
}
/* The hairline dividers and edge padding belong to the columns layout. */
.vb-card::before { display: none !important; }
.vband-col.vb-card,
.vband-col.vb-card:first-child,
.vband-col.vb-card:last-child { padding-left: 1.6rem; padding-right: 1.6rem; }

.vb-card--plain    { background: var(--white); border-color: var(--line); }
.vb-card--patient  { background: #F2E7E2; border-color: rgba(206,163,159,.55); }
.vb-card--oem      { background: #6E5630; }   /* 4.8:1 for the pill, 5.1:1 for the sub-line */
.vb-card--provider { background: var(--plum); }

/* Light-ground cards keep the plum and gold-dark palette. The panel-level
   rules above are .panel:not(.panel--dark) + class, so these have to carry
   the same prefix to outrank them rather than lose on specificity. */
.panel:not(.panel--dark) .vb-card--plain .vb-who { color: var(--gold-dk); border-color: rgba(143,112,22,.45); }
/* Blush is lighter than cream, so --gold-dk only reaches 3.8:1 on it. */
.panel:not(.panel--dark) .vb-card--patient .vb-who { color: #7A5F13; border-color: rgba(122,95,19,.5); }
.panel:not(.panel--dark) .vb-card--plain .vb-fig { color: var(--gold-dk); }
.panel:not(.panel--dark) .vb-card--patient .vb-fig { color: #7A5F13; }
.panel:not(.panel--dark) .vb-card--plain .vb-fig-sub,
.panel:not(.panel--dark) .vb-card--patient .vb-fig-sub { color: var(--text-soft); }

/* Dark-ground cards flip to cream and light gold. */
.panel:not(.panel--dark) .vb-card--oem .vb-who,
.panel:not(.panel--dark) .vb-card--provider .vb-who { color: var(--gold-lt); border-color: rgba(232,213,163,.55); }
.panel:not(.panel--dark) .vb-card--oem .vb-fig { color: var(--cream); }
.panel:not(.panel--dark) .vb-card--provider .vb-fig { color: var(--gold-lt); }
.panel:not(.panel--dark) .vb-card--oem .vb-fig-sub,
.panel:not(.panel--dark) .vb-card--provider .vb-fig-sub { color: rgba(250,250,245,.82); }

/* The watermark is drawn for dark grounds; swap the mark on a light panel. */
.panel:not(.panel--dark).brand-watermark::before {
  background-image: url('../images/cortex-icon-plum.svg');
  opacity: .05;
}

/* Two across, then one. `1fr` floors at min-content, which the large figures
   blow straight through, so the columns are explicitly minmax(0, 1fr). */
.vband-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1080px) {
  .vband-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .vband-col { padding: .35rem 1.6rem 0; }
  .vband-col:nth-child(odd)  { padding-left: 0; }
  .vband-col:nth-child(even) { padding-right: 0; }
  .vband-col:nth-child(odd)::before { display: none; }
}
@media (max-width: 620px) {
  .vband-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .vband-col,
  .vband-col:nth-child(odd),
  .vband-col:nth-child(even) { padding: 0; }
  .vband-col::before { display: none !important; }
  .vband-col + .vband-col {
    margin-top: 1.9rem; padding-top: 1.9rem;
    border-top: 1px solid rgba(201,168,76,.25);
  }
  .vb-fig { font-size: 3.1rem; }
  .vb-fig-sub { max-width: none; }
}

/* The provider quote: the payoff of the value band, run at full width so the
   answer carries the measure on its own. Doubled class, because the base
   .proof-quote rules are defined later in this file. */
.proof-quote.proof-quote--band {
  display: block;
  margin: 2.4rem 0 0; padding-top: 2.2rem;
  border-top: 1px solid var(--line);
}
.proof-quote--band .pq-q {
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  font-weight: 400; color: var(--text-soft);
  max-width: 64ch;
}
.proof-quote--band .pq-a {
  font-size: clamp(2.6rem, 8.9vw, 7.6rem);
  line-height: .98; letter-spacing: -.02em;
  color: var(--gold-dk); margin-top: .5rem;
}
/* The band size was set for a two-word answer. A sentence needs a smaller
   face and a measure, or it runs off the bottom of the section. */
/* No measure: the answer runs to the container's own width. */
.proof-quote--band.proof-quote--mid .pq-a {
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  line-height: 1.08; max-width: none;
}
.proof-quote--band.proof-quote--mid .pq-q { max-width: none; }
.proof-quote.proof-quote--band figcaption {
  margin-top: 1.25rem; padding: 0;
  border: 0; max-width: none;
  color: var(--text-soft);
}

/* #what-it-does: the report sits left with its caption beneath it, and the
   space the quote used to occupy now carries what the product actually does. */
.product-row {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 3.25rem; align-items: start;
}
.product-media { min-width: 0; }

/* The call to action stands in the text column's own white space, its foot
   level with the report hint opposite, rather than on a rule drawn across the
   whole row. Stretching the column is what lets `auto` reach that line. */
.product-points { display: flex; flex-direction: column; align-self: stretch; }
.product-cta { margin-top: auto; padding-top: 1.4rem; }

/* The sample report moved out of the layout and behind a link, so the page
   keeps the product shot without spending a column on it. */
.spec-foot {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .4rem 1.6rem; margin-top: 1.1rem;
}
.spec-foot .spec-footnote { margin: 0; padding-top: 0; border-top: 0; flex: 1 1 16rem; }

.report-link {
  display: inline-flex; align-items: center; gap: .5rem;
  flex: 0 0 auto; padding: 0;
  border: 0; background: none; font: inherit;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--gold-dk); cursor: pointer;
  border-bottom: 1px solid rgba(143,112,22,.35);
  transition: color .2s ease, border-color .2s ease;
}
.report-link:hover { color: var(--plum-deep); border-color: var(--plum-deep); }
.report-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.rf-lead {
  display: block; margin: 0 0 1.25rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.3rem, 1.85vw, 1.7rem);
  line-height: 1.35; color: var(--plum-deep);
}

/* Three product points, set as a list that reads as specification rather
   than marketing: a gold tick, a hairline, nothing else. */
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  position: relative;
  padding: .72rem 0 .72rem 2.1rem;
  border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.5; color: var(--text-mid);
}
.spec-list li:last-child { border-bottom: 1px solid var(--line); }
.spec-list li::before {
  content: ''; position: absolute;
  left: .15rem; top: 1.12rem;
  width: 11px; height: 6px;
  border-left: 2px solid var(--gold-dk);
  border-bottom: 2px solid var(--gold-dk);
  transform: rotate(-45deg);
}
.spec-footnote { margin-top: 1.1rem; }

@media (max-width: 960px) {
  .product-row { grid-template-columns: 1fr; gap: 2rem; }
  .rf-lead { max-width: none; }
}

/* ── SALES TOOLKIT — look inside ──────────────────────────────────────────
   One stage showing the current page, with the inside pages as thumbnails
   beneath it the way a book preview works. The film sits below at roughly
   half the stage width, so the two are not read as a matching pair. */
.look { margin-top: 2.25rem; }

/* The call to action and the one line worth keeping from the old side column. */
.look-foot {
  margin-top: 1.4rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
/* Doubled class: the base .footnotes rule, with its own border-top, is
   defined further down this file and would otherwise win on source order. */
.look-foot .look-foot-note { margin: 0; padding-top: 0; border-top: 0; max-width: none; }

.look-stage {
  position: relative; aspect-ratio: 16 / 9;
  /* Sizes from its track width, not from the row height: stretched, the
     aspect ratio would derive a width from the taller thumbnail column and
     push the stage out over it. */
  align-self: start; min-width: 0;
  border-radius: 8px; overflow: hidden;
  background: var(--plum-deep);
  box-shadow: var(--shadow-md);
}
.look-page {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease;
}
.look-page.is-active { opacity: 1; visibility: visible; }
/* superseded below: covers bring their own image treatment */
.look-wash {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(30,16,24,.97) 0%, rgba(30,16,24,.94) 40%,
    rgba(30,16,24,.82) 58%, rgba(30,16,24,.55) 76%,
    rgba(30,16,24,.26) 100%);
}

.look-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  max-width: 63%;
}
.look-text--cta { position: static; height: 100%; max-width: 74%; }

.look-brand {
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
  margin: 0 0 .55rem;
}
.look-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4.5vw, 3.35rem);
  font-weight: 700; line-height: 1.06; color: var(--white);
  margin: 0;
}
.look-title--cover { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }

/* The promise, under the title and above the rule. */
.look-hook {
  margin: 1.3rem 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 2.5vw, 34px);
  font-weight: 400; line-height: 1.28;
  color: var(--gold-lt);
  max-width: 24ch;
  text-wrap: balance;
}
.look-rule {
  display: block; width: 52px; height: 2px;
  background: var(--gold); margin: 1.4rem 0 0;
}
/* The chapter contents, now the only body copy on the slide and sized to
   be read at a glance rather than scanned. */
.look-sub {
  margin: 0 0 .95rem;
  font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.look-contents ul { list-style: none; margin: 0; padding: 0; }
.look-contents li {
  position: relative;
  padding: 0 0 .62rem 1.5rem;
  font-size: clamp(15px, 1.7vw, 22px);
  line-height: 1.38; color: rgba(250,250,245,.95);
}
.look-contents li:last-child { padding-bottom: 0; }
.look-contents li::before {
  content: ''; position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); opacity: .9;
}

.look-cta-btn { align-self: flex-start; margin-top: 2.2rem; }

/* Inside pages, plus the way back out. */
/* Stage left, thumbnails stacked down the right, so the preview costs one
   slide's height rather than a slide plus a strip. The thumbnails are a fixed
   track width, so their size never follows the length of a caption. */
.look {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 1.5rem;
  align-items: stretch;
}
.look-strip { min-width: 0; }
.look-thumbs {
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: .9rem; height: 100%;
}
.look-thumbs .look-thumb-cap { min-height: 0; }
.look-thumb {
  flex: 0 0 auto; min-width: 0;
  padding: 0; border: 0; background: none; font: inherit;
  cursor: pointer; text-align: left;
  opacity: .62; transition: opacity .2s ease, transform .2s ease;
}
.look-thumb picture { display: block; }
.look-thumb img,
.look-thumb-plate {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--line);
}
.look-thumb-plate {
  display: flex; align-items: center; justify-content: center;
  text-align: center; background: var(--plum-deep);
  color: var(--gold); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.5;
  border-color: rgba(201,168,76,.4);
}
.look-thumb-cap {
  display: block; margin-top: .5rem;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-soft); line-height: 1.35;
  min-height: 2.7em;
}
.look-thumb:hover { opacity: 1; transform: translateY(-2px); }
.look-thumb[aria-selected="true"] { opacity: 1; }
.look-thumb[aria-selected="true"] img,
.look-thumb[aria-selected="true"] .look-thumb-plate {
  outline: 2px solid var(--gold); outline-offset: 1px;
}
.look-thumb[aria-selected="true"] .look-thumb-cap { color: var(--plum-deep); font-weight: 600; }
.look-thumb:focus-visible img,
.look-thumb:focus-visible .look-thumb-plate { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Bottom right, as a pair: the copy is left aligned and vertically centred,
   so an arrow at the mid-left edge lands straight on the statement. */
.look-arrow {
  position: absolute; bottom: 1.3rem; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid rgba(250,250,245,.35); border-radius: 50%;
  background: rgba(30,16,24,.55); color: var(--cream);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0; transition: opacity .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.look-arrow--prev { right: 4.6rem; transform: translateY(8px); }
.look-arrow--next { right: 1.4rem; transform: translateY(8px); }

/* Shown while the pointer is over the stage, and whenever one is focused. */
.look-stage:hover .look-arrow:not(:disabled),
.look-arrow:focus-visible {
  opacity: 1; transform: translateY(0);
}
.look-arrow:hover:not(:disabled) {
  background: var(--gold); border-color: var(--gold); color: var(--plum-deep);
}
.look-arrow:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Where the page sits in the toolkit, set on the page like a folio. */
.look-pagenum {
  position: absolute; left: clamp(1.5rem, 4vw, 3rem); bottom: 1.6rem; z-index: 2;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250,250,245,.82);
  text-shadow: 0 1px 7px rgba(30,16,24,.9), 0 0 2px rgba(30,16,24,.7);
  pointer-events: none;
}

/* Touch has no hover, so the arrows stay visible there. */
@media (hover: none) {
  .look-arrow:not(:disabled) { opacity: 1; transform: translateY(0); }
}

/* The film, now the product shot in #what-it-does. */
.tk-promo-film { margin: 0; }
.product-media .patient-quote { margin-top: 1.6rem; }
.tk-promo-video {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; object-fit: contain;
  background: #000; border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.tk-promo-film figcaption {
  font-size: 12.5px; line-height: 1.6; color: var(--text-soft);
  margin-top: .8rem;
}

.patient-quote {
  margin: 0; padding-left: 1.3rem;
  border-left: 2px solid var(--gold);
}
.patient-quote blockquote {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.2rem, 1.75vw, 1.6rem);
  font-style: italic; line-height: 1.4; color: var(--plum-deep);
}
.patient-quote blockquote span::before { content: '\201C'; }
.patient-quote blockquote span::after  { content: '\201D'; }
.patient-quote figcaption {
  margin-top: .8rem;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-soft);
}

/* Run across the whole measure, as the section's closing beat. Centred and
   on cream, so it does not read as a repeat of the gold-on-plum quote above. */
.patient-quote.patient-quote--wide {
  margin: 2.6rem 0 0;
  padding: 2.1rem 0 0 0;
  border-left: 0; border-top: 1px solid var(--line);
  text-align: center;
}
.patient-quote--wide blockquote {
  font-size: clamp(1.45rem, 3.05vw, 2.6rem);
  line-height: 1.26;
  text-wrap: balance;
}
.patient-quote--wide figcaption { margin-top: 1.1rem; }

@media (max-width: 700px) {
  .patient-quote.patient-quote--wide { text-align: left; }
}


@media (max-width: 1000px) {
  .look { grid-template-columns: 1fr; gap: 1rem; }
  .look-thumbs { flex-direction: row; justify-content: flex-start; gap: .7rem; height: auto; }
  .look-thumb { flex: 1 1 0; }
  .look-thumb-cap { font-size: 9.5px; }
  .look-text, .look-text--cta { max-width: 80%; }
  .look-arrow { width: 40px; height: 40px; }
}
@media (max-width: 520px) {
  .look-thumbs { gap: .45rem; }
  .look-thumb-cap { display: none; }
  .look-contents li { font-size: 14px; }
  .look-text, .look-text--cta { max-width: 86%; }
  .look-arrow { width: 34px; height: 34px; bottom: .7rem; }
  .look-arrow--prev { right: 3.1rem; }
  .look-arrow--next { right: .7rem; }
  .look-pagenum { bottom: 1rem; }
}

/* ── DEPLOYMENT — dense technical detail, kept readable ──────────────────── */

/* Table heading within the section */
.deploy-table-head {
  margin-top: 3rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem; font-weight: 700; line-height: 1.2;
}

@media (max-width: 1000px) {
}

/* ── CHEVRON FLOW — three stages of getting CorteX onto a system ─────────
   Same chevron idiom as the revenue ribbon, scaled up to carry detail.
   Tone deepens left to right to read as progression. */

.chev-flow { display: flex; margin-top: 2.25rem; }

.chev-card {
  flex: 1 1 0;
  padding: 1.9rem 3rem 1.9rem 3rem;
  margin-left: -26px;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%, 28px 50%);
}
.chev-card:first-child {
  margin-left: 0; padding-left: 1.9rem;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
}
.chev-card:last-child {
  padding-right: 1.9rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 28px 50%);
}
.chev-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.65rem; font-weight: 700; line-height: 1.15;
  margin-bottom: 1.1rem; padding-bottom: .9rem;
}

.cc-list { list-style: none; margin: 0; }
.cc-list li {
  font-size: 13px; line-height: 1.6;
  margin-bottom: 1rem; padding-left: 1rem; position: relative;
}
.cc-list li:last-child { margin-bottom: 0; }
.cc-list li::before {
  content: '■'; position: absolute; left: 0; top: 1px; font-size: 8px;
}

/* Light stage */
.chev-1 { background: #F0E3DE; color: var(--text-soft); }
.chev-1 .cc-step { color: var(--plum); }
.chev-1 h3 { color: var(--plum-deep); border-bottom: 1px solid rgba(106,65,95,.22); }
.chev-1 .cc-list li::before { color: var(--gold-dk); }
.chev-1 .cc-list strong { color: var(--plum-deep); }

/* Mid stage */
.chev-2 { background: var(--plum); color: rgba(250,250,245,.82); }
.chev-2 .cc-step { color: var(--gold-lt); }
.chev-2 h3 { color: var(--white); border-bottom: 1px solid rgba(255,255,255,.2); }
.chev-2 .cc-list li::before { color: var(--gold-lt); }
.chev-2 .cc-list strong { color: var(--gold-lt); }

/* Final stage */
.chev-3 { background: var(--plum-deep); color: rgba(250,250,245,.78); }
.chev-3 .cc-step { color: var(--gold); }
.chev-3 h3 { color: var(--gold-lt); border-bottom: 1px solid rgba(255,255,255,.16); }
.chev-3 .cc-list li::before { color: var(--gold); }
.chev-3 .cc-list strong { color: var(--gold); }

@media (max-width: 980px) {
  .chev-flow { flex-direction: column; }
  .chev-card,
  .chev-card:first-child,
  .chev-card:last-child {
    margin-left: 0; margin-top: -20px; padding: 1.9rem 1.6rem 2.6rem;
    clip-path: polygon(0 0, 50% 22px, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px));
  }
  .chev-card:first-child {
    margin-top: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px));
  }
  .chev-card:last-child { clip-path: polygon(0 0, 50% 22px, 100% 0, 100% 100%, 0 100%); }
}

/* ── ABOUT — full-width text with credentials above and marks below ─────── */

.credentials--centred { justify-content: center; }

.about-body { margin-top: 2.5rem; }
.about-logo { max-width: 170px; margin-bottom: 1.5rem; display: block; }
.about-body p {
  font-size: 16px; line-height: 1.8; color: var(--text-soft);
  max-width: 90ch; margin-bottom: 1rem;
}
.about-body p:last-child { margin-bottom: 0; }

/* Four marks spread evenly across the full content width */
.accred-row--spread {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem; margin-top: 2.5rem;
}
.accred-row--spread .accred {
  min-width: 0; text-align: center; padding: 1.1rem 1rem;
}
.accred-row--spread .a-mark { font-size: 16px; }
.accred-row--spread .a-note { font-size: 11px; margin-top: 3px; }

@media (max-width: 700px) {
  .accred-row--spread { grid-template-columns: repeat(2, 1fr); }
}

/* ── Credentials heading a CTA section ──────────────────────────────────── */

.cta-credentials {
  margin: 0 0 2.5rem;
  border-top: none;
}
/* The credentials row opens this section, so it does not need the full
   panel padding above it. */
.panel:has(> .container > .cta-credentials) { padding-top: 2rem; }

/* ── PUBLICATIONS — ruled list, compact and quiet ────────────────────────
   Cards made five short entries look like five separate objects. A ruled
   list reads as one body of work and takes about half the height. */

.pub-rows { list-style: none; margin: 1.4rem 0 0; padding: 0; border-top: 1px solid var(--line); }
/* Rows that carry no numeral drop the column it occupied. Other pages still
   number their lists, so this is scoped per row rather than changed globally. */
.pub-rows > li:not(:has(.pr-num)) { grid-template-columns: 1fr auto; }
.pub-rows > li {
  display: grid; grid-template-columns: 1.9rem 1fr auto;
  gap: 0 1rem; align-items: baseline;
  padding: .62rem .6rem;
  border-bottom: 1px solid var(--line);
  transition: background .15s ease;
}
.pub-rows > li:hover { background: rgba(174,141,162,.06); }

.pr-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem; font-weight: 700; color: var(--gold); line-height: 1.3;
}
.pr-body h3 {
  font-size: 13.5px; font-weight: 600; color: var(--plum-deep);
  line-height: 1.4; margin: 0;
}
.pr-body h3 em { font-style: italic; font-weight: 500; color: var(--text-soft); }
.pr-journal {
  display: block; margin-top: .1rem;
  font-size: 11.5px; color: var(--text-soft);
}
.pr-tag {
  display: inline-block; margin-left: .5rem; vertical-align: 1px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold-dk);
  background: rgba(201,168,76,.16); border-radius: 3px; padding: 3px 8px;
  white-space: nowrap;
}
.pr-link {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-dk);
  text-decoration: none; white-space: nowrap;
}
.pr-link::after { content: ' \2192'; }
.pr-link:hover { text-decoration: underline; }

/* The evidence base reads as due diligence, not as the argument: tighter rows
   and a shallower panel than the sections carrying the story. */
#publications.panel { padding-top: 3.4rem; padding-bottom: 3.4rem; }
#publications .section-h2 { margin-bottom: 0; }

/* ── SCOPE NOTE — limitations as small print ─────────────────────────────
   Stated plainly, but sized so it doesn't compete with the evidence above. */

.scope-note {
  margin-top: 2.5rem; padding: .9rem 0 0;
  border-top: 1px solid rgba(201,168,76,.28);
  font-size: 12.5px; line-height: 1.65;
  color: rgba(250,250,245,.6); max-width: 92ch;
}
.scope-note strong { color: var(--gold-lt); font-weight: 600; }
.panel:not(.panel--dark) .scope-note { color: var(--text-soft); border-top-color: var(--line); }
.panel:not(.panel--dark) .scope-note strong { color: var(--plum-deep); }

@media (max-width: 700px) {
  .pub-rows > li { grid-template-columns: 2rem 1fr; }
  .pr-link { grid-column: 2; margin-top: .5rem; }
  .pr-tag { margin-left: 0; margin-top: .3rem; }
}

/* ── YIELD CALCULATOR — illustrative referral model ──────────────────────── */

.model-flag {
  margin-top: 1.5rem; padding: .9rem 1.15rem;
  background: rgba(201,168,76,.12);
  border-left: 3px solid var(--gold);
  border-radius: 0 5px 5px 0;
  font-size: 12.5px; line-height: 1.6; color: var(--text-soft); max-width: 88ch;
}
.model-flag strong { color: var(--plum-deep); }

/* Two columns: fixed inputs left, threshold and its result right.
   Both columns stretch so their panels line up top and bottom. */
.yield-wrap {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: 1.25rem; margin-top: 1.25rem; align-items: stretch;
}
.yield-col { display: flex; flex-direction: column; gap: .9rem; }
.yield-col > .calc-panel { margin: 0; }
.yield-threshold { flex: 0 0 auto; }

/* Radio group */
.radio-set { border: none; padding: 0; margin: .9rem 0 0; display: flex; gap: .5rem; }
.radio-set legend {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: 6px; padding: 0;
}
.radio-opt { flex: 1 1 0; position: relative; cursor: pointer; }
.radio-opt input {
  /* Invisible but still a real, focusable control filling the label area,
     rather than collapsed to zero size where keyboard focus can be lost. */
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.radio-opt span {
  display: block; text-align: center;
  padding: 9px 4px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--cream); font-size: 13px; color: var(--text-soft);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.radio-opt input:checked + span {
  background: var(--plum-deep); border-color: var(--plum-deep);
  color: var(--gold-lt); font-weight: 600;
}
.radio-opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

.field-note {
  font-size: 11.5px; line-height: 1.55; color: var(--text-soft);
  margin-top: .7rem; font-style: italic;
}

/* Threshold slider */
.slider-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.slider-row label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-soft);
}
.slider-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem; font-weight: 700; color: var(--plum-deep); line-height: 1;
}
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 3px; margin: .6rem 0 .3rem;
  background: linear-gradient(90deg, var(--plum) 0%, var(--rose) 100%);
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--white);
  box-shadow: 0 1px 5px rgba(74,43,68,.35); cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--white);
  box-shadow: 0 1px 5px rgba(74,43,68,.35); cursor: pointer;
}
.slider:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.slider-scale {
  display: flex; justify-content: space-between;
  font-size: 10.5px; letter-spacing: .05em; color: var(--text-soft);
}

/* Results */
.yield-out { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; flex: 1 1 auto; }
.yo-card {
  background: var(--plum-deep); border-radius: 10px; padding: 1rem 1.15rem;
  display: flex; flex-direction: column; justify-content: center;
}
.yo-card--confirmed { background: #6E5630; }
.yo-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-lt);
}
.yo-fig {
  font-family: 'Cormorant Garamond', serif; font-size: 2.4rem;
  font-weight: 700; color: var(--gold); line-height: 1.05; margin: .15rem 0;
}
.yo-card--confirmed .yo-fig { color: var(--gold-lt); }
.yo-sub { font-size: 12px; color: rgba(250,250,245,.84); line-height: 1.45; }

@media (max-width: 1000px) { .yield-wrap { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .yield-out { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .matrix { grid-template-columns: 1fr; }
}

/* ── BRAND MARK — the CorteX icon used sparingly as a closing beat ────────
   The mark is a detailed trabecular section, so it is never set below ~40px
   where the structure turns to mush. */

.modal-mark {
  display: block; width: 44px; height: 44px; margin-bottom: 1rem;
}

/* Oversized, very low contrast mark used as texture on dark panels. It sits
   in the top right corner and runs off both edges, so the panel crops it
   rather than framing it. Purely decorative: hidden from assistive
   technology and from print. */
.brand-watermark { position: relative; overflow: hidden; }
.brand-watermark::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: -96px; top: -118px; transform: none;
  width: 400px; height: 400px;
  background: url('../images/cortex-icon-on-dark.svg') no-repeat center / contain;
  opacity: .05;
}
.brand-watermark > .container,
.brand-watermark > .footer-inner { position: relative; z-index: 1; }

/* Footer band is shallower than a panel, so the mark is sized to sit within it. */
body > footer.brand-watermark::before {
  /* Footer band is ~122px tall, so the mark is sized to sit fully inside it
     rather than bleeding off as it does on the taller panels. */
  width: 92px; height: 92px; right: 3rem; top: 15px; opacity: .10;
}

@media (max-width: 900px) {
  .brand-watermark::before { display: none; }
}
@media print { .brand-watermark::before { display: none; } }

/* ── DXA / CORTEX COMPARISON ─────────────────────────────────────────────
   Two panels at matched anatomical scale, so resolution is the only visible
   difference. Framed in the site palette: DXA neutral, CorteX in plum with a
   gold keyline, and the labels drawn as lozenges to match the resource bar. */

.compare-fig { margin: 0; }

.cmp-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; align-items: start; max-width: 560px;
}

.cmp-panel {
  position: relative;
  border-radius: 10px;
  padding: 2.9rem .7rem .7rem;
  display: flex; flex-direction: column; align-items: center;
}
.cmp-panel img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* DXA: deliberately unbranded */
.cmp-panel--dxa { background: var(--white); border: 1px solid var(--line); }
/* CorteX: brand ground with a gold keyline */
.cmp-panel--cortex { background: var(--plum-deep); border: 1px solid var(--gold); }

.cmp-label {
  position: absolute; top: .7rem; left: 50%; transform: translateX(-50%);
  padding: 5px 16px; border-radius: 50px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; white-space: nowrap;
  background: rgba(174,141,162,.18); color: var(--text-soft);
  border: 1px solid var(--line);
}
.cmp-label--brand {
  background: var(--gold); color: var(--plum-deep);
  border-color: var(--gold); font-weight: 700;
}

.compare-fig figcaption {
  font-size: 12.5px; line-height: 1.6; color: var(--text-soft);
  margin-top: 1rem; max-width: 560px;
}

@media (max-width: 480px) {
  .cmp-pair { gap: .6rem; }
  .cmp-panel { padding: 2.5rem .5rem .5rem; }
  .cmp-label { font-size: 10.5px; padding: 4px 11px; }
}

/* ── CALCULATOR INPUTS — plain numeric entry ─────────────────────────────
   The spinner arrows stepped inconsistently (1 on first click, then 100),
   so they are removed and the fields accept typed numbers only. */

.calc-input input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.calc-input input[type="number"]::-webkit-outer-spin-button,
.calc-input input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* ── REGION MARKER — signals this is the US edition of the toolkit ───────
   Other geographies do not exist yet, so this reads as a label rather than
   an active switcher. */

.res-region {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(250,250,245,.75);
  padding-right: .9rem; margin-right: .1rem;
  border-right: 1px solid rgba(201,168,76,.3);
  white-space: nowrap;
}
.res-region img {
  display: block; width: 19px; height: 10px;
  border-radius: 1px; box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}
@media (max-width: 860px) {
  .res-region { border-right: none; padding-right: 0; }
}

/* ── COMPARISON ZOOM — the CorteX panel opens the full frame ─────────────
   The panel is a real button so it is keyboard reachable; the reset strips
   the default button chrome so it still reads as a panel. */

button.cmp-panel {
  font: inherit; text-align: inherit; color: inherit;
  cursor: zoom-in; width: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
button.cmp-panel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
button.cmp-panel:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.cmp-zoom-hint {
  display: block; margin-top: .55rem;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
}

/* The full frame is portrait, so cap on height rather than width. */
.lightbox picture { display: block; max-width: 95vw; }
.lightbox picture img {
  max-height: 95vh; max-width: 95vw;
  width: auto; height: auto; border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
/* Very tall frames get a little more of the viewport on short screens. */
@media (max-height: 700px) {
  .lightbox { padding: 1rem; }
  .lightbox picture img { max-height: 96vh; }
}

/* ── ADVANCED TOGGLE ─────────────────────────────────────────────────────
   Opens the full confusion matrix. Kept off by default so the headline
   answer stays simple for a first read. */

.toggle-row {
  display: flex; align-items: flex-start; gap: .7rem;
  cursor: pointer; margin-top: .2rem;
  position: relative;
}
.toggle-row input {
  /* Invisible but still a real, focusable control covering the label,
     rather than collapsed to zero size where keyboard focus can be lost. */
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer; z-index: 1;
}
.toggle-track {
  flex: 0 0 auto; margin-top: 2px;
  width: 38px; height: 21px; border-radius: 50px;
  background: rgba(174,141,162,.28); border: 1px solid var(--line);
  position: relative; transition: background .18s ease, border-color .18s ease;
}
.toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--white); box-shadow: 0 1px 3px rgba(74,43,68,.35);
  transition: transform .18s ease;
}
.toggle-row input:checked + .toggle-track {
  background: var(--gold); border-color: var(--gold);
}
.toggle-row input:checked + .toggle-track .toggle-knob { transform: translateX(17px); }
.toggle-row input:focus-visible + .toggle-track { outline: 3px solid var(--gold); outline-offset: 3px; }

.toggle-label {
  font-size: 13px; font-weight: 600; color: var(--plum-deep); line-height: 1.3;
}
.toggle-label span {
  display: block; margin-top: 1px;
  font-size: 11px; font-weight: 400; color: var(--text-soft);
}

/* ── ADVANCED VIEW — confusion matrix and test statistics ────────────── */

/* The stats sit beside the matrix, not under it, so turning the advanced view
   on cannot make the slide taller than the simple one — on screen it would
   merely scroll, but in print it costs the whole page a scale factor. */
/* min-content, not 0: the matrix must never be squeezed narrower than it can
   draw, because it clips its own overflow and would silently lose a column. */
.yield-advanced {
  display: grid; grid-template-columns: minmax(min-content, 1fr) 11.5rem;
  grid-template-rows: auto 1fr; gap: .5rem .6rem; align-items: start;
}
.yield-advanced .matrix { grid-column: 1; grid-row: 1 / span 2; }
.yield-advanced[hidden], #yieldSimple[hidden] { display: none; }

.matrix {
  display: grid; grid-template-columns: 4.2rem 1fr 1fr;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.mx-corner { background: var(--white); }
.mx-colhead, .mx-rowhead {
  background: var(--white); padding: .45rem .5rem;
  font-size: 9px; font-weight: 700; letter-spacing: .05em; line-height: 1.25;
  text-transform: uppercase; color: var(--plum-deep);
  display: flex; align-items: center;
}
.mx-rowhead { justify-content: center; text-align: center; }
.mx-colhead { justify-content: center; text-align: center; }
.mx-cell {
  background: var(--white); padding: .5rem .55rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.mx-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: .12rem;
}
.mx-fig {
  font-family: 'Cormorant Garamond', serif; font-size: 1.5rem;
  font-weight: 700; line-height: 1; margin: .04rem 0 .1rem;
}
.mx-note { font-size: 9px; color: var(--text-soft); line-height: 1.35; }
.mx-note b { font-weight: 700; color: var(--plum-deep); }
.mx-fp .mx-note b, .mx-fn .mx-note b { color: var(--gold-dk); }

/* Agreement with DXA in plum; disagreement in gold. Deliberately not red:
   a wrist positive not confirmed centrally is a disagreement with the
   endpoint, not an error in the ordinary sense. */
.mx-tp, .mx-tn { background: rgba(174,141,162,.09); }
.mx-tp .mx-tag, .mx-tn .mx-tag { color: var(--plum); }
.mx-tp .mx-fig, .mx-tn .mx-fig { color: var(--plum-deep); }
.mx-fp, .mx-fn { background: rgba(201,168,76,.10); }
.mx-fp .mx-tag, .mx-fn .mx-tag { color: var(--gold-dk); }
.mx-fp .mx-fig, .mx-fn .mx-fig { color: var(--gold-dk); }

/* Stacked in the side column, each statistic reads as a labelled row. */
.yield-stats {
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--line); gap: 1px; margin-top: 0;
}
.yield-stats > div {
  background: var(--white); padding: .4rem .5rem; text-align: left;
  display: flex; align-items: baseline; gap: .45rem;
}
.ys-fig {
  display: block; font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem; font-weight: 700; color: var(--plum-deep); line-height: 1;
}
.ys-label {
  display: block; margin: 0 0 0 auto; text-align: right;
  font-size: 8.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-soft); line-height: 1.25;
}


@media (max-width: 620px) {
  .matrix { grid-template-columns: 1fr; }
  .mx-corner, .mx-colhead { display: none; }
  .mx-cell { align-items: flex-start; text-align: left; }
  .yield-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── SLIDER REFERENCE TICK — marks the demonstrated referral threshold ── */

.slider-wrap { position: relative; }
.slider-tick {
  position: absolute; left: 42.857%; bottom: -3px;
  width: 2px; height: 9px; margin-left: -1px;
  background: rgba(74,43,68,.45);
  pointer-events: none; border-radius: 1px;
}

/* ── THRESHOLD-SPECIFIC NOTE ─────────────────────────────────────────── */

.fls-note {
  margin-top: .75rem; padding: .6rem .85rem;
  background: rgba(201,168,76,.13);
  border-left: 3px solid var(--gold);
  border-radius: 0 5px 5px 0;
  font-size: 11.5px; line-height: 1.5; color: var(--text-soft);
}
.fls-note[hidden] { display: none; }
.fls-note strong { color: var(--plum-deep); }

/* ── FOOTNOTES — provenance kept available but out of the way ─────────── */

.footnotes {
  margin-top: 1.25rem; padding-top: .8rem;
  border-top: 1px solid var(--line-soft);
  font-size: 11px; line-height: 1.55; color: var(--text-soft);
  max-width: 90ch;
}
.yield-advanced .note { font-size: 11px; line-height: 1.55; margin-top: .8rem; }

/* ── MATRIX CAPTION — the headline counts, kept subordinate to the rates ── */

.matrix-caption {
  margin-top: .55rem; font-size: 12px; line-height: 1.55; color: var(--text-soft);
}
/* In the advanced panel it heads the side column, so it loses the top margin
   and wraps to the narrower measure. */
.yield-advanced .matrix-caption {
  grid-column: 2; grid-row: 2; align-self: start;
  margin: 0; font-size: 10.5px; line-height: 1.45;
}
.yield-advanced .matrix-caption b { font-size: 1rem; }
/* Narrower than this the matrix has no room for two columns beside a side
   strip, so the statistics go back underneath and run across instead. */
@media (max-width: 1340px) {
  .yield-advanced {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
  }
  .yield-advanced .matrix { grid-column: 1; grid-row: 1; }
  .yield-advanced .yield-stats {
    grid-column: 1; grid-row: 2; grid-template-columns: repeat(4, 1fr);
  }
  .yield-advanced .yield-stats > div {
    flex-direction: column; align-items: center; text-align: center;
    gap: .1rem; padding: .4rem .3rem;
  }
  .yield-advanced .ys-label { margin: 0; text-align: center; }
  .yield-advanced .matrix-caption { grid-column: 1; grid-row: 3; text-align: center; }
}
.matrix-caption b { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--plum-deep); }

/* Slider scale: −3 is a clinically used threshold, so it is a labelled stop
   rather than an arbitrary midpoint. */
.slider-scale { position: relative; height: 1.1em; display: block; }
.slider-scale span { position: absolute; top: 0; transform: translateX(-50%); }
.slider-scale span:nth-child(1) { left: 0; transform: none; }
.slider-scale span:nth-child(2) { left: 42.857%; color: var(--plum-deep); font-weight: 700; }
.slider-scale span:nth-child(3) { right: 0; left: auto; transform: none; }

/* ── CASE NUMBERS — one card per stakeholder, running horizontally ───────
   Each card names whose case it is, so the reader can see at a glance that
   the same assessment pays three ways. */

.case-numbers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; margin-top: 2.25rem; align-items: stretch;
}

.cn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(201,168,76,.28);
  border-top: 3px solid var(--gold);
  border-radius: 10px;
  padding: 1.5rem 1.4rem 1.4rem;
  display: flex; flex-direction: column;
}
.cn--provider { border-top-color: var(--gold-lt); }
.cn--clinical { border-top-color: var(--rose); }

.cn-who {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.cn--provider .cn-who { color: var(--gold-lt); }
.cn--clinical .cn-who { color: var(--rose); }

.cn-fig {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.1rem, 3vw, 2.8rem);
  font-weight: 700; color: var(--white); line-height: 1; margin: .35rem 0 .5rem;
}
.cn h3 {
  font-size: 14.5px; font-weight: 600; color: var(--gold-lt);
  line-height: 1.4; margin-bottom: .6rem;
}
.cn p {
  font-size: 13.5px; line-height: 1.65; color: rgba(250,250,245,.76);
  margin: 0 0 .7rem;
}
.cn-note {
  margin-top: auto !important; padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 11px !important; line-height: 1.5;
  color: rgba(250,250,245,.78) !important;
}

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

/* Comparison figure given the full column width on the home page */
.compare-fig--wide { margin-top: 2rem; }
.compare-fig--wide .cmp-pair { max-width: 620px; }
.compare-fig--wide figcaption { max-width: 620px; }

/* ── TOOLKIT GRID — what sits behind the access request ─────────────────── */

.toolkit-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin-top: 2.25rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
}
.tk {
  background: var(--white); padding: 1.9rem 1.6rem;
  display: flex; flex-direction: column;
}
.tk-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 700; color: var(--gold);
  line-height: 1; margin-bottom: .5rem;
}
.tk h3 {
  font-size: 16px; font-weight: 600; color: var(--plum-deep);
  line-height: 1.35; margin-bottom: .5rem;
}
.tk p { font-size: 13.5px; line-height: 1.65; color: var(--text-soft); margin: 0; }

.toolkit-cta { margin-top: 2rem; }
.toolkit-note { margin-top: .9rem; font-size: 12px; }

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

/* ── PRODUCT SPLIT — the output comparison beside the procurement quote ─── */

.product-split {
  display: grid; grid-template-columns: minmax(0, 420px) 1fr;
  gap: 3.5rem; margin-top: 2rem; align-items: center;
}
.product-split .compare-fig { margin: 0; }
.product-split .cmp-pair { max-width: none; }
.product-split figcaption { max-width: none; }

/* Voice-of-customer quote, sized to carry the right-hand column on its own. */
.proof-quote { margin: 0; }
.proof-quote blockquote { margin: 0; }
.pq-q, .pq-a {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  line-height: 1.2;
}
.pq-q {
  font-size: clamp(1.7rem, 2.9vw, 2.5rem);
  font-weight: 600; font-style: italic; color: var(--plum-deep);
}
.pq-a {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 700; color: var(--gold-dk);
  margin-top: .6rem;
}
.pq-a::before { content: '\201C'; opacity: .45; }
.pq-a::after  { content: '\201D'; opacity: .45; }
.proof-quote figcaption {
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-soft);
}

@media (max-width: 1000px) {
  .product-split { grid-template-columns: 1fr; gap: 2rem; }
  .product-split .cmp-pair { max-width: 520px; }
}

/* ── TOOLKIT COVERS — each toolkit section as a document front page.
   A photographic band grounds the audience, the figure below carries the
   argument, and the sheet sits on two offset pages so it reads as something
   with substance behind it. ─────────────────────────────────────────────── */

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

.cover {
  font: inherit; text-align: left; color: inherit;
  background: none; border: none; padding: 0; cursor: pointer;
  display: block;
}

.cover-sheet {
  position: relative; display: flex; flex-direction: column;
  aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 3px; background: var(--plum-deep);
  box-shadow:
      6px 6px 0 0 rgba(255,255,255,.85),  6px 6px 0 1px var(--line),
     12px 12px 0 0 rgba(255,255,255,.85), 12px 12px 0 1px var(--line),
     14px 16px 26px rgba(46,26,42,.22);
  transition: transform .22s ease, box-shadow .22s ease;
}
.cover:hover .cover-sheet, .cover:focus-visible .cover-sheet {
  transform: translate(-3px,-3px);
  box-shadow:
      9px 9px 0 0 rgba(255,255,255,.85),  9px 9px 0 1px var(--line),
     18px 18px 0 0 rgba(255,255,255,.85), 18px 18px 0 1px var(--line),
     20px 22px 32px rgba(46,26,42,.28);
}
.cover:focus-visible .cover-sheet { outline: 3px solid var(--gold); outline-offset: 4px; }

.cv--finance .cover-sheet { background: #5E3654; }
.cv--oem .cover-sheet { background: #7A6038; }

/* Photographic band across the top */
.cover-band { position: relative; display: block; flex: 0 0 auto; }
.cover-band img {
  display: block; width: 100%; aspect-ratio: 356 / 190;
  object-fit: cover;
}
.cover-brand {
  position: absolute; left: 1.1rem; bottom: .7rem;
  font-size: 8.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--white);
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

/* Figure and titles fill the remainder */
.cover-body {
  display: flex; flex-direction: column;
  flex: 1 1 auto; padding: 1.4rem 1.3rem 1.3rem;
}
.cover-fig {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 4.6vw, 4.2rem);
  font-weight: 700; color: var(--gold); line-height: .95;
}
.cv--finance .cover-fig, .cv--oem .cover-fig { color: var(--gold-lt); }
.cover-line {
  font-size: 12.5px; line-height: 1.45; color: rgba(250,250,245,.82);
  margin-top: .45rem;
}
.cover-rule {
  display: block; width: 40px; height: 2px; background: var(--gold);
  margin: auto 0 .75rem; opacity: .75;
}
.cover-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem; font-weight: 700; color: var(--white); line-height: 1.15;
}
.cover-sub {
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(250,250,245,.55); margin-top: .25rem;
}

/* Veil and request button */
.cover-veil {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30,16,24,.62);
  opacity: 0; transition: opacity .2s ease;
}
.cover:hover .cover-veil, .cover:focus-visible .cover-veil { opacity: 1; }
.cover-dl {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 9px 16px; border-radius: 50px;
  background: var(--gold); color: var(--plum-deep);
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  transform: translateY(6px); transition: transform .2s ease;
}
.cover:hover .cover-dl, .cover:focus-visible .cover-dl { transform: translateY(0); }

.cover-footnotes { margin-top: 1.75rem; }

@media (max-width: 1000px) { .cover-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
@media (max-width: 680px)  { .cover-grid { grid-template-columns: 1fr; } }
@media (hover: none) {
  .cover-veil { opacity: 1; background: rgba(30,16,24,.3); }
  .cover-dl { transform: none; }
}


/* ── SALES TOOLKIT — three cases as a deck on one linear scroll ──────────
   Each section is a 16:9 slide so the page reads as a presentation. The
   contents rail sits hard left, clear of the slides. */

/* The deck's own front page is the page heading now, so the shell starts
   straight below the header. */
.tk-shell {
  display: grid; grid-template-columns: 180px minmax(0, 1fr);
  gap: 2.5rem;
  max-width: 1800px; margin: 0 auto;
  padding: 1.75rem 2rem 0 1.75rem;
  align-items: start;
}

/* Contents rail, pulled to the left edge */
.tk-rail {
  position: sticky; top: calc(var(--header-h) + 1.25rem);
  max-height: calc(100vh - var(--header-h) - 2.5rem);
  overflow-y: auto; padding-right: .4rem;
}
.tk-rail-title {
  font-size: 9px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mauve-dk);
  padding-bottom: .5rem; margin-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}
.tk-rail-part {
  display: block; margin-top: 1rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: .98rem; font-weight: 700; color: var(--plum-deep);
  text-decoration: none; line-height: 1.2;
}
.tk-rail-part:first-of-type { margin-top: 0; }
.tk-rail-part:hover { color: var(--gold-dk); }
.tk-rail ul { list-style: none; margin: .35rem 0 0; }
.tk-rail li a {
  display: block; padding: 3px 0 3px .6rem;
  border-left: 2px solid var(--line);
  font-size: 11.5px; line-height: 1.35; color: var(--text-soft);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.tk-rail li a:hover { color: var(--plum-deep); border-left-color: var(--mauve); }
.tk-rail li a.active {
  color: var(--plum-deep); font-weight: 600; border-left-color: var(--gold);
}

/* ── Slides ────────────────────────────────────────────────────────────
   aspect-ratio fixes the height; content that exceeds it scrolls inside
   the slide rather than breaking the deck's rhythm. */

.tk-part { margin-bottom: 2.5rem; }
.tk-part, .tk-part > .tk-slide { scroll-margin-top: 1rem; }
.tk-slide, .tk-part > .tk-slide > section { scroll-margin-top: 1rem; }

.tk-slide {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 1.5rem;
  border-radius: 6px; overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(46,26,42,.07);
  display: flex;
}
.tk-slide > section {
  flex: 1 1 auto; min-width: 0;
  padding: 2rem 2.25rem !important;
  overflow-y: auto;
  border-radius: 0;
  display: flex; flex-direction: column;
}
/* Auto margins centre short content vertically without clipping tall content */
.tk-slide > section > .container,
.tk-slide > section > .container-narrow {
  padding: 0; max-width: none; width: 100%;
  margin: auto 0;
}

/* Slides carrying a dark panel keep their own ground */
.tk-slide > section.panel--dark { background: var(--plum-deep); }
.tk-slide > section.panel--white { background: var(--white); }

/* Part cover as a slide: same left-to-right fade as the home page hero, so
   the text sits on saturated colour and the image resolves to the right. */
.tk-cover {
  position: relative;
  /* Cover type is sized in cqw so the composition is identical at every
     window width; the slide is a fixed ratio, the window is not. */
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center;
  overflow: hidden; border: none; border-radius: 6px;
  background: var(--plum-deep);
  box-shadow: 0 10px 28px rgba(46,26,42,.22);
  margin-bottom: 1.5rem;
}
.tk-cover--provider { background: #5E3654; }
.tk-cover--clinician { background: var(--plum-deep); }
.tk-cover--patient { background: #5E3644; }
.tk-cover--oem { background: #7A6038; }
/* Gold on bronze is only 4.1:1; the lighter gold clears AA. */
.tk-cover--oem .tk-cover-brand { color: var(--gold-lt); }

.tk-cover picture { position: absolute; inset: 0; z-index: 0; }
.tk-cover img {
  width: 100%; height: 100%; object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 14%, rgba(0,0,0,1) 46%);
  mask-image: linear-gradient(90deg, transparent 14%, rgba(0,0,0,1) 46%);
}
/* Holds the ground colour to ~30% then releases, matching the hero */
/* A real element rather than ::after: the slide's own ::after carries the
   page number, and one element cannot hold both. */
.tk-cover-wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(30,16,24,.82) 0%, rgba(30,16,24,.78) 54%,
    rgba(30,16,24,.5) 70%, rgba(30,16,24,0) 88%);
}
/* The garden scene is the brightest of the three photographs, so it needs a
   deeper hold to carry a gold quote. */
.tk-cover--provider .tk-cover-wash {
  background: linear-gradient(90deg,
    rgba(30,16,24,.88) 0%, rgba(30,16,24,.84) 56%,
    rgba(30,16,24,.56) 72%, rgba(30,16,24,0) 90%);
}
.tk-cover--oem .tk-cover-wash {
  background: linear-gradient(90deg,
    rgba(34,24,10,.86) 0%, rgba(34,24,10,.82) 56%,
    rgba(34,24,10,.54) 72%, rgba(34,24,10,0) 90%);
}

.tk-cover-text {
  position: relative; z-index: 2;
  width: 100%; max-width: 66%;
  padding: 0 0 0 clamp(2rem, 4vw, 3.5rem);
  background: none;
}
.tk-cover-brand {
  font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .6rem;
}
.tk-cover h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 6.6cqw, 4.4rem);
  font-weight: 700; color: var(--white); line-height: 1; margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.tk-cover-sub {
  font-size: clamp(10px, 1.1cqw, 13px); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cream); margin-top: .7rem;
  /* Wide enough for the section's question to hold one line; the wash is
     deepened to match rather than the line being wrapped early. */
  max-width: 62ch;
}
/* Capped for the same reason as the sub-line: the tail of a long line was
   running out onto the bright side of the image. */
/* The illustrative qualifier belongs on the card it qualifies, not in a
   note under the row where it reads as unattached. */
/* The illustrative marker should be legible, not shout: it scales with the
   figure but at roughly a third of its size. */
.fig-ast { font-size: .34em; font-style: normal; vertical-align: super;
  line-height: 0; margin-left: .08em; }

.tk-cover-note {
  margin: .5rem 0 0; max-width: 46ch;
  font-size: clamp(8.5px, .92cqw, 10.5px); line-height: 1.45;
  color: rgba(250,250,245,.72);
}

.tk-cover-fig {
  max-width: 34ch;
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(201,168,76,.4);
  font-size: 15px; line-height: 1.5; color: rgba(250,250,245,.9);
}
.tk-cover-fig span {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 5.4cqw, 4rem);
  font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: .2rem;
}

.tk-body { min-width: 0; }
.tk-body .spec-table-wrap { max-width: 100%; }

@media (max-width: 1100px) {
  .tk-shell { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 0 1.4rem; }
  .tk-rail {
    position: static; max-height: none; padding-right: 0;
    border-bottom: 1px solid var(--line); padding-bottom: 1.1rem;
  }
  .tk-rail ul { display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
  .tk-rail li a { border-left: none; padding-left: 0; }
  .tk-rail li a.active { border-left: none; text-decoration: underline; text-decoration-color: var(--gold); }
}
@media (max-width: 860px) {
  /* Below tablet a fixed 16:9 box crops too hard, so let slides grow */
  .tk-slide, .tk-cover { aspect-ratio: auto; min-height: 0; }
  .tk-slide > section { overflow: visible; padding: 1.5rem 1.4rem !important; }
  .tk-cover { min-height: 240px; }
}

/* ── Slide-scoped tightening ──────────────────────────────────────────────
   Inside a fixed 16:9 frame the standard section rhythm is too generous, so
   headings and leads are pulled in. Content that still exceeds the frame
   scrolls within its own slide. */

.tk-slide .section-h2 { font-size: clamp(1.5rem, 2.1vw, 1.9rem); margin-bottom: .4rem; }
.tk-slide .section-h3 { font-size: 1.15rem; }
.tk-slide .section-tag { margin-bottom: .2rem; }
.tk-slide .section-lead { font-size: 14.5px; line-height: 1.6; margin-bottom: 1.1rem; }
.tk-slide .card-grid, .tk-slide .split-grid, .tk-slide .col-3,
.tk-slide .case-grid, .tk-slide .chain-grid { margin-top: 1.1rem; }
.tk-slide .panel > .container > *:last-child { margin-bottom: 0; }
.tk-slide .footnotes, .tk-slide .note { margin-top: .9rem; }

/* Give the scrolling slides a visible hint that there is more inside */
.tk-slide > section { scrollbar-width: thin; }
.tk-slide > section::-webkit-scrollbar { width: 6px; }
.tk-slide > section::-webkit-scrollbar-thumb {
  background: rgba(174,141,162,.45); border-radius: 3px;
}

/* ── PROVIDER DEMAND slide: compacted to fit one page ────────────────────
   Content unchanged; the table rhythm, price scales and quote are pulled in
   and the legend runs alongside the quote rather than above it. */

#demand .demand-table thead th { padding: .5rem .9rem; font-size: 10px; }
#demand .demand-table tbody th,
#demand .demand-table tbody td { padding: .95rem 1rem; }
#demand .demand-table tbody th { font-size: 13px; }
#demand .demand-table tbody th span { font-size: 10px; margin-top: .1rem; }

#demand .chip { padding: 3px 11px; font-size: 12px; }
#demand .figure-cell { font-size: 1.75rem; }
#demand .figure-cell small { font-size: 9.5px; margin-top: .15rem; }

#demand .price-scale { min-width: 130px; }
#demand .ps-track { height: 6px; margin: .3rem 0 .55rem; }
#demand .ps-pin { width: 10px; height: 10px; }
#demand .ps-pin--fair { width: 13px; height: 13px; }
#demand .ps-key b { font-size: 1.15rem; }
#demand .ps-key li { font-size: 9.5px; }

#demand .verdict { padding: .5rem .8rem; font-size: 12.5px; }
#demand .verdict b { font-size: 13.5px; }

/* Legend and quote share a row to reclaim vertical space */
#demand .demand-foot {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 1.5rem; align-items: start; margin-top: .9rem;
}
#demand .demand-foot .note { margin: 0; font-size: 10.5px; line-height: 1.5; }
#demand .quote-block {
  margin: 0; padding-left: 1rem; border-left-width: 2px;
}
#demand .quote-block:not(.quote-block--wide) blockquote { font-size: 1.2rem; line-height: 1.4; }
#demand .quote-block figcaption { margin-top: .5rem; font-size: 10px; letter-spacing: .12em; }
#demand .quote-block--wide figcaption { font-size: 11px; color: rgba(232,213,163,.8); }

@media (max-width: 1100px) {
  #demand .demand-foot { grid-template-columns: 1fr; gap: .9rem; }
}

/* ── REPORT FIGURE — the CorteX output, shown as the product ─────────────
   Replaces the DXA comparison on the home page. Clickable to open the full
   report at readable size. */

.report-fig { margin: 0; }

.report-frame {
  position: relative; display: block; width: 100%;
  padding: 0; border: 1px solid var(--line); border-radius: 6px;
  background: #000; cursor: zoom-in; overflow: hidden;
  font: inherit; color: inherit;
  box-shadow: 0 8px 24px rgba(46,26,42,.14);
  transition: transform .2s ease, box-shadow .2s ease;
}
.report-frame:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(46,26,42,.2); }
.report-frame:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.report-frame img { display: block; width: 100%; height: auto; }

.report-zoom {
  position: absolute; right: .6rem; bottom: .6rem;
  padding: 5px 12px; border-radius: 50px;
  background: rgba(201,168,76,.92); color: var(--plum-deep);
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0; transition: opacity .2s ease;
}
.report-frame:hover .report-zoom,
.report-frame:focus-visible .report-zoom { opacity: 1; }

.report-fig figcaption {
  font-size: 12.5px; line-height: 1.6; color: var(--text-soft); margin-top: .9rem;
}

@media (hover: none) { .report-zoom { opacity: 1; } }

/* The report carries fine print, so it needs more width than the old
   side-by-side comparison did. The quote still runs to the container margin. */
.product-split:has(.report-fig) { grid-template-columns: minmax(0, 560px) 1fr; gap: 3rem; }

/* ── BRAND ROW — the three marks shown together in the About section ────── */

.brand-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 2.25rem; margin-bottom: 1.5rem;
}
.brand-mark { display: block; width: auto; }
/* Optically matched rather than set to one height: the wordmarks carry
   different amounts of clear space above and below their letterforms. */
.brand-mark--ibex   { height: 68px; }
.brand-mark--bh     { height: 78px; border-radius: 4px; }
.brand-mark--cortex { height: 92px; }

@media (max-width: 560px) {
  .brand-row { gap: 1.5rem; }
  .brand-mark--ibex, .brand-mark--bh { height: 46px; }
  .brand-mark--cortex { height: 62px; }
}

/* ── TOOLKIT SECTION BANNER ──────────────────────────────────────────────
   The title slide collapses into this as the reader scrolls past it, so the
   current section is always named. Sits directly beneath the sticky header
   and takes the colourway of whichever part is being read. */

/* One pixel under the header's own edge. --header-h is measured at runtime
   (see cortex.js); the overlap absorbs sub-pixel rounding so no hairline of
   page shows between the two bars. */
.tk-banner {
  position: fixed; left: 0; right: 0; top: calc(var(--header-h) - 1px);
  z-index: 900;
  background: var(--plum-deep);
  border-bottom: 2px solid var(--gold);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .26s ease, opacity .2s ease, background-color .26s ease;
  pointer-events: none;
}
.tk-banner.show { transform: translateY(0); opacity: 1; }
/* One ground per stakeholder, matching that part's cover. The bronze is a
   shade darker than the cover's, because here it is a flat ground carrying
   small text rather than a tint under a photograph. */
.tk-banner[data-part="oem"]       { background: #6E5630; }
.tk-banner[data-part="provider"]  { background: #5E3654; }
.tk-banner[data-part="clinician"] { background: var(--plum-deep); }

.tk-banner-inner {
  max-width: 1800px; margin: 0 auto;
  padding: .6rem 2rem .6rem 1.75rem;
  display: flex; align-items: baseline; gap: .9rem;
}

.tkb-brand {
  font-size: 8.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
  white-space: nowrap;
}
.tk-banner[data-part="oem"] .tkb-brand,
.tk-banner[data-part="provider"] .tkb-brand { color: var(--gold-lt); }

.tkb-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,.22); }

.tkb-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem; font-weight: 700; color: var(--white);
  line-height: 1.1; white-space: nowrap;
}
.tkb-sub {
  font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(250,250,245,.8);
  white-space: nowrap;
}
/* Reads "3 of 7": where the reader is inside the section. It replaced a
   headline figure, which meant nothing once it was lifted away from the
   sentence that framed it. */
.tkb-fig {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tk-banner[data-part="oem"] .tkb-fig,
.tk-banner[data-part="provider"] .tkb-fig { color: var(--gold-lt); }

/* The banner's height is reserved in the scroll offset on the toolkit page
   whether or not it is currently showing, so anchors always land clear. */
html.tk-has-banner { scroll-padding-top: calc(var(--header-h) + 46px); }

@media (max-width: 860px) {
  .tk-banner-inner { padding: .5rem 1.4rem; gap: .6rem; }
  .tkb-brand, .tkb-sub { display: none; }
  .tkb-sep { display: none; }
  .tkb-title { font-size: 1rem; }
}

/* ── TOOLKIT RAIL: download ───────────────────────────────────────────────
   Sits at the foot of the contents so it is reachable from any slide. */
.tk-rail-dl {
  display: block; margin-top: 1.6rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--gold-dk); text-decoration: none;
  line-height: 1.4;
}
.tk-rail-dl svg { vertical-align: -3px; margin-right: .35rem; }
.tk-rail-dl span {
  display: block; margin-top: .3rem;
  font-size: 10.5px; font-weight: 400; letter-spacing: 0;
  color: var(--text-soft);
}
.tk-rail-dl:hover { color: var(--plum-deep); }
.tk-rail-dl:hover span { color: var(--plum-deep); }
.tk-rail-dl:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ── TOOLKIT: FRONT PAGE ───────────────────────────────────────────────────
   A title page that reads on its own, without the home page in front of it. */
.tk-front { position: relative; container-type: inline-size; background: var(--plum-deep); }
/* Scoped to the backdrop: the cover also carries a logo <img> in its text
   block, which must not be stretched to fill the slide.
   The photograph starts a third of the way in, so the left of the slide is
   the plum itself rather than a black veil over a picture nobody can see. */
.tk-front > picture {
  position: absolute; inset: 0 0 0 28%;
  overflow: hidden;
}
.tk-front > picture img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 42% center;
}
/* Solid plum up to where the photograph begins, then a plum veil that has
   released entirely by three quarters across, so the right of the frame is
   the picture at full strength. */
.tk-front-wash {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--plum-deep) 0%,
    var(--plum-deep) 36%,
    rgba(74,43,68,.9) 45%,
    rgba(74,43,68,.72) 56%,
    rgba(74,43,68,.3) 68%,
    rgba(74,43,68,0) 80%);
}
.tk-front-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.75rem, 4.2vw, 4rem)
           clamp(5.4rem, 8vw, 6.6rem);
  max-width: 72%;
}
/* The reversed lockup sits straight on the plum, so it needs no plate and
   can be set at a size that actually reads. */
.tk-front-logo {
  display: block; align-self: flex-start;
  width: auto; height: clamp(34px, 5.1cqw, 64px);
  margin: 0 0 1.9rem;
}
.tk-front-brand {
  margin: 0 0 1rem;
  font-size: 11px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold);
}
.tk-front h1 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 5.2cqw, 3.6rem);
  font-weight: 700; line-height: 1.04; color: var(--white);
}
.tk-front-sub {
  margin: .6rem 0 0; max-width: 46ch;
  font-size: clamp(.85rem, 1.9cqw, 1.3rem);
  color: var(--gold-lt); line-height: 1.3;
}
.tk-front-rule {
  display: block; width: 60px; height: 2px;
  background: var(--gold); margin: 1.3rem 0 1.15rem;
}
.tk-front-lead {
  margin: .95rem 0 0; max-width: 46ch;
  font-size: clamp(11.5px, 1.32cqw, 14.5px);
  line-height: 1.6; color: rgba(250,250,245,.84);
}
/* Regulatory footnote on the front page: subordinate to the lead, same measure,
   so it reads as a qualifier rather than body copy. */
/* UK clinical experience: marks the slides whose evidence comes from
   CE-marked NHS use rather than the intended use proposed to the FDA. */
.tk-roadmap {
  margin: 1.1rem 0 0; font-size: 12.5px; line-height: 1.6;
  color: rgba(250,250,245,.8);
}

/* The hero sits on plum, not on a white panel, so this note cannot take the
   body's soft grey: measured against the rendered page it came out at 1.70:1
   and was unreadable. Muted cream matches the pack's equivalent note and
   clears AA; the shadow covers the narrow widths where the photograph
   reaches in under the text. */
.hero-note {
  margin: .9rem 0 0; font-size: 12px; line-height: 1.5;
  color: rgba(250,250,245,.72);
  text-shadow: 0 1px 6px rgba(30,16,24,.55);
}
.cta-alt {
  margin: .6rem 0 0; font-size: 14px; line-height: 1.6; color: var(--text-soft);
}
.cta-alt a { color: var(--gold-dk); text-decoration: underline; }
/* Unresolved item: loud on purpose so it cannot ship unnoticed. */
.open-item { background: #FFE8A3; color: #4A2B44; padding: 0 .25em; font-weight: 600; }

/* Regulatory caption under the patient-story video: must read as a
   qualifier on the film, not as part of the page copy. */
.video-caption {
  margin: .5rem 0 0; font-size: 11.5px; line-height: 1.5;
  font-style: italic; color: var(--text-soft);
}
.panel--dark .video-caption { color: rgba(250,250,245,.72); }

.uk-banner {
  margin: 0 0 1.4rem; padding: .85rem 1.1rem;
  border-left: 3px solid var(--gold);
  background: rgba(201,168,76,.08);
}
.uk-banner--compact { margin-bottom: 1rem; padding: .6rem 1.1rem; }
.uk-banner-h {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--plum-deep);
}
.uk-banner-sub {
  margin: .35rem 0 0; max-width: none;
  font-size: 12.5px; line-height: 1.55; color: var(--text-soft);
}
.tk-rail-group {
  margin: .55rem 0 .15rem; padding: 0; list-style: none;
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mauve-dk);
}

.tk-front-note {
  margin: .7rem 0 0; max-width: 46ch;
  font-size: clamp(9.5px, 1.02cqw, 11.5px);
  line-height: 1.5; color: rgba(250,250,245,.72);
}
/* Standfirst under a section cover heading: states who the section is for. */
.tk-cover-standfirst {
  margin: .8rem 0 0; max-width: 56ch;
  font-size: clamp(10.5px, 1.16cqw, 13px);
  line-height: 1.55; color: rgba(250,250,245,.74);
}

.tk-front-covers {
  margin: 1.45rem 0 .9rem; padding-top: 1.2rem;
  max-width: 46ch;
  border-top: 1px solid rgba(201,168,76,.35);
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
}
.tk-front-purpose {
  margin: 1.5rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid rgba(201,168,76,.3);
  max-width: 46ch;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-style: italic; line-height: 1.35; color: var(--cream);
}

.tk-front-points {
  list-style: none; margin: 0; padding: 0;
  counter-reset: tkfront;
  display: flex; flex-direction: column; gap: .55rem;
  max-width: 50ch;
}
.tk-front-points li {
  counter-increment: tkfront;
  position: relative; padding-left: 2.1rem;
  font-size: clamp(11.5px, 1.4cqw, 15px); line-height: 1.4;
  color: var(--cream);
}
.tk-front-points li::before {
  content: '0' counter(tkfront);
  position: absolute; left: 0; top: -.06em;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15em; font-weight: 700; line-height: 1.2;
  color: var(--gold);
}
.tk-front-foot {
  position: absolute; z-index: 2;
  left: clamp(1.75rem, 4.2vw, 4rem); bottom: clamp(3.6rem, 5.2vw, 4.4rem);
  margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(250,250,245,.55);
}

/* ── TOOLKIT: CONTENTS ─────────────────────────────────────────────────────
   One card per stakeholder, carrying the question that section answers and
   the colourway that stakeholder holds throughout the site. */
/* auto-fit means the row holds whatever number of stakeholders the document
   has, each taking an equal share rather than a quarter. */
.toc-grid {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.3rem;
}
.toc-card { display: flex; }
.toc-card a {
  display: flex; flex-direction: column;
  width: 100%; min-height: clamp(230px, 32vh, 330px);
  padding: 2rem 1.8rem 2rem;
  border: 1px solid transparent; border-radius: 10px;
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.toc-card a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.toc-card a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.toc-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem; font-weight: 700; line-height: 1;
  margin-bottom: 1.2rem;
}
.toc-who {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: .55rem;
}
.toc-q {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 700; line-height: 1.2; margin-bottom: .8rem;
  text-wrap: balance;
}
.toc-sub { font-size: 13.5px; line-height: 1.55; }
.toc-go {
  display: flex; align-items: center; gap: .4rem;
  margin-top: auto; padding-top: 1.2rem;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
}
.toc-go span { font-size: 13px; transition: transform .2s ease; }
.toc-card a:hover .toc-go span { transform: translateX(4px); }

.toc-card--oem a       { background: #6E5630; }
.toc-card--provider a  { background: var(--plum); }
.toc-card--clinician a { background: var(--white); border-color: var(--line); }
.toc-card--patient a   { background: #F2E7E2; border-color: rgba(206,163,159,.55); }

.toc-card--oem .toc-n, .toc-card--provider .toc-n { color: var(--gold-lt); }
.toc-card--oem .toc-who, .toc-card--provider .toc-who { color: var(--gold-lt); }
.toc-card--oem .toc-q, .toc-card--provider .toc-q { color: var(--white); }
.toc-card--oem .toc-sub, .toc-card--provider .toc-sub { color: rgba(250,250,245,.82); }
.toc-card--oem .toc-go, .toc-card--provider .toc-go { color: var(--gold-lt); }

.toc-card--clinician .toc-n { color: var(--gold-dk); }
.toc-card--patient .toc-n   { color: #7A5F13; }
.toc-card--clinician .toc-who { color: var(--gold-dk); }
.toc-card--patient .toc-who   { color: #7A5F13; }
.toc-card--clinician .toc-q, .toc-card--patient .toc-q { color: var(--plum-deep); }
.toc-card--clinician .toc-sub, .toc-card--patient .toc-sub { color: var(--text-soft); }
.toc-card--clinician .toc-go { color: var(--gold-dk); }
.toc-card--patient .toc-go   { color: #7A5F13; }

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

/* ── TOOLKIT: ASSURANCE STRIP ──────────────────────────────────────────────
   The regulatory position, compressed to a row of marks so it supports the
   integration slide rather than occupying one of its own. */
.assure-row {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1rem; align-items: start;
  margin-top: 1.5rem; padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
/* Five marks, one row: a wrapped fifth badge reads as an afterthought. */
.assure-marks {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem;
}
.assure-mark {
  display: flex; flex-direction: column; gap: .18rem;
  padding: .6rem .8rem;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--white);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--plum-deep);
}
.assure-mark span {
  font-size: 10px; font-weight: 400; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-soft);
}
.assure-note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-soft); max-width: 108ch; }
@media (max-width: 760px) { .assure-marks { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ── TOOLKIT: WIDE QUOTE ───────────────────────────────────────────────────
   Matches the treatment the home page gives a quote: full measure, centred. */
.quote-block.quote-block--wide {
  margin: 1.5rem 0 0; padding: 1.3rem 0 0;
  border-left: 0; border-top: 1px solid var(--line);
  text-align: center; max-width: none;
}
.quote-block--wide blockquote {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.15rem, 2.1vw, 1.85rem);
  font-style: italic; line-height: 1.3; color: var(--plum-deep);
  text-wrap: balance;
}
/* The base rule already sets the quote marks on the blockquote; adding them
   to the inner span as well printed them twice. */
.quote-block--wide blockquote span::before,
.quote-block--wide blockquote span::after { content: none; }
.quote-block--wide figcaption {
  margin-top: .75rem;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-soft);
}
.panel--dark .quote-block--wide blockquote { color: var(--cream); }
.panel--dark .quote-block--wide { border-top-color: rgba(201,168,76,.28); }

/* The rail's two standalone entries, above the parts. */
.tk-rail-top {
  display: block; margin-bottom: .35rem;
  font-size: 12px; color: var(--text-soft); text-decoration: none;
}
.tk-rail-top:hover { color: var(--plum-deep); }

/* Shown only when a browser cannot play the file, so it still has to read. */
video { color: var(--cream); }

/* A decorative watermark sits 60px proud of the panel. Scrolling one axis
   makes the other scrollable too, which is what put a horizontal bar on
   every slide carrying the mark. */
.tk-slide > section { overflow-x: hidden !important; }
/* The mark is meant to run off the corner, and overflow-x: hidden above is
   what keeps that from becoming a scrollbar. */

/* ── TOOLKIT: FITTING A SLIDE ──────────────────────────────────────────────
   Each slide is a fixed 16:9 frame, so anything that overspills scrolls
   inside it. Whitespace comes out first: leading, padding and gaps, before
   any type size. Scoped to the toolkit so the rest of the site is untouched. */
.tk-slide .section-h2   { margin-bottom: .45rem; line-height: 1.12; }
.tk-slide .section-tag  { margin-bottom: .25rem; }
.tk-slide .section-lead { margin-bottom: .75rem; line-height: 1.5; }
.tk-slide .footnotes    { margin-top: .6rem; padding-top: .5rem; }
.tk-slide .card-grid, .tk-slide .split-grid, .tk-slide .col-3,
.tk-slide .case-grid, .tk-slide .chain-grid { margin-top: .85rem; }

/* Figures carry a lot of leading at display sizes; a slide frame cannot
   afford it. */
.tk-slide .card-figure { line-height: 1; margin-bottom: .25rem; }

/* ── Dollar flow ── */
#flow .chain-grid       { margin-top: .7rem; gap: .9rem; }
#flow .chain-card       { padding: .95rem 1rem; }
#flow .chain-card h3    { margin-bottom: .4rem; }
#flow .chain-card ul li { margin-bottom: .3rem; line-height: 1.42; }
#flow .ribbon           { margin-top: .5rem; }
/* The notch cuts 18px into the left edge, so that side keeps its clearance
   when the rest of the padding comes in. */
#flow .ribbon-seg       { padding: .7rem 1.3rem .7rem 2.4rem; }
#flow .ribbon-seg:first-child { padding-left: 1.3rem; }
#flow .ribbon-caption   { margin-bottom: .4rem; }
#flow .note             { margin-top: .7rem; line-height: 1.45; }

/* ── Software integration ── */
#integration .chev-flow  { margin-top: .75rem; }
#integration .chev-card  { padding: 1.1rem 2.7rem; }
#integration .chev-card:first-child { padding-left: 1.4rem; }
#integration .chev-card:last-child  { padding-right: 1.4rem; }
#integration .chev-card h3 { margin-bottom: .45rem; }
#integration .chev-card li { margin-bottom: .38rem; line-height: 1.45; }
#integration .assure-row { margin-top: 1rem; padding-top: .9rem; gap: 1rem 2rem; }
#integration .assure-mark { padding: .5rem .75rem; }

/* ── Clinical case study ── */
#evaluation .card-grid    { margin-top: .7rem; gap: .9rem; }
#evaluation .card         { padding: .8rem 1rem; }
#evaluation .card p       { font-size: 13px; line-height: 1.45; }
#evaluation .card h3      { margin-bottom: .25rem; font-size: 1rem; }
#evaluation .card-figure  { font-size: 2rem; }
#evaluation .card-kicker  { margin-bottom: .2rem; }
#evaluation .section-h3   { margin: .75rem 0 0; font-size: 1.05rem; }
#evaluation p, #evaluation li { line-height: 1.45; }
#evaluation .eval-top     { margin-bottom: .9rem; }
#evaluation .case-card    { padding: .85rem 1rem; }
#evaluation .case-head    { margin-bottom: .35rem; }
#evaluation .case-age     { font-size: 2.1rem; }
#evaluation .case-body    { margin: .5rem 0 .6rem; line-height: 1.45; font-size: 13px; }
#evaluation .case-outcome { padding: .5rem .75rem; }
#evaluation .note         { margin-top: .6rem; line-height: 1.4; }
#evaluation .section-lead { line-height: 1.45; margin-bottom: .6rem; }

/* ── Indications, yield, acceptance, demand ── */
#indications .card-grid { margin-top: .75rem; gap: .9rem; }
#indications .card      { padding: 1rem 1.1rem; }
#indications .card li   { margin-bottom: .32rem; line-height: 1.42; }
#indications .section-lead { margin-bottom: .6rem; }
#yield .yield-wrap      { gap: 1rem; margin-top: .75rem; }
#yield .calc-panel      { padding: .9rem 1rem; }
#yield .yield-out       { padding: .8rem .95rem; }
#yield .fls-note        { margin-top: .55rem; line-height: 1.42; }
#yield .footnotes       { margin-top: .45rem; padding-top: .45rem; line-height: 1.4; }
#yield .section-lead    { line-height: 1.45; margin-bottom: .6rem; }
#yield .calc-field label{ margin-bottom: .15rem; }
#yield .calc-grid       { gap: .5rem .9rem; }
#yield .calc-section    { gap: .5rem; }
#yield .yield-out-val   { line-height: 1.1; }
#yield .yield-row       { padding: .5rem 0; }
#acceptance .card-grid  { margin-top: .75rem; gap: .9rem; }
#acceptance .card       { padding: 1rem 1.1rem; }
#demand .demand-foot    { margin-top: .55rem; }
#demand .card-grid      { gap: .85rem; }
#demand .card           { padding: .95rem 1.05rem; }
#demand .section-lead   { margin-bottom: .6rem; }

/* ── Revenue model ───────────────────────────────────────────────────────
   The one slide in the deck that is a working tool rather than an argument.
   Shrinking the type far enough to force it into 16:9 would make the form
   hard to use, so the frame gives way instead: the slide keeps 16:9 as a
   floor and grows for its content. Everything below still takes the air out
   so it grows as little as it can. */
.tk-slide:has(> #calculator) { aspect-ratio: auto; }
.tk-slide:has(> #calculator)::before { content: ''; flex: 0 0 0px; width: 0; padding-top: 56.25%; }
.tk-slide:has(> #calculator) > section { overflow-y: visible; }

#calculator .calc-wrap        { gap: 1.6rem; margin-top: 1rem; }
#calculator .calc-panel       { padding: 1rem 1.1rem; }
#calculator .calc-section     { gap: .5rem; margin-bottom: 0; }
#calculator .calc-head        { margin-bottom: .35rem; }
#calculator .calc-grid        { gap: .55rem 1rem; }
#calculator .calc-field label { margin-bottom: .15rem; }
#calculator .calc-input input { padding: 7px 10px; }
#calculator .calc-explainer   { margin-top: .2rem; line-height: 1.45; }
#calculator .calc-divider     { margin: .7rem 0; }
#calculator .calc-results     { gap: .7rem; }
#calculator .calc-out         { padding: .85rem 1rem; }
#calculator .calc-out-head    { margin-bottom: .3rem; }
#calculator .calc-out-val     { font-size: 2rem; line-height: 1.08; }
#calculator .calc-out--total .calc-out-val { font-size: 2.4rem; }
#calculator .calc-out-note    { margin-top: .3rem; line-height: 1.4; }
#calculator .calc-op          { margin: .25rem 0; }
#calculator .calc-sum-rule    { margin: .4rem 0; }

/* A narrower window makes each slide shorter while the copy reflows taller,
   so the frame's own padding comes in to meet it. Above this width the
   slides fit on their own. */
@media (min-width: 861px) and (max-width: 1540px) {
  .tk-slide > section { padding: 1.6rem 1.9rem !important; }
}

/* The four numbers are the spine of the whole document, so inside a slide
   frame they take the height the page can spare rather than the height the
   copy happens to need. */
#sales .vb-card { min-height: clamp(215px, 31vh, 310px); }
/* The pill sits at the top, the number anchors the bottom, so the extra
   height reads as composition rather than a gap. */
#sales .vb-fig { margin-top: auto; }
/* Reserving three lines for the longest sub-line puts all three figures on
   the same baseline instead of floating to their own sub-line's height. */
#sales .vb-fig-sub { min-height: 4.5em; }
#sales .vband-note { margin-top: 1rem; }

/* ── BELOW THE COMFORTABLE WIDTH ───────────────────────────────────────────
   Narrow the window and each slide loses height faster than the copy loses
   lines, so a fixed 16:9 frame starts to scroll. Rather than shrink the type
   until it is hard to read, the ratio becomes a floor instead of a ceiling:
   a zero-width flex item holds the 16:9 minimum and any slide that needs
   more simply grows. Slides that fit are untouched. */
@media (min-width: 861px) and (max-width: 1560px) {
  .tk-slide { aspect-ratio: auto; }
  .tk-slide::before {
    content: ''; flex: 0 0 0px; width: 0; padding-top: 56.25%;
  }
  .tk-slide > section { overflow-y: visible; }
}

/* ── PAGE NUMBERS ──────────────────────────────────────────────────────────
   One folio per slide, bottom right, numbered to match the PDF. The front
   page carries no folio, as a cover does not, but it still takes a number so
   the two documents stay in step. */
.tk-body { counter-reset: tkpage; }
.tk-slide { counter-increment: tkpage; }
.tk-slide::after {
  content: counter(tkpage);
  position: absolute; z-index: 3;
  right: 1.4rem; bottom: 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft); opacity: .65;
  pointer-events: none;
}
.tk-front::after { content: none; }

/* Light ground is the default above; the rest take a cream folio. */
.tk-slide:has(> .panel--dark)::after,
.tk-cover::after { color: var(--cream); opacity: .62; }

@media (max-width: 860px) { .tk-slide::after { display: none; } }

/* A sentence-length quote still reads as display type, but at a size that
   keeps it to two lines inside the part of the frame the wash covers. */
.cover-quote--mid .cq-a {
  font-size: clamp(1.3rem, 3.5cqw, 2.5rem);
  line-height: 1.08; max-width: 36ch;
}

/* A long quote is a pull quote, not a two-word hammer, so it is set at
   reading size rather than display size. */
.cover-quote--long .cq-a {
  font-size: clamp(1rem, 2.1cqw, 1.55rem);
  line-height: 1.32; letter-spacing: 0; max-width: 51ch;
}
/* The marks belong on the quoted line itself; on the blockquote they are
   block-level and drop onto rules of their own. */

/* ── COVER QUOTE ───────────────────────────────────────────────────────────
   A buyer answering the question the section asks, set over the photograph
   in gold rather than in a band: a white panel across the foot read as a
   disclaimer. It replaced the headline figure that used to sit here, which
   the next slide states at full size anyway. */
.cover-quote {
  margin: clamp(.9rem, 1.9cqw, 1.5rem) 0 0;
  padding-top: clamp(.8rem, 1.6cqw, 1.3rem);
  border-top: 1px solid rgba(201,168,76,.45);
}
.cover-quote blockquote { margin: 0; }
.cq-q {
  display: block;
  font-size: clamp(9.5px, 1.05cqw, 12.5px); font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold-lt);
  max-width: 84ch;
}
.cq-a {
  display: block; margin-top: .35rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 5.6cqw, 4rem);
  font-weight: 700; font-style: italic; line-height: 1;
  letter-spacing: -.015em; color: var(--gold);
  text-shadow: 0 2px 16px rgba(26,14,8,.55);
}
.cq-a::before { content: '\201C'; }
.cq-a::after  { content: '\201D'; }
.cover-quote figcaption {
  margin-top: .55rem;
  font-size: clamp(9.5px, .95cqw, 11.5px); letter-spacing: .12em;
  text-transform: uppercase; color: var(--cream);
  max-width: 84ch;
}

/* ── CLOSING SLIDE ─────────────────────────────────────────────────────────
   The document ends on the reason any of it matters rather than on a figure.
   Centred, because a closer should not read like another argument. */
.tk-close { container-type: inline-size; }
.tk-close > .container { text-align: center; }
.tk-close-logo {
  display: block; margin: 0 auto clamp(1.5rem, 3.2cqw, 2.6rem);
  width: auto; height: clamp(38px, 5.4cqw, 70px);
}
.tk-close-h {
  margin: 0 auto; max-width: 26ch;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 4.6cqw, 3.3rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -.01em;
  color: var(--white); text-wrap: balance;
}
.tk-close-lead {
  margin: clamp(.9rem, 2cqw, 1.5rem) auto 0; max-width: 62ch;
  font-size: clamp(12.5px, 1.3cqw, 15px); line-height: 1.6;
  color: rgba(250,250,245,.84);
}
.tk-close-partner {
  margin: clamp(1.1rem, 2.4cqw, 1.9rem) auto 0; max-width: 46ch;
  padding-top: clamp(.9rem, 2cqw, 1.5rem);
  border-top: 1px solid rgba(201,168,76,.4);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 2.2cqw, 1.65rem);
  font-style: italic; line-height: 1.32; color: var(--gold);
  text-wrap: balance;
}
.tk-close-foot {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.7rem, 1.6cqw, 1.1rem);
  margin-top: clamp(1.2rem, 2.6cqw, 2rem);
}
.tk-close-addr {
  margin: 0; display: flex; flex-direction: column; gap: .25rem;
  font-size: clamp(10px, 1cqw, 11.5px); letter-spacing: .1em;
  text-transform: uppercase; color: rgba(250,250,245,.8);
}
.tk-close-addr a { color: var(--gold-lt); text-decoration: none; }
.tk-close-addr a:hover { text-decoration: underline; }

/* The rail's closing entry sits below the last section, with its own rule. */
.tk-rail-top--end {
  margin-top: 1rem; padding-top: .7rem;
  border-top: 1px solid var(--line);
  font-weight: 600; color: var(--plum-deep);
}

/* On a narrow cover the stack of title, figure and quote is a few pixels
   taller than the frame; the air between them comes out rather than the
   slide growing. Scoped by container query, so it tracks the slide. */
@container (max-width: 960px) {
  .tk-cover-fig { margin-top: 1rem; padding-top: .85rem; }
  .cover-quote  { margin-top: .75rem; padding-top: .65rem; }
}

/* ── DEVICE LIFETIME MODEL (OEM business case) ─────────────────────────────
   The chevron strip above it is the same model's output, so the worked
   example and the calculator can never disagree. */
.ribbon--slim .ribbon-seg,
.ribbon--slim .ribbon-seg:first-child {
  flex-direction: row; align-items: baseline; gap: .7rem;
  padding: .6rem 1.1rem .6rem 2.5rem;
}
.ribbon--slim .ribbon-seg:first-child { padding-left: 1.2rem; }
.ribbon--slim .r-role { margin: 0; font-size: 9px; letter-spacing: .13em; opacity: .9; }
.ribbon--slim .r-val {
  margin: 0 0 0 auto; font-size: clamp(1rem, 1.5cqw, 1.35rem);
  font-variant-numeric: tabular-nums;
}
.ribbon--slim { margin-top: .75rem; }

.dev-calc {
  display: grid; grid-template-columns: minmax(0, 0.97fr) minmax(0, 1.03fr);
  gap: 1.3rem; margin-top: 1.75rem;
}

/* The fee chain: one assessment fee, read left to right. The provider's price
   is the only editable figure; the three around it follow from it. */
.calc-chain {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem; margin-top: .45rem;
}
.calc-chain--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .78rem; }
.calc-chain .calc-field { position: relative; min-width: 0; }
.calc-chain .calc-field:not(:last-child)::after {
  content: '\203A'; position: absolute; right: -.66rem; bottom: 2px;
  font-size: 15px; line-height: 1; font-weight: 700; color: var(--mauve-dk);
}
/* Two lines' worth of label on every cell, wrapped or not, so the four
   inputs sit on one line however narrow the panel gets. */
.dev-calc-in .calc-field--sm label {
  font-size: 9px; letter-spacing: .05em; line-height: 1.15;
  min-height: 2.3em; display: flex; align-items: flex-end;
}
.dev-calc-in .calc-field--sm .calc-input input { padding: 4px 6px; font-size: 12px; }
.dev-calc-in .calc-field--sm .calc-input .affix { padding: 4px 6px; font-size: 11px; }
/* The OEM's own line, carried in gold so it reads first. */
.calc-field--mine label { color: var(--gold-dk); }
.calc-field--mine .calc-input--derived {
  border-color: var(--gold); border-style: solid; background: #FBF4E2;
}
.calc-field--mine .calc-input--derived input,
.calc-field--mine .calc-input .affix { color: #5A4612; font-weight: 700; }
#commercial .note { margin-top: .7rem; line-height: 1.5; }
.dev-calc-in { padding: .85rem .95rem; }
.dev-calc-in .calc-grid { gap: .34rem .85rem; margin-bottom: .25rem; }
.dev-calc-in .calc-head { margin-bottom: .35rem; }
.dev-calc-in .calc-divider { margin: .45rem 0; }
.dev-calc-in .calc-input input { padding: 4px 9px; font-size: 12.5px; }
.dev-calc-in .calc-field label { margin-bottom: .12rem; font-size: 9.5px; }
.dev-calc-in .calc-explainer { margin-top: .3rem; font-size: 10.5px; line-height: 1.42; }

.dev-calc-out { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.dev-sums { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: .8rem; }
.dev-sum {
  padding: .7rem .9rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--white);
}
.dev-sum--gain { background: #6E5630; border-color: #6E5630; }
.dev-sum-label {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: .25rem;
}
.dev-sum--gain .dev-sum-label { color: var(--gold-lt); }
.dev-sum-val {
  display: block; font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 2.3cqw, 2rem); font-weight: 700; line-height: 1;
  color: var(--plum-deep); font-variant-numeric: tabular-nums;
}
.dev-sum--gain .dev-sum-val { color: var(--white); }
.dev-sum-delta {
  display: block; margin-top: .3rem; font-size: 11.5px; letter-spacing: .04em;
  color: rgba(250,250,245,.88); font-variant-numeric: tabular-nums;
}
.dev-sum-delta b { color: var(--gold-lt); font-weight: 700; }

.dev-chart { margin: 0; position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dev-chart figcaption {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: .3rem;
}
.dev-legend { display: flex; gap: .9rem; margin-left: auto; }
.dev-key { display: inline-flex; align-items: center; gap: .35rem; letter-spacing: .1em; }
/* A line swatch, since the series are now lines. */
.dev-key::before {
  content: ''; width: 13px; height: 3px; border-radius: 2px;
}
.dev-key--device::before { background: #7A3A68; }
.dev-key--cortex::before { background: #A8851F; }
/* The viewBox is fitted to this box, so the SVG must not be allowed to size
   the box in return — an intrinsic ratio here feeds back on itself and the
   chart grows every time the slide is made wider. Taking it out of flow
   leaves the height to the flex row alone. */
/* The payback claim, stated rather than drawn. */
.dev-callout {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin: .05rem 0 .5rem; padding: .45rem .75rem;
  border-left: 3px solid var(--gold-dk); border-radius: 0 6px 6px 0;
  background: #F7F1E2;
}
.dev-callout[hidden] { display: none; }
.dev-callout b {
  font-family: 'Cormorant Garamond', serif; font-weight: 700; line-height: 1;
  font-size: clamp(1.2rem, 2.1cqw, 1.75rem); color: #5A4612; white-space: nowrap;
}
.dev-callout span { font-size: 11.5px; line-height: 1.35; color: var(--text); }
.dev-callout .dc-lead {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-dk);
}
.dev-legend { gap: .75rem; }

/* Shown only by the print sheet, where the chart cannot redraw. */
.pdf-only { display: none; }

.dev-chart-plot { flex: 1 1 auto; min-height: 150px; position: relative; }
.dev-chart-plot svg {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; overflow: visible;
}

/* A tooltip rather than a number on every bar. */
.dev-tip {
  position: absolute; z-index: 4; pointer-events: none;
  padding: .45rem .6rem; border-radius: 5px;
  background: var(--plum-deep); color: var(--cream);
  font-size: 11px; line-height: 1.45; white-space: nowrap;
  box-shadow: var(--shadow-md); opacity: 0; transition: opacity .12s ease;
  font-variant-numeric: tabular-nums;
}
.dev-tip.show { opacity: 1; }
.dev-tip b { color: var(--gold-lt); font-weight: 700; }

@media (max-width: 1000px) {
  .dev-calc { grid-template-columns: minmax(0, 1fr); margin-top: 1.1rem; }
  /* Stacked, the row no longer lends the chart a height of its own. */
  .dev-chart-plot { min-height: 240px; }
  .ribbon--slim .ribbon-seg,
  .ribbon--slim .ribbon-seg:first-child { padding: .75rem 1.1rem; }
}
@media (max-width: 620px) {
  .calc-chain, .calc-chain--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-chain .calc-field:nth-child(2n)::after { content: none; }
}

/* ── SLIDE 9: THE ZERO LEDGER ─────────────────────────────────────────────
   Four zeros on one dark ground, read as a single ledger strip rather than
   four separate cards. The claim is cumulative, so it is drawn as one object. */
.zero-ledger {
  margin-top: 1.6rem; padding: 1.5rem 1.7rem 1.7rem;
  background: var(--plum-deep); border-radius: 12px;
  box-shadow: var(--shadow-md);
}
.zl-head {
  margin: 0 0 1.15rem; font-size: 10.5px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--gold-lt);
}
.zl-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 1.6rem;
}
.zl-col { position: relative; min-width: 0; }
.zl-col + .zl-col { padding-left: 1.6rem; }
.zl-col + .zl-col::before {
  content: ''; position: absolute; left: 0; top: .2rem; bottom: .2rem;
  width: 1px; background: rgba(232,213,163,.28);
}
.zl-fig {
  display: block; font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: clamp(2.4rem, 4.4cqw, 3.9rem); line-height: .95;
  color: var(--gold-lt); font-variant-numeric: tabular-nums;
}
.zl-label {
  display: block; margin-top: .45rem; font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--white);
}
.zl-body {
  margin: .5rem 0 0; font-size: 12.5px; line-height: 1.55;
  color: rgba(250,250,245,.84);
}

/* The positive counterweight: the slide would otherwise be four denials. */
.needs-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.6rem;
  margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.needs-head {
  margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold-dk);
}
.needs-list {
  display: flex; flex-wrap: wrap; gap: .6rem 1.9rem;
  margin: 0; padding: 0; list-style: none;
}
.needs-list li {
  display: flex; align-items: center; gap: .55rem;
  font-size: 14px; color: var(--text);
}
.needs-list li::before {
  content: ''; flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
  background: var(--gold-dk);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}

@media (max-width: 1080px) {
  .zl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
  .zl-col:nth-child(odd) { padding-left: 0; }
  .zl-col:nth-child(odd)::before { content: none; }
}
@media (max-width: 620px) {
  .zl-grid { grid-template-columns: minmax(0, 1fr); }
  .zl-col { padding-left: 0 !important; }
  .zl-col::before { content: none !important; }
}

/* ── SLIDE REFERENCES ─────────────────────────────────────────────────────
   One footnote line carrying every citation on the slide, so the cards hold
   the claim and the sourcing sits where sourcing belongs. */
.ref {
  font-size: .62em; font-weight: 700; vertical-align: super; line-height: 0;
  margin-left: .12em; color: var(--gold-lt); letter-spacing: 0;
}
.panel:not(.panel--dark) .ref { color: var(--gold-dk); }
/* Dark panels had no footnote colour of their own, so --text-soft was being
   painted on plum and all but vanished. */
.panel--dark .footnotes { color: rgba(250,250,245,.78); border-top-color: rgba(255,255,255,.14); }
.panel--dark .footnotes a { color: var(--gold-lt); }

.slide-refs { margin-top: 1rem; max-width: 124ch; }
/* One reference per line. Run together behind bullet separators they read as
   a single paragraph and the numbering is impossible to follow. */
.slide-refs span { display: block; }
.slide-refs span + span { margin-top: .28rem; }
.slide-refs b {
  font-weight: 700; margin-right: .25em; color: var(--gold-lt);
}
.panel:not(.panel--dark) .slide-refs b { color: var(--gold-dk); }

/* ── SLIDE 18: CASES AS MEASUREMENTS ──────────────────────────────────────
   The claim on this slide is that a wrist reading caught something a hip
   scan later confirmed. That is two points on one scale, so it is drawn as
   two points on one scale rather than described in a sentence. */
.eval-layout {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 1.5rem; margin-top: 1.1rem; align-items: start;
}
.eval-aside { display: flex; flex-direction: column; gap: .8rem; }
.eval-photo { margin: 0; border-radius: 10px; overflow: hidden; position: relative; }
.eval-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1009 / 730; object-fit: cover; }
.eval-credit {
  display: block; margin-top: .15rem; font-size: 9.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gold-lt);
}
.eval-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem .85rem .6rem;
  background: linear-gradient(to top, rgba(42,22,36,.88), rgba(42,22,36,0));
  color: var(--cream); font-size: 11.5px; line-height: 1.4;
}
.eval-stat {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .7rem .9rem; border-radius: 9px;
  background: var(--cream); border: 1px solid var(--line);
}
.eval-stat--lead { background: var(--plum-deep); border-color: var(--plum-deep); }
.es-fig {
  flex: 0 0 auto; font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: clamp(1.5rem, 2.6cqw, 2.2rem); line-height: 1; color: var(--plum-deep);
}
.eval-stat--lead .es-fig { color: var(--gold-lt); }
.es-label { font-size: 12px; line-height: 1.4; color: var(--text-soft); }
.eval-stat--lead .es-label { color: rgba(250,250,245,.88); }

.eval-cases { display: flex; flex-direction: column; gap: .62rem; min-width: 0; }
.eval-cases-head {
  margin: 0 0 .1rem; font-size: 10.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold-dk);
}
.tcase {
  padding: .72rem .95rem .8rem; border-radius: 9px;
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--mauve);
}
.tcase-top { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.tcase-age {
  font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.45rem;
  line-height: 1; color: var(--plum-deep);
}
.tcase-age span {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mauve-dk);
  margin-left: .22rem;
}
.tcase-top h3 { margin: 0; font-size: 14.5px; line-height: 1.25; color: var(--plum-deep); }
.tcase-pill {
  margin-left: auto; flex: 0 0 auto;
  padding: .2rem .6rem; border-radius: 999px;
  background: #1F6B4A; color: #FFFFFF;
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.tcase-ctx { margin: .3rem 0 .5rem; font-size: 12px; line-height: 1.45; color: var(--text-soft); }

/* Each case is three figures: the rule that triggered the referral, what
   CorteX read at the forearm, and what DXA then found centrally. */
.tnums {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem; margin-top: .55rem;
}
.tnum {
  padding: .45rem .65rem; border-radius: 7px;
  background: var(--cream); border: 1px solid var(--line);
  border-left: 3px solid var(--line);
}
.tn-label {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-soft); line-height: 1.25;
}
.tn-val {
  display: block; margin-top: .12rem;
  font-family: 'Cormorant Garamond', serif; font-weight: 700; line-height: 1.05;
  font-size: clamp(1.15rem, 1.9cqw, 1.6rem); font-variant-numeric: tabular-nums;
  color: var(--plum-deep);
}
/* The threshold is a rule, not a reading, so it does not take a reading's size. */
.tn-val--rule {
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
  line-height: 1.35; color: var(--text); margin-top: .22rem;
}
.tnum--cortex { border-left-color: #7A1F3D; }
.tnum--cortex .tn-val { color: #6E1B37; }
.tnum--dxa { border-left-color: #1565C0; }
.tnum--dxa .tn-val { color: #124F96; }
.tnum--thresh { border-left-color: var(--mauve-dk); }

@media (max-width: 1080px) {
  .eval-layout { grid-template-columns: minmax(0, 1fr); }
  .eval-photo { max-height: 220px; }
}
@media (max-width: 620px) {
  .tnums { grid-template-columns: minmax(0, 1fr); }
}

/* The tick strip without its label, used as a closing summary line. */
.needs-row--plain { justify-content: flex-start; margin-top: 1.3rem; }
.needs-row--plain .needs-list { gap: .6rem 2.4rem; }

/* ── SLIDE 19: TWO ROUTES, ONE CONVERSATION ───────────────────────────── */
.cta-pair {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(.9rem, 2cqw, 1.6rem);
  max-width: 68ch; margin: clamp(1.5rem, 3.2cqw, 2.6rem) auto 0;
}
.cta-card {
  flex: 0 1 32ch;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.4rem, .9cqw, .6rem);
  padding: clamp(1rem, 2.2cqw, 1.6rem) clamp(.9rem, 1.8cqw, 1.3rem);
  border: 1px solid rgba(201,168,76,.42); border-radius: 10px;
  background: rgba(250,250,245,.045);
}
.cta-who {
  margin: 0; font-size: clamp(9.5px, 1cqw, 11px); font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--gold-lt);
}
.cta-say {
  margin: 0; flex: 1 1 auto; max-width: 24ch;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 1.95cqw, 1.45rem); line-height: 1.28;
  color: var(--white); text-wrap: balance;
}
.cta-btn { margin-top: clamp(.35rem, .8cqw, .6rem); white-space: nowrap; letter-spacing: .08em; }
.tk-close .tk-close-addr { margin-top: clamp(1.3rem, 2.8cqw, 2.1rem); align-items: center; }

@media (max-width: 620px) {
  .cta-pair { grid-template-columns: minmax(0, 1fr); }
}


/* ── SLIDE 10: the revenue model is the tallest slide in the deck ─────────
   It carries three input sections and four result cards, and at 1600px it
   stood 801px against 742px for every other slide. These are scoped to the
   slide so no other calculator inherits the tighter rhythm. */
#calculator .calc-section + .calc-section { margin-top: 0; }
#calculator .calc-divider     { margin: .5rem 0; }
#calculator .calc-grid        { gap: .42rem .9rem; }
#calculator .calc-head        { margin-bottom: .28rem; }
#calculator .calc-explainer   { margin-top: .3rem; font-size: 11.5px; line-height: 1.42; padding-left: .7rem; }
#calculator .calc-input input { padding: 6px 10px; font-size: 14px; }
#calculator .calc-input .affix { padding: 6px 10px; font-size: 13px; }
#calculator .calc-field label { margin-bottom: .12rem; font-size: 10px; }
#calculator .calc-panel       { padding: 1rem 1.1rem; }
#calculator .calc-out         { padding: .85rem 1.1rem; }
#calculator .calc-out-val     { font-size: clamp(1.5rem, 2.5cqw, 2.1rem); }
#calculator .calc-out-note    { margin-top: .2rem; font-size: 11px; line-height: 1.4; }
#calculator .calc-results     { gap: .55rem; }
#calculator .calc-results .calc-out { min-height: 6.1rem; }
#calculator .calc-op { height: 22px; }

/* Links out of the About IBEX block: the publications page and the company site. */
.about-links {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.1rem;
}
.about-links a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 14px; font-weight: 600; color: var(--gold-dk);
  text-decoration: none; border-bottom: 1px solid rgba(128,100,19,.4);
  padding-bottom: 1px;
}
.about-links a:hover { color: var(--plum-deep); border-bottom-color: var(--plum-deep); }
.about-links a::after {
  content: '\2192'; font-size: 1em; line-height: 1;
}
.about-links a[target="_blank"]::after { content: '\2197'; }

/* ── THE PREVIEW CAROUSEL CARRIES THE REAL SECTION COVERS ─────────────────
   The three pages are the toolkit's own cover slides, lifted verbatim, so
   what the visitor previews is what they get. `.tk-cover` already supplies
   the 16:9 box, the container query its type is sized against, and the
   ground colour; inside the stage it only has to stop being its own box. */
.look-page.tk-cover {
  position: absolute; inset: 0;
  aspect-ratio: auto; margin-bottom: 0;
  border-radius: 0; box-shadow: none;
}
/* The generic page-image rule would strip the cover's own gradient mask. */
.look-page:not(.tk-cover) img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
}

.look-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap;
}
.look-foot .look-foot-note { flex: 1 1 18rem; }
/* The foot spans both columns under the stage and the thumbnail strip. */
.look-foot { grid-column: 1 / -1; }

/* ── THE DIALOG SAYS WHICH REQUEST IS IN PROGRESS ─────────────────────────
   Both calls to action collect the same details and do different things, so
   the dialog names the one in progress and offers a one-click switch. */
.modal-intent {
  display: grid; gap: .25rem;
  margin: .9rem 0 1.4rem; padding: .85rem 1rem;
  border-radius: 8px; border-left: 3px solid var(--gold-dk);
  background: var(--cream);
}
.modal-intent[data-mode="toolkit"] {
  border-left-color: var(--plum); background: #F6F0F4;
}
.mi-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--text-soft);
}
.mi-what {
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: 1.22rem; line-height: 1.2; color: var(--plum-deep);
}
.mi-note { font-size: 12px; line-height: 1.5; color: var(--text-soft); }
.mi-swap {
  justify-self: start; margin-top: .45rem; padding: 0;
  border: 0; background: none; font: inherit; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--gold-dk);
  border-bottom: 1px solid rgba(128,100,19,.45);
}
.mi-swap:hover { color: var(--plum-deep); border-bottom-color: var(--plum-deep); }


/* ── EVALUATION SLIDE: BANNER GAP, THEN A FIT ─────────────────────────────
   The banner is the only child of its own container, so the generic
   last-child rule strips its bottom margin and it collides with the eyebrow
   below. The gap is restored deliberately and the bar itself tightened, then
   the case column — which is what sets this slide’s height — gives back more
   than the gap costs, so the frame no longer scrolls. */
#evaluation > .container:first-child { margin-bottom: .5rem; }
#evaluation .uk-banner--compact { margin-bottom: 0; padding: .4rem 1.1rem; }
#evaluation .uk-banner-h { font-size: 11px; }

#evaluation .eval-layout  { margin-top: .75rem; gap: 1.15rem; }
#evaluation .eval-cases   { gap: .45rem; }
#evaluation .tcase        { padding: .55rem .9rem .6rem; }
#evaluation .tcase-ctx    { margin: .22rem 0 .38rem; }
#evaluation .tnums        { gap: .45rem; margin-top: .42rem; }
#evaluation .tnum         { padding: .36rem .6rem; }
#evaluation .eval-aside   { gap: .6rem; }
#evaluation .eval-stat    { padding: .55rem .85rem; }

/* The reference marker was set in the body colour at .62em and disappeared
   against the stat card. Larger, gold and spaced so it reads as a marker. */
#evaluation .ref {
  font-size: .78em; font-weight: 700; color: var(--gold);
  margin-left: .2em; vertical-align: super; line-height: 0;
}
#evaluation .eval-stat--lead .ref { color: var(--gold-lt); }

/* ── DOLLAR FLOW: CARD ONE IS THE SOURCE ─────────────────────────────────
   The patient pays once and that single $99 is what the other two cards
   divide, so card one is cut as a chevron and points into them. */
#flow .chain-source {
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
  padding-right: 2.4rem; border-color: transparent;
}

/* ── CLOSING SLIDE: NO BOX ROUND THE CALL TO ACTION ──────────────────── */
.tk-close .cta-card {
  border: 0; background: none; padding: 0;
}

/* ── FRONT SLIDE: WHAT THIS DOCUMENT IS, AND IS NOT ─────────────────── */
/* Set as a footnote it was read straight past, which is the opposite of what
   a scope statement is for. Black ground, white text, no hairline: it reads
   as a notice attached to the document rather than a caption under the list. */
.tk-front-disclaimer {
  margin: 1.1rem 0 0; max-width: 54ch;
  font-size: clamp(9px, .96cqw, 10.5px); line-height: 1.5;
  color: #FFFFFF; background: #000000;
  padding: .7rem .9rem; border-radius: 9px;
}


/* ── CONTENTS: THE THREE SUB-HEADINGS START ON ONE LINE ──────────────────
   The three questions run to different lengths, so the text beneath them
   started at three different heights. Reserving two lines for the question
   lines the sub-headings up without touching the copy. */
.toc-q { min-height: 3.6em; }

/* ── VALUE BAND: ONE GRID ACROSS ALL FOUR CARDS ──────────────────────────
   Each card laid itself out independently, so the figures sat 44px below the
   sentence in card one, and on the home page a two-line label pushed its own
   figure lower still. Subgrid hands the four cards the same three rows, so
   the labels, the figures and the captions each sit on one line. */
.vband-col { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.vb-say, .vb-fig { margin: 0; align-self: start; }
.vb-fig-sub { align-self: start; }
/* The pack pushed its figures to the foot of the row with margin-top: auto,
   which is the 44px that put them below the sentence in card one. */
#sales .vb-say, #sales .vb-fig { margin-top: 0; }

/* ── WHY WRIST BONE DENSITY MATTERS: ROOM TO BREATHE ─────────────────────
   The cards and their references were crowded together. The references drop
   to the foot of the frame and the cards take the space that frees up. */
#indications .card        { padding: 1.3rem 1.3rem 1.4rem; }
#indications .slide-refs  { margin-top: 2.3rem; }

/* The card headings carry the point; at 16px semibold they read as body copy
   sitting between the figure and the sentence. Small caps in gold separates
   them from both. */
#indications .card h3 {
  font-size: 12px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: .6rem; line-height: 1.4;
}

/* ── REIMBURSEMENT: A FULL-PAGE QUOTE ────────────────────────────────────
   One voice, one page. The attribution is long and matters as much as the
   quote, so it is set as readable copy rather than a caption whisper. */
.payer-quote { margin: 0; display: flex; flex-direction: column; gap: 1.4rem; }
.payer-quote blockquote {
  margin: 0; max-width: none;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 3.1vw, 2.9rem);
  font-weight: 700; font-style: italic; line-height: 1.18;
  color: var(--gold); text-wrap: pretty;
  /* balance evens the line lengths by shortening them: the quote used only
     80-87% of its measure and ran to five lines. pretty fills the width and
     still keeps the last line from stranding a single word. */
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(201,168,76,.4);
}
.payer-quote figcaption {
  max-width: 86ch;
  font-size: 13px; line-height: 1.6;
  color: rgba(250,250,245,.82);
}
#reimbursement .section-tag { margin-bottom: 1.6rem; }
.tk-slide .payer-quote blockquote { font-size: clamp(1.25rem, 2.5cqw, 2.3rem); }
.tk-slide .payer-quote { gap: 1rem; }
/* Filling the measure let a line break fall inside "wrist X-ray", which
   a pull quote cannot carry. These two compounds stay whole. */
.payer-quote .nb { white-space: nowrap; }


/* ── INDICATIONS: THE FIGURE AND ITS HEADING NEED AIR ────────────────────
   Set tight, the capitalised heading reads as a second line of the figure. */
#indications .card .card-figure { margin-bottom: .75rem; }
#indications .slide-refs        { margin-top: 3rem; }

/* ── EVALUATION: PHOTO LEFT, CASES RIGHT, THE TWO NUMBERS BENEATH ────────
   The stats were stacked under the photograph, which left the picture small
   and the case column towering over it. They now run as a pair across the
   foot, which frees the photograph to match the height of the cases. */
#evaluation .eval-layout { align-items: stretch; }
#evaluation .eval-aside  { height: 100%; }
#evaluation .eval-photo  { height: 100%; display: flex; flex-direction: column; }
#evaluation .eval-photo picture { flex: 1 1 auto; min-height: 0; display: block; }
#evaluation .eval-photo img {
  height: 100%; width: 100%; aspect-ratio: auto; object-fit: cover;
}
.eval-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem; margin-top: .8rem;
}

/* Two figures per case now the referral rule has gone. */
#evaluation .tnums { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Three cases of the same shape read as one block, so each is numbered in
   its own gutter and takes a different edge colour. */
/* White cards on a white panel sit flat. A wash of the brand plum, barely
   there, lifts each case off the ground without drawing attention to itself. */
#evaluation .tcase { background: rgba(106,65,95,.045); }

/* The second stat reads as a plain box next to the plum lead card, so it
   takes a light plum of its own: related, clearly subordinate. */
#evaluation .eval-stat:not(.eval-stat--lead) {
  background: #EFE6EC;
  border-color: rgba(106,65,95,.18);
}
#evaluation .tcase:nth-of-type(1) { border-left-color: var(--plum); }
#evaluation .tcase:nth-of-type(2) { border-left-color: var(--mauve-dk); }
#evaluation .tcase:nth-of-type(3) { border-left-color: var(--gold-dk); }


/* ── A BANNER IN ITS OWN CONTAINER KEEPS ITS GAP ─────────────────────────
   The generic `last child loses its bottom margin` rule strips the banner's
   margin, because it is the only thing in its container, and the bar then
   collides with the eyebrow beneath it. Restored for every slide that
   carries one rather than the one slide where it was first noticed. */
.tk-slide > section > .container:first-child:has(> .uk-banner) {
  margin-bottom: .6rem;
}

/* ── SLIDE 16: REFERENCES STEP BACK ──────────────────────────────────────
   They are provenance, not the message, and were reading at the same
   weight as the cards above them. */
#indications .slide-refs { font-size: 9.5px; }
#indications .slide-refs span + span { margin-top: .22rem; }

/* ── SLIDE 12: ONE SENTENCE CARRIES THE QUOTE ────────────────────────────
   A reader should be able to take the point without reading all ten lines,
   so the quote sits back a step and the sentence that matters comes
   forward. Both tones still clear AA against the plum. */
.payer-quote blockquote { color: rgba(201,168,76,.72); }
.payer-quote .q-key { color: var(--gold-lt); }

/* ── FRONT SLIDE: SCALE WITH THE SLIDE, NOT THE WINDOW ───────────────────
   The type was already sized in cqw, so it shrank with the slide, but every
   gap around it was fixed in rem. Below about 1500px the content therefore
   grew taller than its own frame and, being centred, overflowed top and
   bottom — which is why the logo was clipped on a laptop and fine on a
   monitor. Expressing the spacing in cqw too makes the whole slide scale as
   one piece, the way the cover slides already do. */
.tk-front-text {
  padding: 3cqw 5cqw 8.25cqw;
}
.tk-front-logo   { margin: 0 0 2.4cqw; }
.tk-front-sub    { margin: .75cqw 0 0; }
.tk-front-lead   { margin: 1.2cqw 0 0; }
.tk-front-note   { margin: .9cqw 0 0; }
.tk-front-points { gap: .7cqw; }
.tk-front-covers { margin: 1.8cqw 0 1.1cqw; padding-top: 1.5cqw; }
.tk-front-disclaimer { margin: 1.4cqw 0 0; padding: .9cqw 1.15cqw; }
.tk-front-foot   { left: 5cqw; bottom: 5.5cqw; }


/* ── FRONT SLIDE: ONE PIECE, AT EVERY SIZE ───────────────────────────────
   Above the breakpoint where the slide is a fixed 16:9 frame, every size on
   this slide is expressed against the slide's own width. The clamps stay
   below that point, where slides are allowed to grow and type needs a floor
   to stay readable. Within the deck range the whole slide now scales as a
   single artwork: the gap above the logo is the same share of the slide at
   1280px as it is at 1920px, rather than ranging from 2% to 10%. */
@media (min-width: 861px) {
  .tk-front-logo        { height: 5.1cqw; }
  .tk-front h1          { font-size: 5.2cqw; }
  .tk-front-sub         { font-size: 1.9cqw; }
  .tk-front-lead        { font-size: 1.32cqw; }
  /* The list measures itself in ch, so unless the ol itself is sized in cqw
     its 50ch cap stays a fixed 473px: a third of the slide on a monitor and
     over half of it on a laptop, which wrapped the items to two lines at one
     size and one at the other and shifted the whole centred stack. */
  .tk-front-points      { font-size: 1.4cqw; }
  .tk-front-points li   { font-size: 1.4cqw; padding-left: 2.4cqw; }
  .tk-front-covers      { font-size: .92cqw; }
  .tk-front-note        { font-size: .88cqw; }
  .tk-front-disclaimer  { font-size: .85cqw; }
  .tk-front-foot        { font-size: .82cqw; }
}


/* ══ THE PARTNER PACK IS A DECK ═══════════════════════════════════════════
   Every content slide is laid out on one fixed 1280x720 canvas — the same
   canvas build_pdf.py prints — and then scaled to whatever frame the window
   gives it. Nothing reflows: a slide holds the same proportions, the same
   line breaks and the same spacing on a laptop as on a monitor, and what is
   on screen is the PDF page.

   Two deliberate limits. The class is added by script, because CSS cannot
   divide one length by another to produce a scale factor; without the script
   the slides keep the responsive behaviour they had before rather than
   collapsing onto a canvas they cannot size. And below 861px the deck is
   abandoned on purpose: a 1280px canvas scaled into a phone would put the
   body text at about 4px. There, slides still stack and grow as they did. */
@media screen and (min-width: 1121px) {
  .tk-body.deck .tk-slide:has(> section) {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  /* The front slide and the part covers centre their own text with flex
     and already size themselves against their own width, so they need
     the frame, not the canvas. */
  .tk-body.deck .tk-cover,
  .tk-body.deck .tk-front { aspect-ratio: 16 / 9; overflow: hidden; }
  /* The zero-width flex item that held a 16:9 floor has nothing left to do. */
  .tk-body.deck .tk-slide::before { display: none; }

  .tk-body.deck .tk-slide > section {
    width: 1280px; height: 720px;
    flex: none;
    overflow: hidden;
    /* The canvas is its own container, so any cqw inside a slide measures
       against 1280px rather than against the window. */
    container-type: inline-size;
    padding: 2rem 2.25rem !important;
    transform: scale(var(--tk-scale, 1));
    transform-origin: top left;
  }
  /* Auto margins centred short content against a box that no longer varies. */
  .tk-body.deck .tk-slide > section > .container,
  .tk-body.deck .tk-slide > section > .container-narrow { margin: auto 0; }
}

@media screen and (min-width: 1121px) {
  /* The slide is a flex item of the body column, so without this the 720px
     canvas sets its height through min-height:auto and the 16:9 ratio is
     quietly ignored. */
  .tk-body.deck .tk-slide { min-height: 0; }

  /* ── THE CANVAS IS 1280px WIDE, WHATEVER THE WINDOW IS ──────────────────
     Every rule below undoes a viewport breakpoint that stacks or shrinks a
     component. Those breakpoints describe how much room the window has; the
     canvas always has 1280px, so inside a slide they are simply wrong, and
     they were the reason a narrow window pushed content off the bottom of a
     frame that had not actually changed size. Each value is the layout the
     canvas was designed at, read back off the page at a width where no
     breakpoint fires. */
  .tk-body.deck .tk-slide .chain-grid      { grid-template-columns: repeat(4, 1fr); }
  .tk-body.deck .tk-slide .chain-grid--3   { grid-template-columns: repeat(3, 1fr); }
  .tk-body.deck .tk-slide .calc-wrap       { grid-template-columns: 1.45fr 1fr; }
  .tk-body.deck .tk-slide .card-grid--3    { grid-template-columns: repeat(3, 1fr); }
  .tk-body.deck .tk-slide .col-3           { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .tk-body.deck .tk-slide .col-3-video,
  .tk-body.deck .tk-slide .col-3-note      { max-width: none; }
  .tk-body.deck .tk-slide .demand-table    { min-width: 760px; }
  .tk-body.deck .tk-slide .yield-wrap      { grid-template-columns: 1fr 1.15fr; }
  .tk-body.deck .tk-slide .eval-layout     { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  .tk-body.deck .tk-slide .eval-photo      { max-height: none; }
  .tk-body.deck .tk-slide .dev-calc        { grid-template-columns: minmax(0, 0.97fr) minmax(0, 1.03fr); }
  .tk-body.deck .tk-slide .dev-chart-plot  { min-height: 150px; }
  .tk-body.deck .tk-slide #demand .demand-foot,
  .tk-body.deck #demand .demand-foot       { grid-template-columns: 1fr 1.1fr; gap: 1.5rem; }

  /* The value band: four columns, its own card padding, and the hairline
     divider between cards that the stacked layout turns off. */
  .tk-body.deck .tk-slide .vband-grid      { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1.25rem; }
  .tk-body.deck .tk-slide .vband-col.vb-card { padding-left: 1.6rem; padding-right: 1.6rem; }
  .tk-body.deck .tk-slide .vband-col:nth-child(odd)::before { display: block; }

  /* The chevron flow runs across, not down. */
  .tk-body.deck .tk-slide .chev-flow { flex-direction: row; }
  .tk-body.deck .tk-slide .chev-card {
    margin-left: -26px; margin-top: 0; padding: 1.9rem 3rem;
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%, 28px 50%);
  }
  .tk-body.deck .tk-slide .chev-card:first-child {
    margin-left: 0; padding-left: 1.9rem;
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
  }
  .tk-body.deck .tk-slide .chev-card:last-child {
    padding-right: 1.9rem;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 28px 50%);
  }

  /* The revenue ribbons keep their wide padding. */
  .tk-body.deck .tk-slide .ribbon--slim .ribbon-seg,
  .tk-body.deck .tk-slide .ribbon--slim .ribbon-seg:first-child { padding: .6rem 1.1rem .6rem 2.5rem; }
  .tk-body.deck .tk-slide .ribbon--flow .ribbon-seg { padding: 1.5rem 1.5rem 1.5rem 2.9rem; }
  .tk-body.deck .tk-slide .ribbon--flow .ribbon-seg:first-child { padding-left: 1.75rem; }
}

@media screen and (min-width: 1121px) {
  /* The revenue model carries its own escape hatch — `.tk-slide:has(> #calculator)`
     lets that one slide grow rather than scroll. The :has() argument is an id,
     so the rule outranks every deck rule above and left this slide alone at
     2.1:1 while the other twenty sat at 16:9. On the canvas it is a slide like
     any other. */
  .tk-body.deck .tk-slide:has(> #calculator) { aspect-ratio: 16 / 9; }
  .tk-body.deck .tk-slide:has(> #calculator)::before { display: none; }
  .tk-body.deck .tk-slide:has(> #calculator) > section { overflow: hidden; }

  /* Two slides still ran past the foot of the canvas: the revenue model by
     8px and the case study by 20px. Whitespace only — no type is reduced. */
  .tk-body.deck #calculator .calc-panel   { padding: .9rem 1rem; }
  .tk-body.deck #calculator .calc-results { gap: .45rem; }
  .tk-body.deck #calculator .calc-out     { padding: .58rem .9rem; }
  /* The caption under each card has to clear the foot of the canvas,
     so the room it needs comes out of the gaps around the card. */
  .tk-body.deck #commercial .model-cap,
  .tk-body.deck #calculator .model-cap   { margin-top: .4rem; font-size: 12px; }

  .tk-body.deck #evaluation .eval-stats   { margin-top: .6rem; gap: .65rem; }
  .tk-body.deck #evaluation .eval-cases   { gap: .36rem; }
  .tk-body.deck #evaluation .tcase        { padding: .46rem .9rem .5rem; }
  .tk-body.deck #evaluation .tnums        { margin-top: .34rem; }
}


/* ── CANVAS TYPE: THE CEILING IS THE SIZE ────────────────────────────────
   Six sizes inside the slides were set as clamp(floor, Nvw, ceiling). On a
   monitor the vw term overshot the ceiling, so every slide got the ceiling
   and the canvas composition was the intended one. On a laptop the vw term
   fell below it, so the type shrank — inside a canvas that had not changed
   width. The quote on slide 12 dropped from 29.6px to 23.5px, its lines
   re-wrapped, and the centred block moved: the slide was no longer the page
   the PDF prints. Measured against the 1920px rendering, that alone put the
   content slides out by up to 3.4% at 1121px.

   The canvas is always 1280px wide, so none of these needs to be relative
   to anything: pinning each to its own ceiling makes it the same size at
   every window size, which is what the ceiling already was on a monitor.
   Outside the deck range the clamps are untouched, and so is the home page,
   which shares all six selectors. */
@media screen and (min-width: 1121px) {
  .tk-body.deck .tk-slide .section-h2              { font-size: 1.9rem; }
  .tk-body.deck .tk-slide .toc-q                   { font-size: 1.75rem; }
  .tk-body.deck .tk-slide .vb-fig                  { font-size: 4.3rem; }
  .tk-body.deck .tk-slide .vb-say                  { font-size: 2.05rem; }
  .tk-body.deck .tk-slide .pull-quote              { font-size: 2.2rem; }
  .tk-body.deck .tk-slide .quote-block--wide blockquote { font-size: 1.85rem; }
}

/* ══ THE COVERS JOIN THE DECK ══════════════════════════════════════════════
   The part covers were the one thing already sized against their own width,
   which is why they survived the laptop better than the content slides. But
   every size was wrapped in a clamp, so above and below the clamp's bounds
   the type stopped tracking the slide and the composition drifted: measured
   against the 1920px rendering, a cover was out by up to 29% at 920px while
   a content slide was out by under 1%.

   Inside the deck range the clamps come off and the sizes are pure cqw, so a
   cover scales exactly as the canvas slides do. Below that range the clamps
   stay, where type still needs a floor to be readable. */
@media screen and (min-width: 1121px) {
  .tk-body.deck .tk-cover-text        { padding: 0 0 0 4.4cqw; }
  .tk-body.deck .tk-cover-brand       { font-size: .78cqw; margin-bottom: .75cqw; }
  .tk-body.deck .tk-cover h2          { font-size: 6.6cqw; }
  .tk-body.deck .tk-cover-sub         { font-size: 1.1cqw; margin-top: .88cqw; }
  .tk-body.deck .tk-cover-standfirst  { font-size: 1.16cqw; margin: 1cqw 0 0; }
  .tk-body.deck .tk-cover-note        { font-size: .92cqw; margin: .63cqw 0 0; }
  .tk-body.deck .tk-cover-fig         { font-size: 1.17cqw; margin-top: 2cqw; padding-top: 1.5cqw; }
  .tk-body.deck .tk-cover-fig span    { font-size: 5.4cqw; margin-bottom: .25cqw; }
  .tk-body.deck .cover-quote          { margin: 1.9cqw 0 0; padding-top: 1.6cqw; }
  .tk-body.deck .cq-a                 { font-size: 5.6cqw; margin-top: .44cqw; }
  .tk-body.deck .cq-q                 { font-size: 1.05cqw; }
  .tk-body.deck .cover-quote--mid .cq-a  { font-size: 3.5cqw; }
  .tk-body.deck .cover-quote--long .cq-a { font-size: 2.1cqw; }
  .tk-body.deck .cover-quote figcaption  { font-size: .86cqw; }
}

/* ── MODEL SLIDES: THE CARD IS A FIGURE ─────────────────────────────────
   Readers took the two revenue models for static worked examples, because
   nothing distinguished a box that can be typed into from a printed one.
   A line under the heading was too easy to skip, so the card now carries
   its own instruction: the control that resets it sits in its top-right
   corner, where a control is looked for, and the caption beneath says what
   the figures are for. */
.model-figure {
  margin: 0; min-width: 0;
  display: flex; flex-direction: column;
}
.model-figure > .calc-panel { position: relative; flex: 1 1 auto; }
.model-cap {
  margin: .55rem 0 0;
  font-size: 12.5px; line-height: 1.45; color: var(--text-soft);
}
.panel--dark .model-cap { color: rgba(250,250,245,.78); }

.model-reset {
  position: absolute; top: .75rem; right: .8rem; z-index: 2;
  cursor: pointer;
  padding: .36rem .7rem;
  background: transparent; color: var(--text-soft);
  border: 1px solid var(--line); border-radius: 5px;
  font-family: inherit; font-size: 9.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  transition: color .15s, border-color .15s, background-color .15s;
}
.model-reset:hover { color: var(--plum-deep); border-color: var(--plum-deep); }
.model-reset:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.model-reset:active { transform: scale(.98); }
.model-reset.is-done { color: var(--gold-dk); border-color: var(--gold); }