/* Both fonts are served from this site (OFL-1.1, variable weight), so a
   visitor's browser is never sent to anyone else's server. */
@font-face { font-family: 'Schibsted Grotesk'; src: url('schibsted-grotesk.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('instrument-sans.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
:root {
  /* Baton's brand (Midnight and Lilac, from the logo pack) for type,
     anything you press and the dark bands; six brighter tones around it
     that label things, and a wash and a band for alternate sections. */
  --paper:     #F8F7FB;
  --white:     #FFFFFF;
  --ink:       #0D0F24;
  --muted:     #4F5168;
  --line:      #E3E1EE;
  --field:     #7E8098;   /* form box borders: 3.6 to 1 against the page */
  --primary:   #262A5C;
  --primary-2: #343A7A;
  --lilac:     #C7B9F2;
  --t1: #B9A6F5; --t2: #FFE07A; --t3: #8EA8FF; --t4: #FF9EC4; --t5: #FFAE72; --t6: #6FD3C3;
  --wash: #EFEAFF;   /* alternate sections */
  --hero: #262A5C;   /* the opening band */
  --band: #FFF7D6;   /* "How it works" */
  --pop:  #FFE07A;   /* the headline highlight */
  /* Kept for clinical signals only, never decoration. */
  --alert: #F5A524;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 'Instrument Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .num { font-family: 'Schibsted Grotesk', system-ui, sans-serif; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(36px, 5.6vw, 60px); line-height: 1.04; }
h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; }
h3 { font-size: 19px; line-height: 1.25; font-weight: 600; }
p { margin: 0; max-width: 62ch; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.illus { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; background: var(--white); }

header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 18px; padding: 16px 24px; }
.mark { display: flex; align-items: center; text-decoration: none; }
.mark img { display: block; height: 26px; width: auto; }
.hl { background: var(--pop); color: var(--ink); padding: 0 .14em; border-radius: 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
nav { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 500; }
nav a { text-decoration: none; color: var(--ink); }
nav a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) { nav { display: none; } }

.btn { display: inline-block; background: var(--primary); color: var(--white); text-decoration: none; font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 6px; border: 0; cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--primary-2); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
header .btn { margin-left: 6px; }
@media (max-width: 760px) { header .btn.ghost { display: none; } header .btn { margin-left: auto; } }

/* The menu on a phone. Below 760px the header's links are hidden, so a menu
   button opens them in a sheet under the header, with the page behind dimmed
   and held still. A <details>, so it opens with no script at all; menu.js
   closes it on Escape, a tap outside or a wider screen, and holds the page. */
.menu { display: none; }
@media (max-width: 760px) {
  .bar { gap: 10px; }
  header .btn { padding: 10px 14px; font-size: 14px; }
  .menu { display: block; }
  .menu summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .menu summary::-webkit-details-marker, .menu summary::marker { display: none; content: ''; }
  .menu summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
  .menu summary svg { display: block; }
  .menu .shut { display: none; }
  .menu[open] .open { display: none; }
  .menu[open] .shut { display: block; }
  .menu[open] summary { border-color: var(--ink); }
  .menu[open]::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; top: var(--head, 77px); z-index: -1; background: rgba(13, 15, 36, .4); animation: dim .18s ease-out; }
  .menu .sheet { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--head, 77px)); overflow-y: auto; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px rgba(13, 15, 36, .18); padding: 8px 24px 24px; animation: sheet .18s ease-out; }
  .menu nav { display: flex; flex-direction: column; margin: 0; gap: 0; font-size: 19px; font-weight: 600; }
  .menu nav a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
  .menu nav a::after { content: ''; width: 8px; height: 8px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); margin-right: 4px; }
  .menu nav a[aria-current='page'] { color: var(--primary); text-decoration: none; box-shadow: inset 3px 0 0 var(--primary); padding-left: 14px; margin-left: -14px; }
  .menu .sheet-actions { display: grid; gap: 10px; margin-top: 20px; }
  .menu .sheet-actions .btn { margin: 0; text-align: center; padding: 15px 22px; font-size: 16px; }
  .menu .sheet-actions .btn.ghost { display: block; background: transparent; color: var(--ink); border: 1px solid var(--ink); }
  html.menu-open { overflow: hidden; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .menu .sheet, .menu[open]::after { animation: none; } }
