/* Afara · inner pages (trial interest, medical information, side effects, words we use).
   No WebGL here: these pages are tasks, so they load fast. The cell still moves behind them,
   built from the same real specimens, as three CSS depth layers driven by pointer and scroll. */

/* ---------- living background ---------- */
.live { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--void); }
.live .l { position: absolute; inset: -10%; will-change: transform;
  transform: translate3d(calc(var(--px, 0) * var(--k) * 1px), calc(var(--py, 0) * var(--k) * 1px - var(--sy, 0) * var(--z) * 1px), 0); }
.live .far { --k: 10; --z: .035; background: url(../assets/img/zeiss-cells.jpg) center/cover; filter: blur(2px) brightness(.4) saturate(.9); }
.live .mid { --k: 28; --z: .11; }
.live .near { --k: 64; --z: .28; }
.live i { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; background: center/contain no-repeat; mix-blend-mode: screen; opacity: var(--o, .55);
  -webkit-mask: radial-gradient(closest-side, #000 50%, transparent); mask: radial-gradient(closest-side, #000 50%, transparent);
  animation: drift var(--t, 40s) ease-in-out infinite alternate; }
.live .mid i { filter: blur(1px) saturate(1.1); }
.live .near i { filter: blur(12px); }
@keyframes drift { to { transform: translate(var(--dx, 40px), var(--dy, -30px)) rotate(var(--r, 16deg)); } }
.live::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 35%, oklch(0.1 0.014 245 / .82)); }

/* ---------- page shell ---------- */
.page { position: relative; z-index: 2; padding: calc(var(--nav-h) + 40px) var(--gutter) 96px; }
.head-plate { position: relative; overflow: hidden; display: grid; gap: 18px; padding: 34px 38px 36px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--card-rim), inset 0 1px 0 oklch(1 0 0 / .08); }
.head-plate .crumbs { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0; padding: 0; list-style: none; }
.head-plate .crumbs a { color: var(--ink-2); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
@media (hover: hover) { .head-plate .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; } }
.head-plate .crumbs li { white-space: nowrap; }
.head-plate .crumbs li + li::before { content: "/"; margin-right: 12px; color: var(--ink-3); }
.ph1 { margin: 0; font: 400 clamp(2.5rem, 1.3rem + 3.6vw, 4.75rem)/.98 var(--display); /* T1: the light display weight of the home section titles */ letter-spacing: -.01em; max-width: 17ch; text-wrap: balance; }
.head-plate .lead { max-width: 36em; color: var(--ink-2); }
.head-plate .spec-bg { position: absolute; right: -40px; top: -60px; width: 420px; aspect-ratio: 1; background: center/contain no-repeat; mix-blend-mode: screen; opacity: .5; pointer-events: none;
  -webkit-mask: radial-gradient(closest-side, #000 40%, transparent), linear-gradient(100deg, transparent 12%, #000 58%); -webkit-mask-composite: source-in;
  mask: radial-gradient(closest-side, #000 40%, transparent), linear-gradient(100deg, transparent 12%, #000 58%); mask-composite: intersect; } /* 55: fades out towards the text */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 7px 11px; border-radius: 3px; background: oklch(0.12 0.016 245 / .75); box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .16); font: 400 15px/1.2 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink); } /* 49: chips match the home page trial cards */
.chips li b { color: var(--c, var(--bridge)); font-weight: 500; }
.card { position: relative; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--card-rim), inset 0 1px 0 oklch(1 0 0 / .08), 0 30px 80px -40px oklch(0 0 0 / .9); }
.concept-note { display: flex; gap: 14px; align-items: start; padding: 16px 20px; border-radius: 8px; background: oklch(0.22 0.05 78 / .55); box-shadow: inset 0 0 0 1px oklch(0.84 0.15 78 / .45); font-size: 15.5px; line-height: 1.5; }
.concept-note b { color: var(--ink); }

/* ---------- step flow (trial interest) ---------- */
.flow { display: grid; grid-template-columns: 280px 1fr; gap: 20px; margin-top: 20px; align-items: start; }
/* the confirmation is the end of the journey: it fills the screen so the footer does not peek in, cut off, under it */
.flow.is-sent { min-height: calc(100svh - var(--nav-h) - 40px); }
.tray { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 8px; margin: 0; padding: 12px; list-style: none; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--card-rim); }
.tray .ts { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; width: 100%; min-height: 64px; padding: 8px 12px 8px 8px; box-sizing: border-box;
  border-radius: 6px; font: inherit; text-align: left; color: var(--ink-2); background: transparent; border: 0; transition: background-color 250ms var(--ease-ui), color 250ms var(--ease-ui); }
.tray button.ts { cursor: pointer; }
@media (hover: hover) { .tray button.ts:hover { background: oklch(1 0 0 / .05); color: var(--ink); } }
.tray .thumb { position: relative; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: oklch(0.1 0.014 245); box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .25); }
.tray .thumb i { position: absolute; inset: 0; background: center/170% no-repeat; filter: grayscale(1) brightness(.6); transition: filter 500ms var(--ease); }
.tray .thumb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, transparent 62%, oklch(0.12 0.016 245 / .9)); }
.tray .n { display: block; font: 500 12px/1 var(--data); letter-spacing: .14em; color: var(--ink-3); margin-bottom: 6px; }
.tray .t { font: 500 16px/1.25 var(--text); } .tray .ts-s { display: none; }
.tray li[aria-current="step"] .ts { background: oklch(0.22 0.035 145 / .8); color: var(--ink); box-shadow: inset 0 0 0 1px oklch(0.89 0.2 128 / .4); }
.tray li[aria-current="step"] .thumb i, .tray li.done .thumb i { filter: none; }
.tray li[aria-current="step"] .n { color: var(--bridge); }
.tray li.done .n::after { content: " · done"; color: var(--bridge); }
.tray li.done .thumb { box-shadow: 0 0 0 2px var(--bridge), 0 0 16px -4px var(--bridge); }
.sheet { padding: 34px var(--pad-card) 26px; display: grid; gap: 0; }
.step { display: grid; gap: 30px; }
.step[hidden] { display: none; }
.step > header { display: grid; gap: 10px; }
.step h2 { margin: 0; font: 400 clamp(2rem, 1.4rem + 1.6vw, 2.875rem)/1.04 var(--display); letter-spacing: -.016em; text-wrap: balance; }
.step h2:focus { outline: none; }
.step h2:focus-visible { outline: 2px solid var(--bridge); outline-offset: 6px; }
.step header p { margin: 0; color: var(--ink-2); max-width: 36em; }
.meter { display: flex; gap: 6px; margin-bottom: 22px; }
.meter i { flex: 1; height: 4px; border-radius: 2px; background: oklch(1 0 0 / .12); transition: background-color 400ms var(--ease); }
.meter i.on { background: var(--bridge); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 6px; }
.notice { display: flex; gap: 12px; align-items: start; margin: 30px calc(-1 * var(--pad-card)) -26px; padding: 18px var(--pad-card); border-radius: 0 0 var(--r-card) var(--r-card); background: oklch(0.2 0.05 28 / .5); box-shadow: inset 0 1px 0 oklch(0.7 0.19 28 / .35); font-size: 15.5px; line-height: 1.5; }
.notice::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--target); background: radial-gradient(circle, var(--target) 0 2px, transparent 2.5px); }

