/* PCF landing page prototype, v014.
   Built from the approved Paper draft v013 (8H5-0) and root DESIGN.md (Aqua).
   How it works and the syringe story are redesigned as animated blocks (see interactions/FLOW-SPEC.md). */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/poppins-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/poppins-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/poppins-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/poppins-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/roboto-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/poppins-latin-700-normal.woff2) format("woff2"); }

:root {
  --primary: #D3126C;
  --primary-strong: #B30F5C;
  --primary-on-dark: #F25C9B;
  --blush: #FFE5F1;
  --indigo: #43358B;
  --lilac: #A18ED4;
  --aqua: #00AB9A;
  --ink: #17181B;
  --slate: #535768;
  --muted: #9A9EAE;
  --line: #E9ECEF;
  --soft: #F8F8FA;
  --on-dark: #C9CBD3;
  --font: Poppins, "Helvetica Neue", Arial, sans-serif;
  --gutter: 40px;
  --header-h: 96px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
sub { font-size: .7em; vertical-align: -.25em; line-height: 0; }
em { font-style: normal; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.container { width: min(1200px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.dark :focus-visible { outline-color: #fff; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; }
.skip-link:focus { top: 12px; }
section[id], #nhs { scroll-margin-top: 80px; }

/* ---------- Type roles ---------- */
.eyebrow { font-size: 12px; font-weight: 600; line-height: 1.33; letter-spacing: .2em; text-transform: uppercase; color: var(--slate); }
.eyebrow-dark { color: var(--on-dark); }
.kicker { font-size: 12px; font-weight: 700; line-height: 1.33; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.kicker-slate { color: var(--slate); }
.kicker-pink { color: var(--primary-on-dark); }
/* Paper v013 was drawn in the system sans; Poppins (DESIGN.md) is wider, so display/headline sizes are
   trimmed slightly (64→60, 56→50) to keep Paper's two-line heading breaks. Recorded in the v014 plan. */
.display { font-size: 60px; font-weight: 300; line-height: 1.07; letter-spacing: -.02em; }
.display-md { font-size: 68px; font-weight: 300; line-height: 1.06; letter-spacing: -.02em; }
.headline { font-size: 50px; font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }
.headline-sm { font-size: 44px; font-weight: 300; line-height: 1.14; letter-spacing: -.02em; }
.display em, .display-md em, .headline em, .headline-sm em { display: block; color: var(--primary); }
/* DESIGN.md text roles: all magenta text on dark surfaces is primary-on-dark (#F25C9B) */
.dark .display em, .dark .display-md em, .dark .headline em, .dark .headline-sm em { color: var(--primary-on-dark); }
.body-lg { font-size: 18px; line-height: 1.5; color: var(--slate); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
.btn .arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-strong); }
.btn-primary:hover .arrow { transform: translateX(2px); }
.btn-secondary { border: 1px solid var(--slate); color: var(--slate); background: #fff; padding: 0 20px; }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover .arrow-down { transform: translateY(2px); }
.btn-header { height: 48px; padding: 0 22px; font-size: 14px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0); transition: background-color .2s, box-shadow .2s; }
.site-header.is-scrolled { background: rgba(255,255,255,.96); box-shadow: 0 1px 0 var(--line); backdrop-filter: saturate(1.4) blur(8px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); transition: height .2s; }
.site-header.is-scrolled .header-inner { height: var(--hdr-s); }
.logo img { width: 57px; height: auto; transition: width .2s; }
.site-header.is-scrolled .logo img { width: 44px; }
.primary-nav { display: flex; gap: 32px; }
.primary-nav a { font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; padding: 6px 0; background: linear-gradient(var(--primary), var(--primary)) left bottom / 0 2px no-repeat; transition: background-size .15s, color .15s; }
.primary-nav a:hover { color: var(--primary); background-size: 100% 2px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.menu-toggle { display: none; height: 44px; padding: 0 16px; border: 1px solid var(--slate); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }

/* ---------- Hero ---------- */
.hero { padding: 24px 0 104px; }
.hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hero-copy { width: 572px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.hero-copy .lede { font-size: 18px; line-height: 1.5; color: var(--slate); max-width: 540px; padding-top: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }
.hero-visual { position: relative; width: 604px; height: 744px; flex-shrink: 0; }

.cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cat-title { font-size: 14px; font-weight: 600; line-height: 1.43; }
.cat-sub { font-size: 12px; line-height: 1.4; color: var(--slate); }
.cat-before { position: absolute; left: 0; top: 0; width: 456px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 36px rgba(67,53,139,.08); }
.cat-search { display: flex; align-items: center; gap: 8px; width: 150px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); font-size: 12px; color: var(--slate); flex-shrink: 0; }
.cat-search svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 136px); gap: 8px; }
.cat-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cat-icon { height: 84px; background: var(--soft); display: grid; place-items: center; }
.cat-icon svg { width: 44px; height: 44px; fill: #fff; stroke: var(--slate); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cat-card p { padding-inline: 12px; }
.cc-name { padding-top: 10px; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.cc-unit { font-size: 11px; line-height: 15px; color: var(--slate); }
.cc-price { padding: 4px 12px 12px; font-size: 13px; font-weight: 600; line-height: 18px; }

.cat-after { position: absolute; left: 112px; top: 196px; width: 492px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 2px solid var(--primary); border-radius: 18px; box-shadow: 0 24px 64px rgba(179,15,92,.18); }
.lines-pill { display: inline-block; line-height: 28px; height: 28px; flex-shrink: 0; padding: 0 12px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prod { border: 1px solid #F0E3EA; border-radius: 12px; overflow: hidden; background: #fff; }
.prod img { width: 100%; height: 96px; object-fit: cover; background: #EFEFED; }
.prod-body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 2px; }
.pn { font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; line-height: 15px; color: var(--slate); }
.pm b { font-size: 12px; font-weight: 600; color: var(--ink); }
.co2-pill { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--blush); color: var(--primary-strong); font-size: 12px; font-weight: 600; white-space: nowrap; }
.coverage { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.coverage-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--blush); overflow: hidden; }
.coverage-bar span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--primary); transform-origin: left; }
.coverage-label { font-size: 12px; font-weight: 600; color: var(--primary); white-space: nowrap; }

/* Hero entrance (JS + motion only) */
.js .hero-visual.is-armed .co2-pill { opacity: 0; transform: translateY(4px) scale(.96); }
.js .hero-visual.is-armed .coverage-bar span { transform: scaleX(0); }
.js .hero-visual.is-playing .co2-pill { opacity: 1; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 300ms); }
.js .hero-visual.is-playing .coverage-bar span { transform: scaleX(1); transition: transform 1.3s var(--ease) .1s; }

/* ---------- How it works: animated flow ---------- */
.how { padding: 104px 0; background: var(--soft); }
.section-intro.centred { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; margin-bottom: 64px; }
.section-intro.centred .body-lg { max-width: 700px; }

.flow { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.flow-src li span:first-child, .flow-out li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zone { position: relative; z-index: 1; border-radius: 24px; padding: 32px; border: 1px solid; min-height: 640px; display: flex; flex-direction: column; gap: 32px; }
.zone-1 { background: #fff; border-color: var(--line); }
.zone-2 { background: #F3F0FC; border-color: #E6E0F7; }
.zone-3 { background: #FFF2F8; border-color: #F7D9E7; }
.zone-head { display: flex; flex-direction: column; gap: 10px; min-height: 196px; }
.zone-num { font-size: 64px; font-weight: 300; line-height: 1; letter-spacing: -.03em; color: var(--slate); }
.zone-2 .zone-num { color: var(--slate); }
.zone-3 .zone-num { color: var(--primary); }
.zone-title { font-size: 22px; font-weight: 500; line-height: 1.4; }
.zone-text { font-size: 15px; line-height: 1.47; color: var(--slate); }

.flow-src, .flow-out { display: flex; flex-direction: column; gap: 10px; }
.flow-src li, .flow-out li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 38px; padding: 0 12px; border-radius: 8px; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.flow-src li { background: var(--soft); border: 1px dashed #CDD1D9; color: var(--slate); font-family: "Roboto Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: -.01em; transform: translateX(var(--mx)) rotate(var(--mr)); transition: transform .5s var(--ease), opacity .4s, border-color .3s; }
.flow-src li span:last-child { color: var(--slate); }
.flow-src li::after { content: "✓"; position: absolute; right: 4px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--indigo); color: #fff; font-family: var(--font); font-size: 11px; font-weight: 700; display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s var(--ease); }
.flow-out li { background: #fff; border: 1px solid #F3D3E2; box-shadow: 0 1px 2px rgba(23,24,27,.04); font-weight: 500; color: var(--ink); }
.flow-out li b { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--blush); color: var(--primary-strong); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; transition: transform .3s var(--ease), opacity .3s; }
.flow-done { margin-top: auto; font-size: 12px; line-height: 1.4; color: var(--slate); }

.engine { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #D9D3F0; box-shadow: 0 10px 30px rgba(67,53,139,.08); align-self: stretch; margin-block: 6px 46px; }
.engine-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-align: center; }
.engine-steps { display: flex; flex-direction: column; gap: 10px; }
.engine-steps li { position: relative; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid #D9D3F0; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; transition: background-color .18s, color .18s, border-color .18s, box-shadow .18s; }
.engine-steps li + li::before { content: ""; position: absolute; top: -11px; left: 50%; width: 1px; height: 10px; background: #D9D3F0; }
.engine-steps li.is-lit { background: var(--indigo); border-color: var(--indigo); color: #fff; box-shadow: 0 0 0 6px rgba(67,53,139,.12); }

.flow-paths { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.flow-paths path { fill: none; stroke: #CBC3EA; stroke-width: 1.25; stroke-dasharray: 3 5; opacity: .9; }
.flow-paths .dot { fill: var(--primary); }
.flow-paths .dot-halo { fill: rgba(211,18,108,.18); }
.flow-src li { padding-right: 26px; }
.replay[hidden] { display: none; }
.replay { position: absolute; right: 28px; top: 30px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--primary); cursor: pointer; }
.replay svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.replay:hover { text-decoration: underline; }

/* Flow states: armed = start state; done = rows landed */
.js .flow.is-armed .flow-out li { opacity: 0; transform: translateX(-12px); }
.js .flow.is-armed .flow-out li b { opacity: 0; transform: scale(.7); }
.js .flow.is-armed .flow-done { opacity: 0; }
.js .flow .flow-out li { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.js .flow .flow-out li.is-in { opacity: 1; transform: none; }
.js .flow .flow-out li.is-in b { opacity: 1; transform: none; transition-delay: .12s; }
.js .flow .flow-src li.is-done { opacity: .55; transform: translateX(0) rotate(0); border-color: #B9B0DF; }
.js .flow .flow-src li.is-done::after { opacity: 1; transform: scale(1); }
.js .flow.is-settled .flow-src li { transform: translateX(calc(var(--mx) * .4)) rotate(calc(var(--mr) * .4)); }
.js .flow.is-complete .flow-done { opacity: 1; transition: opacity .4s; }

/* ---------- Split section intro ---------- */
.split { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 48px; }
.split-head { width: 720px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.split-text { width: 456px; padding-top: 40px; font-size: 16px; line-height: 1.5; color: var(--slate); }
.dark .split-text { color: var(--on-dark); }

/* ---------- Evidence ladder ---------- */
.evidence { padding: 104px 0; background: linear-gradient(180deg, #fff 0%, #fff 55%, #FFF7FA 100%); border-bottom: 1px solid var(--line); }
.ev-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 48px; }
.ev-pill { display: inline-block; padding: 12px 20px; border-radius: 999px; background: #fff; border: 1px solid #E3E5EA; box-shadow: 0 4px 14px rgba(23,24,27,.05); font-size: 16px; font-weight: 600; line-height: 1.25; }
.ev-pill-strong { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: none; }
.ev-arrow { font-size: 18px; font-weight: 600; color: var(--primary); }
.ladder { display: flex; flex-direction: column; gap: 16px; }
.ladder-groups { display: grid; grid-template-columns: 900px 288px; gap: 12px; }
.ladder-groups p { padding-bottom: 10px; border-bottom: 3px solid; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.33; }
.lg-evidence { color: var(--primary); border-color: var(--primary) !important; }
.lg-model { color: var(--ink); border-color: var(--ink) !important; }
.ladder-steps { display: flex; align-items: flex-end; gap: 12px; height: 340px; }
.tier { width: 216px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; border-radius: 20px; border: 1px solid rgba(211,18,108,.18); }
.t1 { height: 340px; background: #FBD3E6; }
.t2 { height: 300px; background: #FDDDEC; border-color: rgba(211,18,108,.16); }
.t3 { height: 260px; background: var(--blush); border-color: rgba(211,18,108,.14); }
.t4 { height: 220px; background: #FFF0F6; border-color: rgba(211,18,108,.12); }
.t5 { width: 288px; height: 340px; justify-content: space-between; padding: 24px 26px; background: var(--ink); border: 0; box-shadow: 0 16px 40px rgba(23,24,27,.18); color: #fff; }
.tier-top { display: flex; flex-direction: column; gap: 8px; }
.tier-n { font-size: 36px; font-weight: 600; line-height: 1.1; color: var(--primary-strong); }
.t5 .tier-n { color: var(--primary-on-dark); }
.tier-t { font-size: 20px; font-weight: 600; line-height: 1.3; }
.tier-d { font-size: 14px; line-height: 1.43; color: var(--slate); }
.t5 .tier-d { color: var(--on-dark); }
/* MRIO tier: a light preview of the product-knowledge stats (v015 replaces the 180.7m figure) */
.tier-know { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.tk-lead { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--on-dark); }
.tk-row { display: flex; align-items: baseline; gap: 10px; }
.tk-row b { min-width: 58px; font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; color: var(--primary-on-dark); font-variant-numeric: tabular-nums; }
.tk-row span { font-size: 13px; line-height: 1.35; color: var(--on-dark); }
.tk-link { align-self: flex-start; margin-top: 2px; font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); transition: border-color .15s; }
.tk-link:hover { border-color: #fff; }
.ladder-axis { display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }

/* ---------- Syringe story ---------- */
.story { position: relative; padding: 104px 0 0; background: #fff; overflow: clip; }
.story-glow { position: absolute; left: 270px; top: 420px; width: 900px; height: 620px; border-radius: 50%; opacity: .16; filter: blur(100px); background: linear-gradient(135deg, var(--aqua) 4%, #CFEBC5 32%, #EEF5F2 78%, transparent); pointer-events: none; }
.story .split { position: relative; }
.story-track { position: relative; }
.story-sticky { position: relative; padding: 16px 0 104px; }
.story-layout { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: center; }

.story-rail { display: flex; flex-direction: column; gap: 4px; }
.story-rail button { width: 100%; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; row-gap: 4px; padding: 16px 16px 16px 0; border: 0; border-top: 2px solid var(--line); background: none; text-align: left; cursor: pointer; transition: border-color .3s; }
.sr-n { grid-row: span 2; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--slate); padding-top: 3px; transition: color .3s; }
.sr-t { font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--slate); transition: color .3s; }
.sr-d { grid-column: 2; font-size: 14px; line-height: 1.5; color: var(--slate); opacity: 0; max-height: 0; overflow: hidden; transition: max-height .45s var(--ease), opacity .35s; }
.story-rail button:hover .sr-t { color: var(--ink); }
.story-rail button[aria-current="step"] { border-top-color: var(--primary); }
.story-rail button[aria-current="step"] .sr-n { color: var(--primary); }
.story-rail button[aria-current="step"] .sr-t { color: var(--ink); }
.story-rail button[aria-current="step"] .sr-d { opacity: 1; max-height: 140px; }

.stage { position: relative; height: 560px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 48px rgba(67,53,139,.10); overflow: hidden; }
.layer { position: absolute; inset: 0; padding: 32px 36px; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), transform .55s var(--ease), visibility 0s linear .55s; }
[data-step="1"] .l-grid, [data-step="4"] .l-grid, [data-step="2"] .l-focus, [data-step="3"] .l-recipe { opacity: 1; visibility: visible; transition: opacity .5s var(--ease) .1s, transform .55s var(--ease) .1s, visibility 0s; }
[data-step="2"] .l-grid { opacity: .0; transform: scale(.96); }
[data-step="3"] .l-focus { transform: translateY(-14px); }
[data-step="2"] .l-recipe { transform: translateY(14px); }

/* Layer: catalogue grid */
.l-grid { display: flex; flex-direction: column; gap: 16px; }
.sg-head { display: flex; justify-content: space-between; align-items: baseline; }
.sg-head p { font-size: 15px; font-weight: 600; }
.sg-head span { font-size: 12px; color: var(--slate); }
.sg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sg-grid li { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; padding-bottom: 12px; transition: opacity .45s, transform .45s var(--ease), border-color .3s, box-shadow .3s; }
.sg-grid img { width: 100%; height: 118px; object-fit: cover; background: #EFEFED; margin-bottom: 10px; }
.sg-grid p { padding: 0 12px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.sg-grid span { display: block; padding: 0 12px; font-size: 12px; color: var(--slate); }
.sg-pill { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 600; opacity: 0; transform: scale(.7); transition: opacity .35s .45s, transform .35s var(--ease) .45s; }
[data-step="1"] .sg-syringe { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(211,18,108,.14); }
[data-step="4"] .sg-grid li:not(.sg-syringe) { opacity: .45; }
[data-step="4"] .sg-syringe { border-color: var(--primary); box-shadow: 0 10px 30px rgba(179,15,92,.18); transform: translateY(-4px); }
[data-step="4"] .sg-pill { opacity: 1; transform: none; }
/* Step 4: the sum that makes the box figure add up (v015) */
.sg-grid img { transition: height .45s var(--ease); }
[data-step="4"] .sg-grid img { height: 78px; }
.sg-sum { margin-top: auto; padding: 14px 18px; border-radius: 16px; background: var(--ink); color: #fff; opacity: 0; transform: translateY(10px); transition: opacity .4s .6s, transform .45s var(--ease) .6s; }
[data-step="1"] .sg-sum { display: none; }
[data-step="4"] .sg-sum { opacity: 1; transform: none; }
.sgs-head { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark); margin-bottom: 8px; }
.sgs-eq { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.sgs-eq li { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.sgs-eq b { font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; }
.sgs-eq span { font-size: 11.5px; line-height: 1.3; color: var(--on-dark); }
.sgs-eq .op { padding-top: 1px; font-size: 18px; color: var(--on-dark); }
.sgs-eq .sgs-total { padding: 6px 10px; margin: -6px -10px; border-radius: 10px; background: var(--primary); }
.sgs-eq .sgs-total span { color: #fff; }
[data-step="4"] .sgs-eq li { opacity: 0; animation: sgs-in .35s var(--ease) forwards; }
[data-step="4"] .sgs-eq li:nth-child(1) { animation-delay: .75s; } [data-step="4"] .sgs-eq li:nth-child(2), [data-step="4"] .sgs-eq li:nth-child(3) { animation-delay: .95s; }
[data-step="4"] .sgs-eq li:nth-child(4), [data-step="4"] .sgs-eq li:nth-child(5) { animation-delay: 1.15s; } [data-step="4"] .sgs-eq li:nth-child(6), [data-step="4"] .sgs-eq li:nth-child(7) { animation-delay: 1.35s; }
[data-step="4"] .sgs-eq li:nth-child(8), [data-step="4"] .sgs-eq li:nth-child(9) { animation-delay: 1.6s; }
@keyframes sgs-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Layer: focus */
.l-focus { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.focus-img { border-radius: 18px; overflow: hidden; background: #EFEFED; aspect-ratio: 3 / 2; box-shadow: 0 12px 30px rgba(23,24,27,.08); transform: scale(.92); transition: transform .6s var(--ease) .15s; }
.focus-img img { width: 100%; height: 100%; object-fit: cover; }
[data-step="2"] .focus-img { transform: none; }
.focus-entry { display: flex; flex-direction: column; gap: 8px; }
.fe-name { font-size: 22px; font-weight: 500; line-height: 1.4; }
.fe-ref { font-size: 14px; color: var(--slate); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.chips li { padding: 5px 10px; border-radius: 999px; background: #F1F2F5; color: var(--slate); font-size: 12px; font-weight: 600; line-height: 1.3; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
.chips .chip-strong { background: #EEEBFA; color: var(--ink); }
[data-step="2"] .chips li { opacity: 1; transform: none; }
[data-step="2"] .chips li:nth-child(1) { transition-delay: .45s; }
[data-step="2"] .chips li:nth-child(2) { transition-delay: .6s; }
[data-step="2"] .chips li:nth-child(3) { transition-delay: .75s; }
[data-step="2"] .chips li:nth-child(4) { transition-delay: .9s; }
[data-step="2"] .chips li:nth-child(5) { transition-delay: 1.05s; }
[data-step="2"] .chips li:nth-child(6) { transition-delay: 1.2s; }

/* Layer: recipe */
.l-recipe { display: flex; flex-direction: column; gap: 18px; }
.rc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rc-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--blush); color: var(--primary-strong); font-size: 12px; font-weight: 600; white-space: nowrap; }
.syr { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.syr-svg { width: 100%; height: auto; overflow: visible; }
.part rect, .part path { fill: #DFF5F2; stroke: #00897B; stroke-width: 1.5; }
.p-barrel .glass { fill: rgba(223,245,242,.6); }
.p-barrel .ticks { fill: none; stroke: #00897B; stroke-width: 1.2; }
.p-seal rect { fill: var(--blush); stroke: var(--primary); }
.p-needle rect { fill: var(--slate); stroke: none; }
.p-cap path { fill: rgba(223,245,242,.55); }
.part { transition: transform .8s var(--ease) .35s; }
[data-step="3"] .p-rod { transform: translateX(-40px); }
[data-step="3"] .p-seal { transform: translateX(28px); }
[data-step="3"] .p-barrel { transform: translateX(180px); }
[data-step="3"] .p-hub { transform: translateX(232px); }
[data-step="3"] .p-needle { transform: translateX(262px); }
[data-step="3"] .p-cap { transform: translateX(470px); }
.parts { position: relative; height: 128px; }
.lab { position: absolute; top: 0; width: 140px; margin-left: -70px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s var(--ease); }
.lab.low { top: 62px; }
.lab b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.lab span { font-size: 12px; color: var(--slate); line-height: 1.35; }
.lab em { font-size: 14px; font-weight: 600; color: var(--primary); }
.l-rod { left: 8.6%; } .l-seal { left: 26.3%; } .l-barrel { left: 42.5%; } .l-hub { left: 60.6%; } .l-needle { left: 72%; } .l-cap { left: 89.6%; }
[data-step="3"] .lab { opacity: 1; transform: none; }
[data-step="3"] .lab:nth-child(1) { transition-delay: 1.0s; } [data-step="3"] .lab:nth-child(2) { transition-delay: 1.1s; }
[data-step="3"] .lab:nth-child(3) { transition-delay: 1.2s; } [data-step="3"] .lab:nth-child(4) { transition-delay: 1.3s; }
[data-step="3"] .lab:nth-child(5) { transition-delay: 1.4s; } [data-step="3"] .lab:nth-child(6) { transition-delay: 1.5s; }
.rc-foot { display: flex; align-items: center; gap: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.libgrid { width: 284px; height: 56px; flex-shrink: 0; display: grid; grid-template-columns: repeat(30, 1fr); grid-template-rows: repeat(4, 1fr); gap: 3px; }
.libgrid i { border-radius: 2px; background: #E9ECEF; transition: background-color .4s; }
[data-step="3"] .libgrid i.hit { background: var(--c); transition-delay: var(--d); }
.rc-lib { display: flex; flex-direction: column; gap: 4px; }
.rc-lib p:last-child { font-size: 13px; line-height: 1.5; color: var(--slate); }

/* Pinned mode (desktop, motion allowed) */
.story-track.is-pinned { height: 420vh; }
.story-track.is-pinned .story-sticky { position: sticky; top: var(--hdr-s); height: calc(100vh - var(--hdr-s)); padding: 0; display: flex; align-items: center; }
.story-track.is-pinned .story-layout { width: min(1200px, calc(100% - 2 * var(--gutter))); }
.story-track.is-pinned + .sr-only, .story-track.is-pinned ~ table { position: absolute; }
.story { padding-bottom: 0; }
.story-track:not(.is-pinned) .story-sticky { padding-bottom: 104px; }
/* No-JS: everything readable, step 3 shown, all rail captions open */
html:not(.js) .story-rail .sr-d { opacity: 1; max-height: none; }

/* ---------- Knowledge ---------- */
.dark { background: var(--ink); color: #fff; }
.knowledge { position: relative; padding: 104px 0; overflow: clip; }
.knowledge-glow { position: absolute; left: 760px; top: 40px; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(108,80,255,.22) 0%, rgba(211,18,108,.10) 55%, transparent 100%); pointer-events: none; }
.knowledge-inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.kn-copy { width: 470px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.kn-copy .headline { color: #fff; }
.kn-copy .body-lg { color: var(--on-dark); }
.kn-steps { padding-top: 8px; }
.kn-steps li { display: flex; gap: 20px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 16px; line-height: 1.5; color: var(--on-dark); }
.kn-steps li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.kn-steps span { width: 28px; flex-shrink: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 22px; color: var(--primary-on-dark); }
.kn-panel { width: 660px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; padding: 40px; border-radius: 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.kn-figs { display: flex; gap: 40px; }
.kn-fig { width: 240px; display: flex; flex-direction: column; gap: 6px; }
.kn-fig > p:last-child { font-size: 15px; line-height: 1.47; color: var(--on-dark); }
.kn-num { display: flex; align-items: baseline; gap: 10px; }
.kn-num b { font-size: 88px; font-weight: 300; line-height: 1; letter-spacing: -.03em; color: #fff; }
.kn-num span { font-size: 30px; font-weight: 300; line-height: 1.13; color: var(--primary-on-dark); }
.kn-rule { width: 1px; background: rgba(255,255,255,.14); }
.matrix-wrap { border-top: 1px solid rgba(255,255,255,.14); }
.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { height: 44px; padding: 0; border-top: 1px solid rgba(255,255,255,.08); }
.matrix thead th { height: 40px; border-top: 0; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--on-dark); text-align: center; width: 70px; }
.matrix thead th:first-child { width: 160px; text-align: left; font-size: 11px; letter-spacing: .08em; }
.matrix tbody th { text-align: left; font-size: 14px; font-weight: 400; color: var(--on-dark); }
.matrix tbody tr:last-child > * { border-bottom: 1px solid rgba(255,255,255,.08); }
.matrix td { text-align: center; }
.d { display: inline-block; vertical-align: middle; border-radius: 50%; overflow: hidden; text-indent: 100%; white-space: nowrap; font-size: 0; }
.d-l { width: 18px; height: 18px; } .d-m { width: 12px; height: 12px; } .d-s { width: 7px; height: 7px; }
.d-0 { width: 6px; height: 6px; border: 1px solid rgba(255,255,255,.22); }
.d.m { background: var(--primary-on-dark); } .d.l { background: var(--lilac); }
.matrix-note { padding-top: 14px; font-size: 12px; line-height: 1.5; color: var(--on-dark); }

/* ---------- Three ways ---------- */
.compare { padding: 104px 0; }
.compare .split { margin-bottom: 64px; }
.table-scroll { overflow-x: auto; }
.ways { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ways th, .ways td { text-align: left; vertical-align: top; font-size: 16px; line-height: 1.375; }
.ways thead td { width: 228px; }
.ways thead th { height: 64px; padding: 0 24px; vertical-align: middle; font-size: 18px; font-weight: 500; color: var(--slate); border-bottom: 1px solid var(--line); }
.ways thead th.us { background: var(--primary); color: #fff; font-size: 20px; font-weight: 600; border-radius: 16px 16px 0 0; border-bottom: 0; }
.ways tbody th { padding: 20px 0; font-weight: 600; border-bottom: 1px solid var(--line); }
.ways tbody td { padding: 20px 24px 20px 56px; position: relative; color: var(--slate); border-bottom: 1px solid var(--line); }
.ways tbody td.us { background: #FFF5FA; color: var(--ink); font-weight: 600; }
.ways tbody td.last { border-radius: 0 0 16px 16px; }
.ic { position: absolute; left: 24px; top: 21px; width: 20px; height: 20px; border-radius: 50%; }
.ic-yes { background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.2l3 3 6-6.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px; }
.ic-alt { background: var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.2l3 3 6-6.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px; }
.ic-mid { background: #EAA21E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10h9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/20px; }
.ic-no { border: 1.5px solid var(--muted); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.8 6.8l6.4 6.4M13.2 6.8l-6.4 6.4' fill='none' stroke='%23535768' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/20px; }
.footnote { margin-top: 40px; max-width: 690px; font-size: 13px; line-height: 1.46; color: var(--slate); }

/* ---------- Options + NHS ---------- */
.options { position: relative; padding: 104px 0; overflow: clip; }
.options-glow { position: absolute; left: calc(50% - 100px); top: 0; width: 960px; height: 960px; border-radius: 50%; background: radial-gradient(circle, rgba(120,220,190,.70) 0%, rgba(0,171,154,.38) 26%, rgba(0,171,154,.12) 48%, transparent 68%); pointer-events: none; }
.options .container { position: relative; }
.plans { display: flex; gap: 24px; }
/* Option cards (v015, owner request): both card bodies are dark by default; the card being pointed at
   (hover, keyboard focus or tap) turns white with magenta accents. Price bars and level squares never change. */
.plan { --accent: var(--primary); flex: 1; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.45); background: #1F2025; color: #fff; border: 2px solid #34353D; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); cursor: default; }
.plan-enhanced { --accent: var(--indigo); }
.plan-body { flex: 1; display: flex; flex-direction: column; padding: 40px 40px 36px; }
.plan-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.plan .kicker { color: var(--on-dark); transition: color .25s; }
.plan-level { display: flex; gap: 4px; }
.plan-level i { width: 14px; height: 14px; border-radius: 2px; }
.plan-rapid .plan-level i:first-child { background: var(--primary); } .plan-rapid .plan-level i:last-child { background: var(--line); }
.plan-enhanced .plan-level i { background: var(--lilac); }
.plan-name { font-size: 36px; font-weight: 600; line-height: 1.17; letter-spacing: -.01em; margin-bottom: 12px; }
.plan-desc { font-size: 18px; line-height: 1.5; color: var(--on-dark); margin-bottom: 28px; transition: color .25s; }
.plan-h { font-size: 15px; font-weight: 600; line-height: 1.33; margin-bottom: 12px; }
.plan-h-get { color: var(--primary-on-dark); margin-top: 28px; transition: color .25s; }
.plan-send li, .plan-get li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--on-dark); transition: color .25s; }
/* Active (pointed-at) card */
.plan:hover, .plan:focus-within, .plan.is-active { background: #fff; color: var(--ink); border-color: var(--accent); }
.plan:hover .kicker, .plan:focus-within .kicker, .plan.is-active .kicker { color: var(--primary); }
.plan:hover .plan-desc, .plan:focus-within .plan-desc, .plan.is-active .plan-desc { color: var(--slate); }
.plan:hover .plan-h-get, .plan:focus-within .plan-h-get, .plan.is-active .plan-h-get { color: var(--primary); }
.plan:hover li, .plan:focus-within li, .plan.is-active li { color: var(--ink); }
.plan:hover .plan-price, .plan:focus-within .plan-price, .plan.is-active .plan-price { color: #fff; }
.plan-send li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--lilac); flex-shrink: 0; }
.plan-get { display: flex; flex-direction: column; gap: 12px; }
.plan-get li::before { content: ""; width: 18px; height: 24px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24'%3E%3Cpath d='M3 12.5l4 4 8-9' fill='none' stroke='%23D3126C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; }
.plan-price { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 88px; padding: 20px 40px; color: #fff; }
.plan-rapid .plan-price { background: var(--primary); }
.plan-enhanced .plan-price { background: var(--indigo); }
.plan-price > span:first-child { font-size: 16px; font-weight: 600; }
.pp { display: flex; flex-direction: column; align-items: flex-end; }
.pp b { font-size: 22px; font-weight: 600; line-height: 1.27; }
.plan-enhanced .pp b { font-size: 20px; font-weight: 500; }
.pp small { font-size: 14px; line-height: 1.43; }

.extras { display: grid; grid-template-columns: repeat(3, 384px); gap: 24px; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.14); }
.extras li { display: flex; flex-direction: column; gap: 14px; }
.ex-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(242,92,155,.14); }
.ex-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--primary-on-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ex-ic .fill { fill: var(--primary-on-dark); stroke: none; }
.extras h3 { font-size: 20px; font-weight: 500; line-height: 1.4; }
.extras p { font-size: 15px; line-height: 1.53; color: var(--on-dark); }

.nhs { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; margin-top: 40px; padding-top: 56px; border-top: 1px solid rgba(255,255,255,.14); }
.nhs-glow { position: absolute; left: 391px; top: 124px; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(211,18,108,.34) 0%, rgba(108,80,255,.14) 38%, transparent 70%); pointer-events: none; }
.nhs-copy { position: relative; width: 460px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.nhs-copy .headline-sm { color: #fff; }
.nhs-copy > p:not(.kicker):not(.source) { font-size: 16px; line-height: 1.5; color: var(--on-dark); }
.nhs-copy .source { font-size: 13px; line-height: 1.46; color: var(--on-dark); }
.nhs-copy .source a { color: inherit; text-underline-offset: 2px; }
.timeline { position: relative; width: 500px; flex-shrink: 0; display: flex; flex-direction: column; gap: 36px; padding-top: 8px; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 20px; bottom: 44px; width: 2px; background: rgba(161,142,212,.45); }
.timeline li { position: relative; min-height: 56px; display: grid; grid-template-columns: 24px 1fr; column-gap: 24px; row-gap: 4px; }
.tl-dot { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; border: 2px solid; }
.tl-when { font-size: 18px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.33; }
.tl-what { font-size: 15px; line-height: 1.47; }
.tl-past .tl-dot { background: #2A2B33; border-color: #6B6F80; }
.tl-past .tl-when, .tl-past .tl-what { color: var(--on-dark); }
.tl-now .tl-dot { background: var(--ink); border-color: var(--on-dark); }
.tl-now .tl-when, .tl-now .tl-what { color: var(--on-dark); }
.tl-next .tl-dot { background: var(--lilac); border-color: var(--lilac); }
.tl-next .tl-when { color: #fff; } .tl-next .tl-what { color: var(--on-dark); }
.tl-key .tl-dot { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 6px rgba(211,18,108,.25), 0 0 32px rgba(211,18,108,.6); }
.tl-key .tl-when { color: var(--primary-on-dark); font-weight: 700; } .tl-key .tl-what { color: #fff; font-weight: 600; }

.adoption { position: relative; display: flex; align-items: center; gap: 40px; margin-top: 40px; padding: 32px 40px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.adoption .ad-num { font-size: 64px; font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--primary-on-dark); flex-shrink: 0; }
.ad-rule { width: 1px; align-self: stretch; background: rgba(255,255,255,.14); flex-shrink: 0; }
.adoption h3 { font-size: 22px; font-weight: 600; line-height: 1.27; margin-bottom: 6px; }
.adoption p { font-size: 16px; line-height: 1.5; color: var(--on-dark); }

/* ---------- FAQ ---------- */
.faq { background: #CBD5DA; }
.faq-top { padding: 104px 0 24px; background: linear-gradient(180deg, #fff 0%, #fff 18%, #EEF0F1 62%, #CBD5DA 100%); }
.faq-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.faq-head { width: 486px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.faq-list { width: 690px; flex-shrink: 0; padding-top: 40px; border-bottom: 1px solid #C3CBD1; }
.faq details { border-top: 1px solid #C3CBD1; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0; font-size: 16px; font-weight: 500; line-height: 1.5; cursor: pointer; list-style: none; transition: color .15s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--primary); }
.plus { position: relative; width: 24px; height: 24px; flex-shrink: 0; transition: transform .25s var(--ease); }
.plus::before, .plus::after { content: ""; position: absolute; left: 5px; top: 11.25px; width: 14px; height: 1.5px; border-radius: 1px; background: currentColor; }
.plus::after { transform: rotate(90deg); }
details[open] .plus { transform: rotate(45deg); }
.faq-a { padding: 0 48px 20px 0; font-size: 16px; line-height: 1.5; color: var(--slate); }
.faq-photo { position: relative; height: 560px; background: #CBD5DA url("photos/faq-container-ship.webp") center 78% / cover no-repeat; }
.faq-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #CBD5DA 0%, rgba(203,213,218,.55) 14%, rgba(203,213,218,0) 34%); }
.credit { position: absolute; right: 24px; bottom: 16px; font-size: 11px; line-height: 1.4; color: rgba(255,255,255,.85); }
.credit a { color: inherit; }

/* ---------- Closing + footer ---------- */
.closing { position: relative; padding: 80px 0; overflow: clip; }
.closing-ring { position: absolute; left: calc(50% + 570px); top: 190px; width: 460px; height: 460px; border-radius: 50%; border: 60px solid rgba(255,255,255,.10); pointer-events: none; }
.closing-inner { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.closing .headline { width: 690px; color: #fff; }
.closing-copy { width: 486px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.closing-copy p { font-size: 16px; line-height: 1.5; color: var(--on-dark); }
.site-footer { background: var(--soft); padding: 48px 0; }
.footer-inner { display: flex; align-items: center; gap: 24px; }
.footer-inner img { width: 38px; height: auto; }
.footer-inner p { font-size: 14px; line-height: 1.5; color: var(--slate); }

/* =================== Responsive =================== */
@media (max-width: 1240px) {
  .hero-copy { width: 46%; }
  .hero-visual { transform: scale(.9); transform-origin: right center; margin-left: -60px; }
  .split-head { width: 58%; }
  .split-text { width: 38%; }
  .ladder-groups { grid-template-columns: 1fr 288px; }
  .tier { width: auto; flex: 1; }
  .t5 { flex: 0 0 288px; }
  .kn-copy { width: 40%; }
  .kn-panel { width: 56%; }
  .kn-figs { gap: 24px; }
  .extras { grid-template-columns: repeat(3, 1fr); }
  .faq-head { width: 38%; } .faq-list { width: 58%; }
  .closing .headline { width: 58%; } .closing-copy { width: 38%; }
  .nhs-copy { width: 44%; } .timeline { width: 50%; }
}

.story-caption { display: none; }
@media (max-width: 1100px) {
  .story-layout { grid-template-columns: 1fr; gap: 16px; }
  .story-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .story-rail button { height: 100%; grid-template-columns: 1fr; align-content: start; padding: 12px 8px 12px 0; }
  .sr-n { grid-row: auto; padding: 0; }
  .sr-t { font-size: 14px; line-height: 1.35; }
  .story-rail .sr-d, .story-rail button[aria-current="step"] .sr-d { display: none; }
  .js .story-caption { display: block; min-height: 3em; font-size: 15px; line-height: 1.5; color: var(--slate); }
  .ladder-steps { height: auto; flex-wrap: wrap; align-items: stretch; }
  .tier { height: auto !important; flex: 1 1 calc(25% - 12px); min-height: 180px; }
  .t5 { flex: 1 1 100%; min-height: 0; flex-direction: row; align-items: flex-end; }
  .ladder-groups { display: none; }
  .knowledge-inner { flex-direction: column; align-items: stretch; gap: 48px; }
  .kn-copy, .kn-panel { width: auto; }
}

@media (max-width: 959px) {
  :root { --gutter: 32px; --header-h: 76px; }
  .primary-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px; background: #fff; box-shadow: 0 12px 24px rgba(23,24,27,.08); border-top: 1px solid var(--line); }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--line); background: none; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .site-header { background: rgba(255,255,255,.96); box-shadow: 0 1px 0 var(--line); }
  .logo img { width: 44px; }
  .hero { padding: 32px 0 80px; }
  .hero-inner { flex-direction: column; align-items: stretch; gap: 48px; }
  .hero-copy { width: auto; }
  .hero-visual { transform: none; margin: 0 auto; width: min(604px, 100%); height: auto; }
  .cat-before { display: none; }
  .cat-after { position: static; width: 100%; }
  .display { font-size: 52px; }
  .display-md { font-size: 52px; }
  .headline { font-size: 44px; }
  .headline-sm { font-size: 36px; }
  .split, .faq-inner, .closing-inner, .nhs { flex-direction: column; gap: 24px; }
  .split-head, .split-text, .faq-head, .faq-list, .closing .headline, .closing-copy, .nhs-copy, .timeline { width: 100%; }
  .split-text { padding-top: 0; }
  .faq-list { padding-top: 16px; }
  .nhs { gap: 40px; }
  .nhs-glow { left: 20%; top: 40%; }
  .how, .evidence, .compare, .options, .knowledge { padding: 80px 0; }
  .story { padding-top: 80px; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .zone { min-height: 0; padding: 24px; gap: 20px; }
  .zone-head { min-height: 0; }
  .zone-num { font-size: 48px; }
  .zone + .zone::before { content: ""; position: absolute; top: -16px; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
  .engine { margin: 0; }
  .flow-paths { display: none; }
  .replay { bottom: auto; top: 16px; }
  .plans { flex-direction: column; }
  .extras { grid-template-columns: 1fr; }
  .ways { width: 920px; }
  .stage { height: auto; }
  .layer { position: relative; inset: auto; display: none; padding: 24px; }
  [data-step="1"] .l-grid, [data-step="4"] .l-grid, [data-step="3"] .l-recipe { display: flex; }
  [data-step="2"] .l-focus { display: grid; }
  [data-step="4"] .l-grid { padding-bottom: 24px; }
  .sgs-eq { flex-wrap: wrap; justify-content: flex-start; gap: 10px 12px; }
  .sgs-eq .sgs-total { margin: 0; }
  .rc-head { flex-direction: column; align-items: flex-start; }
  .l-focus { grid-template-columns: 1fr; gap: 20px; align-content: start; }
  .closing-ring { display: none; }
}

@media (max-width: 639px) {
  :root { --gutter: 20px; }
  .btn-header { display: none; }
  .display { font-size: 42px; line-height: 1.05; }
  .display-md, .headline { font-size: 36px; line-height: 1.08; }
  .headline-sm { font-size: 30px; }
  .body-lg, .hero-copy .lede { font-size: 17px; }
  .actions .btn { width: 100%; justify-content: center; }
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-head { flex-wrap: wrap; }
  .tier { flex: 1 1 calc(50% - 12px); }
  .t5 { flex-direction: column; align-items: flex-start; gap: 20px; }
  .kn-figs { flex-direction: column; gap: 20px; }
  .kn-rule { width: auto; height: 1px; }
  .kn-num b { font-size: 64px; }
  .kn-panel { padding: 24px; }
  .matrix-wrap { overflow-x: auto; }
  .matrix { min-width: 520px; }
  .plan-body { padding: 28px 24px; }
  .plan-price { padding: 18px 24px; }
  .adoption { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .ad-rule { display: none; }
  .timeline { gap: 28px; }
  .faq-photo { height: 320px; }
  .story-rail { grid-template-columns: repeat(2, 1fr); }
  .sg-grid { grid-template-columns: repeat(2, 1fr); }
  .sg-grid img { height: 90px; }
  .parts { height: 116px; }
  .lab.low { top: 62px; }
  /* v041 · narrow labels so two-word names wrap ("Needle / hub", "Protective / cap") and neighbours keep clear space */
  .lab { width: 66px; margin-left: -33px; }
  .lab b { font-size: 12px; line-height: 1.2; } .lab span { display: none; }
  .lab em { line-height: 1.35; }
  .rc-foot { flex-direction: column; align-items: flex-start; }
  .libgrid { width: 100%; }
}

/* =================== Reduced motion =================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; }
}

/* =================== v016 density pass (page-only; owner request 12 Oct 2026) ===================
   Goal: each standard block (heading + content) fits in one screen on common scaled laptop viewports
   (1536×730 = 1080p at 125%, 1280×620 = 1080p at 150%), while big screens keep roughly the v015 look.
   Driven by viewport height (most waste is vertical); big type and spacing shrink in steps. Body text stays ≥ 14px. */
:root {
  --viz: 1; --sec-pad: 104px; --gap-lg: 64px; --gap-md: 48px;
  --h1: 60px; --h2: 50px; --h2-md: 68px; --h3: 44px;
  --hero-zw: 1; --hero-zh: 1; --hdr-s: 76px;
}
@media (max-width: 1240px) { :root { --hero-zw: .9; } }
@media (max-width: 1100px) { :root { --hero-zw: .82; } }
@media (min-width: 960px) and (max-height: 960px) { :root { --viz: .9;  --sec-pad: 84px; --gap-lg: 48px; --gap-md: 36px; --h1: 56px; --h2: 46px; --h2-md: 60px; --h3: 40px; --hero-zh: .92; } }
@media (min-width: 960px) and (max-height: 820px) { :root { --viz: .8;  --sec-pad: 64px; --gap-lg: 36px; --gap-md: 28px; --h1: 50px; --h2: 40px; --h2-md: 50px; --h3: 36px; --hero-zh: .8; --header-h: 80px; --hdr-s: 64px; } }
@media (min-width: 960px) and (max-height: 700px) { :root { --viz: .7;  --sec-pad: 48px; --gap-lg: 26px; --gap-md: 22px; --h1: 42px; --h2: 34px; --h2-md: 40px; --h3: 30px; --hero-zh: .68; --header-h: 68px; --hdr-s: 58px; } }
html { scroll-padding-top: calc(var(--hdr-s) + 8px); }
section[id], #nhs { scroll-margin-top: calc(var(--hdr-s) + 4px); }

@media (min-width: 960px) {
  .site-header.is-scrolled .logo img { width: calc(var(--hdr-s) * .58); }
  /* Type */
  .display { font-size: var(--h1); }
  .display-md { font-size: var(--h2-md); }
  .headline { font-size: var(--h2); }
  .headline-sm { font-size: var(--h3); }
  /* Section rhythm */
  .hero { padding-bottom: var(--sec-pad); }
  .how, .evidence, .compare, .options, .knowledge { padding-block: var(--sec-pad); }
  .story { padding-top: var(--sec-pad); }
  .story-track:not(.is-pinned) .story-sticky { padding-bottom: var(--sec-pad); }
  .faq-top { padding-top: var(--sec-pad); }
  .closing { padding-block: calc(var(--sec-pad) * .8); }
  .section-intro.centred { margin-bottom: var(--gap-lg); gap: calc(24px * var(--viz)); }
  .split, .compare .split { margin-bottom: var(--gap-md); }
  .split-head { gap: calc(24px * var(--viz)); }
  .split-text { padding-top: calc(40px * var(--viz)); }

  /* Hero: the catalogue pair is a fixed composition, so it is zoomed as a whole */
  .hero-visual { transform: none; margin-left: 0; zoom: min(var(--hero-zw), var(--hero-zh)); }
  .hero-copy { gap: calc(24px * var(--viz)); }

  /* How it works */
  .zone { min-height: calc(640px * var(--viz)); padding: calc(32px * var(--viz)); gap: calc(28px * var(--viz)); }
  .zone-head { min-height: calc(196px * var(--viz)); gap: calc(10px * var(--viz)); }
  .zone-num { font-size: calc(64px * var(--viz)); }
  .flow-src, .flow-out { gap: calc(10px * var(--viz)); }
  .flow-src li, .flow-out li { height: max(30px, calc(38px * var(--viz))); }
  .engine { padding: calc(24px * var(--viz)); margin-block: 0 calc(46px * var(--viz)); gap: calc(14px * var(--viz)); }
  .engine-steps { gap: calc(10px * var(--viz)); }
  .engine-steps li { height: max(34px, calc(44px * var(--viz))); }

  /* Evidence ladder: the staircase keeps its proportions but never clips its text */
  .ev-flow { margin-bottom: var(--gap-md); }
  .ev-pill { padding-block: calc(12px * var(--viz)); }
  .ladder { gap: calc(16px * var(--viz)); }
  .ladder-steps { height: auto; }
  .tier { padding: calc(24px * var(--viz)) 22px; gap: calc(8px * var(--viz)); height: auto; }
  .t1, .t5 { min-height: calc(340px * var(--viz)); } .t2 { min-height: calc(300px * var(--viz)); }
  .t3 { min-height: calc(260px * var(--viz)); } .t4 { min-height: calc(220px * var(--viz)); }
  .tier-n { font-size: calc(36px * var(--viz)); }
  .tier-know { padding-top: calc(16px * var(--viz)); gap: calc(8px * var(--viz)); }

  /* Syringe story: stage height follows the screen */
  .stage { height: min(560px, calc(100vh - var(--hdr-s) - 40px)); }
  .layer { padding: calc(32px * var(--viz)) calc(36px * var(--viz)); }
  .l-grid { gap: calc(16px * var(--viz)); }
  .sg-grid img { height: calc(118px * var(--viz)); }
  [data-step="4"] .sg-grid img { height: calc(78px * var(--viz)); }
  .story-rail button { padding-block: calc(16px * var(--viz)); }

  /* Product knowledge */
  .kn-copy { gap: calc(24px * var(--viz)); }
  .kn-steps li { padding-block: calc(16px * var(--viz)); }
  .kn-panel { padding: calc(40px * var(--viz)); gap: calc(28px * var(--viz)); }
  .kn-num b { font-size: calc(88px * var(--viz)); }
  .kn-num span { font-size: calc(30px * var(--viz)); }
  .matrix th, .matrix td { height: max(32px, calc(44px * var(--viz))); }

  /* Three ways */
  .ways thead th { height: calc(64px * var(--viz)); }
  .ways tbody th, .ways tbody td { padding-top: calc(20px * var(--viz)); padding-bottom: calc(20px * var(--viz)); }
  .ic { top: calc(20px * var(--viz) + 1px); }
  .footnote { margin-top: calc(40px * var(--viz)); }

  /* Options + NHS */
  .plan-body { padding: calc(40px * var(--viz)) 40px calc(36px * var(--viz)); }
  .plan-desc { margin-bottom: calc(28px * var(--viz)); }
  .plan-h-get { margin-top: calc(28px * var(--viz)); }
  .plan-price { min-height: calc(88px * var(--viz)); padding-block: calc(20px * var(--viz)); }
  .extras { margin-top: calc(40px * var(--viz)); padding-top: calc(40px * var(--viz)); }
  .nhs { margin-top: calc(40px * var(--viz)); padding-top: calc(56px * var(--viz)); }
  .nhs-copy { gap: calc(24px * var(--viz)); }
  .timeline { gap: calc(36px * var(--viz)); }
  .adoption { margin-top: calc(40px * var(--viz)); padding-block: calc(32px * var(--viz)); }
  .adoption .ad-num { font-size: calc(64px * var(--viz)); }

  /* FAQ */
  .faq-head { gap: calc(24px * var(--viz)); }
  .faq-list { padding-top: calc(40px * var(--viz)); }
  .faq summary { min-height: max(48px, calc(64px * var(--viz))); padding-block: calc(16px * var(--viz)); }
  .faq-photo { height: calc(560px * var(--viz)); }
}
/* Short screens: a little less body copy height where it is safe */
@media (min-width: 960px) and (max-height: 700px) {
  .body-lg, .hero-copy .lede { font-size: 16px; }
  .zone-text, .extras p { font-size: 14px; }
  .ways th, .ways td { font-size: 15px; line-height: 1.33; }
  .plan-desc { font-size: 16px; }
  .plan-name { font-size: 30px; }
  .tier-t { font-size: 18px; }
}

/* Medium/short screens: tighter How it works and Three ways so each fits one screen */
@media (min-width: 960px) and (max-height: 820px) {
  /* How it works: one-line title, zone heads put the number beside the title */
  .how .display-md em { display: inline; }
  .how .section-intro .body-lg { font-size: 16px; max-width: 760px; }
  .zone { min-height: 0; }
  .zone-head { min-height: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; row-gap: 8px; }
  .zone-num { font-size: calc(44px * var(--viz)); }
  .zone-text { grid-column: 1 / -1; }
  .flow-src, .flow-out { gap: 6px; }
  .flow-src li, .flow-out li { height: max(30px, calc(36px * var(--viz))); }
  /* Three ways: tighter rows */
  .ways thead th { height: calc(56px * var(--viz)); }
  .ways tbody th, .ways tbody td { padding-top: calc(16px * var(--viz)); padding-bottom: calc(16px * var(--viz)); }
  .ic { top: calc(16px * var(--viz) + 1px); }
  .footnote { margin-top: 16px; }
}

/* Very short screens (≈1080p at 150%): final squeeze for How it works and the evidence ladder */
@media (min-width: 960px) and (max-height: 700px) {
  .how .section-intro.centred { gap: 12px; }
  .flow-src, .flow-out { gap: 4px; }
  .flow-src li, .flow-out li { height: 27px; font-size: 12.5px; }
  .flow-src li { font-size: 12px; }
  .zone { gap: 16px; }
  .split-text { padding-top: 8px; font-size: 15px; }
  .ev-flow { margin-bottom: 14px; gap: 10px; }
  .ev-pill { padding: 7px 14px; font-size: 14px; }
  .t1, .t5 { min-height: calc(300px * var(--viz)); } .t2 { min-height: calc(265px * var(--viz)); }
  .t3 { min-height: calc(230px * var(--viz)); } .t4 { min-height: calc(195px * var(--viz)); }
  .ladder-axis { padding-top: 8px; }
}
@media (min-width: 960px) { .site-header:not(.is-scrolled) .logo img { width: min(57px, calc(var(--header-h) * .68)); } }
/* Keep the staircase: step 1 always matches the MRIO card's height */
@media (min-width: 1101px) { .ladder-steps { align-items: flex-end; } .t1 { align-self: stretch; } }
@media (min-width: 1101px) {
  .ladder-steps[style*="--stair"] .t2 { min-height: calc(var(--stair) * .88); }
  .ladder-steps[style*="--stair"] .t3 { min-height: calc(var(--stair) * .765); }
  .ladder-steps[style*="--stair"] .t4 { min-height: calc(var(--stair) * .65); }
}
/* How it works: compact zone heads from 960px tall down (it is the tallest standard block) */
@media (min-width: 960px) and (min-height: 821px) {
  .how .display-md em { display: inline; }
  .zone { min-height: 0; }
  .zone-head { min-height: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; row-gap: 8px; }
  .zone-num { font-size: calc(48px * var(--viz)); }
  .zone-text { grid-column: 1 / -1; }
  .flow-src, .flow-out { gap: 8px; }
  .how .section-intro.centred { gap: 16px; }
}

/* =================== v017: "Start with the catalogue" as a staged build (owner request 12 Oct 2026) ===================
   Sequence: catalogue rows wipe in → scanner pass emits dots → GreenInsight wipes in → Classify / Find the recipe /
   Apply carbon data each spin then tick → scanner pass over the engine → PCF rows populate one by one.
   The white "wipe" band mimics Paper's AI-editing reveal (described by the owner; Paper does not document it). */
.flow-src li { transform: none !important; }
.flow-src, .flow-out, .zone-in, .zone-3 { position: relative; }
.zone { transition: background-color .5s var(--ease), border-color .5s var(--ease); }
.zone-in { flex: 1; display: flex; flex-direction: column; gap: inherit; }

/* Engine stage states */
.engine-steps li .st { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; opacity: 0; transition: opacity .2s; }
.engine-steps li.is-busy { background: var(--indigo); border-color: var(--indigo); color: #fff; box-shadow: 0 0 0 6px rgba(67,53,139,.12); }
.engine-steps li.is-busy .st { opacity: 1; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: st-spin .7s linear infinite; }
.engine-steps li.is-done { background: #EEEBFA; border-color: #D9D3F0; color: var(--ink); box-shadow: none; }
.engine-steps li.is-done .st { opacity: 1; background: var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.engine-status { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--slate); text-align: center; transition: opacity .3s; }

/* Scanned source rows */
.flow-src li { transition: opacity .4s, border-color .25s, background-color .25s, box-shadow .25s; }
.flow-src li.is-scanned { border-color: var(--primary); border-style: solid; background: #FFF5FA; box-shadow: 0 0 0 3px rgba(211,18,108,.10); }

/* Start state (JS + motion only): only zone 1's heading shows; zones 2 and 3 are empty dashed slots */
.js .flow.is-armed .zone-2:not(.z-on), .js .flow.is-armed .zone-3:not(.z-on) { background: rgba(255,255,255,.45); border-color: #D5D8DF; border-style: dashed; }
.js .flow.is-armed .flow-src, .js .flow.is-armed .zone-2 .zone-in, .js .flow.is-armed .zone-3 .zone-head,
.js .flow.is-armed .flow-done, .js .flow.is-armed .engine-status { opacity: 0; }
.js .flow.is-armed .flow-paths path { opacity: 0; transition: opacity .5s; }
.js .flow .flow-paths path.on { opacity: .9; }

/* The wipe band (Paper-style reveal) and the scanner line */
.wipe { position: absolute; left: -10px; right: -10px; top: 0; height: 120px; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 42%, rgba(255,255,255,.95) 58%, rgba(255,255,255,0) 100%); }
.wipe::after { content: ""; position: absolute; left: 0; right: 0; top: 58%; height: 1px; background: linear-gradient(90deg, transparent, rgba(161,142,212,.55), transparent); }
.scan { position: absolute; left: -8px; right: -8px; top: 0; height: 2px; z-index: 6; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--primary) 18%, var(--primary) 82%, transparent); box-shadow: 0 0 14px 2px rgba(211,18,108,.40); }
.scan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 56px; background: linear-gradient(180deg, rgba(211,18,108,0), rgba(211,18,108,.09)); }
.scan.indigo { background: linear-gradient(90deg, transparent, var(--indigo) 18%, var(--indigo) 82%, transparent); box-shadow: 0 0 14px 2px rgba(67,53,139,.40); }
.scan.indigo::before { background: linear-gradient(180deg, rgba(67,53,139,0), rgba(67,53,139,.10)); }
.zone-3 .zone-head { position: relative; }

/* =================== v022 · photo backdrop behind "Start with the catalogue" (owner, 12 Oct 2026) ===================
   Hazy layered ridges (Sven Pieren / Unsplash, ibikgDapcp4), hotlinked as Unsplash requires. Chosen in Paper v021 (option A1).
   The sky sits behind the eyebrow, headline and intro; the peaks rise just above the three zones and the photo
   fades out (mask) before the zones' content, so the animation still plays on plain fills.
   Desktop: the layer runs from the section top to just below the top of the zones. The image is sized to the
   viewport width (100vw × 2/3 high) and placed so the peaks sit --peak above the layer bottom, i.e. inside the intro–zones gap at every density step. */
.how { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.how .section-intro { position: relative; }
.how .section-intro::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; width: 100vw; transform: translateX(-50%);
  --ov: 130px; --peak: calc(var(--ov) + min(var(--gap-lg, 64px) * 2 - 20px, 80px)); /* peaks sit in the gap between the intro and the zones */
  top: calc(-1 * var(--sec-pad, 104px));
  bottom: calc(-1 * (var(--gap-lg, 64px) + var(--ov)));
  background: #EFEFF3 url("photos/how-snow-range.webp") no-repeat; /* v040: self-hosted (Thủy Vũ / Unsplash, s6iTrwNolEg); no credit needed */
  background-size: 100% auto;
  background-position: center bottom calc(var(--peak) - 32.5vw); /* v027: photo 13 — offset tuned so the ridge apex  rises just above the zones (bigger value = image sits lower) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 60%, rgba(0,0,0,.25) 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 60%, rgba(0,0,0,.25) 84%, transparent 100%);
}
.photo-credit { position: absolute; z-index: 2; right: 24px; top: 20px; margin: 0; font-size: 11px; line-height: 1.4; color: var(--slate); }
.photo-credit a { color: inherit; }
/* Narrow screens: the zones stack, so the photo becomes a short band of ridges between the intro and zone 01. */
@media (max-width: 959px) {
  .how .section-intro::before {
    /* 360px band; the peaks (≈45% down the image) land in the 64px gap above zone 01 */
    top: auto; height: 360px; bottom: calc(-1 * (64px + 164px));
    background-size: cover; background-position: center 54%; /* v027: = the ridge's height in photo 13, so it stays at 54% of the band at any width */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 50%, transparent 75%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 50%, transparent 75%);
  }
  .photo-credit { top: 12px; right: 16px; }
}

/* =================== v025 · seamless light sections, GreenInsight style (Paper v024 `AJC-0`; owner, 13 Oct 2026) ===================
   Light sections no longer meet at a colour edge: each starts and ends on its neighbour's colour, and soft glows cross
   the boundaries as matched halves (same full-width box, same radial gradient, anchored to the shared edge), alternating
   right → left → right: hero → How (lilac), How → evidence ladder (blush), ladder → syringe story (magenta-blush).
   The comparison and FAQ get a soft wash / glow. Dark sections are unchanged.
   Glows are gradients with no blur filter (DESIGN.md: prefer the cheaper radial construction for the same field). */
.hero, .how, .evidence, .story, .compare { position: relative; isolation: isolate; }
.hero, .evidence { overflow: hidden; overflow: clip; }

/* Hero: glow behind the catalogue (DESIGN.md "industry glow": aqua → lilac → violet, 26%) + lilac seam at the bottom right */
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(50% - 60px); top: 60px; width: min(1100px, 80vw); height: 900px;
  background: linear-gradient(85deg, #DFF5F2 0%, #A18ED4 55%, #6C50FF 100%); opacity: .45; /* above Paper's .26: the mask replaces Paper's blur and thins the field */
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, rgba(0,0,0,.55) 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 45%, rgba(0,0,0,.55) 72%, transparent 100%);
}
.hero::after, .how::before {
  content: ""; position: absolute; left: 0; right: 0; height: 320px; z-index: -1; pointer-events: none;
  --seam-lilac: rgba(161,142,212,.30) 0%, rgba(161,142,212,.14) 35%, rgba(161,142,212,0) 72%;
}
.hero::after { bottom: 0; background: radial-gradient(110% 100% at 100% 100%, var(--seam-lilac)); }
.how::before { top: 0; z-index: -2; background: radial-gradient(110% 100% at 100% 0%, var(--seam-lilac)); } /* under the photo, whose top is faded */

/* How: white at the top (joins the hero), mist through the zones, white at the bottom; blush seam at the bottom left */
.how { background: linear-gradient(180deg, #FFFFFF 0%, var(--soft) 16%, var(--soft) 58%, #FFFFFF 92%); } /* pure white before the edge, so no 1-unit step shows against the ladder */
.how::after, .evidence::before {
  content: ""; position: absolute; left: 0; right: 0; height: 360px; z-index: -2; pointer-events: none;
  --seam-blush: rgba(251,211,230,.55) 0%, rgba(255,229,241,.32) 38%, rgba(255,229,241,0) 74%;
}
.how::after { bottom: 0; background: radial-gradient(80% 100% at 0% 100%, var(--seam-blush)); }
.evidence::before { top: 0; z-index: -1; background: radial-gradient(80% 100% at 0% 0%, var(--seam-blush)); }

/* Evidence ladder: no border; ends on blush; magenta-blush seam at the bottom right continues into the story */
.evidence { border-bottom: 0; background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #FFF7FA 100%); }
.evidence::after, .story::before {
  content: ""; position: absolute; left: 0; right: 0; height: 380px; z-index: -1; pointer-events: none;
  --seam-mag: rgba(242,92,155,.16) 0%, rgba(255,229,241,.45) 36%, rgba(255,229,241,0) 74%;
}
.evidence::after { bottom: 0; background: radial-gradient(85% 100% at 100% 100%, var(--seam-mag)); }
.story::before { top: 0; background: radial-gradient(85% 100% at 100% 0%, var(--seam-mag)); }
/* Story starts on the ladder's blush and is white by 380px (px, not %, because the pinned story is 420vh tall) */
.story { background: linear-gradient(180deg, #FFF7FA 0, #FFFFFF 380px); }

/* Comparison (between two dark blocks): white → soft blush wash, faint lilac glow at the bottom right */
.compare { background:
  radial-gradient(70% 60% at 100% 100%, rgba(161,142,212,.20) 0%, rgba(161,142,212,.08) 40%, rgba(161,142,212,0) 75%),
  linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 40%, #FDF3F7 100%); }

/* FAQ: blush glow at the top left over the existing white → grey fade into the ship photo */
.faq-top { background:
  radial-gradient(60% 80% at 0% 0%, rgba(255,229,241,.85) 0%, rgba(255,229,241,.35) 40%, rgba(255,229,241,0) 75%),
  linear-gradient(180deg, #fff 0%, #fff 18%, #EEF0F1 62%, #CBD5DA 100%); }

/* Narrow screens: DESIGN.md starts local glows at ~60% of desktop size */
@media (max-width: 959px) {
  .hero::before { left: -10%; top: auto; bottom: 0; width: 120%; height: 560px; }
  .hero::after, .how::before { height: 200px; }
  .how::after, .evidence::before { height: 220px; }
  .evidence::after, .story::before { height: 240px; }
  .story { background: linear-gradient(180deg, #FFF7FA 0, #FFFFFF 240px); }
}

/* =================== v027 · calmer photo + smoother hero → photo join (owner, 13 Oct 2026) ===================
   Photo: Paper v026 option 13, "snow range under a pale sky" (Thủy Vũ / Unsplash, s6iTrwNolEg), replacing the warm ridges.
   Smoother join (owner: the image "didn't seem to gradient properly … into the hero gradient"):
   1. the photo now fades in over ~40% of its height (was ~24%), so its sky dissolves from the hero's white instead of
      starting as a band;
   2. the lilac seam from the hero now sits ABOVE the photo (it was underneath and hidden by it), so the hero's lilac
      carries straight on into the sky;
   3. the hero glow stops inside the hero (it was 900px tall in a ~790px hero, so it was cut off at the hero's bottom edge). */
.how .section-intro::before {
  z-index: -2;
  /* eased fade-in: starts almost flat at the hero edge, so no line shows where the ramp begins */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.04) 8%, rgba(0,0,0,.14) 16%, rgba(0,0,0,.32) 24%, rgba(0,0,0,.58) 32%, rgba(0,0,0,.82) 40%, #000 48%, #000 60%, rgba(0,0,0,.25) 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.04) 8%, rgba(0,0,0,.14) 16%, rgba(0,0,0,.32) 24%, rgba(0,0,0,.58) 32%, rgba(0,0,0,.82) 40%, #000 48%, #000 60%, rgba(0,0,0,.25) 84%, transparent 100%);
}
.how::before { z-index: -1; }
/* the section's own white → mist ramp is eased the same way */
.how { background: linear-gradient(180deg, #FFFFFF 0%, #FEFEFF 5%, #FBFBFC 11%, var(--soft) 20%, var(--soft) 58%, #FFFFFF 92%); }
@media (min-width: 960px) { .hero::before { top: 40px; bottom: 0; height: auto; } }
/* v027 narrow screens: photo 13's ridge sits at 54% of the band, so lift the band ~20px to show it in the gap above zone 01 */
@media (max-width: 959px) { .how .section-intro::before { bottom: calc(-1 * (64px + 146px)); } }

/* =================== v028 · "Start with the catalogue": empty mist first, then a pinned build (owner, 13 Oct 2026) ===================
   No waiting placeholders: until the build starts the three panels are hidden, so the section shows only the intro and
   the mountain photo fading into mist. On desktop the block then pins (sticky, vertically centred under the header) for a
   runway of scrolling while it builds; each panel fades up when its stage begins (catalogue → GreenInsight → PCFs).
   The pin is applied by JS only when the block fits the screen (.is-pinnable). No JS / reduced motion: panels show, finished. */
.flow-track { position: relative; }
@media (min-width: 960px) {
  .js .flow-track.is-pinnable { height: calc(var(--pin-h, 700px) + var(--runway, 100vh)); }
  .js .flow-track.is-pinnable .flow-pin { position: sticky; top: var(--pin-top, 120px); }
}
.js .flow.is-armed .zone { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease); }
.js .flow.is-armed .zone.z-on { opacity: 1; transform: none; }
/* the old "waiting" look of panels 02/03 (dashed, see-through) is no longer shown */
.js .flow.is-armed .zone-2:not(.z-on), .js .flow.is-armed .zone-3:not(.z-on) { border-style: solid; }
@media (prefers-reduced-motion: reduce) { .js .flow.is-armed .zone { transition: none; transform: none; } }

/* =================== v029 · prelude sweep before the build (owner, 13 Oct 2026) ===================
   A vertical magenta scanner (same look as the build's scanners, turned 90°) sweeps left → right → left over the space
   the three panels will fill, then widens into a soft band the size of panel 01, which appears over it. */
.vscan { position: absolute; z-index: 0; width: 2px; pointer-events: none; border-radius: 24px;
  background: linear-gradient(180deg, transparent, var(--primary) 14%, var(--primary) 86%, transparent);
  box-shadow: 0 0 14px 2px rgba(211,18,108,.40); }
.vscan::before { content: ""; position: absolute; top: 0; bottom: 0; left: -36px; width: 74px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(211,18,108,.10), rgba(211,18,108,0)); }
.vscan.is-band { background: linear-gradient(90deg, rgba(211,18,108,.10), rgba(211,18,108,.05) 40%, rgba(211,18,108,.05) 60%, rgba(211,18,108,.10));
  box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary), 0 0 18px 2px rgba(211,18,108,.22); }
.vscan.is-band::before { display: none; }
.vscan.is-out { opacity: 0; transition: opacity .5s var(--ease); }

/* =================== v034 · launch prep (Paper v032/v033) + mobile redesign (owner, 21 Oct 2026) =================== */
.display, .display-md, .headline, .headline-sm, .tier-t, .plan-name { text-wrap: balance; }
.lede, .body-lg, .split-text { text-wrap: pretty; }

/* Header: the site's main menu (logo → homepage); Services and Resources open on hover/focus */
.primary-nav { align-items: center; }
.primary-nav .chev { display: inline-block; width: 12px; height: 12px; margin-left: 2px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.primary-nav a.is-current { color: var(--primary); }
.nav-drop { position: relative; }
.nav-sub { display: none; position: absolute; left: -18px; top: 100%; z-index: 60; min-width: 250px; margin-top: 10px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(23,24,27,.12); }
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-drop:hover .nav-sub, .nav-drop:focus-within .nav-sub { display: block; }
.nav-sub a { display: block; padding: 10px 12px; border-radius: 8px; background: none; font-size: 14px; font-weight: 500; }
.nav-sub a:hover { background: var(--soft); background-size: auto; }
.nav-sub a[aria-current="page"] { color: var(--primary); }
.nav-cta { display: none; }

/* Knowledge glow: fades out inside its circle (Anamika, v032) */
.knowledge-glow { background: radial-gradient(circle, rgba(108,80,255,.28) 0%, rgba(211,18,108,.16) 30%, rgba(211,18,108,.06) 50%, rgba(211,18,108,0) 68%); }

/* NHS 2028: its own white section (owner's reply to Anamika, v032), with the 30+ proof band (v033) */
.nhs-sec { position: relative; isolation: isolate; overflow: clip; padding: var(--sec-pad, 104px) 0; background: #fff; scroll-margin-top: calc(var(--hdr-s) + 4px); }
.nhs-sec::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 0% 100%, rgba(255,229,241,.85) 0%, rgba(255,229,241,.35) 40%, rgba(255,229,241,0) 75%); }
.nhs-sec .nhs-glow { z-index: -1; left: 50%; top: 18%; background: radial-gradient(circle, rgba(211,18,108,.10) 0%, rgba(161,142,212,.08) 38%, rgba(255,255,255,0) 70%); }
.nhs-sec .nhs { margin-top: 0; padding-top: 0; border-top: 0; }
.nhs-sec .kicker-pink { color: var(--primary); }
.nhs-sec .nhs-copy .headline-sm { color: var(--ink); }
.nhs-sec .nhs-copy > p:not(.kicker):not(.source), .nhs-sec .nhs-copy .source { color: var(--slate); }
.nhs-sec .tl-past .tl-dot { background: #fff; border-color: #C9CBD3; }
.nhs-sec .tl-past .tl-when, .nhs-sec .tl-past .tl-what, .nhs-sec .tl-now .tl-what, .nhs-sec .tl-next .tl-what { color: var(--slate); }
.nhs-sec .tl-now .tl-dot { background: #fff; border-color: var(--ink); }
.nhs-sec .tl-now .tl-when, .nhs-sec .tl-next .tl-when { color: var(--ink); }
.nhs-sec .tl-key .tl-dot { box-shadow: 0 0 0 6px rgba(211,18,108,.15), 0 0 24px rgba(211,18,108,.25); }
.nhs-sec .tl-key .tl-when { color: var(--primary); } .nhs-sec .tl-key .tl-what { color: var(--ink); }
.nhs-sec .adoption { background: var(--soft); border-color: var(--line); }
.nhs-sec .adoption .ad-num { color: var(--primary); }
.nhs-sec .ad-rule { background: var(--line); }
.nhs-sec .adoption h3 { color: var(--ink); }
.nhs-sec .adoption p { color: var(--slate); max-width: 660px; }

/* Closing: the PCF enquiry form (v033) */
.closing { padding: var(--sec-pad, 104px) 0; }
.closing-inner { align-items: flex-start; gap: 48px; }
.closing-lead { width: 480px; display: flex; flex-direction: column; gap: 24px; }
.closing-lead .headline { width: auto; color: #fff; }
.closing-lead > p { font-size: 16px; line-height: 1.5; color: var(--on-dark); }
.closing-alt { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; }
.closing-alt span { font-size: 14px; color: var(--on-dark); }
.closing-alt a { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.closing-alt a:hover { border-color: #fff; }
.closing-alt .arrow { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.enquiry { position: relative; width: 600px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; padding: 40px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 24px 64px rgba(0,0,0,.45); }
.enquiry h3 { margin-top: -14px; font-size: 22px; font-weight: 600; line-height: 1.27; }
.f-row { display: flex; gap: 16px; }
.f-row .f { flex: 1; min-width: 0; }
.f { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1.43; }
.f input, .f select, .f textarea { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #D5D8DF; border-radius: 10px; background: #fff; font: 400 16px/1.4 var(--font); color: var(--ink); }
.f select { appearance: none; padding-right: 36px; color: var(--slate); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23535768' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px no-repeat; }
.f textarea { height: 104px; padding: 12px 14px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
.f-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 4px; }
.f-foot p { max-width: 300px; font-size: 13px; line-height: 1.46; color: var(--slate); }
.f-foot a { color: inherit; }
.f-done { padding: 12px 14px; border-radius: 10px; background: var(--blush); font-size: 14px; color: var(--ink); }
.dark .enquiry :focus-visible { outline-color: var(--primary); }

/* Footer: the page's own, with the site links (v032/v033) */
.site-footer { padding: 56px 0 40px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-brand { display: flex; align-items: center; gap: 24px; text-decoration: none; }
.footer-brand img { width: 38px; height: auto; }
.footer-brand span { font-size: 14px; line-height: 1.5; color: var(--slate); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer-links a { font-size: 14px; font-weight: 500; text-decoration: none; }
.footer-links a:hover { color: var(--primary); }
.footer-links .fl-cta { font-weight: 600; color: var(--primary); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.footer-bottom p, .footer-legal a { font-size: 13px; line-height: 1.46; color: var(--slate); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--ink); text-decoration: underline; }

/* Phone-only blocks are hidden on wide screens */
.ways-m, .matrix-m, .lv-end, .flow-pager[hidden] { display: none; }

@media (max-width: 1240px) {
  .closing-lead { width: 38%; } .enquiry { width: 56%; }
}
@media (max-width: 959px) {
  /* Menu: a full-height sheet under the header with the site links and the page's CTA */
  .primary-nav { position: fixed; top: var(--hdr-s); bottom: 0; left: 0; right: 0; overflow-y: auto; padding: 8px var(--gutter) 32px; align-items: stretch; gap: 0; }
  .nav-drop { position: static; }
  .nav-sub { display: block; position: static; margin: 0 0 8px; padding: 0 0 0 16px; min-width: 0; border: 0; box-shadow: none; background: none; }
  .nav-sub::before { display: none; }
  .nav-sub a { padding: 10px 0; font-size: 15px; font-weight: 400; color: var(--slate); border-bottom: 0; }
  .nav-sub a[aria-current="page"] { color: var(--primary); font-weight: 600; }
  .primary-nav .chev { display: none; }
  .nav-cta { display: inline-flex; justify-content: center; margin-top: 24px; padding: 0 24px; border-bottom: 0 !important; color: #fff; }
  .closing-inner { flex-direction: column; gap: 40px; }
  .closing-lead, .enquiry { width: 100%; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* =================== v034 · phones (≤ 639px) =================== */
@media (max-width: 639px) {
  /* Hero: the footprinted catalogue becomes a compact list (app-style table view): 4 rows, thumbnail · name · CO2e */
  .hero { padding-bottom: 56px; }
  .hero-inner { gap: 36px; }
  .cat-after { padding: 14px; gap: 10px; }
  .cat-after .cat-sub { display: none; }
  .prod-grid { grid-template-columns: 1fr; gap: 6px; }
  .prod { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 6px 10px 6px 6px; }
  .prod:nth-child(n+5) { display: none; }
  .prod img { grid-row: span 2; width: 52px; height: 52px; border-radius: 8px; }
  .prod-body { display: contents; }
  .pn { grid-column: 2; align-self: end; font-size: 13px; }
  .pm { grid-column: 2; align-self: start; justify-content: flex-start; gap: 8px; }
  .co2-pill { grid-column: 3; grid-row: 1 / span 2; margin: 0; align-self: center; }

  /* Catalogue build: a fading pager (see main.js). The panels share one place; one shows at a time. */
  .flow.is-pager { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; touch-action: pan-y; }
  .flow.is-pager > .zone { grid-area: 1 / 1; }
  .flow.is-pager .zone + .zone::before { display: none; }
  .js .flow.is-pager .zone { transition: opacity .38s var(--ease), transform .38s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease); }
  .js .flow.is-pager .zone:not(.is-page) { opacity: 0 !important; visibility: hidden; transform: translateX(calc(var(--fp-dir, 1) * -18px)) scale(.985) !important; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
  .js .flow.is-pager:not(.is-armed) .zone.is-page,
  .js .flow.is-pager.is-armed .zone.is-page.z-on { opacity: 1; transform: none; }
  .flow-pager:not([hidden]) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
  .fp-step { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 4px; border: 0; background: none; text-align: left; cursor: pointer; }
  .fp-bar { display: block; height: 4px; border-radius: 999px; background: #E3E5EA; overflow: hidden; }
  .fp-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--primary); transition: width .45s var(--ease); }
  .fp-step.is-done .fp-bar span, .fp-step.is-current .fp-bar span { width: 100%; }
  .fp-label { font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--slate); }
  .fp-label b { font-weight: 700; margin-right: 2px; }
  .fp-step.is-current .fp-label { color: var(--ink); font-weight: 600; }
  .fp-step:focus-visible { outline-offset: 4px; }

  /* Evidence ladder: a vertical ladder, rail from "Most specific" (top) to "Widest coverage" (bottom) */
  .ev-flow { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 32px; }
  .ev-arrow { transform: rotate(90deg); margin-left: 22px; line-height: 1; }
  .ev-pill { padding: 10px 18px; font-size: 15px; }
  .ladder { position: relative; gap: 10px; padding-left: 26px; }
  .ladder::before { content: ""; position: absolute; left: 6px; top: 26px; bottom: 26px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--primary) 0%, rgba(211,18,108,.35) 70%, var(--ink) 100%); }
  .lv-end { display: block; position: relative; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
  .lv-end::before { content: ""; position: absolute; left: -25px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--primary); }
  .lv-bottom::before { background: var(--ink); }
  .ladder-axis { display: none; }
  .ladder-steps { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; height: auto; }
  .tier { position: relative; flex: none !important; width: auto; min-height: 0 !important; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; padding: 14px 16px !important; border-radius: 14px; }
  .tier-n { grid-row: span 2; font-size: 24px !important; line-height: 1.2; }
  .tier-t { font-size: 17px; line-height: 1.3; }
  .tier-d { font-size: 13px; }
  .t1 { margin-top: 30px; }
  .t1::before, .t5::before { position: absolute; left: 0; top: -24px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .t1::before { content: "Similar products have evidence"; color: var(--primary); }
  .t5 { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; height: auto; }
  .t5::before { content: "None · model it"; color: var(--ink); }
  .t5 .tier-top { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; }
  .t5 .tier-know { padding-top: 12px; }

  /* Product matrix: transposed so it fits; attributes down the side, five short product names across */
  .matrix-d { display: none; }
  .matrix-m { display: table; table-layout: fixed; }
  .matrix-m thead th { width: auto; font-size: 10px; letter-spacing: .02em; }
  .matrix-m thead th:first-child { width: 31%; }
  .matrix-m tbody th { font-size: 13px; }
  .matrix-wrap { overflow: visible; }
  .matrix { min-width: 0; }

  /* Comparison: an icon grid with a tinted Co2analysis column; tap a row for the wording */
  .table-scroll { display: none; }
  .ways-m { display: block; margin-top: 8px; }
  .wm-head, .wm-row summary { display: grid; grid-template-columns: minmax(0, 1fr) 62px 62px 62px 18px; align-items: center; }
  .wm-head span { padding: 10px 4px; font-size: 11px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--slate); hyphens: manual; }
  .wm-head span.us { border-radius: 12px 12px 0 0; background: var(--primary); color: #fff; }
  .wm-row { border-bottom: 1px solid var(--line); }
  .wm-row summary { min-height: 56px; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
  .wm-row summary::-webkit-details-marker { display: none; }
  .wm-label { padding: 12px 8px 12px 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
  .wm-cell { align-self: stretch; display: grid; place-items: center; }
  .wm-cell.us { background: #FFF5FA; }
  .ways-m .ic { position: static; flex-shrink: 0; }
  .wm-chev { width: 8px; height: 8px; margin-left: 6px; border-right: 1.5px solid var(--slate); border-bottom: 1.5px solid var(--slate); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease); pointer-events: none; }
  .wm-row[open] .wm-chev { transform: rotate(-135deg) translate(-2px, -2px); }
  .wm-row[open] summary .wm-label { color: var(--primary); }
  .wm-detail { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 16px; }
  .wm-d { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.4; }
  .wm-d dt { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; font-weight: 600; color: var(--slate); }
  .wm-d dt .ic { width: 16px; height: 16px; background-size: 16px; }
  .wm-d dd { margin: 0; color: var(--slate); }
  .wm-d.us dt, .wm-d.us dd { color: var(--ink); font-weight: 600; }
  .wm-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 16px; font-size: 12px; color: var(--slate); }
  .wm-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .wm-legend .ic { width: 16px; height: 16px; background-size: 16px; }
  .wm-hint { padding-top: 6px; font-size: 12px; color: var(--slate); }
  .footnote { margin-top: 24px; }

  /* NHS, FAQ, closing, form, footer */
  .nhs-sec { padding: 72px 0; }
  .nhs-sec .adoption { padding: 24px; }
  .nhs-sec .adoption .ad-num { font-size: 52px; }
  .nhs-sec .adoption h3 { font-size: 19px; }
  .faq-photo { height: 240px; }
  .closing { padding: 72px 0; }
  .enquiry { padding: 24px 20px; gap: 16px; border-radius: 20px; }
  .f-row { flex-direction: column; gap: 16px; }
  .f-foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .f-foot .btn { justify-content: center; }
  .f-foot p { max-width: none; }
  .footer-links { gap: 12px 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* v034: the menu sheet stops the page scrolling behind it */
html.menu-open { overflow: hidden; }

/* v034 fixes after the phone check */
@media (max-width: 959px) {
  /* backdrop-filter makes the header the containing block for the fixed menu sheet, which clipped it */
  .site-header.is-scrolled { backdrop-filter: none; }
  .primary-nav.is-open { box-shadow: none; border-top: 1px solid var(--line); }
}
@media (max-width: 639px) {
  .matrix-m thead th { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
  .matrix-m thead th:first-child { width: 25%; }
  .wm-head, .wm-row summary { grid-template-columns: minmax(0, 1fr) 64px 64px 64px 18px; }
  .wm-head span { font-size: 10px; letter-spacing: -.01em; }
}

/* v034 menu sheet polish */
@media (max-width: 959px) {
  .primary-nav a.nav-cta { height: 50px; padding: 0 24px; background: var(--primary); color: #fff; border-bottom: 0; }
  .nav-drop > a { display: block; }
  html.menu-open .site-header { background: #fff; }
}
@media (max-width: 959px) { .site-header, .site-header.is-scrolled { background: #fff; } }

/* =================== v035 · owner's phone review (21 Oct 2026) =================== */
.sr-s { display: none; }

@media (max-width: 639px) {
  /* Comparison: "Co2analysis" centred in its chip (wider tinted column); no legend */
  .wm-head, .wm-row summary { grid-template-columns: minmax(0, 1fr) 78px 56px 56px 18px; }
  .wm-head span { padding: 9px 0; font-size: 10px; letter-spacing: 0; white-space: nowrap; }
  .wm-head span.us { font-size: 11px; }

  /* Syringe story: one screen holds the step row, the caption and the stage; the stage animates */
  .story { padding-top: 72px; }
  .story-sticky { padding: 8px 0 56px; }
  .story-track:not(.is-pinned) .story-sticky { padding-bottom: 56px; }
  .story-layout { gap: 10px; }
  .story-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .story-rail button { padding: 8px 2px 4px 0; row-gap: 2px; }
  .sr-n { font-size: 11px; }
  .story-rail .sr-t { display: none; }
  .sr-s { display: block; font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--slate); }
  .story-rail button[aria-current="step"] .sr-s { color: var(--ink); font-weight: 600; }
  .js .story-caption { min-height: 0; height: 58px; overflow: hidden; font-size: 13px; line-height: 1.45; }

  .stage { height: clamp(380px, calc(100svh - var(--hdr-s) - 190px), 470px); border-radius: 18px; }
  .layer, [data-step] .layer { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px; }
  /* leaving step: drops back and fades; arriving step: fades in */
  .layer { transform: translateY(14px) scale(.93); }
  [data-step="1"] .l-grid, [data-step="4"] .l-grid, [data-step="2"] .l-focus, [data-step="3"] .l-recipe { transform: none; }

  /* 1 + 4 · the catalogue, three across */
  .l-grid { gap: 10px; }
  .sg-head p { font-size: 13px; } .sg-head span { font-size: 11px; }
  .sg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sg-grid li { border-radius: 10px; padding-bottom: 8px; }
  .sg-grid img, [data-step="4"] .sg-grid img { height: 64px; margin-bottom: 6px; }
  .sg-grid p { padding: 0 7px; font-size: 11px; line-height: 1.3; }
  .sg-grid span { padding: 0 7px; font-size: 10px; line-height: 1.35; }
  .sg-pill { left: 6px; top: 6px; height: 20px; padding: 0 7px; font-size: 10.5px; }
  [data-step="4"] .sg-syringe { transform: translateY(-2px); }
  /* 4 · the sum rises from the bottom over the lower row */
  .sg-sum, [data-step="1"] .sg-sum { display: block; position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; opacity: 0; transform: translateY(calc(100% + 16px)); box-shadow: 0 -10px 30px rgba(23,24,27,.18); transition: opacity .35s .45s, transform .6s var(--ease) .45s; }
  [data-step="4"] .sg-sum { opacity: 1; transform: none; }
  .sgs-head { font-size: 10px; margin-bottom: 6px; }
  .sgs-eq { flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 6px 8px; }
  .sgs-eq b { font-size: 16px; }
  .sgs-eq span { font-size: 10px; }
  .sgs-eq .op { font-size: 15px; }
  .sgs-eq .sgs-total { margin: 0; padding: 4px 8px; }

  /* 2 · focus on one product */
  .l-focus { gap: 12px; justify-content: flex-start; }
  .focus-img { aspect-ratio: auto; height: 132px; border-radius: 14px; }
  .fe-name { font-size: 16px; line-height: 1.35; }
  .fe-ref { font-size: 12px; }
  .chips { gap: 5px; padding-top: 4px; }
  .chips li { padding: 4px 8px; font-size: 11px; }

  /* 3 · the recipe */
  .l-recipe { gap: 10px; }
  .rc-head .kicker { font-size: 11px; }
  .rc-badge { height: 24px; padding: 0 10px; font-size: 11px; }
  .syr { flex: 0 0 auto; padding-top: 6px; }
  .rc-foot { margin-top: auto; padding-top: 12px; gap: 10px; }
  .libgrid { height: 44px; }
  .rc-lib p:last-child { font-size: 12px; }
}

/* phone runway: one step per ~80% of a screen of scrolling */
@media (max-width: 639px) {
  .story-track.is-pinned { height: calc(100svh + 260svh); }
  .story-track.is-pinned .story-sticky { height: calc(100svh - var(--hdr-s)); padding: 0; }
}
@media (max-width: 639px) {
  .js .story-caption { height: 76px; }
  .stage { height: clamp(360px, calc(100svh - var(--hdr-s) - 230px), 410px); }
}
@media (max-width: 639px) { .js .story-caption { height: 92px; font-size: 12.5px; line-height: 1.44; } }

/* =================== v036 · arrows beside the swipeable blocks; smaller one-screen blocks (owner, 22 Oct 2026) =================== */
.swipe-arrow { display: none; }
@media (max-width: 639px) {
  /* narrow ‹ › in the side gutter, vertically centred on the swipeable area */
  .flow.is-pager .swipe-arrow, .story-track.is-phone .swipe-arrow { display: grid; }
  .swipe-arrow { position: absolute; z-index: 4; top: 50%; width: 16px; height: 48px; margin-top: -24px; padding: 0; place-items: center; border: 0; background: none; color: var(--slate); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .2s; }
  .swipe-arrow svg { width: 7px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .swipe-arrow.prev { left: -18px; } .swipe-arrow.next { right: -18px; }
  .swipe-arrow:disabled { opacity: .22; cursor: default; }
  .story-layout { position: relative; --stage-h: clamp(340px, calc(100svh - var(--hdr-s) - 250px), 390px); }
  .story-layout > .swipe-arrow { top: auto; margin-top: 0; bottom: calc(var(--stage-h) / 2 - 24px); }

  /* default a little smaller than strictly needed, so it still fits with larger text settings */
  .zone { padding: 18px 18px 16px; gap: 14px; border-radius: 20px; }
  .zone-num { font-size: 40px; }
  .zone-title { font-size: 19px; }
  .zone-text { font-size: 13.5px; line-height: 1.45; }
  .flow-src, .flow-out { gap: 7px; }
  .flow-src li, .flow-out li { height: 32px; font-size: 12.5px; }
  .flow-src li { font-size: 11.5px; }
  .flow-out li b { height: 20px; font-size: 11.5px; }
  .engine { padding: 16px; gap: 10px; }
  .engine-steps li { height: 38px; font-size: 13px; }
  .flow-done { font-size: 11.5px; }
  .flow-pager:not([hidden]) { margin-top: 10px; }

  .stage { height: var(--stage-h); }
  .js .story-caption { height: 88px; font-size: 12px; }
}
@media (max-width: 639px) {
  .layer { transform-origin: top center; transform: translateY(14px) scale(calc(.93 * var(--ls, 1))); }
  [data-step="1"] .l-grid, [data-step="4"] .l-grid, [data-step="2"] .l-focus, [data-step="3"] .l-recipe { transform: scale(var(--ls, 1)); }
  .js .story-caption { height: auto; }
}

/* v037 · arrows in magenta; faded grey when there is nowhere to go (owner) */
@media (max-width: 639px) {
  .swipe-arrow { color: var(--primary); }
  .swipe-arrow svg { stroke-width: 2; }
  .swipe-arrow:disabled { color: var(--muted); opacity: .45; }
}
.is-measuring .sg-sum { display: none !important; }

/* =================== v038 · phones: option cards as a two-step scroll story; cards stay dark (owner, 22 Oct 2026) =================== */
.pl-bar[hidden] { display: none; }
.plans-track, .plans-sticky, .plans-fit { position: relative; }
@media (min-width: 640px) { .pl-bar { display: none; } }
@media (max-width: 639px) {
  .plans-track.is-pinned { height: calc(100svh + 110svh); }
  .plans-track.is-pinned .plans-sticky { position: sticky; top: var(--hdr-s); height: calc(100svh - var(--hdr-s)); display: flex; flex-direction: column; justify-content: center; }
  .plans-track.is-phone .plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .plans-track.is-phone .plan { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.93); transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
  .plans-track.is-phone .plan.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .08s, transform .5s var(--ease) .08s, visibility 0s; }
  /* the cards stay dark on phones (no white "active" state) */
  .plan:hover, .plan:focus-within, .plan.is-active { background: #1F2025; color: #fff; border-color: #34353D; }
  .plan:hover .kicker, .plan:focus-within .kicker, .plan.is-active .kicker { color: var(--on-dark); }
  .plan:hover .plan-desc, .plan:focus-within .plan-desc, .plan.is-active .plan-desc { color: var(--on-dark); }
  .plan:hover .plan-h-get, .plan:focus-within .plan-h-get, .plan.is-active .plan-h-get { color: var(--primary-on-dark); }
  .plan:hover li, .plan:focus-within li, .plan.is-active li { color: var(--on-dark); }
  /* steps + arrows, in the dark section's colours */
  .pl-bar:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .pl-step { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 4px; border: 0; background: none; text-align: left; cursor: pointer; }
  .pl-step .fp-bar { background: rgba(255,255,255,.16); }
  .pl-step .fp-bar span { background: var(--primary-on-dark); }
  .pl-step .fp-label { color: var(--on-dark); }
  .pl-step.is-current .fp-label { color: #fff; font-weight: 600; }
  .pl-step.is-done .fp-bar span, .pl-step.is-current .fp-bar span { width: 100%; }
  .plans-track.is-phone .swipe-arrow { display: grid; top: calc(50% - 22px); }
  .dark .swipe-arrow { color: var(--primary-on-dark); }
  .dark .swipe-arrow:disabled { color: var(--on-dark); opacity: .35; }
  .plans-track:not(.is-pinned) { margin-bottom: 8px; }
}

/* =================== v039 · owner + coworker review (22 Oct 2026) =================== */
/* all widths: no mountain photo behind "Start with the catalogue" (the section keeps its own soft gradient) */
@media (max-width: 639px) {
  /* the Rapid / Enhanced steps sit above the cards */
  .pl-bar:not([hidden]) { margin: 0 0 12px; }
  /* sideways gestures belong to these blocks; vertical page scrolling is untouched */
  .stage, .plans-sticky, .flow.is-pager { touch-action: pan-y; }
}

/* =================== v040 · owner review (22 Oct 2026) =================== */
/* step 04: every product shows its footprint; only the syringe is outlined and carries the solid pill */
[data-step="4"] .sg-grid li:not(.sg-syringe) { opacity: 1; }
.sg-pill-soft { background: var(--blush); color: var(--primary-strong); }
[data-step="4"] .sg-grid li:nth-child(1) .sg-pill { transition-delay: .3s; }
[data-step="4"] .sg-grid li:nth-child(2) .sg-pill { transition-delay: .38s; }
[data-step="4"] .sg-grid li:nth-child(3) .sg-pill { transition-delay: .46s; }
[data-step="4"] .sg-grid li:nth-child(5) .sg-pill { transition-delay: .54s; }
[data-step="4"] .sg-grid li:nth-child(6) .sg-pill { transition-delay: .62s; }
@media (max-width: 639px) {
  /* phones: the sum no longer covers the syringe; at step 04 the stage grows and the sum hangs below the catalogue */
  .stage { transition: height .5s var(--ease); --sum-h: 84px; }
  [data-step="4"] .stage { height: max(var(--stage-h), var(--step4-h, calc(var(--stage-h) + var(--sum-h)))); }
  .is-measuring .stage { height: var(--stage-h) !important; transition: none; }
  .sg-sum, [data-step="1"] .sg-sum { box-shadow: none; }
}
.sg-pill { white-space: nowrap; }
@media (max-width: 639px) { .sg-pill { padding: 0 6px; font-size: 10px; letter-spacing: -.01em; } }


/* ===== WordPress integration (wordpress/pcf/pcf-wp.css) ===== */
/* WordPress-only styles for the PCF page, appended to pcf.css by wordpress/tools/port-pcf.py. */

/* Logged-in preview: keep the sticky header clear of WordPress's admin bar. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* The WPForms "PCF enquiry" form, styled like the prototype's form (.f, .f-row, .f-foot). */
.enquiry .wpforms-container { margin: 0 !important; padding: 0; }
.enquiry .wpforms-form .wpforms-field-container { display: flex; flex-wrap: wrap; gap: 20px 16px; }
.enquiry .wpforms-form .wpforms-field { flex: 1 1 100%; min-width: 0; margin: 0 !important; padding: 0 !important; }
.enquiry .wpforms-form .wpforms-field.pcf-half { flex: 1 1 calc(50% - 8px); }
.enquiry .wpforms-form .wpforms-field-label {
  display: block !important; margin: 0 0 8px !important; padding: 0 !important;
  font: 500 14px/1.43 var(--font) !important; color: var(--ink) !important;
}
.enquiry .wpforms-form .wpforms-required-label { color: inherit !important; font-weight: 500 !important; }
.enquiry .wpforms-form input[type="text"],
.enquiry .wpforms-form input[type="email"],
.enquiry .wpforms-form select,
.enquiry .wpforms-form textarea {
  box-sizing: border-box; width: 100% !important; max-width: none !important; height: 48px !important;
  margin: 0 !important; padding: 0 14px !important;
  border: 1px solid #D5D8DF !important; border-radius: 10px !important; background-color: #fff !important;
  box-shadow: none !important; font: 400 16px/1.4 var(--font) !important; color: var(--ink) !important;
}
.enquiry .wpforms-form select {
  appearance: none; -webkit-appearance: none; padding-right: 36px !important; color: var(--slate) !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23535768' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px no-repeat !important;
}
.enquiry .wpforms-form textarea { height: 104px !important; min-height: 104px; padding: 12px 14px !important; resize: vertical; }
.enquiry .wpforms-form input:focus,
.enquiry .wpforms-form select:focus,
.enquiry .wpforms-form textarea:focus {
  outline: 2px solid var(--primary) !important; outline-offset: 0; border-color: var(--primary) !important; box-shadow: none !important;
}
.enquiry .wpforms-form .wpforms-error,
.enquiry .wpforms-form em.wpforms-error { margin-top: 6px !important; padding: 0 !important; font: 400 13px/1.4 var(--font) !important; color: #B4123E !important; }
.enquiry .wpforms-form input.wpforms-error,
.enquiry .wpforms-form select.wpforms-error,
.enquiry .wpforms-form textarea.wpforms-error { border-color: #B4123E !important; }

/* Footer row: privacy note left, button right (pcf-wp.js moves the note in). */
.enquiry .wpforms-form .wpforms-submit-container {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin: 14px 0 0 !important; padding: 4px 0 0 !important; /* lines up with the prototype's .f-foot */
}
.enquiry .enquiry-note { max-width: 300px; margin: 0; font-size: 13px; line-height: 1.46; color: var(--slate); }
.enquiry .enquiry-note a { color: inherit; }
.enquiry .wpforms-form button.wpforms-submit {
  height: auto !important; min-height: 50px; margin: 0 !important; padding: 0 24px !important;
  border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
  background: var(--primary) !important; color: #fff !important;
  font: 600 16px/1 var(--font) !important; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.enquiry .wpforms-form button.wpforms-submit::after {
  content: ""; width: 16px; height: 16px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.enquiry .wpforms-form button.wpforms-submit:hover { filter: brightness(1.08); }
.enquiry .wpforms-form .wpforms-submit-spinner { margin-left: 8px; }

/* After sending: the confirmation replaces the form. */
.enquiry .wpforms-confirmation-container-full,
.enquiry .wpforms-confirmation-container {
  margin: 0 !important; padding: 14px 16px !important; border: 0 !important; border-radius: 10px;
  background: var(--blush) !important; color: var(--ink) !important; font: 400 15px/1.5 var(--font) !important;
}
.enquiry .wpforms-confirmation-container-full p { margin: 0; }
.enquiry .enquiry-missing { margin: 0; }

@media (max-width: 639px) {
  /* Phone spacing matches the prototype: 16px between fields and before the footer row. */
  .enquiry .wpforms-form .wpforms-field-container { gap: 16px; }
  .enquiry .wpforms-form .wpforms-submit-container { margin-top: 10px !important; }
  .enquiry .wpforms-form .wpforms-field.pcf-half { flex-basis: 100%; }
  .enquiry .wpforms-form .wpforms-submit-container { flex-direction: column; align-items: stretch; gap: 16px; }
  .enquiry .wpforms-form button.wpforms-submit { justify-content: center; }
  .enquiry .enquiry-note { max-width: none; }
}