@keyframes dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 400px) { header .btn .long { display: none; } }

section { padding: clamp(56px, 7vw, 96px) 0; scroll-margin-top: 64px; }
.on-white { background: var(--wash); border-block: 1px solid var(--line); }
.two { display: grid; gap: 40px; }
@media (min-width: 900px) { .two { grid-template-columns: .85fr 1.15fr; gap: 64px; } }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 3vw, 28px); }

/* ---- revealing as things scroll into view -------------------------- */
/* A [data-reveal] block gets .in once, the first time it is seen. Inside
   it, .rv fades up, .pop scales in, .draw traces its line and .grow rises,
   each after its --i in the order. */
.js [data-reveal] .rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * 90ms + var(--base, 0ms)); }
.js [data-reveal] .pop { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity .45s ease, transform .5s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(var(--i, 0) * 80ms + var(--base, 0ms)); }
.js [data-reveal] .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease; transition-delay: calc(var(--i, 0) * 70ms + var(--base, 0ms)); }
.js [data-reveal] .grow { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .6s ease; transition-delay: calc(var(--i, 0) * 90ms + var(--base, 0ms)); }
.js [data-reveal].in .rv, .js [data-reveal].in .pop, .js [data-reveal].in .grow { opacity: 1; transform: none; }
.js [data-reveal].in .draw { stroke-dashoffset: 0; }