/* ---------- questions and fields ---------- */
fieldset.q { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
fieldset.q legend, .fl { padding: 0; font: 500 19px/1.35 var(--text); color: var(--ink); }
fieldset.q legend { margin-bottom: 12px; }
.hint { margin: -4px 0 4px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
/* 47: every option grid runs the full width of its form */
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 10px; }
.opts.wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
fieldset.q:has(input[name="who"]) .opts { grid-template-columns: 1fr; } /* 46: three long answers, one per row */
.opt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 14px 16px; box-sizing: border-box; border-radius: 6px; cursor: pointer;
  background: oklch(0.12 0.016 245 / .72); box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .42); font-size: 16.5px; line-height: 1.3;
  transition-property: background-color, box-shadow, transform; transition-duration: 200ms; transition-timing-function: var(--ease-ui); }
@media (hover: hover) { .opt:hover { box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .7); } }
.opt:active { transform: scale(.985); }
.opt input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; border-radius: 50%; background: oklch(0.1 0.014 245);
  box-shadow: inset 0 0 0 1.6px var(--ink-2); cursor: pointer; transition: box-shadow 200ms var(--ease-ui); }
/* radio: an eyepiece that racks onto its target */
.opt input[type="radio"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bridge); transform: scale(0); transition: transform 260ms var(--ease); }
.opt input[type="radio"]::after { content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--bridge); opacity: 0; transform: scale(1.4); transition: transform 360ms var(--ease), opacity 260ms var(--ease-ui); }
.opt input[type="radio"]:checked::before { transform: scale(1); }
.opt input[type="radio"]:checked::after { opacity: .6; transform: scale(1); }
/* checkbox: the bridge arch */
.opt input[type="checkbox"] { border-radius: 5px; }
.opt input[type="checkbox"]::before { content: ""; width: 16px; height: 16px; background: var(--void);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 14C4.5 5 13.5 5 15 14' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 14C4.5 5 13.5 5 15 14' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transform: scale(0); transition: transform 260ms var(--ease); }
.opt input[type="checkbox"]:checked { background: var(--bridge); box-shadow: none; }
.opt input[type="checkbox"]:checked::before { transform: scale(1); }
.opt:has(input:checked) { background: oklch(0.22 0.04 140 / .7); box-shadow: inset 0 0 0 1.5px var(--bridge); }
.opt input:focus-visible { outline: none; }
.opt:has(input:focus-visible) { outline: 2px solid var(--bridge); outline-offset: 3px; }
.opt.single { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; align-items: start; }
.field .hint { margin: 2px 0 0; font-size: 14.5px; }
.dmy { display: inline-flex; gap: 12px; padding: 12px 14px; border-radius: 8px; background: oklch(1 0 0 / .03); box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .14); } .dmy .field { gap: 6px; } .dmy label { font-size: 15.5px; color: var(--ink-2); } .dmy .inp { width: 4.6em; text-align: center; } .dmy .inp.yy { width: 6.4em; }
fieldset.q.date[data-invalid] .inp { box-shadow: inset 0 0 0 1.5px var(--target); }
.notify { padding: 34px var(--pad-card); }
.notify > p { max-width: 40em; }
.notify form { width: 100%; }
.notify .fields { grid-template-columns: 1fr; width: 100%; text-align: left; }