/* ---- hero ---------------------------------------------------------- */
.hero { padding-top: clamp(44px, 6vw, 76px); background: var(--hero); }
.hero h1, .hero .eyebrow { color: #FFFFFF; }
.hero-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.hero p.lede { font-size: clamp(17px, 1.9vw, 20px); color: #C9CBE6; margin-top: 20px; }
.hero .btn { background: var(--lilac); color: var(--ink); }
.hero .btn:hover { background: #D8CEF7; }
.hero .btn.ghost { background: transparent; color: #FFFFFF; border: 1px solid #FFFFFF; }
.hero .btn.ghost:hover { background: #FFFFFF; color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.tag { font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); }
.hero .tag { background: transparent; color: #FFFFFF; border-color: #4A4F8C; }

/* The panel on the right: a clinic's day, drawn rather than screenshotted. */
.panel { background: var(--t2); border-radius: 20px; padding: 22px; }
.panel-card { background: var(--white); border-radius: 14px; padding: 18px 18px 8px; box-shadow: 0 18px 40px -28px rgba(6,8,20,.55); }
.panel-card h4 { margin: 0 0 2px; font-family: 'Schibsted Grotesk', sans-serif; font-size: 15px; }
.panel-card .when { font-size: 12px; color: var(--muted); }
.queue { list-style: none; margin: 14px 0 0; padding: 0; }
.queue li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.queue .what { font-weight: 500; }
.queue .who { margin-left: auto; color: var(--muted); font-size: 13px; }

/* The handover line: the logo's baton carried from stop to stop, once,
   and finished within five seconds (WCAG 2.2.2), so nothing moves for
   long enough to need a pause button. */
.handover { position: relative; margin-top: 56px; padding-top: 44px; }
.handover ol { list-style: none; margin: 0; padding: 0; display: flex; position: relative; }
.handover ol::before { content: ''; position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 7px; height: 2px; background: #4A4F8C; }
.handover li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
.handover li i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--pop); background: var(--pop); }
.handover li span { font-size: clamp(11px, 2.9vw, 13px); font-weight: 500; color: #FFFFFF; text-align: center; }
.runner { position: absolute; top: 0; left: calc(100% * 11 / 12); width: 36px; height: 36px; margin-left: -18px; }
.runner img { display: block; width: 36px; height: 36px; }
.js .handover li i { border-color: var(--lilac); background: var(--hero); }
.js .handover li span { color: #9EA2CF; }
.js .handover.in li i { animation: lit .45s ease both; animation-delay: var(--d); }
.js .handover.in li span { animation: litText .45s ease both; animation-delay: var(--d); }
.js .handover .runner { left: calc(100% / 12); }
.js .handover.in .runner { animation: run 4.2s cubic-bezier(.6, 0, .3, 1) .3s both; }
@keyframes lit { 0% { transform: scale(1); } 50% { transform: scale(1.35); background: var(--pop); border-color: var(--pop); } 100% { transform: scale(1); background: var(--pop); border-color: var(--pop); } }
@keyframes litText { to { color: #FFFFFF; } }
@keyframes run {
  0%, 10%  { left: 8.333%; }
  20%, 28% { left: 25%; }
  38%, 46% { left: 41.667%; }
  56%, 64% { left: 58.333%; }
  74%, 82% { left: 75%; }
  92%, 100% { left: 91.667%; }
}

/* ---- titration ----------------------------------------------------- */
.week { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.week li { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.week .day { flex: 0 0 auto; font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 13px; padding: 4px 9px; border-radius: 6px; }
.week b { display: block; font-weight: 600; font-size: 15.5px; }
.week span.what { display: block; color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.readings { margin: 48px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.readings figure { min-width: 0; }
@media (min-width: 860px) { .readings { grid-template-columns: minmax(0, 1fr) 250px; gap: 36px; } }
.readings-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.readings-head h3 { font-size: 18px; }
.readings svg { width: 100%; height: auto; display: block; }
/* On a phone the chart keeps a readable size and scrolls sideways. */
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart-scroll:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 600px) { .readings svg { min-width: 560px; } }
.readings svg text { font-family: 'Instrument Sans', sans-serif; }
.readings figcaption { font-size: 14px; color: var(--muted); margin-top: 12px; max-width: 70ch; }
.phone { width: 230px; margin: 0 auto; border: 9px solid var(--ink); border-radius: 30px; background: var(--white); padding: 16px 14px 18px; box-shadow: 0 24px 40px -30px rgba(6,8,20,.6); }
.phone .head { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 16px; }
.phone .sub { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.phone .field { display: flex; justify-content: space-between; align-items: baseline; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-top: 7px; font-size: 13px; }
.phone .field b { font-family: 'Schibsted Grotesk', sans-serif; font-size: 15px; }
.phone .q { font-size: 12.5px; font-weight: 600; margin: 12px 0 6px; }
.phone .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.phone .chips span { font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.phone .chips span.on { background: var(--t1); border-color: var(--t1); font-weight: 600; }
.phone .send { margin-top: 14px; background: var(--primary); color: #FFFFFF; text-align: center; border-radius: 10px; padding: 9px; font-size: 13px; font-weight: 600; }

/* ---- how it works: the relay ---------------------------------------- */
.relay { margin-top: 40px; }
.relay-track { position: sticky; top: 70px; z-index: 5; display: flex; gap: 4px; padding: 10px 0 26px; background: var(--band); }
.relay-track::after { content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 3px; border-radius: 2px; background: rgba(38,42,92,.15); }
.relay-track .seg { flex: 1; position: relative; isolation: isolate; border-radius: 999px; padding: 7px 10px; font-size: 13px; font-weight: 600; color: var(--ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Only the colour behind a step not yet reached is faded, so its name
   keeps full contrast. */
.relay-track .seg::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--c); opacity: .45; transition: opacity .3s ease; }
.relay-track .seg.on::before { opacity: 1; }
.relay-dot { position: absolute; z-index: 1; bottom: 1px; left: clamp(11px, var(--p, 0%), calc(100% - 11px)); width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--primary); border: 4px solid #FFFFFF; box-shadow: 0 2px 8px rgba(6,8,20,.3); }
.legs { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 900px) { .legs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.leg { display: grid; gap: 12px; align-content: start; }
.stop { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 18px; }
.stop .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.stop .num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
.stop em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--primary); background: var(--wash); border-radius: 999px; padding: 2px 9px; }
.stop b { display: block; font-weight: 600; font-size: 15.5px; }
.stop > span { display: block; margin-top: 4px; color: var(--muted); font-size: 14.5px; }

/* ---- what it does: one record ----------------------------------------- */
.hub { width: 100%; max-width: 470px; height: auto; display: block; margin: 0 auto; }
.hub text { font-family: 'Schibsted Grotesk', sans-serif; }
.cards { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); }
.feature { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.feature .chip { display: inline-block; width: 34px; height: 8px; border-radius: 4px; margin-bottom: 14px; }
.feature p { font-size: 15px; color: var(--muted); margin-top: 6px; }

/* ---- three ways in -------------------------------------------------- */
.ways { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.way { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.way .badge { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px; }
.way ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; color: var(--muted); }
.way li { padding-left: 20px; position: relative; }
.way li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.way .told { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.way .told b { font-weight: 600; }
.merge { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: 15px; font-weight: 600; }
.merge span { background: var(--primary); color: #FFFFFF; border-radius: 999px; padding: 8px 16px; }
.merge i { font-style: normal; color: var(--muted); font-weight: 500; }

/* ---- assessment: the evidence does the work ------------------------- */
.flow4 { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flow4 li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.flow4 .n { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; }
.flow4 b { display: block; font-weight: 600; font-size: 15.5px; }
.flow4 span.what { display: block; color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.cited { margin-top: 48px; display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .cited { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; } }
.draft h3 { font-size: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.draft .sec { margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.draft p.body { margin-top: 6px; font-size: 15.5px; line-height: 1.75; max-width: none; }
.src { display: inline-block; font-size: 11.5px; font-weight: 600; line-height: 1.4; vertical-align: 1px; border-radius: 6px; padding: 1px 7px; margin: 0 2px; white-space: nowrap; }
.src.q { background: #EFEAFF; color: #3B2E7E; }
.src.t { background: #E3F6F2; color: #0B4A40; }
.src.i { background: #FFF1DE; color: #6A3A05; }
.gap-note { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; background: var(--wash); border-radius: 10px; padding: 10px 12px; }
.gap-note b { font-weight: 600; }
.checks { display: grid; gap: 10px; }
.checks .card { padding: 18px 20px; }
.checks h3 { font-size: 16px; }
.checks p { font-size: 14.5px; color: var(--muted); margin-top: 4px; }

/* ---- NHS: a dark band, said plainly ---------------------------------- */
.nhs { background: var(--hero); color: #C9CBE6; }
.nhs h1, .nhs h2, .nhs .eyebrow { color: #FFFFFF; }
.nhs .btn { background: var(--lilac); color: var(--ink); }
.nhs .btn.ghost { background: transparent; color: #FFFFFF; border: 1px solid #FFFFFF; }
.nhs .lede { color: #C9CBE6; margin-top: 16px; }
.nhs-grid { display: grid; gap: 12px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.nhs-item { border: 1px solid #4A4F8C; border-radius: 14px; padding: 18px 18px 20px; background: rgba(255,255,255,.03); }
.nhs-item b { display: block; color: #FFFFFF; font-weight: 600; font-size: 15.5px; }
.nhs-item > span { display: block; font-size: 14.5px; margin-top: 4px; }
.soon { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--pop); border-radius: 999px; padding: 1px 8px; vertical-align: 2px; }
.clock { margin-top: 28px; display: grid; gap: 8px; max-width: 760px; }
.clock .row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; font-size: 14px; }
.clock .bar { height: 12px; border-radius: 6px; background: #3A3F78; position: relative; overflow: hidden; }
.clock .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--t6); }
.clock .bar i.warn { background: var(--pop); }

/* ---- governance ---------------------------------------------------- */
.rules { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.rules li { padding: 16px 0; border-top: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.rules li:last-child { border-bottom: 1px solid var(--line); }
.rules b { color: var(--ink); font-weight: 600; }
.access-wrap { margin-top: 48px; display: grid; gap: 20px; }
@media (min-width: 980px) { .access-wrap { grid-template-columns: minmax(0, 1fr) 300px; } }
.access { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.access th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 10px 10px; }
.access td { padding: 12px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.access td:first-child { font-weight: 600; padding-left: 0; }
.access td:first-child small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.lv { display: inline-flex; align-items: center; gap: 7px; }
.lv::before { content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.lv.edit::before { background: var(--primary); }
.lv.see::before { border: 2px solid var(--primary); width: 6px; height: 6px; }
.lv.none { color: var(--muted); }
.lv.none::before { width: 10px; height: 2px; border-radius: 1px; background: #B5B3C6; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 13px; color: var(--muted); }
@media (max-width: 700px) {
  .access thead { display: none; }
  .access tr { display: block; border-top: 1px solid var(--line); padding: 10px 0; }
  .access td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; }
  .access td:first-child { display: block; padding-bottom: 6px; }
  .access td:not(:first-child)::before { content: attr(data-label); color: var(--muted); }
}
.audit h3 { font-size: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.audit ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.audit li { display: grid; grid-template-columns: 46px 1fr; gap: 8px; font-size: 13.5px; background: var(--wash); border-radius: 10px; padding: 9px 11px; }
.audit time { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--primary); font-weight: 600; }

/* ---- pricing ------------------------------------------------------- */
.plans { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; }
.plan.whole { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.plan .for { color: var(--muted); font-size: 15px; margin-top: 6px; }
.price { margin-top: 20px; display: flex; align-items: baseline; gap: 8px; }
.price .num { font-size: 44px; line-height: 1; }
.price .per { color: var(--muted); font-size: 15px; }
.extras { list-style: none; margin: 12px 0 0; padding: 0; font-size: 15px; }
.extras li { padding: 3px 0; }
.extras b { font-weight: 600; }
.ticks { list-style: none; margin: 20px 0 24px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 15px; }
.ticks li { padding-left: 24px; position: relative; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 10px; height: 6px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }
.plan .btn { margin-top: auto; text-align: center; }
.calc { margin-top: 40px; display: grid; gap: 28px; }
@media (min-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 44px; } }
.calc h3 { font-size: 20px; }
.slider { margin-top: 20px; }
.slider label { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; font-weight: 600; }
.slider output { font-family: 'Schibsted Grotesk', sans-serif; font-size: 22px; color: var(--primary); }
.slider input[type=range] { width: 100%; margin-top: 8px; accent-color: var(--primary); padding: 0; border: 0; background: none; }
.switch { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 15px; font-weight: 500; }
.switch input { width: 20px; height: 20px; accent-color: var(--primary); padding: 0; }
.result { display: grid; gap: 14px; align-content: start; }
.res { border-radius: 14px; padding: 16px 18px; background: var(--wash); }
.res.whole { background: var(--t2); }
.res .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.res .name { font-weight: 600; }
.res .total { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 32px; letter-spacing: -.02em; }
.res .total small { font-family: 'Instrument Sans', sans-serif; font-weight: 500; font-size: 14px; color: var(--muted); letter-spacing: 0; }
.res .how { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.res .meter { height: 8px; border-radius: 4px; background: rgba(13,15,36,.08); margin-top: 10px; overflow: hidden; }
.res .meter i { display: block; height: 100%; border-radius: 4px; background: var(--primary); width: 0; transition: width .35s ease; }
.addons { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15px; }
.addons th, .addons td { text-align: left; padding: 12px 0; border-top: 1px solid var(--line); vertical-align: top; }
.addons td:last-child, .addons th:last-child { text-align: right; padding-left: 16px; white-space: nowrap; }
.addons th { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-top: 0; padding-bottom: 6px; }
.addons .note { display: block; color: var(--muted); font-size: 14px; }
.terms { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.term { border-radius: 14px; padding: 20px; }
.term h3 { font-size: 17px; }
.term p { font-size: 15px; margin-top: 6px; }

/* ---- start a trial ------------------------------------------------- */
.steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; }
.steps li { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding-bottom: 20px; }
.steps li:not(:last-child)::after { content: ''; position: absolute; left: 18px; top: 38px; bottom: 2px; width: 2px; background: var(--line); }
.steps .n { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; }
.steps b { display: block; font-weight: 600; margin-top: 6px; }
.steps span.what { display: block; font-size: 14.5px; color: var(--muted); }
form { display: grid; gap: 14px; max-width: 540px; }
label { font-size: 14px; font-weight: 600; display: grid; gap: 6px; }
input, textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--white); border: 1px solid var(--field); border-radius: 6px; padding: 12px 14px; width: 100%; }
input:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
textarea { min-height: 130px; resize: vertical; }
.req { font-weight: 400; color: var(--muted); }
.form-note { font-size: 14px; color: var(--muted); }
input[aria-invalid='true'] { border-color: #A3360B; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button:disabled { opacity: .5; cursor: default; }
.said { font-size: 15px; padding: 13px 15px; border-radius: 8px; background: var(--t6); color: #0B3A33; font-weight: 500; }
.said[data-bad='yes'] { background: var(--t5); color: #4A1F05; }
select { font: inherit; font-size: 16px; color: var(--ink); background: var(--white); border: 1px solid var(--field); border-radius: 6px; padding: 12px 14px; width: 100%; }
select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.pair { display: grid; gap: 14px; }
@media (min-width: 560px) { .pair { grid-template-columns: 1.4fr 1fr; } }

/* The footer, the same on every page: Baton and what it is, the pages, the
   website's own notices, then the company that runs it (company law asks for
   its name, number and registered office on its website). Two columns of
   links beside the brand on a wide screen; stacked on a phone. */
footer { border-top: 1px solid #3A3F78; background: var(--primary); color: #C9CBE6; padding: 56px 0 28px; font-size: 14px; line-height: 1.6; }
footer .foot-top { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; }
footer .foot-brand { grid-column: 1 / -1; }
footer .foot-brand p { margin: 14px 0 0; max-width: 36ch; font-size: 15px; color: #DADCF0; }
footer .foot-cta { display: inline-block; margin-top: 20px; background: var(--pop); color: #0D0F24; font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 6px; text-decoration: none; }
footer .foot-cta:hover { background: #FFEBA6; }
footer h2 { font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; color: #A9ADDB; margin: 0 0 12px; }
footer nav.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; font-size: 15px; font-weight: 400; }
footer nav.foot-col a { color: #FFFFFF; text-decoration: none; padding: 2px 0; }
footer nav.foot-col a:hover, footer nav.foot-col a[aria-current='page'] { color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
footer .foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px; margin-top: 44px; padding-top: 22px; border-top: 1px solid #3A3F78; font-size: 13px; color: #A9ADDB; }
footer .foot-base p { margin: 0; max-width: none; }
footer a:focus-visible { outline: 2px solid var(--pop); outline-offset: 3px; border-radius: 3px; }
@media (min-width: 760px) {
  footer .foot-top { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  footer .foot-brand { grid-column: auto; }
}

/* Anyone who has asked their device for less motion sees every drawing
   finished, and nothing moving. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] .rv, .js [data-reveal] .pop, .js [data-reveal] .grow { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js [data-reveal] .draw { stroke-dashoffset: 0 !important; transition: none !important; }
  .js .handover li i, .js .handover.in li i { animation: none !important; background: var(--pop) !important; border-color: var(--pop) !important; }
  .js .handover li span, .js .handover.in li span { animation: none !important; color: #FFFFFF !important; }
  .js .handover .runner, .js .handover.in .runner { animation: none !important; left: 91.667% !important; }
  .relay-track .seg::before { transition: none; }
  .res .meter i { transition: none; }
}

/* ---- pages --------------------------------------------------------- */
nav a[aria-current='page'] { color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.page-hero { background: var(--hero); padding: clamp(48px, 6vw, 80px) 0 clamp(44px, 5vw, 64px); }
.page-hero h1 { color: #FFFFFF; font-size: clamp(32px, 4.6vw, 52px); max-width: 20ch; }
.page-hero .eyebrow { color: #C7B9F2; }
.page-hero p.lede { font-size: clamp(17px, 1.9vw, 20px); color: #C9CBE6; margin-top: 18px; }
.page-hero .btn { background: var(--lilac); color: var(--ink); }
.page-hero .btn:hover { background: #D8CEF7; }
.page-hero .btn.ghost { background: transparent; color: #FFFFFF; border: 1px solid #FFFFFF; }
.page-hero .btn.ghost:hover { background: #FFFFFF; color: var(--ink); }
h1.as-h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; }
.explore { display: grid; gap: 16px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
a.door { display: flex; flex-direction: column; gap: 8px; text-decoration: none; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 24px; transition: border-color .2s ease, transform .2s ease; }
a.door:hover { border-color: var(--primary); transform: translateY(-2px); }
a.door:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
a.door .chip { display: inline-block; width: 34px; height: 8px; border-radius: 4px; }
a.door p { font-size: 15px; color: var(--muted); }
a.door .go { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 15px; color: var(--primary); }
.teaser { display: grid; gap: 16px; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.teaser .card b { font-family: 'Schibsted Grotesk', sans-serif; font-size: 34px; letter-spacing: -.02em; }
.teaser .card p { font-size: 15px; color: var(--muted); margin-top: 4px; }
.cta-band { background: var(--hero); color: #C9CBE6; text-align: center; }
.cta-band h2 { color: #FFFFFF; }
.cta-band p { margin: 14px auto 0; }
.cta-band .cta-row { justify-content: center; }
.cta-band .btn { background: var(--lilac); color: var(--ink); }
.cta-band .btn.ghost { background: transparent; color: #FFFFFF; border: 1px solid #FFFFFF; }

/* ---- trust centre (trust/index.html) --------------------------------------
   Each standard and control carries a status pill: Done (with its date), In
   progress, Planned or Later. Official badges are shown only once a standard
   is achieved; until then each has a neutral mark of our own. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page-hero .reviewed { margin-top: 22px; font-size: 14px; color: #A9ADDB; }
.glance-band { padding: 0; background: var(--hero); }
.glance { list-style: none; margin: 0; padding: 0 0 clamp(40px, 5vw, 60px); display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.glance li { background: rgba(255, 255, 255, .06); border: 1px solid #3A3F78; border-radius: 14px; padding: 18px 20px; }
.glance b { display: block; color: #FFFFFF; font-family: 'Schibsted Grotesk', system-ui, sans-serif; font-size: 18px; }
.glance span { display: block; margin-top: 4px; font-size: 14.5px; color: #C9CBE6; }
.legend { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 999px; border: 1px solid transparent; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.is-done { background: #DDF4EF; color: #0B5C4E; }
.pill.is-prog { background: #FFF1C2; color: #6A4A00; }
.pill.is-plan { background: var(--white); color: var(--muted); border-color: var(--line); }
.pill.is-plan::before { background: transparent; border: 1.5px solid currentColor; box-sizing: border-box; }
.pill.is-later { background: transparent; color: var(--muted); border-color: var(--line); border-style: dashed; }
.pill.is-later::before { display: none; }
.stds { display: grid; gap: 14px; margin-top: 28px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.std { display: grid; grid-template-columns: 56px 1fr; gap: 6px 16px; align-items: start; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.std .mono { grid-row: span 2; width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--wash); color: var(--primary); font-family: 'Schibsted Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 13px; line-height: 1.1; letter-spacing: .02em; }
.std h3 { font-size: 17px; }
.std p { font-size: 14.5px; color: var(--muted); margin: 4px 0 0; }
.std .pill { grid-column: 2; justify-self: start; margin-top: 8px; }
.ctrls { display: grid; gap: 14px; margin-top: 32px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ctrl { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.ctrl h3 { font-size: 17px; }
.ctrl p { font-size: 14.5px; color: var(--muted); margin: 6px 0 14px; }
.ctrl p a { color: var(--primary); text-underline-offset: 3px; }
.ctrl .pill { margin-top: auto; align-self: flex-start; }
.log { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.log li { position: relative; padding: 0 0 22px 22px; display: grid; gap: 2px; }
.log li::before { content: ''; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid var(--paper); }
.log time { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cta-band p a { color: #FFFFFF; text-underline-offset: 3px; }
@media (max-width: 420px) { .stds, .ctrls { grid-template-columns: 1fr; } }

/* ---- infographics: drawn once as they come into view --------------------- */
/* Every animation here runs once and is finished within five seconds of the
   drawing coming into view (WCAG 2.2.2), so nothing needs a pause button. */
.js [data-reveal] .growx { transform: scaleX(0); transform-box: fill-box; transform-origin: 0 50%; transition: transform .9s cubic-bezier(.3, .7, .2, 1); transition-delay: calc(var(--i, 0) * 110ms + var(--base, 0ms)); }
.js [data-reveal].in .growx { transform: none; }
.js [data-reveal] .traveller { opacity: 0; }
.js [data-reveal].in .traveller { animation: travel var(--dur, 3.2s) cubic-bezier(.45, 0, .25, 1) var(--delay, 0s) both; }
@keyframes travel { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.js [data-reveal] .pulse { opacity: 0; transform-box: fill-box; transform-origin: center; }
.js [data-reveal].in .pulse { animation: pulse 1.1s ease-out var(--delay, 3.4s) 2; }
@keyframes pulse { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
.info { margin: 44px 0 0; }
.info svg { display: block; width: 100%; height: auto; }
.info svg text { font-family: 'Instrument Sans', system-ui, sans-serif; }
.info .t { font-family: 'Schibsted Grotesk', system-ui, sans-serif; font-weight: 700; }
.wide-only { display: block; }
.narrow-only { display: none; }
@media (max-width: 700px) { .wide-only { display: none; } .narrow-only { display: flex; } }
.info-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) { .info-scroll svg { min-width: 720px; } }

/* the weekly cycle */
.cycle { margin-top: 48px; display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .cycle { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 44px; } }
.cycle svg { width: 100%; max-width: 540px; height: auto; display: block; margin: 0 auto; }
.cycle svg text { font-family: 'Instrument Sans', system-ui, sans-serif; }
.exits { display: grid; gap: 10px; }
.exit { display: grid; grid-template-columns: 12px 1fr; gap: 14px; align-items: start; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.exit i { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; }
.exit b { display: block; font-weight: 600; font-size: 15.5px; }
.exit span { display: block; color: var(--muted); font-size: 14.5px; margin-top: 2px; }

/* the clinic at a glance */
.ops { margin-top: 40px; display: grid; gap: 22px; }
@media (min-width: 900px) { .ops { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; } }
.ops h3 { font-size: 17px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ops .sub { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.funnel { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.funnel li { display: grid; grid-template-columns: 112px 1fr 40px; gap: 12px; align-items: center; font-size: 14px; }
.funnel .track { height: 26px; border-radius: 7px; background: var(--wash); overflow: hidden; }
.funnel .fill { height: 100%; border-radius: 7px; }
.funnel b { font-family: 'Schibsted Grotesk', sans-serif; font-variant-numeric: tabular-nums; text-align: right; }
.stuck { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.stuck li { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 10px 12px; border-radius: 10px; background: #FFF6E6; }
.stuck li b { margin-left: auto; font-family: 'Schibsted Grotesk', sans-serif; }
.stuck li small { color: var(--muted); }
.cap { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.cap li { display: grid; grid-template-columns: 92px 1fr 40px; gap: 10px; align-items: center; font-size: 14px; }
.cap .track { height: 8px; border-radius: 4px; background: var(--wash); overflow: hidden; }
.cap .fill { height: 100%; border-radius: 4px; background: var(--primary); }
.cap b { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] .growx { transform: none !important; transition: none !important; }
  .js [data-reveal] .traveller, .js [data-reveal] .pulse { display: none; }
}