.fields .full { grid-column: 1 / -1; }
.opt-tag { font: 400 15px/1 var(--text); color: var(--ink-2); margin-left: 6px; }
.inp { width: 100%; box-sizing: border-box; min-height: 54px; padding: 14px 16px; border: 0; border-radius: 6px; font: 400 17px/1.4 var(--text); color: var(--ink);
  background-color: oklch(0.15 0.018 245 / .9); background-image: linear-gradient(180deg, oklch(1 0 0 / .045), transparent 60%); box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .48), inset 0 1px 0 oklch(1 0 0 / .1); transition: box-shadow 200ms var(--ease-ui); }
.inp::placeholder { color: var(--ink-3); }
.inp:focus { outline: 2px solid var(--bridge); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--bridge), inset 0 -2px 0 var(--bridge), 0 0 24px -8px var(--bridge); }
/* a chosen tile shows its specimen */
.opt:has(input:checked) { background-image: radial-gradient(closest-side, transparent 60%, oklch(0.22 0.04 140 / .7)), url(../assets/img/spec-complex.webp); background-size: 64px 64px; background-position: right -10px center; background-repeat: no-repeat; }
textarea.inp { min-height: 150px; resize: vertical; }
select.inp { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
  background: oklch(0.11 0.015 245 / .85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 7C6 12 12 12 14 7' fill='none' stroke='%23e9e6dc' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") right 16px center/18px no-repeat; }
select.inp option { background: oklch(0.16 0.02 245); color: var(--ink); }
input[type="date"].inp { color-scheme: dark; }
.inp[aria-invalid="true"], fieldset.q[data-invalid] .opt { box-shadow: inset 0 0 0 1.5px var(--target); }
.err { display: flex; gap: 10px; align-items: start; margin: 0; font: 500 15.5px/1.4 var(--text); color: oklch(0.82 0.13 32); }
.err[hidden] { display: none; }
.err::before, .errsum b::before { content: "!" / ""; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--target); color: var(--void); font: 700 13px/1 var(--text); }
.errsum { display: grid; gap: 10px; padding: 18px 20px; border-radius: 8px; background: oklch(0.2 0.05 28 / .6); box-shadow: inset 0 0 0 1.5px var(--target); }
.errsum[hidden] { display: none; }
.errsum:focus { outline: 2px solid var(--target); outline-offset: 3px; }
.errsum b { display: flex; gap: 10px; align-items: center; font: 500 17px/1.3 var(--text); }
.errsum ul { margin: 0; padding: 0 0 0 30px; display: grid; gap: 6px; }
.errsum a { color: var(--ink); text-underline-offset: 4px; }
.cond[hidden] { display: none; }

/* ---------- what taking part means ---------- */
.visits { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: v; }
.visits li { position: relative; display: grid; gap: 8px; align-content: start; padding: 64px 16px 18px; border-radius: 8px; background: oklch(0.12 0.016 245 / .7); box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .14); counter-increment: v; }
.visits li::before { content: "0" counter(v); position: absolute; left: 16px; top: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--c); font: 500 12px/1 var(--data); color: var(--ink); background: radial-gradient(circle, color-mix(in oklch, var(--c) 30%, transparent), transparent 70%); }
/* each visit is joined to the next by a bridge */
.visits li:not(:last-child)::after { content: ""; position: absolute; left: 58px; right: -14px; top: 22px; height: 18px; background: linear-gradient(90deg, var(--c), color-mix(in oklch, var(--c) 30%, var(--bridge)));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18' preserveAspectRatio='none'%3E%3Cpath d='M1 16C25 1 75 1 99 16' fill='none' stroke='%23000' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18' preserveAspectRatio='none'%3E%3Cpath d='M1 16C25 1 75 1 99 16' fill='none' stroke='%23000' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.visits b { font: 500 18px/1.25 var(--text); }
.visits span { font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.promise { display: grid; gap: 10px; align-content: start; padding: 22px 20px; border-radius: 8px; background: oklch(0.12 0.016 245 / .7); box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .14); }
.promise .eye { width: 54px; height: 54px; border-radius: 50%; background: center/170% no-repeat; box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .3), 0 0 0 5px oklch(0.95 0.012 95 / .04); }
.promise b { font: 500 18px/1.3 var(--text); } .promise p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }

/* ---------- check and send ---------- */
.summary { margin: 0; display: grid; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .14); }
.summary > div { display: grid; grid-template-columns: minmax(180px, .9fr) 1.6fr auto; gap: 18px; align-items: center; padding: 14px 18px; background: oklch(0.12 0.016 245 / .6); }
.summary > div:nth-child(even) { background: oklch(0.15 0.018 245 / .6); }
.summary dt { font-size: 15.5px; color: var(--ink-2); } .summary dd { margin: 0; font-size: 16.5px; line-height: 1.45; }
.summary .change { all: unset; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--bridge); font-size: 15.5px; }
.summary .change:focus-visible { outline: 2px solid var(--bridge); outline-offset: 2px; border-radius: 2px; }
.fit { display: flex; gap: 14px; align-items: start; padding: 16px 20px; border-radius: 8px; background: oklch(0.22 0.05 78 / .5); box-shadow: inset 0 0 0 1px oklch(0.84 0.15 78 / .4); font-size: 16px; line-height: 1.5; }
.fit[hidden] { display: none; }

/* ---------- sent: the bridge draws itself ---------- */
.sent { display: grid; justify-items: start; gap: 22px; }
.sent .arch { width: 180px; height: 100px; overflow: visible; }
.sent .arch path { fill: none; stroke: var(--bridge); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
.sent .arch circle { fill: var(--bridge); transform-box: fill-box; transform-origin: center; transform: scale(0); }
.sent.go .arch path { animation: draw 1.4s var(--ease) .15s forwards; }
.sent.go .arch circle { animation: pop .5s var(--ease) forwards; } .sent.go .arch circle + circle { animation-delay: 1.2s; }
@keyframes draw { to { stroke-dashoffset: 0; } } @keyframes pop { to { transform: scale(1); } }

/* ---------- small cards beside a form ---------- */
.side-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; margin-top: 20px; align-items: start; }
@media (min-width: 1101px) { .side-grid > .stack { position: sticky; top: calc(var(--nav-h) + 20px); } }
.stack { display: grid; gap: 20px; }
.mini { display: grid; gap: 14px; padding: 26px 26px 24px; }
.mini h2, .mini h3 { margin: 0; font: 400 28px/1.1 var(--display); letter-spacing: -.012em; }
.mini p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.mini .facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15.5px; }
.mini .facts li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; } .mini .facts li span:first-child { color: var(--ink-2); }
.route { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 22px 24px; border-radius: var(--r-card); text-decoration: none; color: var(--ink);
  background: var(--card); box-shadow: inset 0 0 0 1px oklch(0.84 0.15 78 / .45); transition: transform 300ms var(--ease), box-shadow 200ms var(--ease-ui); }
@media (hover: hover) { .route:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--tag); } }
.route .lensi { width: 62px; height: 62px; border-radius: 50%; background: oklch(0.1 0.014 245) center/170% no-repeat; box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .35), 0 0 0 5px oklch(0.84 0.15 78 / .12); }
.route b { display: block; font: 500 19px/1.3 var(--text); margin-bottom: 4px; } .route span { color: var(--ink-2); font-size: 15.5px; line-height: 1.45; }
.result { display: grid; gap: 16px; padding: 30px 32px; }
.result[hidden] { display: none; }
.result h2 { margin: 0; font: 400 34px/1.05 var(--display); letter-spacing: -.014em; }
.result h2:focus { outline: none; }

/* ---------- healthcare professional gate ---------- */
dialog.gate { max-width: none; width: min(600px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 14px; background: transparent; color: var(--ink); overflow: visible; }
dialog.gate::backdrop { background: oklch(0.1 0.014 245 / .74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gate .box { position: relative; display: grid; gap: 18px; padding: 92px 34px 30px; border-radius: 14px; background: oklch(0.17 0.02 245 / .98); box-shadow: inset 0 0 0 1px oklch(0.74 0.12 255 / .45), 0 40px 120px -30px oklch(0 0 0 / .95); }
.gate .lens { position: absolute; left: 34px; top: -46px; width: 112px; height: 112px; border-radius: 50%; background: oklch(0.1 0.014 245) center/165% no-repeat;
  box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .35), 0 0 0 8px oklch(0.17 0.02 245), 0 0 0 9px oklch(0.74 0.12 255 / .45), 0 20px 40px -10px oklch(0 0 0 / .8); }
.gate h2 { margin: 0; font: 400 32px/1.08 var(--display); letter-spacing: -.014em; text-wrap: balance; }
.gate p { margin: 0; color: var(--ink-2); line-height: 1.55; }
.gate .actions { padding-top: 8px; }
/* until the visitor confirms, the hidden content takes no room: only the gate shows, no empty page beneath it */
[data-locked] .page .wrap > :not(dialog) { display: none; }
[data-locked] footer { display: none; } /* nothing sits behind the gate */

/* ---------- words we use ---------- */
.find { display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; align-items: end; margin-top: 20px; padding: 24px 26px; }
.find .field { max-width: 560px; }
.find .count { min-height: 54px; display: flex; align-items: center; margin: 0; font: 500 12.5px/1.3 var(--data); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.az { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.az a, .az span { display: grid; place-items: center; width: 40px; height: 44px; border-radius: 4px; font: 500 15px/1 var(--banner); letter-spacing: .04em; text-decoration: none; }
.az a { color: var(--ink); background: oklch(0.12 0.016 245 / .72); box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .3); transition: background-color 200ms var(--ease-ui), color 200ms var(--ease-ui); }
@media (hover: hover) { .az a:hover { background: var(--bone); color: var(--void); } }
.az span { color: var(--ink-3); }
.az a.off { pointer-events: none; background: transparent; box-shadow: none; color: var(--ink-3); }
.ph1:focus, .result h2:focus, main:focus { outline: none; }
.letters { display: grid; gap: 16px; margin-top: 20px; }
.letter { display: grid; grid-template-columns: 150px 1fr; gap: 0; padding: 8px; }
.letter[hidden] { display: none; }
.letter > h2 { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; margin: 0; padding: 18px 0 0 26px; font: 500 72px/.9 var(--banner); color: var(--ink); letter-spacing: -.02em; }
.letter > h2 span { display: block; margin-top: 12px; font: 500 12px/1 var(--data); letter-spacing: .14em; color: var(--ink-2); }
.terms { margin: 0; display: grid; }
.term { display: grid; grid-template-columns: minmax(200px, .8fr) 1.7fr; gap: 24px; padding: 20px 26px; border-radius: 6px; }
/* 48: every index letter and every entry share one size and one padding */
.term[hidden] { display: none; }
.term { position: relative; }
.term::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; border-radius: 1px; background: color-mix(in oklch, var(--c) 75%, transparent); }
.term + .term { box-shadow: inset 0 1px 0 oklch(1 0 0 / .07); }
.term dt { display: flex; gap: 12px; align-items: baseline; font: 500 19px/1.3 var(--text); }
.term dt::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--bridge)); box-shadow: 0 0 10px -1px var(--c, var(--bridge)); transform: translateY(-1px); }
.term dd { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.term dd .kind { display: inline-block; margin-top: 8px; font: 500 12px/1 var(--data); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
mark { background: oklch(0.89 0.2 128 / .3); color: var(--ink); border-radius: 2px; padding: 0 1px; }
.none { padding: 30px 32px; } .none[hidden] { display: none; }
.key { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-2); }
.key li { display: flex; gap: 10px; align-items: center; } .key li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }


/* ---------- forms as a lab notebook ---------- */
form { counter-reset: fld; }
.field:has(> .inp), fieldset.q { counter-increment: fld; }
.dmy .field { counter-increment: none; }
.field > .fl::before, fieldset.q > legend:not(.sr-only)::before { content: counter(fld, decimal-leading-zero); display: inline-block; min-width: 30px; margin-right: 10px; padding: 3px 0; font: 500 12px/1 var(--data); letter-spacing: .1em; color: var(--bridge); vertical-align: 2px; }
.dmy .field > label::before { content: none; }
.inp { box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .48), inset 0 1px 0 oklch(1 0 0 / .1), inset 0 -2px 0 oklch(0.89 0.2 128 / .35); }
.inp:hover { box-shadow: inset 0 0 0 1px oklch(0.95 0.012 95 / .7), inset 0 -2px 0 oklch(0.89 0.2 128 / .6); }
.opt { position: relative; overflow: hidden; }
.opt::after { content: ""; position: absolute; right: 12px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; opacity: 0; transform: scale(.6); transition: opacity 250ms var(--ease-ui), transform 350ms var(--ease);
  background: oklch(0.1 0.014 245) url(../assets/img/spec-complex.webp) center/170% no-repeat; box-shadow: inset 0 0 0 1px var(--bridge), 0 0 14px -4px var(--bridge); }
.opt:has(input:checked) { background-image: none; }
.opt:has(input:checked)::after { opacity: 1; transform: none; }
.opt.single::after { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .flow, .side-grid { grid-template-columns: 1fr; }
  .tray { position: static; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; }
  .tray .ts { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; padding: 10px 4px; }
  .tray .t { font-size: 13.5px; }
  .visits, .promises { grid-template-columns: 1fr 1fr; }
  .visits li:nth-child(2)::after { display: none; }
}
@media (max-width: 640px) {
  .page { padding-top: calc(var(--nav-h) + 20px); }
  .head-plate { padding: 26px 20px 28px; } .head-plate .spec-bg { width: 220px; right: -90px; top: auto; bottom: -70px; opacity: .35; }
  .sheet { padding: 26px var(--pad-card) 18px; } .notice { margin: 26px calc(-1 * var(--pad-card)) -18px; padding: 16px var(--pad-card); }
  .tray .thumb { width: 40px; height: 40px; } .tray .t { display: none; } .tray .n { margin: 0 0 4px; } .tray .ts-s { display: block; font-size: 12.5px; line-height: 1.2; color: var(--ink); }
  .tray li.done .n::after { content: ""; }
  .fields, .visits, .promises { grid-template-columns: 1fr; } .fields .hint:empty { display: none; }
  .notify { padding: 26px var(--pad-card); }
  .visits li::after { display: none; }
  .summary > div { grid-template-columns: 1fr auto; gap: 4px 12px; } .summary dd { grid-column: 1; } .summary .change { grid-row: 1 / 3; grid-column: 2; }
  .actions .btn { width: 100%; }
  .find { grid-template-columns: 1fr; padding: 20px 18px; }
  .letter { grid-template-columns: 1fr; } .letter > h2 { position: static; padding: 14px 18px 0; font-size: 64px; } .letter > h2 span { display: inline; margin-left: 12px; }
  .term { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
  .gate .box { padding: 84px 22px 24px; } .gate .lens { left: 22px; }
  .mini .facts li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .live i { animation: none; } .live .l { transform: none !important; }
  .sent .arch path { stroke-dashoffset: 0; } .sent .arch circle { transform: none; } .sent.go .arch path, .sent.go .arch circle { animation: none; }
}
@media (forced-colors: active) {
  .opt, .inp, .card, .tray, .summary, .route, .gate .box { border: 1px solid CanvasText; }
  .opt input { forced-color-adjust: auto; appearance: auto; -webkit-appearance: auto; }
}

/* about this site: four plain sections and a contents card that stays in view */
.about .stack { display: grid; gap: 20px; }
.about-sec { padding: 30px 34px 32px; box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1px var(--card-rim); }
.about-sec h2 { margin-bottom: 14px; }
.about-sec p { max-width: 62ch; color: var(--ink-2); } .about-sec p + p, .about-sec .kv + p, .about-sec .ticks + p { margin-top: 12px; }
.about-sec p b, .about-sec dt { color: var(--ink); }
.about-sec a { color: var(--ink); text-underline-offset: 3px; }
.about-sec .kv { display: grid; gap: 12px; margin: 14px 0 0; }
.about-sec .kv div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding-top: 12px; border-top: 1px solid var(--card-rim); }
.about-sec dt { font-weight: 500; } .about-sec dd { margin: 0; color: var(--ink-2); max-width: 58ch; }
.about-sec .ticks { max-width: 62ch; margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--ink-2); }
.about-sec .ticks li { position: relative; padding-left: 24px; }
.about-sec .ticks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 6px; border: solid var(--c); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.toc { padding: 24px 26px; } .toc ol { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.toc a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); text-decoration: none; }
.toc a::before { content: ""; width: 18px; height: 2px; background: var(--c); border-radius: 2px; }
@media (hover: hover) { .toc a:hover { text-decoration: underline; text-underline-offset: 4px; } }
@media (max-width: 1100px) { .about .toc { order: -1; } }
@media (max-width: 600px) { .about-sec { padding: 24px 22px 26px; } .about-sec .kv div { grid-template-columns: 1fr; gap: 4px; } }

/* news: the gel-tube pager becomes a jump list for the three stories */
.story-nav { justify-content: flex-start; margin-top: 20px; }
.stories { display: grid; gap: 20px; margin-top: 20px; }
.story { display: grid; grid-template-columns: 300px 1fr; overflow: hidden; }
.story { position: relative; }
.story::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--card-rim); pointer-events: none; } /* the border runs round the whole card, picture included */
.story .ph { position: relative; min-height: 240px; }
.story .ph i { position: absolute; inset: 6%; background: center/contain no-repeat; -webkit-mask: radial-gradient(closest-side, #000 50%, transparent 96%); mask: radial-gradient(closest-side, #000 50%, transparent 96%); }
.story .tx { padding: 30px 34px 32px; }
.story h2 { margin: 10px 0 14px; } .story p { max-width: 64ch; color: var(--ink-2); } .story p + p { margin-top: 12px; } .story p b { color: var(--ink); }
.story .sample { margin-top: 18px; color: var(--ink-3); }
@media (max-width: 760px) { .story { grid-template-columns: 1fr; } .story .ph { min-height: 180px; } .story .tx { padding: 24px 22px 26px; } }

/* ---------- punch list 46-48, 64 (inner pages) ---------- */
/* 47: question numbers hang in their own column; long questions wrap beside the number, not under it */
.field > .fl, fieldset.q > legend:not(.sr-only) { position: relative; padding-left: 40px; }
.field > .fl::before, fieldset.q > legend:not(.sr-only)::before { position: absolute; left: 0; top: .28em; margin: 0; }
/* 33: a form with a single field has no number */
#nform .field > .fl, .find .field > .fl { padding-left: 0; } #nform .field > .fl::before, .find .field > .fl::before { content: none; }
/* 46: the date group never runs wider than the other fields */
.dmy { display: flex; max-width: 100%; box-sizing: border-box; } .dmy .field { flex: 1 1 0; min-width: 0; } .dmy .inp, .dmy .inp.yy { width: 100%; }
.dmy .field:last-child { flex-grow: 1.4; }
/* 47: the breadcrumb stays on one line on phones */
@media (max-width: 640px) { .head-plate .crumbs { gap: 4px 8px; letter-spacing: .06em; } .head-plate .crumbs li + li::before { margin-right: 8px; } }
/* S39: on small phones "Home" only gives way when another link follows it (trial: Clinical trials); a crumb trail is never left without a link */
@media (max-width: 400px) { .head-plate .crumbs li:first-child:has(+ li > a) { display: none; } .head-plate .crumbs li:first-child:has(+ li > a) + li::before { content: none; } }
/* 7: the adults-only note under the age question */
.age-note:empty { display: none; }
.age-note { margin: -8px 0 0; padding: 14px 18px; border-radius: 8px; background: oklch(0.22 0.05 78 / .5); box-shadow: inset 0 0 0 1px oklch(0.84 0.15 78 / .4); font-size: 16px; line-height: 1.45; }
/* 64: a radio reached with the arrow keys shows its ring in Safari too (set only while the keyboard is in use) */
html[data-kb] .opt:has(input:focus) { outline: 2px solid var(--bridge); outline-offset: 3px; }
/* the fade follows the square picture, not the wide box around it, so no square edge shows */
.story .ph i, .post .ph i { inset: auto; top: 50%; left: 50%; height: min(92%, 276px); width: auto; aspect-ratio: 1; translate: -50% -50%; background-size: contain; background-position: center; }

/* ---------- punch list round 2 (inner pages) ---------- */
/* R12: hero intro text keeps to the left 60% of the card, clear of the protein art */
@media (min-width: 641px) { .head-plate > :not(.spec-bg) { max-width: 60%; } }
/* R13: fields in a row line up their inputs, with or without a helper line */
@media (min-width: 641px) { .fields { grid-auto-rows: auto; } .fields > .field:not(.full) { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0; row-gap: 8px; }
  .fields > .field:not(.full) > .fl { grid-row: 1; } .fields > .field:not(.full) > .hint { grid-row: 2; } .fields > .field:not(.full) > .inp { grid-row: 3; } .fields > .field:not(.full) > .err { grid-row: 4; } }
/* R14: news stories stack the picture above the text under 900 px */
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } .story .ph { min-height: 220px; } }
/* R18: the conditions list runs two across and the last option spans both */
@media (min-width: 641px) { fieldset.q:has(input[name="cond"]) .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } fieldset.q:has(input[name="cond"]) .opt:last-child { grid-column: 1 / -1; } }
/* R20: the letter counters match the other mono labels */
.letter > h2 span { text-transform: uppercase; }
/* R26: the About contents stay in view on wide screens; the waitlist card uses its width */
@media (min-width: 1101px) { .about .toc { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; }
  #notify { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; } #notify > :not(form) { grid-column: 1; } #notify > form { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .story { grid-template-columns: 36% 1fr; } }
/* R30: the glossary dividers reach the card edges */
.letter { padding: 0; } .letter > h2 { padding: 26px 0 0 34px; } .term { padding: 20px 34px; }
@media (max-width: 760px) { .letter > h2 { padding: 22px 26px 0; } .term { padding: 18px 26px; } }
/* R42: less empty space between the page and the footer */
.page { padding-bottom: 40px; }

/* ---------- punch list round 3 (inner pages) ---------- */
/* S9, S32: one inner padding for every stacked card on the inner pages */
:root { --pad-card: 34px; } @media (max-width: 640px) { :root { --pad-card: 22px; } }
.head-plate, .mini, .find, .toc, .about-sec { padding-left: var(--pad-card); padding-right: var(--pad-card); }
.story .tx { padding: 32px var(--pad-card); } /* S15: equal top and bottom */
/* S6: single-term letter cards leave room under the counter */
.letter > h2 { padding-bottom: 24px; }
/* S12: the urgent-advice banner uses the footer side-effect box's border */
.notice.card { box-shadow: inset 0 0 0 1px oklch(0.7 0.19 28 / .4); }
/* S13, S34: the study chips sit two by two on wider screens and one per row on phones, as on the home page */
@media (min-width: 641px) { .head-plate .chips { display: grid; grid-template-columns: repeat(2, max-content); } }
@media (max-width: 640px) { .head-plate .chips { flex-direction: column; align-items: flex-start; } }
/* S13: the waitlist email field runs the full width with the usual label gap */
.notify .fields > .field { display: grid; gap: 8px; grid-row: auto; grid-template-rows: none; }
/* S19: the waitlist text stacks from the top; its heading lines up with the email label */
@media (min-width: 1101px) { #notify { grid-template-rows: auto auto 1fr; align-items: start; } #notify > form { grid-row: 2 / span 2; align-self: start; } }
/* S37: hairline dividers between terms, no rounded boxes */
.term { border-radius: 0; } .term + .term { box-shadow: inset 0 1px 0 oklch(1 0 0 / .08); }

/* ---------- punch list round 4 (inner pages) ---------- */
/* T3: the About contents sit in two columns where the card is wide, and fit their links on desktop */
@media (min-width: 641px) and (max-width: 1100px) { .about .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
@media (min-width: 1101px) { .about .toc { justify-self: start; width: max-content; max-width: 100%; } }
/* T18: the report's side cards stay in view beside the long form on desktop */
@media (min-width: 1101px) { [data-page="report"] .side-grid > .stack { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; } }
/* T24: the A-Z grid runs the full card width on phones */
@media (max-width: 640px) { .az { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .az a, .az span { width: auto; } }
/* T29: the trial and report form cards share one padding */
.mini { padding: 26px var(--pad-card) 24px; }
/* U29: the story pictures fill their column. The re-rendered molecules take about 60% of their square, so the picture is
   drawn at 135% (the radial fade hides the crop) and the square grows to the column, up to 420 px */
.story .ph i { height: auto; width: min(88%, 420px); max-height: 92%; background-size: 135%; }
.post .ph i { background-size: 135%; }
/* U18: one breadcrumb pattern; on the narrowest phones a middle crumb that is not a page drops, "Home" always stays */
@media (max-width: 400px) {
  .head-plate .crumbs li:first-child:has(+ li > a) { display: flex; } .head-plate .crumbs li:first-child:has(+ li > a) + li::before { content: "/"; }
  .head-plate .crumbs li:not(:first-child):not(:last-child):not(:has(a)) { display: none; } /* "Help" is a heading, not a page: the trail keeps Home and the page */
}
/* V8, V18: the waitlist heading breaks evenly, never leaving "opens." alone */
#h-notify, .head-plate .ph1 { text-wrap: balance; }
/* V11: the trial page's study chips match the home card: one column of equal widths, nothing left alone */
@media (min-width: 641px) { .head-plate .chips { grid-template-columns: 240px; } .head-plate .chips li { white-space: nowrap; } }
/* V12: the story pictures on the home cards fill their band: the molecule is drawn larger and the band is shorter */
.post .ph i { background-size: 170%; }
/* V12: in the single-column news layout the picture band is wide and short: the square follows the band's height (not
   the 420 px width cap, which made a flat box with a small molecule), and the band is a little taller */
@media (max-width: 900px) { .story .ph { min-height: 280px; } .story .ph i { width: auto; height: 94%; max-height: none; background-size: 150%; } }
/* X9: the news hero protein sits whole inside the card: 85% of the card's height, inside its padding, at every width
   from tablet up (phones keep the faint corner bleed every inner page uses) */
@media (min-width: 641px) { .head-plate .spec-bg.fit { top: 7.5%; bottom: auto; right: 28px; height: 85%; width: auto; aspect-ratio: 1; max-width: 42%; background-size: contain; } }
/* X10: on tablets the trial hero protein is centred on the card's height, so the lower right is not left empty */
@media (min-width: 641px) and (max-width: 1100px) { .head-plate .spec-bg.mid { top: 50%; translate: 0 -50%; } }
/* Y7: the proteasome is long: drawn at 95% (not 135-170%) its caps sit inside the round fade's solid core and stay crisp */
.post .ph i[style*="spec-shredder"], .story .ph i[style*="spec-shredder"] { background-size: 95%; }

/* ---------- full audit, 22 Oct ---------- */
/* Yellow Card card: same padding as the cards below it, a white heading, an eyebrow like its neighbours, the address reads as a link */
.route { padding: 26px var(--pad-card) 24px; }
.route b { color: var(--ink); }
.route .rl { display: block; margin-bottom: 8px; color: var(--tag); font-size: 12px; }
.route u { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* glossary definitions: a readable measure and no lone last word */
.terms dd { max-width: 62ch; text-wrap: pretty; }
/* form question numbers sit on the question's first line */
#gate-h:focus { outline: none; }
/* question headings and legends break evenly, no lone last word */
fieldset.q legend, .fl, .acc summary, .acc summary span { text-wrap: balance; }
/* phones: fact chips share rows (two fit side by side) instead of a ragged single column */
@media (max-width: 640px) { .head-plate .chips { flex-direction: row; flex-wrap: wrap; } }
/* conditions: "None" on its own row, then "or", then the six conditions in an even two-column grid (GOV.UK pattern) */
@media (min-width: 641px) { fieldset.q:has(input[name="cond"]) .opt:last-child { grid-column: auto; } }
/* single-choice answers share one grid of three equal columns on wider screens, so Yes / No tiles match Yes / No / Not sure */
@media (min-width: 641px) { fieldset.q[role="radiogroup"]:not(:has(input[name="who"])) .opts:not(.wide) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* question numbers: their baseline on the question's first line (the old .28em was measured in the number's own 12 px) */
.field > .fl::before, fieldset.q > legend:not(.sr-only)::before { top: 7.5px; }
/* the day / month / year fields sit like every other field: no box around them */
.dmy { padding: 0; background: none; box-shadow: none; border-radius: 0; }
/* phone news page: the three story thumbnails spread across the card */
@media (max-width: 640px) { .story-nav { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; row-gap: 12px; } .story-nav .pg-of { grid-column: 1 / -1; text-align: left; } .story-nav .s { justify-self: center; } }
/* About: the Credits section above already gives the sources and licences in full, so the footer keeps only its first paragraph */
[data-page="about"] .legal-g .legal + .legal { display: none; }
@media (min-width: 1101px) { [data-page="about"] .legal-g { grid-template-columns: 1fr; } }
/* R6: phone story text fills its column (balanced "pretty" wrapping left a ragged right edge) */
@media (max-width: 640px) { .story p { text-wrap: wrap; } }
fieldset.q:has(input[name="cond"]) .opt:has(> #c-none) { grid-column: 1 / -1; }
.or-sep { grid-column: 1 / -1; padding: 2px 2px 0; font: 400 15px/1.2 var(--text); color: var(--ink-2); }

/* click-through audit, 22 Oct: error-summary links were 22 px tall; 24 px minimum target (WCAG 2.5.8) */
.errsum a { padding-block: 2px; }