/* ==========================================================================
   Aligner Aachen · AIXSMILE (2026-10-24)
   After igloo.inc (Awwwards Site of the Year 2024): one 3D world on a misty
   lilac field, little monospace labels on everything, and a camera that
   travels through fog with rainbow edges.
   The look: frost and lilac-grey, ink for type, and one prism (the light
   through clear plastic) used sparingly. Archivo in its wide cut for
   headings, IBM Plex Mono for the labels.
   The idea: the page is one aligner treatment. Crooked glass teeth breathe in
   the hero; scrolling plays the scan, the plan (every tooth moves home, tray
   01 to 24) and the tray forming, then the fog clears onto a smile.
   Motion: an opening once per visit, scroll scenes (html.scenes, never for
   reduced motion), one-time arrivals, and things that answer the visitor.
   ========================================================================== */

@property --pos {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}
/* the lit spot in the everyday photo glides from thing to thing */
@property --sx { syntax: '<number>'; inherits: false; initial-value: .25; }
@property --sy { syntax: '<number>'; inherits: false; initial-value: .245; }
@property --sr { syntax: '<number>'; inherits: false; initial-value: .17; }
/* the situation cards' hover zoom, kept separate from their scroll drift */
@property --hz {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

:root {
  --ink: #12141b;
  --ink-2: #1b1e28;
  --ink-3: #262a36;
  --snow: #f6f7f9;
  --frost: #eceef3;
  --mist: #dcdfe8;
  --field: #c6c9d6;
  --field-lo: #a9acbd;
  --text: #12141b;
  --soft: #4a4f5f;
  --hair: rgba(18, 20, 27, .13);
  --on-dark: #eef0f5;
  --on-dark-soft: #a9aec0;
  --hair-dark: rgba(238, 240, 245, .14);
  --ice: #3a46c9;           /* links and accents on light */
  --ice-hi: #b9c4ff;        /* the same on dark */
  --prism: linear-gradient(100deg, #7fc8ff 0%, #a99bff 35%, #ff9cc6 70%, #ffd58a 100%);

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-expo: cubic-bezier(.19, 1, .22, 1);

  --gutter: clamp(20px, 3.4vw, 52px);
  --radius: 22px;
  --pad-y: clamp(72px, 11vh, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
button, a, [role="button"], [role="tab"], input[type="range"] { touch-action: manipulation; }
button, .btn, .opt, .day, .time, .quickBtn, .faq__topics button, .klar__rail button, summary { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0;
  background: var(--frost);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 6px; }
.sect--ink :focus-visible, .foot :focus-visible, .pill :focus-visible, .mbar :focus-visible { outline-color: var(--ice-hi); }
[hidden] { display: none !important; }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--on-dark); padding: 10px 16px; border-radius: 10px;
  font-weight: 650; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
.h2 {
  font: 620 clamp(34px, 3.8vw, 60px)/1.02 var(--sans);
  font-stretch: 118%;
  letter-spacing: -.035em;
  text-wrap: balance;
  max-width: 17ch;
}
.sect__lead { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.6; color: var(--soft); max-width: 36em; }
.sect--ink .sect__lead { color: var(--on-dark-soft); }
.soft { color: var(--soft); }
.mono { font: 500 12.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- buttons and links ---------- */
.btn {
  --bg: var(--ink); --fg: var(--on-dark);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  background: var(--bg); color: var(--fg);
  font: 600 15.5px/1 var(--sans); font-stretch: 108%; letter-spacing: -.005em;
  border-radius: 999px; text-decoration: none; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .4s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn .arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn--light { --bg: #fff; --fg: var(--ink); }
.btn--ghost { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btnWide { width: 100%; }
.btn--icon { padding: 0; width: 52px; }
.btn--icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.textLink {
  display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + .75em) / 100% 1.5px no-repeat;
  transition: background-size .35s var(--ease);
}
.brand { font: 800 19px/1 var(--sans); font-stretch: 120%; letter-spacing: .01em; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.brand b, .intro__mark b { font-weight: 800; color: var(--ice); }
.klar .brand b { color: #2a35a8; }   /* the darker accent, as on the hero line: the field is darker than the page */
.lang { display: inline-flex; min-height: 42px; padding: 3px; border-radius: 999px; border: 1px solid var(--hair); background: rgba(255, 255, 255, .35); font: 500 12.5px/1 var(--mono); }
.lang span { display: grid; place-items: center; min-width: 36px; border-radius: 999px; color: var(--soft); transition: background-color .25s, color .25s; }
.lang[data-active="de"] [data-l="de"], .lang[data-active="en"] [data-l="en"] { background: var(--ink); color: var(--on-dark); }

/* ---------- the opening (first visit only): a row of teeth straightens, then the field lifts ---------- */

/* ==========================================================================
   The journey, all on her photo
   ========================================================================== */
.klar { position: relative; background: var(--stage); }
.klar__stick {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  background: var(--stage);
  color: var(--ink);
  --stage: #d2d4dd;   /* her studio backdrop, cooled to the field's hue (tools/make-face-layers.py) */
  --h: 0; --cap: 0; --scan: 0; --sweep: 0; --line: 0; --points: 0; --jaw: 0; --wear: 0; --glint: 0; --dive: 0; --white: 0; --fin: 0; --labels: 0; --end: 0;
  --soft: #2c303d;   /* the field is darker than the page: soft text darkens with it */
}
/* her photo: a box at the photo's own size that js/site.js moves and scales;
   the layers over her mouth and jaw sit in it by fractions of the photo (the
   FACE numbers in js/site.js: left, top, width, height of each box) */
.face { position: absolute; left: 0; top: 0; width: 1536px; height: 2048px; transform-origin: 0 0; }
html.no-js .face { left: auto; right: 0; width: auto; height: 100%; aspect-ratio: 1536 / 2048; }
/* her edges fade into the stage (the backdrop is the stage's colour already);
   the scan's wash fades the same way. The fade starts a little inside and the
   rim is clipped off: scaled down, the layer's edge pixel shows through the
   mask, a dark line where her hand reaches the edge (the end) */
.face__img, .face__veil {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 1%, #000 14%, #000 96%, transparent 99%), linear-gradient(180deg, transparent 1%, #000 8%, #000 90%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 1%, #000 14%, #000 96%, transparent 99%), linear-gradient(180deg, transparent 1%, #000 8%, #000 90%, transparent 99%);
  mask-composite: intersect;
  clip-path: inset(1%);
}
.face__mouth { position: absolute; left: 30.08%; top: 49.71%; width: 34.38%; height: 10.06%; }
.face__jaw { position: absolute; left: 26.82%; top: 45.41%; width: 45.31%; height: 27.83%; opacity: var(--jaw); }
.face__mouth > i, .face__jaw > i { position: absolute; inset: 0; }
/* frame strips: the aligners' 9 (bite opens, aligners onto the crooked
   teeth, bite closes) on her jaw, then the wear's 7 (crooked → straight under
   the aligners) on her mouth, over the jaw; the second layer of each is the
   next frame fading in */
.face__trays { background: url(../assets/photos/face/tray.webp) 0 0 / 100% 900% no-repeat; }
.face__wear { background: url(../assets/photos/face/wear.webp) 0 0 / 100% 700% no-repeat; }
.face__mouth--wear { opacity: var(--wear); }
#trayB, #wearB { opacity: var(--k, 0); }
html:not(.scenes) .face__mouth--wear, html:not(.scenes) .face__jaw { display: none; }
/* the two aligners on their own: pale clear plastic with slate edges. Each
   comes in from the front (bigger, blurred), waits just off its teeth and is
   pushed on (--y, --s, --b, --o from js/site.js); as it clicks it flashes ice
   blue with a flick of rainbow at the edge (--c) */
.face__al { background: var(--m) 0 0 / 100% 100% no-repeat; opacity: var(--o, 0); translate: 0 calc(var(--y, 0) * 1%); scale: var(--s, 1); filter: blur(calc(var(--b, 0) * 1px)); }
.face__al--u { --m: url(../assets/photos/face/tray-u.webp); transform-origin: 50% 30%; }
.face__al--l { --m: url(../assets/photos/face/tray-l.webp); transform-origin: 50% 48%; }
.face__al::before, .face__al::after { content: ''; position: absolute; inset: 0; -webkit-mask: var(--m) 0 0 / 100% 100% no-repeat; mask: var(--m) 0 0 / 100% 100% no-repeat; opacity: var(--c, 0); }
.face__al::after { background: var(--ice); }
.face__al::before { background: var(--prism); translate: 0 -3px; opacity: calc(var(--c, 0) * .7); }
/* the end: the photo of her holding her aligner takes over behind the white
   fog (js/site.js sets the picture once the opening is done) */
.face__end { background: 0 0 / 100% 100% no-repeat; opacity: var(--end); }
html:not(.scenes) .face__end { display: none; }
/* the scan's light wash over the whole photo */
.face__veil { background: #e4e6ee; opacity: calc(var(--scan) * .6); pointer-events: none; }
/* points, wireframe and the glint: the shapes are masks, the colour is ours */
.face__points, .face__mesh, .face__glint { -webkit-mask: var(--m) 0 0 / 100% 100% no-repeat; mask: var(--m) 0 0 / 100% 100% no-repeat; }
.face__points { --m: url(../assets/photos/face/points.webp); background: var(--ice); opacity: var(--points); clip-path: inset(-2% calc((1 - var(--sweep)) * 100%) -2% 0); }
.face__mesh { --m: url(../assets/photos/face/mesh.webp); background: var(--ice); opacity: calc(var(--points) * .8); clip-path: inset(-2% calc((1 - var(--sweep)) * 100%) -2% 0); }
/* the scan line: tall, a crisp core in a soft band, crossing the teeth from left to right */
.face__over .face__line {
  inset: -60% auto -60% 0; width: 26px; translate: -13px 0;
  left: calc(var(--sweep) * 100%);
  background: linear-gradient(90deg, transparent, rgba(58, 70, 201, .16) 38%, var(--ice) 47% 53%, rgba(58, 70, 201, .16) 62%, transparent);
  -webkit-mask: linear-gradient(180deg, transparent, #000 18% 82%, transparent);
  mask: linear-gradient(180deg, transparent, #000 18% 82%, transparent);
  opacity: var(--line);
}
/* the glint over the aligners once the teeth are straight */
.face__glint { --m: url(../assets/photos/face/teeth.webp); overflow: hidden; }
.face__glint::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 18%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55) 50%, transparent);
  translate: calc((-1 + var(--glint) * 6.56) * 100%) 0;
  opacity: min(1, calc(var(--glint) * 12), calc((1 - var(--glint)) * 12));
}
/* a breath of fog between chapters, and the white-out before the result */
.klar__fog { position: absolute; inset: 0; z-index: 1; background: var(--frost); opacity: max(var(--white), calc(var(--dive) * .45)); pointer-events: none; }

/* the labels on the crooked teeth: small glass tags joined to their tooth by a line */
.klar__lines, .klar__labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.klar__lines .is-teeth, .tag3d[data-tooth] { opacity: var(--labels); }
/* the tray tags fade one by one (--o per tag, from js/site.js); seated turns the words ice blue */
.klar__lines .is-tray, .tag3d[data-tray] { opacity: var(--o, 0); }
.tag3d.is-done span { color: #2a35a8; }
.klar__lines { width: 100%; height: 100%; overflow: visible; }
.klar__lines line { stroke: rgba(18, 20, 27, .55); stroke-width: 1; }
.klar__lines circle { fill: #fff; stroke: rgba(18, 20, 27, .6); stroke-width: 1; }
.tag3d {
  position: absolute; left: 0; top: 0; display: none;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(246, 247, 249, .92); border: 1px solid rgba(255, 255, 255, .7);
  font: 500 12px/1.2 var(--mono); letter-spacing: .02em; white-space: nowrap; color: var(--ink);
  transform: translate(var(--x, 0), var(--y, 0));
}
.tag3d b { font-weight: 700; margin-right: 4px; }
.tag3d span { color: var(--soft); }
html.scenes .tag3d { display: block; }

/* the HUD: Igloo's small corner text */
.hud { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hud--top { top: clamp(10px, 2vh, 20px); }
.hud__mid { font: 500 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.hud__mid i { font-style: normal; margin: 0 6px; opacity: .6; }
.hud__tools { display: flex; align-items: center; gap: 10px; }
.hud--bottom { bottom: clamp(16px, 3vh, 28px); pointer-events: none; }
.hud__geo, .hud__tray { font: 500 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #262a36; font-variant-numeric: tabular-nums; }
.hud__tray b { font-weight: 700; color: var(--ink); }
.hud__tray { opacity: 0; transition: opacity .5s var(--ease); }
.klar.is-count .hud__tray { opacity: 1; }

.hero__copy {
  position: absolute; z-index: 3; left: var(--gutter); bottom: clamp(88px, 17vh, 170px);
  width: min(600px, 44vw); display: grid; gap: clamp(16px, 2.4vh, 24px);
}
.hero__h1 { font: 640 clamp(44px, 5.5vw, 92px)/.98 var(--sans); font-stretch: 122%; letter-spacing: -.045em; text-wrap: balance; }
.hero__line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__line > span { display: inline-block; }
.hero__accent > span { color: #2a35a8; }
.hero__lead { font-size: clamp(16.5px, 1.2vw, 18.5px); line-height: 1.55; max-width: 31em; color: #2f3443; }
.cue { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 500 12.5px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; justify-self: start; }
.cue i { position: relative; width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid currentColor; }
.cue i::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

.plate {
  position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(88px, 17vh, 170px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 18px;
  padding: 16px 16px 16px 20px; min-width: 270px; border-radius: 18px; text-decoration: none;
  background: rgba(246, 247, 249, .94); border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 20px 50px rgba(40, 46, 70, .16);
  transition: background-color .3s, transform .4s var(--ease);
}
.plate__label { grid-column: 1; font: 500 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.plate__value { grid-column: 1; font: 650 17px/1.3 var(--sans); font-stretch: 108%; }
.plate__go { grid-column: 2; grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.plate__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the chapter that is playing, and the chapter rail */
.klar__cap, .klar__rail { display: none; }
.klar__steps { display: none; }

/* the end: the view is back on her straight smile; the last line comes up */
.finale { position: absolute; inset: 0; z-index: 6; visibility: hidden; pointer-events: none; }
.klar.is-end .finale { visibility: visible; }
.finale__band {
  position: absolute; left: var(--gutter); top: 50%; translate: 0 calc(-50% + (1 - var(--fin)) * 26px);
  width: min(520px, 40vw); display: grid; gap: 22px; justify-items: start;
  opacity: var(--fin); pointer-events: auto;
}
.finale__line { font: 640 clamp(40px, 4.6vw, 76px)/1 var(--sans); font-stretch: 120%; letter-spacing: -.045em; text-wrap: balance; color: var(--ink); }
.finale__tag { position: absolute; left: 0; top: calc(100% + 18px); font: 500 12px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--soft); }
.finale .btn--light { --bg: var(--ink); --fg: var(--on-dark); }

.intro { display: none; }
html.is-intro .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 90;
  background: linear-gradient(180deg, #d9dbe4 0%, var(--field) 58%, var(--field-lo) 100%);
  color: var(--ink);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-expo);
}
html.is-lifting .intro { clip-path: inset(0 0 100% 0); }
.intro__stage { display: grid; justify-items: center; gap: 26px; }
.intro__mark { font: 800 18px/1 var(--sans); font-stretch: 120%; letter-spacing: .01em; display: flex; gap: 10px; align-items: baseline; }
.intro__mark > span + span { font: 500 12.5px/1 var(--mono); letter-spacing: .04em; color: var(--soft); text-transform: uppercase; }
/* JS sets --k (0 → 1) on .intro while the page loads: each tooth loses its
   own offset (--dy) and turn (--r), and the aligner draws itself above them */
.intro { --k: 0; }
.intro__row { position: relative; display: flex; gap: 5px; width: 260px; height: 44px; align-items: center; justify-content: center; }
.intro__row i {
  display: block; width: 15px; height: 24px;
  border-radius: 46% 46% 40% 40% / 34% 34% 66% 66%;
  background: linear-gradient(180deg, #fff, #e8ebf3);
  box-shadow: 0 0 0 1px rgba(18, 20, 27, .08), 0 6px 14px rgba(40, 46, 70, .16);
  transform: translateY(calc(var(--dy) * (1 - var(--k)))) rotate(calc(var(--r) * (1 - var(--k))));
}
/* each tooth starts crooked in its own way */
.intro__row i:nth-child(1) { --dy: 6px; --r: -14deg; }
.intro__row i:nth-child(2) { --dy: -9px; --r: 10deg; }
.intro__row i:nth-child(3) { --dy: 3px; --r: 22deg; }
.intro__row i:nth-child(4) { --dy: -4px; --r: -8deg; }
.intro__row i:nth-child(5) { --dy: 11px; --r: 16deg; }
.intro__row i:nth-child(6) { --dy: -7px; --r: -20deg; }
.intro__row i:nth-child(7) { --dy: 2px; --r: 12deg; }
.intro__row i:nth-child(8) { --dy: -12px; --r: -6deg; }
.intro__row i:nth-child(9) { --dy: 8px; --r: 18deg; }
.intro__row i:nth-child(10) { --dy: -3px; --r: -15deg; }
.intro__row i:nth-child(11) { --dy: 5px; --r: 9deg; }
.intro__row i:nth-child(12) { --dy: -10px; --r: -12deg; }
/* the aligner: hovers 16px above the teeth while its outline draws (stroke
   follows --k) and its clear body fills in; on the click it drops on, the
   teeth brighten under it and a glint runs along the plastic */
.intro__tray {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  translate: 0 -16px; filter: drop-shadow(0 8px 14px rgba(40, 46, 70, .14));
  transition: translate .55s cubic-bezier(.5, 1.6, .4, 1);
}
.intro__trayLine { fill: none; stroke: var(--ice); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); opacity: .9; }
.intro__trayFill { fill: rgba(255, 255, 255, .34); stroke: none; opacity: calc(var(--k) * var(--k)); }
.intro__trayGlint { opacity: 0; }
.intro.is-straight .intro__tray { translate: 0 0; filter: drop-shadow(0 2px 4px rgba(40, 46, 70, .18)); }
.intro.is-straight .intro__trayLine { stroke: rgba(58, 70, 201, .55); transition: stroke .5s; }
.intro.is-straight .intro__trayFill { fill: rgba(236, 240, 255, .5); transition: fill .5s; }
.intro.is-straight .intro__trayGlint { opacity: 1; animation: introGlint .9s cubic-bezier(.4, 0, .2, 1) .3s both; }
.intro.is-straight .intro__row i { background: linear-gradient(180deg, #fff, #f4f5ff); box-shadow: 0 0 0 1px rgba(18, 20, 27, .06), 0 10px 18px rgba(40, 46, 70, .22); transition: box-shadow .6s var(--ease), background .6s; }
@keyframes introGlint { from { transform: translateX(0); } to { transform: translateX(400px); } }
@media (prefers-reduced-motion: reduce) { .intro__tray { transition: none; } .intro.is-straight .intro__trayGlint { animation: none; opacity: 0; } }

/* the hero builds itself: everything waits for html.is-ready */
html.js:not(.is-calm):not(.is-ready) .hud--top > * { opacity: 0; transform: translateY(-10px); }
html.js:not(.is-calm):not(.is-ready) .hero__line > span { transform: translateY(105%); }
html.js:not(.is-calm):not(.is-ready) .hero__lead,
html.js:not(.is-calm):not(.is-ready) .cue { opacity: 0; transform: translateY(16px); }
html.js:not(.is-calm):not(.is-ready) .plate { opacity: 0; transform: translateX(64px) rotate(1.5deg); }
html.js:not(.is-calm):not(.is-ready) .hud--bottom { opacity: 0; }
html.is-ready .hud--top > * { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.is-ready .hud--top > :nth-child(2) { transition-delay: .07s; }
html.is-ready .hud--top > :nth-child(3) { transition-delay: .14s; }
html.is-ready .hero__line > span { transform: none; transition: transform 1s var(--ease-out) .2s; }
html.is-ready .hero__accent > span { transition-delay: .34s; }
html.is-ready .hero__lead { opacity: 1; transform: none; transition: opacity .9s var(--ease) .7s, transform .9s var(--ease) .7s; }
html.is-ready .cue { opacity: 1; transform: none; transition: opacity .9s var(--ease) .85s, transform .9s var(--ease) .85s; }
html.is-ready .plate { opacity: 1; transform: none; transition: opacity 1.1s var(--ease) 1.1s, transform 1.3s var(--ease-expo) 1.1s, background-color .3s; }
html.is-ready .hud--bottom { opacity: 1; transition: opacity 1s var(--ease) 1.2s; }

/* ---------- floating menu (laptops) and the phone bar ---------- */
.pill {
  position: fixed; z-index: 50; top: 14px; left: 50%;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 7px 7px 20px; border-radius: 999px;
  background: rgba(18, 20, 27, .8); color: var(--on-dark);
  border: 1px solid rgba(238, 240, 245, .12);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -24px);
  transition: opacity .5s var(--ease), transform .6s var(--ease-out), visibility 0s .6s;
}
html.is-past .pill { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .5s var(--ease), transform .6s var(--ease-out), visibility 0s; }
.pill__brand { font: 800 16px/1 var(--sans); font-stretch: 120%; margin-right: 14px; min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; }
.pill__brand b { font-weight: 800; color: var(--ice-hi); }
.pill__nav { display: flex; }
.pill__nav a {
  padding: 0 13px; min-height: 40px; display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 550; text-decoration: none; color: var(--on-dark-soft); white-space: nowrap;
  border-radius: 999px; transition: color .25s, background-color .25s;
}
.pill__call { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--on-dark-soft); }
.pill__call svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pill .btn { --bg: #fff; --fg: var(--ink); }
.mbar { display: none; }

/* ==========================================================================
   Sections
   ========================================================================== */
main { display: block; }
.sect { position: relative; padding-block: var(--pad-y); scroll-margin-top: 72px; }
.sect--snow { background: var(--snow); }
.sect--ink { background: var(--ink); color: var(--on-dark); }
.sect--ink .mono { color: var(--ice-hi); }

/* ---------- the check ---------- */
.quiz__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.quiz__head { display: grid; gap: 18px; }
.quiz__box {
  position: relative; min-height: 420px;
  padding: clamp(22px, 2.6vw, 34px); border-radius: 28px;
  background: var(--ink-2); border: 1px solid var(--hair-dark);
  display: grid; grid-template-rows: auto 1fr;
  overflow: hidden;
}
/* a faint prism edge along the top, like light caught in plastic */
.quiz__box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--prism); opacity: .8; }
.quiz__top { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 14px; }
.quiz__count { font: 500 13px/1 var(--mono); color: var(--ice-hi); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.quiz__back { font-size: 14.5px; color: var(--on-dark-soft); min-height: 44px; padding: 0 4px; }
.quiz__q { grid-row: 2; grid-column: 1; display: none; }
.quiz__q.is-on { display: block; animation: qIn .6s var(--ease-out); }
.quiz__q legend { font: 600 clamp(24px, 2.2vw, 32px)/1.15 var(--sans); font-stretch: 112%; letter-spacing: -.03em; margin-bottom: 20px; }
.quiz__opts { display: grid; gap: 10px; }
.opt {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 20px; align-items: center; gap: 14px;
  width: 100%; min-height: 60px; padding: 12px 16px; border-radius: 16px; text-align: left;
  border: 1px solid var(--hair-dark); background: rgba(238, 240, 245, .03);
  font-size: 16.5px; line-height: 1.3; color: var(--on-dark);
  transition: border-color .25s, background-color .25s, box-shadow .25s, transform .3s var(--ease);
}
.opt i {
  font-style: normal; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--hair-dark); font: 500 12.5px/1 var(--mono); color: var(--on-dark-soft);
  transition: background-color .25s, color .25s, border-color .25s;
}
.opt::after {
  content: ''; width: 18px; height: 18px; opacity: 0; transform: translateX(-6px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23b9c4ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity .25s, transform .3s var(--ease);
}
.opt:active { transform: scale(.985); }
.opt.is-picked { border-color: var(--ice-hi); box-shadow: inset 0 0 0 1px var(--ice-hi); background: rgba(185, 196, 255, .08); }
.opt.is-picked i { background: var(--ice-hi); border-color: var(--ice-hi); color: var(--ink); }
.quiz__result { grid-row: 2; grid-column: 1; animation: qIn .6s var(--ease-out); }
.quiz__resH { font: 600 clamp(24px, 2.2vw, 32px)/1.15 var(--sans); font-stretch: 112%; letter-spacing: -.03em; margin-bottom: 18px; }
.quiz__lines li { position: relative; padding: 12px 0 12px 32px; border-top: 1px solid var(--hair-dark); color: #d4d8e4; font-size: 16px; line-height: 1.5; }
.quiz__lines li::before {
  content: ''; position: absolute; left: 0; top: 14px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(185, 196, 255, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23b9c4ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.quiz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
.quiz__nojs { color: var(--on-dark-soft); }
html.no-js .quiz__top, html.no-js .quiz__q { display: none; }
@keyframes qIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- shared section head ---------- */
.sect__head { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vh, 48px); }

/* ---------- which situation do you know: photo cards that open ----------
   A tap (or, with a mouse, pointing) slides the answer up over the photo;
   phones get a list with small pictures that opens in place. */
.situation .h2 { max-width: none; }
.sits {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px; height: clamp(460px, 64svh, 640px);
}
.sit { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink); isolation: isolate; }
.sit--tall { grid-row: span 2; }
.sit__btn { position: absolute; inset: 0; display: block; width: 100%; text-align: left; color: var(--on-dark); }
.sit__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--so, 50% 30%);
  scale: calc(1 + var(--hz));
  transition: --hz 1.2s var(--ease-out), opacity .6s var(--ease);
}
.sit__btn::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18, 20, 27, 0) 40%, rgba(18, 20, 27, .82) 100%); }
.sit__no {
  position: absolute; z-index: 2; left: 16px; top: 16px; padding: 6px 9px; border-radius: 999px;
  background: rgba(18, 20, 27, .74); font: 500 12px/1 var(--mono); letter-spacing: .08em; color: #fff; font-variant-numeric: tabular-nums;
}
.sit__t {
  position: absolute; z-index: 2; left: 20px; right: 64px; bottom: 20px;
  font: 620 clamp(19px, 1.5vw, 24px)/1.15 var(--sans); font-stretch: 110%; letter-spacing: -.02em;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.sit--tall .sit__t { font-size: clamp(26px, 2.3vw, 36px); max-width: 13ch; }
.sit:nth-child(1) { --so: 62% 30%; }
.sit:nth-child(2) { --so: 50% 40%; }
.sit:nth-child(3) { --so: 50% 25%; }
.sit:nth-child(4) { --so: 50% 30%; }
.sit:nth-child(5) { --so: 50% 22%; }
.sit__plus {
  position: absolute; z-index: 3; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(18, 20, 27, .4); border: 1px solid rgba(238, 240, 245, .35); color: #fff;
  transition: transform .45s var(--ease), background-color .3s;
}
.sit__plus::before, .sit__plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -.8px 0 0 -7px; background: currentColor; border-radius: 2px; }
.sit__plus::after { transform: rotate(90deg); }
.sit__a {
  position: absolute; z-index: 2; inset: auto 0 0 0; padding: 22px 20px 18px;
  background: rgba(18, 20, 27, .94); color: var(--on-dark);
  transform: translateY(101%); visibility: hidden;
  transition: transform .55s var(--ease-out), visibility 0s .55s;
}
.sit__a p { font-size: 15.5px; line-height: 1.55; color: #d4d8e3; }
.sit--tall .sit__a p { font-size: 17px; }
.sit__a .textLink { display: inline-block; justify-self: start; margin-top: 8px; color: var(--ice-hi); }
.sit.is-open .sit__a { transform: none; visibility: visible; transition: transform .55s var(--ease-out), visibility 0s; }
.sit.is-open .sit__plus { transform: rotate(45deg); background: var(--ice-hi); color: var(--ink); border-color: var(--ice-hi); }
.sit.is-open .sit__t { opacity: 0; transform: translateY(-8px); }
.sit.is-open .sit__img { opacity: .55; }

/* ---------- the big sentence: its photo grows to fill the screen ---------- */
.grow { position: relative; background: var(--frost); color: var(--text); }
.grow__stick {
  position: relative; display: grid; place-items: center; align-content: center;
  padding: clamp(88px, 17vh, 200px) var(--gutter) 0; text-align: center; overflow: hidden;
}
.grow__text {
  font: 640 clamp(40px, 6.4vw, 108px)/1.02 var(--sans); font-stretch: 118%;
  letter-spacing: -.045em; text-wrap: balance; max-width: 14ch; margin: 0 auto; position: relative; z-index: 1;
}
/* the grown photo carries the line and the button, on its bright right side */
.grow__fill { position: relative; justify-self: stretch; margin: clamp(48px, 8vh, 96px) calc(var(--gutter) * -1) 0; height: clamp(540px, 92svh, 920px); overflow: hidden; background: var(--mist); }
.grow__fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.grow__fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(236, 238, 243, .9) 0%, rgba(236, 238, 243, .55) 30%, rgba(236, 238, 243, 0) 52%); pointer-events: none; }
.grow__band {
  position: absolute; z-index: 2; top: 50%; right: var(--gutter); transform: translateY(-50%);
  width: min(520px, 36vw); display: grid; justify-items: start; gap: clamp(22px, 3.4vh, 34px); text-align: left; color: var(--text);
}
.grow__line { font: 640 clamp(34px, 4.2vw, 70px)/1.02 var(--sans); font-stretch: 116%; letter-spacing: -.04em; text-wrap: balance; }

/* ---------- everyday questions on one photo ----------
   A normal day's things seen from above, marked the way the teeth are marked
   at the top: a white dot, a thin line, a small glass label. The picked one
   stays lit in a soft hole of a pale veil (the hole glides from thing to
   thing); its answer shows beside the photo. On phones the labels sit in a
   row under the photo. */
.desk { background: var(--frost); }
.desk__wrap {
  display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 2.3fr);
  grid-template-rows: auto 1fr; grid-template-areas: "head stage" "panels stage";
  column-gap: clamp(36px, 5vw, 80px);
}
.desk__head { grid-area: head; margin-bottom: 0; align-content: start; }
.desk__stage { grid-area: stage; position: relative; container-type: inline-size; }
.desk__fig { position: relative; aspect-ratio: 4 / 3; border-radius: clamp(18px, 2vw, 28px); overflow: hidden; background: #d4d6de; }
.desk__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.desk__veil {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: rgba(232, 234, 241, .5);
  -webkit-mask: radial-gradient(calc(var(--sr) * 100%) calc(var(--sr) * 133.33%) at calc(var(--sx) * 100%) calc(var(--sy) * 100%), transparent 58%, #000 100%);
  mask: radial-gradient(calc(var(--sr) * 100%) calc(var(--sr) * 133.33%) at calc(var(--sx) * 100%) calc(var(--sy) * 100%), transparent 58%, #000 100%);
  transition: --sx .75s var(--ease-out), --sy .75s var(--ease-out), --sr .75s var(--ease-out), opacity .7s var(--ease);
}
.desk.is-tabbed .desk__veil { opacity: 1; }
/* where each thing is on the photo (fractions of its width and height): the dot
   (--x, --y) and where its label sits (--lx, --ly); the lines are in the SVG */
.desk [data-n="1"] { --x: .27; --y: .22; --lx: .40; --ly: .06; }
.desk [data-n="2"] { --x: .555; --y: .25; --lx: .60; --ly: .45; }
.desk [data-n="3"] { --x: .79; --y: .30; --lx: .80; --ly: .45; }
.desk [data-n="4"] { --x: .285; --y: .60; --lx: .37; --ly: .47; }
.desk [data-n="5"] { --x: .625; --y: .71; --lx: .62; --ly: .88; }
.desk [data-n="6"] { --x: .77; --y: .70; --lx: .80; --ly: .93; }
.desk__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.desk__lines line { stroke: rgba(18, 20, 27, .5); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .3s var(--ease), opacity .5s var(--ease); }
.desk__lines line.is-on { stroke: var(--ice); stroke-width: 1.5; }
.desk__dot {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px rgba(18, 20, 27, .6), 0 2px 6px rgba(18, 20, 27, .18);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), opacity .5s var(--ease);
}
/* a bigger target for a finger, and the ring around the picked one */
.desk__dot::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; }
.desk__dot::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(58, 70, 201, .5);
  opacity: 0; scale: .5; transition: opacity .3s var(--ease), scale .5s var(--ease-expo);
}
.desk.is-tabbed .desk__dot { cursor: pointer; }
.desk__dot.is-on { background: var(--ice); box-shadow: 0 0 0 1px var(--ice), 0 2px 6px rgba(18, 20, 27, .18); }
.desk__dot.is-on::after { opacity: 1; scale: 1; }
/* the labels: on the photo, each joined to its dot by a line */
.desk__tags { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 4 / 3; pointer-events: none; }
.dtag {
  position: absolute; left: calc(var(--lx) * 100%); top: calc(var(--ly) * 100%); translate: 0 -50%;
  display: inline-flex; align-items: baseline; gap: 6px; pointer-events: auto;
  padding: 7px 11px; border-radius: 8px;
  background: rgba(246, 247, 249, .92); border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 4px 14px rgba(18, 20, 27, .1);
  font: 500 12px/1.2 var(--mono); letter-spacing: .02em; white-space: nowrap; color: var(--ink);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), opacity .5s var(--ease), translate .7s var(--ease-out);
}
.dtag b { font-weight: 700; }
.dtag span { color: var(--soft); transition: color .3s var(--ease); }
.dtag[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.dtag[aria-selected="true"] b { color: var(--ice-hi); }
.dtag[aria-selected="true"] span { color: var(--on-dark); }
/* the answers: without JavaScript all six in a list; with it, the picked one */
.desk__panels { grid-area: panels; align-self: end; display: grid; gap: 32px; }
.desk__panel { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--hair); }
.desk__k { font: 500 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ice); }
.desk__k b { font-weight: 700; margin-right: 4px; }
.desk__q { margin-top: 4px; font: 640 clamp(26px, 2.2vw, 34px)/1.08 var(--sans); font-stretch: 112%; letter-spacing: -.03em; text-wrap: balance; }
.desk__fit { font: 620 clamp(18px, 1.35vw, 21px)/1.35 var(--sans); font-stretch: 106%; letter-spacing: -.012em; }
.desk__more { font-size: 16px; line-height: 1.55; color: var(--soft); }
.desk.is-tabbed .desk__panels { gap: 0; }
.desk.is-tabbed .desk__panel {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; translate: 0 14px;
  transition: opacity .3s var(--ease), translate .5s var(--ease-out), visibility 0s .3s;
}
.desk.is-tabbed .desk__panel.is-on {
  opacity: 1; visibility: visible; translate: 0 0;
  transition: opacity .5s var(--ease) .08s, translate .7s var(--ease-out) .08s, visibility 0s;
}
/* the scan: once, as the photo comes into view; the marks appear behind the line */
.desk__scan {
  position: absolute; top: 0; bottom: 0; left: 0; width: 28px; margin-left: -14px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(58, 70, 201, .16) 38%, var(--ice) 47% 53%, rgba(58, 70, 201, .16) 62%, transparent);
}
@keyframes deskScan {
  0% { opacity: 0; transform: translateX(0); }
  8%, 90% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100cqw); }
}
html.scenes .desk.is-lit .desk__scan { animation: deskScan 1.5s cubic-bezier(.45, .05, .55, .95) .15s both; }
html.scenes .desk:not(.is-lit) :is(.desk__dot, .desk__lines line, .dtag, .desk__veil) { opacity: 0; }
html.scenes .desk.is-lit .desk__dot { transition-delay: 0s, 0s, calc(.2s + var(--x) * 1.35s); }
html.scenes .desk.is-lit .desk__lines line { transition-delay: 0s, calc(.2s + var(--x) * 1.35s); }
html.scenes .desk.is-lit .dtag { transition-delay: 0s, 0s, 0s, calc(.3s + var(--x) * 1.35s), calc(.3s + var(--x) * 1.35s); }
html.scenes .desk.is-lit .desk__veil { transition-delay: 0s, 0s, 0s, 1.5s; }

/* ---------- 22 hours: the day as a ring ---------- */
.day__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.day__ring { position: relative; aspect-ratio: 1; width: min(100%, 520px); justify-self: center; --d: 1; }
/* the ring starts at midnight (the top); JS draws the ticks */
.day__ring svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.day__track { fill: none; stroke: var(--hair); stroke-width: 1.5; }
.day__ticks line { stroke: rgba(18, 20, 27, .28); stroke-width: 1.2; }
.day__ticks line.is-major { stroke: rgba(18, 20, 27, .5); stroke-width: 1.6; }
/* 22 hours worn, out 40 minutes for each meal: 7:00, 12:30 and 18:30 */
.day__wear { fill: none; stroke: url(#prism); stroke-width: 16; stroke-dasharray: 7 .667 4.833 .667 5.333 .667 4.833 0; }
.day__out { fill: none; stroke: var(--ink); stroke-width: 16; opacity: .9; }
.day__out--1 { stroke-dasharray: 0 7 .667 16.333; }
.day__out--2 { stroke-dasharray: 0 12.5 .667 10.833; }
.day__out--3 { stroke-dasharray: 0 18.5 .667 4.833; }
/* the ring draws itself with a sweeping mask (JS sets --d 0 → 1); the svg is
   turned -90°, so the sweep starts at 90° to begin at the top */
.day__ring svg {
  -webkit-mask-image: conic-gradient(from 90deg, #000 calc(var(--d) * 360deg), transparent calc(var(--d) * 360deg + .5deg));
  mask-image: conic-gradient(from 90deg, #000 calc(var(--d) * 360deg), transparent calc(var(--d) * 360deg + .5deg));
}
.day__num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; pointer-events: none; }
.day__num b { font: 640 clamp(64px, 8vw, 128px)/.9 var(--sans); font-stretch: 125%; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.day__num span { font: 500 12.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
/* the three marks sit on the ring in the middle of each meal, 7:20, 12:50 and
   18:50 (midnight at the top; the ring's radius is 37.5 % of the box) */
.day__mark { position: absolute; --a: 0deg; left: calc(50% + sin(var(--a)) * 37.5%); top: calc(50% - cos(var(--a)) * 37.5%); translate: -50% -50%; }
.day__mark span { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--on-dark); font: 500 12px/1.2 var(--mono); letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; }
.day__mark--1 { --a: 110deg; }
.day__mark--2 { --a: 192.5deg; }
.day__mark--3 { --a: 282.5deg; }
.day__text { display: grid; gap: 20px; }
.day__facts { display: grid; margin-top: 8px; }
.day__facts li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--hair); }
.day__facts li:last-child { border-bottom: 1px solid var(--hair); }
.day__facts b { color: var(--ice); }
.day__facts span { color: var(--soft); font-size: 15.5px; line-height: 1.5; }

/* ---------- a real case ---------- */
.case__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.case__text { display: grid; gap: 20px; }
.case__hint { color: var(--soft); }
.case__fig { width: 100%; max-width: 620px; justify-self: end; }
.compare {
  position: relative; aspect-ratio: 5 / 3; border-radius: var(--radius); overflow: hidden; background: #3a2526;
  cursor: ew-resize; touch-action: pan-y;
  box-shadow: 0 30px 70px rgba(40, 46, 70, .18);
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare.is-follow .compare__before, .compare.is-follow .compare__line { transition: clip-path .45s var(--ease-out), left .45s var(--ease-out); }
.compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.compare__knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.compare__knob svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.compare__tag { position: absolute; top: 12px; z-index: 2; padding: 5px 11px; border-radius: 999px; font: 500 12px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; background: rgba(18, 20, 27, .72); color: #fff; pointer-events: none; transition: opacity .3s; }
.compare__tag--b { left: 12px; }
.compare__tag--a { right: 12px; background: #fff; color: var(--ink); }
.compare.is-left .compare__tag--b, .compare.is-right .compare__tag--a { opacity: 0; }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; pointer-events: none; }
.compare:has(.compare__range:focus-visible) { outline: 2px solid var(--ice); outline-offset: 4px; }

/* ---------- costs: a prism-tinted panel ---------- */
.costs { padding-block: clamp(16px, 3vh, 40px); background: var(--frost); overflow-x: clip; }
.costs__panel {
  margin-inline: clamp(10px, 1.6vw, 24px); border-radius: 36px; color: var(--ink); padding-block: clamp(64px, 11vh, 120px);
  background: var(--mist);
}
.costs__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.costs__text > p { margin-top: 20px; font-size: clamp(16.5px, 1.25vw, 18.5px); max-width: 34em; color: #2c3140; }
.costs__from { font-weight: 650; color: var(--ink) !important; }
.sheet {
  position: relative; background: #fff; color: var(--text); border-radius: 18px;
  padding: clamp(24px, 3vw, 40px); border: 1px solid var(--hair);
  max-width: 480px; justify-self: center; width: 100%;
  display: grid; gap: 16px;
}
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); font: 500 12px/1.3 var(--mono); letter-spacing: .03em; color: var(--soft); }
.sheet__head b { font: 800 16px/1 var(--sans); font-stretch: 120%; letter-spacing: .02em; color: var(--text); }
.sheet h3 { font: 640 clamp(26px, 2.4vw, 34px)/1.05 var(--sans); font-stretch: 118%; letter-spacing: -.035em; }
.sheet__rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 13px 0; border-bottom: 1px dashed rgba(18, 20, 27, .22); align-items: baseline; }
.sheet__rows dt { font-size: 15.5px; }
.sheet__rows dd { font-size: 14px; font-weight: 650; text-align: right; color: var(--ice); }
.sheet__fh { color: var(--soft); margin-top: 4px; }
.sheet__factors { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet__factors li { padding: 7px 12px; border-radius: 999px; background: var(--frost); font-size: 14px; }

/* ---------- the doctor ---------- */
.doctor__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.doctor__fig { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 76svh; background: var(--mist); }
.doctor__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.doctor__text > p:not(.doctor__sign) { margin-top: 18px; color: var(--soft); font-size: clamp(16.5px, 1.25vw, 18.5px); max-width: 32em; }
.doctor__sign { margin-top: 22px; display: grid; gap: 2px; }
.doctor__sign b { font: 650 19px/1.2 var(--sans); font-stretch: 110%; letter-spacing: -.015em; }
.doctor__sign span { color: var(--soft); font-size: 15px; }

/* ---------- booking ---------- */
.booking__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.booking__intro .sect__lead { margin-top: 18px; }
.booking__facts { margin-top: 28px; display: grid; gap: 12px; color: var(--on-dark-soft); font-size: 15.5px; }
.booking__facts li { display: flex; gap: 10px; align-items: baseline; }
.booking__facts li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ice-hi); transform: translateY(-2px); }
.booking__facts a { color: var(--on-dark); font-weight: 650; text-decoration-color: rgba(185, 196, 255, .6); text-underline-offset: 3px; }
.bk { padding: clamp(18px, 2.2vw, 28px); border-radius: 26px; background: var(--snow); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); min-height: 460px; }
.bkSteps { display: flex; gap: 6px; margin-bottom: 18px; counter-reset: s; }
.bkSteps li { flex: 1; display: flex; min-width: 0; }
.bkSteps [data-step] { counter-increment: s; flex: 1; display: flex; align-items: center; gap: 8px; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--frost); color: var(--soft); font-size: 14px; font-weight: 600; min-height: 44px; cursor: default; }
.bkSteps [data-step]::before { content: counter(s); width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 500 12px/1 var(--mono); background: rgba(18, 20, 27, .08); }
.bkSteps .on { background: var(--ink); color: var(--on-dark); }
.bkSteps .on::before { background: var(--ice-hi); color: var(--ink); }
.bkSteps .done { cursor: pointer; color: var(--text); }
.bkSteps .done::before { content: '✓'; background: rgba(58, 70, 201, .12); color: var(--ice); }
.bkSkel { display: grid; gap: 14px; padding-top: 6px; }
.skelRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.skelRow i, .skelLine { display: block; height: 58px; border-radius: 14px; background: linear-gradient(90deg, var(--frost) 0%, var(--mist) 50%, var(--frost) 100%) 0 0 / 200% 100%; animation: skel 1.4s linear infinite; }
.skelRow i.sq { height: 44px; }
.skelRow:last-child { grid-template-columns: repeat(4, 1fr); }
.skelLine { height: 160px; }
@keyframes skel { to { background-position: -200% 0; } }
.bkNotice p, .bkHint { font-size: 15.5px; color: var(--soft); }
.bkNotice a, .bkHint a { color: var(--ice); font-weight: 650; }
.bkInfo { padding: 10px 14px; border-radius: 12px; background: rgba(58, 70, 201, .1); color: var(--text); font-size: 14.5px; margin-bottom: 12px; }
.bkLabel { font: 500 12px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--soft); margin-bottom: 8px; }
.quick { margin-bottom: 16px; }
.quickRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.quickBtn { display: grid; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--hair); background: #fff; min-height: 58px; transition: border-color .2s, box-shadow .2s; }
.quickBtn small { font-size: 12.5px; color: var(--soft); }
.quickBtn b { font: 650 15px/1.25 var(--sans); }
.calRow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; }
.calHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.calMonth { font: 650 16px/1 var(--sans); }
.calNav { width: 40px; height: 40px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--text); }
.calNav:disabled { opacity: .3; cursor: default; }
.calWeek, .calGrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.calWeek span { font: 500 12px/1 var(--mono); color: var(--soft); padding: 6px 0; }
.calGrid > * { height: 38px; display: grid; place-items: center; border-radius: 10px; font-size: 14.5px; }
.calGrid span.off { color: rgba(18, 20, 27, .62); }
.calGrid > :not(:empty) ~ span.off:empty:nth-child(n+36) { display: none; }
.day { background: var(--frost); font-weight: 650; transition: background-color .2s, color .2s; }
.day[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); }
.day.today, .calGrid span.today { box-shadow: inset 0 0 0 1.5px var(--ice); }
.timesEmpty { font-size: 14.5px; color: var(--soft); padding-top: 6px; }
.timeGroup + .timeGroup { margin-top: 12px; }
.timeHead { font-size: 12.5px; color: var(--soft); margin-bottom: 6px; }
.timeGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; }
.time { min-height: 40px; border-radius: 10px; border: 1px solid var(--hair); background: #fff; font-weight: 650; font-size: 14.5px; transition: border-color .2s, background-color .2s; }
.time[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--frost); margin-bottom: 16px; }
.pick > div { display: grid; gap: 2px; }
.pick b { font: 650 16px/1.3 var(--sans); }
.pick span { font-size: 14px; color: var(--soft); }
.linkBtn { color: var(--ice); font-weight: 650; font-size: 14.5px; min-height: 44px; padding: 0 4px; }
.bkFields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.bkFields .full { grid-column: 1 / -1; }
.fLabel { display: block; font-size: 13.5px; color: var(--soft); margin-bottom: 5px; }
.bk input[type="text"], .bk input[type="tel"], .bk input[type="email"], .bk textarea { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(18, 20, 27, .2); background: #fff; color: var(--text); font: 400 16px/1.4 var(--sans); transition: border-color .2s, box-shadow .2s; }
.bk textarea { resize: vertical; min-height: 84px; }
.bk input:focus, .bk textarea:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(58, 70, 201, .16); }
.bk input:focus-visible, .bk textarea:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(58, 70, 201, .24); }
.bk .bad { border-color: #b3261e; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bkConsent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin: 16px 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--soft); cursor: pointer; }
.bkConsent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); }
.bkErr { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: #fbe9e7; color: #8c1d18; font-size: 14.5px; }
.bk .btn { --bg: var(--ink); --fg: var(--on-dark); }
.bk .btn--ghost { --bg: transparent; --fg: var(--text); }
.bkNote { margin-top: 10px; font-size: 12.5px; color: var(--soft); line-height: 1.5; }
.doneMark { width: 56px; height: 56px; color: var(--ice); margin-bottom: 10px; }
.doneMark .tick { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tick .7s var(--ease-out) .2s forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
.doneH { font: 650 24px/1.2 var(--sans); font-stretch: 110%; letter-spacing: -.02em; margin-bottom: 14px; }
.pick--done span { display: block; }
.doneNext { list-style: decimal; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; color: var(--soft); margin-bottom: 18px; }
.doneActions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- questions ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.faq__topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(24px, 4vh, 40px); }
.faq__topics button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--hair); font-weight: 550; font-size: 15px; color: var(--soft); transition: background-color .25s, color .25s, border-color .25s; }
.faq__topics button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.faq__aside { margin-top: 24px; font-size: 15px; color: var(--soft); max-width: 24em; }
.faq__aside a { color: var(--ice); font-weight: 650; white-space: nowrap; }
.faq__gh { font: 500 12.5px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ice); margin: 28px 0 4px; }
.faq__group:first-child .faq__gh { margin-top: 0; }
.faq__list.is-tabbed .faq__gh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.faq__list.is-tabbed .faq__group:not(.is-on) { display: none; }
.faq__list.is-tabbed .faq__group.is-on { animation: qIn .5s var(--ease-out); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq__group details:first-of-type { border-top: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 22px 52px 22px 0; min-height: 44px; font: 600 clamp(18px, 1.45vw, 21px)/1.3 var(--sans); font-stretch: 106%; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%;
  border: 1px solid var(--hair);
  background: linear-gradient(var(--text), var(--text)) center / 12px 1.5px no-repeat, linear-gradient(var(--text), var(--text)) center / 1.5px 12px no-repeat;
  transition: transform .4s var(--ease), background-color .3s, border-color .3s;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: #fff; border-color: rgba(58, 70, 201, .4); }
.faq details p { padding: 0 52px 24px 0; color: var(--soft); font-size: 16.5px; line-height: 1.65; max-width: 40em; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease-out), content-visibility .45s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* ---------- the practice ---------- */
.place__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.place__text > p { margin-top: 20px; color: var(--soft); font-size: clamp(16.5px, 1.25vw, 18.5px); max-width: 32em; }
.place__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin-top: clamp(26px, 4vh, 40px); }
.place__facts > div { border-top: 1px solid var(--hair); padding-top: 14px; }
.place__facts dt { font: 500 12px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ice); margin-bottom: 6px; }
.place__facts dd { font-size: 16px; line-height: 1.5; }
.place__facts a { color: var(--text); font-weight: 650; text-decoration-color: rgba(58, 70, 201, .5); text-underline-offset: 3px; }
.mapTile { position: relative; display: block; border-radius: 28px; overflow: hidden; aspect-ratio: 1; max-height: 70svh; margin-left: auto; text-decoration: none; color: var(--text); background: var(--mist); }
.mapTile img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.7) contrast(.95) brightness(1.04); transition: transform 1.2s var(--ease-out); }
.mapPin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 7px rgba(18, 20, 27, .16); }
.mapPin i { position: absolute; inset: 6px; border-radius: 50%; background: var(--prism); }
.mapLabel { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: rgba(246, 247, 249, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mapLabel b { font: 650 15.5px/1.2 var(--sans); }
.mapLabel span { font-size: 14px; font-weight: 650; color: var(--ice); white-space: nowrap; }
.mapCredit { position: absolute; right: 10px; top: 10px; font-size: 10.5px; color: rgba(18, 20, 27, .78); background: rgba(246, 247, 249, .8); padding: 2px 6px; border-radius: 6px; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--on-dark); padding-top: clamp(48px, 7vh, 80px); overflow: hidden; }
.foot__info { position: relative; z-index: 1; margin-top: clamp(40px, 7vh, 80px); display: grid; gap: 6px; font-size: 14.5px; color: var(--on-dark-soft); }
.foot__info a { color: var(--on-dark-soft); text-decoration: none; }
.foot__info b { color: var(--on-dark); font-weight: 650; }
.foot__meta { margin-top: 6px; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.foot__legal a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: var(--on-dark); font-size: 14px; font-weight: 650; text-decoration: none; }
.foot__legal a:active { background: rgba(255, 255, 255, .12); }
.foot__mark {
  margin: clamp(24px, 4vh, 48px) 0 -.16em; text-align: center; white-space: nowrap;
  font: 800 clamp(76px, 17.4vw, 320px)/.82 var(--sans); font-stretch: 125%; letter-spacing: -.045em;
  color: rgba(185, 196, 255, .14);
  user-select: none; pointer-events: none; /* the letters overlap the links above */
}

/* ==========================================================================
   Arrivals: once, when a thing comes into view.
   ========================================================================== */
html.js:not(.is-calm) [data-rv]:not([data-rv="wipe"]) { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s); }
html.js:not(.is-calm) [data-rv].is-in:not([data-rv="wipe"]) { opacity: 1; transform: none; }
html.js:not(.is-calm) [data-rv="wipe"] > span { display: inline-block; clip-path: inset(0 0 100% 0); transform: translateY(28%); filter: blur(4px); transition: clip-path 1.05s var(--ease-out) var(--d, 0s), transform 1.05s var(--ease-out) var(--d, 0s), filter 1.2s var(--ease) var(--d, 0s); }
html.js:not(.is-calm) [data-rv="wipe"].is-in > span { clip-path: inset(0 0 -8% 0); transform: none; filter: none; }

/* ==========================================================================
   Without scenes (reduced motion, no JS): her photo, and the four chapters
   follow as a list.
   ========================================================================== */
html:not(.scenes) .klar__steps { display: block; padding: var(--pad-y) var(--gutter); max-width: 1320px; margin: 0 auto; }
html:not(.scenes) .klar__stepsHH { margin-bottom: 32px; }
html:not(.scenes) .klar__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: st; }
html:not(.scenes) .klar__list li { counter-increment: st; display: grid; gap: 8px; align-content: start; }
html:not(.scenes) .klar__list img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--field); border-radius: 18px; }
html:not(.scenes) .klar__list h3 { font: 620 19px/1.25 var(--sans); font-stretch: 112%; }
html:not(.scenes) .klar__list h3::before { content: counter(st, decimal-leading-zero) '  '; font: 500 13px/1 var(--mono); color: var(--ice); }
html:not(.scenes) .klar__list p { color: #2f3443; font-size: 15px; }
html:not(.scenes) .finale { display: none; }

/* ==========================================================================
   Scroll scenes (html.scenes: JS on, no reduced motion). site.js gives each
   scene its progress; the pinned one is a tall section with a sticky screen.
   ========================================================================== */
html.scenes .klar { height: 1400vh; height: 1400svh; }
html.scenes .klar .klar__stick { position: sticky; top: 0; }
html.scenes .klar .klar__steps { display: block; position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the hero lifts away as the journey starts */
html.scenes .hero__copy, html.scenes .plate { translate: 0 calc(var(--h) * -80px); opacity: calc(1 - var(--h) * 1.4); }
html.scenes .klar.is-playing .hero__copy, html.scenes .klar.is-playing .plate { visibility: hidden; }
/* the caption and the rail come in with the journey */
html.scenes .klar__cap {
  display: grid; position: absolute; z-index: 3; left: var(--gutter); top: 50%;
  width: min(420px, 31vw); gap: 12px; translate: 0 -50%;
  opacity: calc(var(--cap) - var(--white) * 2 - var(--fin) * 2); visibility: hidden;
}
html.scenes .klar.is-playing .klar__cap { visibility: visible; }
/* where the caption meets her photo, a soft wash of the stage keeps it legible */
html.scenes .klar__cap::before { content: ''; position: absolute; z-index: -1; inset: -90px -70px -90px calc(-1 * var(--gutter)); background: radial-gradient(closest-side, rgba(210, 212, 221, .86), rgba(210, 212, 221, 0)); pointer-events: none; }
.klar__title { font: 640 clamp(36px, 3.8vw, 64px)/1 var(--sans); font-stretch: 122%; letter-spacing: -.045em; text-wrap: balance; }
.klar__text { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; color: #2f3443; max-width: 26em; }
.klar__cap.is-swap > * { animation: capIn .7s var(--ease-out) both; }
.klar__cap.is-swap > :nth-child(2) { animation-delay: .06s; }
.klar__cap.is-swap > :nth-child(3) { animation-delay: .12s; }
@keyframes capIn { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } }
html.scenes .klar__rail {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  position: absolute; z-index: 4; left: calc(var(--gutter) + 230px); right: calc(var(--gutter) + 200px); bottom: clamp(12px, 2.4vh, 24px);
  opacity: calc(var(--cap) - var(--white) * 2 - var(--fin) * 2); visibility: hidden;
}
html.scenes .klar.is-playing .klar__rail { visibility: visible; }
.klar__rail button { display: grid; gap: 9px; text-align: left; min-height: 44px; padding-top: 4px; font: 500 12px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; opacity: .78; transition: opacity .3s; }
.klar__rail button i { display: block; height: 2px; border-radius: 2px; background: rgba(18, 20, 27, .16); overflow: hidden; }
.klar__rail button i::after { content: ''; display: block; height: 100%; background: var(--ink); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
.klar__rail button[aria-current="step"] { opacity: 1; }

/* the ring draws itself as it comes in */
html.scenes .day__ring { --d: 0; }

/* pictures drift inside their frames */
html.scenes .doctor__fig img { scale: 1.12; translate: 0 calc((var(--p, .5) - .5) * -9%); }

/* the situation photos drift inside their cards */
html.scenes .sit__img { scale: calc(1.12 + var(--hz)); translate: 0 calc((var(--p, .5) - .5) * -9%); }

/* the big sentence, in reverse: the photo fills the screen with the sentence
   low on it (over a soft wash), shrinks into a card between the sentence's two
   lines, the line and the button come up on the card's lower edge, then the
   lines leave, the first to the left and the second to the right. JS sets the
   clip, the photo's scale, each line's shift, --k (how far the photo has shrunk)
   and the card's box (--cx, --cy, --cw, --ch), which the band and its shade use. */
html.scenes .grow { height: 340vh; height: 340svh; }
html.scenes .grow__stick { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; }
html.scenes .grow__fill { position: absolute; inset: 0; z-index: 1; margin: 0; height: auto; pointer-events: none; }
html.scenes .grow__fill img { transform-origin: 50% 50%; will-change: transform; }
html.scenes .grow__fill::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(236, 238, 243, 0) 28%, rgba(236, 238, 243, .72) 64%, rgba(236, 238, 243, .9));
  opacity: calc(1 - var(--k, 0));
}
html.scenes .grow__fill::after {
  inset: auto; left: var(--cx, 0px); top: var(--cy, 0px); width: var(--cw, 100%); height: var(--ch, 100%);
  background: linear-gradient(180deg, rgba(236, 238, 243, 0) 42%, rgba(236, 238, 243, .92) 88%);
  opacity: 0; transition: opacity .8s var(--ease);
}
html.scenes .grow__text {
  position: absolute; inset: 0; z-index: 3; display: grid; align-content: center; justify-items: center;
  max-width: none; margin: 0; padding-inline: var(--gutter); font-size: clamp(34px, 4.8vw, 92px); pointer-events: none;
}
html.scenes .grow__l { display: block; will-change: transform; }
html.scenes .grow__band {
  --bp: clamp(18px, 2.2vw, 32px);
  top: auto; right: auto; transform: none; z-index: 2;
  left: calc(var(--cx, 0px) + var(--bp)); bottom: calc(100% - var(--cy, 0px) - var(--ch, 100%) + var(--bp)); width: calc(var(--cw, 100%) - 2 * var(--bp));
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px;
  opacity: 0; visibility: hidden; translate: 0 26px; transition: opacity .7s var(--ease), translate .9s var(--ease-out), visibility 0s .7s;
}
html.scenes .grow__band .grow__line { font-size: clamp(24px, 2.2vw, 38px); max-width: 17ch; }
html.scenes .grow__band .btn { flex: none; }
html.scenes .grow.is-narrow .grow__band { flex-direction: column; align-items: flex-start; }
html.scenes .grow.is-band .grow__fill { pointer-events: auto; }
html.scenes .grow.is-band .grow__fill::after { opacity: 1; }
html.scenes .grow.is-band .grow__band { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .8s var(--ease), translate 1s var(--ease-out), visibility 0s; }
html.scenes .grow.is-band .grow__band .btn { transition-delay: .12s; }

/* the real case grows into place */
html.scenes .case__fig { scale: calc(.9 + .1 * var(--e, 1)); }
html.scenes .mapTile img { scale: 1.1; translate: 0 calc((var(--p, .5) - .5) * -8%); }

/* panels open from rounded corners as they come in */
html.scenes .costs__panel { clip-path: inset(calc((1 - var(--e, 1)) * 8%) calc((1 - var(--e, 1)) * 6%) round 36px); }
html.scenes .booking.opens, html.scenes .quiz.opens { clip-path: inset(0 calc((1 - var(--e, 1)) * 5%) 0 round calc((1 - var(--e, 1)) * 56px) calc((1 - var(--e, 1)) * 56px) 0 0); }
html.scenes .sheet { translate: 0 calc((1 - var(--e, 1)) * 40px); opacity: calc(.2 + var(--e, 1) * .8); }

/* the footer wordmark rises letter by letter */
.foot__mark .ch { display: inline-block; }
html.scenes .foot__mark .ch { translate: 0 calc((1 - var(--k, 1)) * 100%); }

/* ==========================================================================
   Tablets and small laptops
   ========================================================================== */
@media (max-width: 1100px) {
  .pill__nav a { padding: 0 9px; }
  /* the everyday questions: words, photo and answer one under the other */
  .desk__wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "stage" "panels"; }
  .desk__head { margin-bottom: clamp(24px, 4vh, 40px); }
  .desk__stage { width: min(100%, 860px); }
  .desk__panels { align-self: start; margin-top: clamp(24px, 4vh, 36px); max-width: 640px; }
  .hero__copy { width: min(540px, 50vw); }
  .plate { display: none; }
  html.scenes .klar__rail { right: calc(var(--gutter) + 150px); left: calc(var(--gutter) + 190px); }
}

@media (max-width: 900px) {
  :root { --pad-y: clamp(56px, 9vh, 88px); }
  .pill { display: none; }
  .mbar {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    display: flex; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgba(18, 20, 27, .86); color: var(--on-dark);
    -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
    border-top: 1px solid rgba(238, 240, 245, .1);
    transform: translateY(110%); transition: transform .5s var(--ease-out);
  }
  html.is-past .mbar { transform: none; }
  .mbar .btn { --bg: #fff; --fg: var(--ink); }
  .mbar .btn--ghost { --bg: transparent; --fg: var(--on-dark); }
  .mbar .btn:first-child { flex: 1; }
  .sits { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; height: auto; }
  .sit { aspect-ratio: 4 / 3; }
  .sit--tall { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .quiz__grid, .costs__grid, .doctor__grid, .booking__grid, .faq__grid, .place__grid, .case__grid { grid-template-columns: minmax(0, 1fr); }
  .case__fig { justify-self: start; }
  .doctor__fig { max-height: 50svh; aspect-ratio: 4 / 3; max-width: 560px; }
  .mapTile { margin: 0; max-height: none; aspect-ratio: 16 / 10; }
  .foot { padding-top: 40px; padding-bottom: 76px; }
  .foot__info { margin-top: 0; }
  .sheet { justify-self: start; }
  html:not(.scenes) .klar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the everyday questions: only the dots on the photo, the labels in a row under it */
  .desk__stage { width: 100%; }
  .desk__lines { display: none; }
  .desk__tags { position: static; width: auto; aspect-ratio: auto; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .dtag { position: static; translate: none; min-height: 44px; align-items: center; padding: 0 14px; background: #f6f7f9; border-color: var(--hair); box-shadow: none; font-size: 12.5px; }
}

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 760px) {
  /* the three booking steps share one narrow row: smaller type, no overflow */
  .bkSteps { gap: 4px; }
  .bkSteps [data-step] { display: block; min-width: 0; padding: 9px 8px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bkSteps [data-step]::before { display: inline-grid; vertical-align: middle; margin-right: 6px; }
  .bkSteps li:not(:has(.on)) { flex: 0 0 auto; }
  .bkSteps [data-step]:not(.on) { font-size: 0; padding: 9px; }
  .bkSteps [data-step]:not(.on)::before { margin-right: 0; }
  body { font-size: 16.5px; }
  .h2 { font-size: clamp(30px, 8.6vw, 40px); max-width: none; }
  .hud__mid { display: none; }
  .hud--top { gap: 10px; }
  .hud__tools .btn { display: none; }
  /* phones: the words at the top, her portrait below them */
  .hero__copy { width: auto; right: var(--gutter); top: calc(72px + env(safe-area-inset-top)); bottom: auto; gap: 12px; }
  .hero__h1 { font-size: clamp(38px, 11.4vw, 54px); }
  .hero__copy .cue { display: none; }   /* on a phone, scrolling is the obvious move; the hint would sit on her hair */
  .hero__lead { font-size: 16px; }
  /* phones: the caption under the menu, the teeth in the middle, the rail at the bottom */
  html.scenes .klar__cap { top: calc(70px + env(safe-area-inset-top)); translate: 0 0; width: auto; right: var(--gutter); gap: 8px; }
  .klar__title { font-size: clamp(30px, 8.8vw, 40px); }
  .klar__text { font-size: 15.5px; }
  /* close up, her face fills the phone: a wash of the stage behind the words */
  html.scenes .klar__cap::before { content: ''; position: absolute; z-index: -1; inset: calc(-80px - env(safe-area-inset-top)) calc(-1 * var(--gutter)) -64px; background: linear-gradient(180deg, rgba(210, 212, 221, .95) 62%, rgba(210, 212, 221, 0)); }
  html.scenes .klar__rail { left: var(--gutter); right: var(--gutter); bottom: calc(14px + env(safe-area-inset-bottom)); gap: 6px; }
  html.scenes .klar__rail::before { content: ''; position: absolute; z-index: -1; inset: -64px calc(-1 * var(--gutter)) calc(-14px - env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(210, 212, 221, .92) 50%, rgba(210, 212, 221, 0)); pointer-events: none; }
  .hud--bottom { z-index: 5; }
  .klar__rail button { font-size: 11px; letter-spacing: 0; }
  .hud--bottom { bottom: calc(66px + env(safe-area-inset-bottom)); justify-content: flex-end; }
  .hud__geo { display: none; }
  .tag3d { font-size: 11px; padding: 4px 7px; }
  .finale__band { left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(90px + env(safe-area-inset-bottom)); translate: 0 calc((1 - var(--fin)) * 26px); width: auto; gap: 16px; }
  .finale__band::before { content: ''; position: absolute; inset: -60px calc(-1 * var(--gutter)) -200px; z-index: -1; background: linear-gradient(180deg, rgba(210, 212, 221, 0), rgba(210, 212, 221, .94) 45%); }
  html.no-js .face { right: auto; left: 0; top: auto; bottom: 0; width: 100%; height: auto; }
  .finale__line { font-size: clamp(34px, 10vw, 46px); }
  .finale__tag { top: auto; bottom: calc(100% + 10px); }
  .quiz__box { min-height: 0; padding: 18px; border-radius: 22px; }
  .quiz__q legend { font-size: 22px; margin-bottom: 14px; }
  .opt { min-height: 54px; font-size: 15.5px; padding: 10px 12px; gap: 12px; }
  .day__grid { grid-template-columns: minmax(0, 1fr); }
  .day__ring { width: min(100%, 360px); }
  .day__facts li { grid-template-columns: 1fr; gap: 2px; }
  .bkFields { grid-template-columns: 1fr; }
  .calRow { grid-template-columns: 1fr; }
  .place__facts { grid-template-columns: 1fr; }
  html:not(.scenes) .klar__list { grid-template-columns: 1fr; }
  .costs__panel { border-radius: 26px; }
  /* the situations: a list with small pictures that opens in place */
  .sits { grid-template-columns: 1fr; gap: 8px; }
  .sit, .sit--tall { aspect-ratio: auto; grid-column: auto; background: var(--snow); border: 1px solid var(--hair); border-radius: 18px; }
  .sit__btn { position: relative; inset: auto; display: grid; grid-template-columns: 76px minmax(0, 1fr) 34px; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; color: var(--text); min-height: 72px; }
  .sit__btn::after { display: none; }
  .sit__img { position: relative; width: 76px; height: 56px; border-radius: 12px; }
  html.scenes .sit__img { scale: 1; translate: none; }
  .sit__no { display: none; }
  .sit__t, .sit--tall .sit__t { position: static; font-size: 17px; max-width: none; }
  .sit__plus { position: relative; right: auto; top: auto; width: 34px; height: 34px; background: var(--frost); border-color: var(--hair); color: var(--text); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sit.is-open .sit__plus { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
  .sit.is-open .sit__t { opacity: 1; transform: none; }
  .sit.is-open .sit__img { opacity: 1; }
  .sit__a {
    position: static; transform: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    color: var(--text); padding: 0 14px;
    display: grid; grid-template-rows: 0fr 0fr;
    transition: grid-template-rows .45s var(--ease-out), padding .45s var(--ease-out), visibility 0s .45s;
  }
  .sit__a > * { min-height: 0; overflow: hidden; }
  .sit__a p, .sit--tall .sit__a p { color: var(--soft); font-size: 15.5px; }
  .sit__a .textLink { color: var(--ice); }
  .sit.is-open .sit__a { grid-template-rows: 1fr 1fr; padding: 2px 14px 12px; transition: grid-template-rows .45s var(--ease-out), padding .45s var(--ease-out), visibility 0s; }
  /* the big sentence: the line sits low on the photo, over a soft shade */
  .grow__stick { padding-top: clamp(72px, 14vh, 120px); }
  .grow__text { font-size: clamp(36px, 11vw, 50px); }
  html.scenes .grow__stick { padding-block: 0; }
  .grow__fill img { object-position: 52% 30%; }
  .grow__fill::after { background: linear-gradient(180deg, rgba(236, 238, 243, 0) 40%, rgba(236, 238, 243, .92) 78%); }
  .grow__band { top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); left: var(--gutter); right: var(--gutter); transform: none; width: auto; }
  .grow__line { font-size: clamp(30px, 8.8vw, 40px); }
  /* the big sentence: a smaller line and button on the narrow card */
  html.scenes .grow__band { --bp: 14px; }
  html.scenes .grow__band .btn { max-width: 100%; padding-inline: 16px; font-size: 14px; }
  html.scenes .grow__band .grow__line { font-size: clamp(22px, 6.4vw, 28px); }
}

/* short phones: the headline alone above her, the lead would cover her face */
@media (max-width: 760px) and (max-height: 760px) {
  .hero__lead { display: none; }
}

/* ==========================================================================
   Hover, only where there is a real pointer
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .sit__btn:hover .sit__img, .sit.is-open .sit__img { --hz: .05; }
  .sit:not(.is-open) .sit__btn:hover .sit__plus { background: rgba(18, 20, 27, .6); }
  .btn:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 28px rgba(18, 20, 27, .22); }
  .btn:hover .arrow { transform: translateX(4px); }
  .btn--light:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
  .pill__nav a:hover { color: var(--on-dark); background: rgba(238, 240, 245, .08); }
  .pill__call:hover { color: var(--on-dark); }
  .plate:hover { background: rgba(246, 247, 249, .72); }
  .textLink:hover { background-size: 0 1.5px; background-position: 100% calc(50% + .75em); }
  .quiz__back:hover { color: var(--on-dark); }
  .opt:hover { border-color: rgba(185, 196, 255, .5); background: rgba(185, 196, 255, .05); }
  .opt:hover::after, .opt.is-picked::after { opacity: 1; transform: none; }
  .klar__rail button:hover { opacity: 1; }
  .faq__topics button:not([aria-selected="true"]):hover { color: var(--text); border-color: rgba(18, 20, 27, .3); }
  .faq summary:hover::after { border-color: rgba(18, 20, 27, .35); }
  .quickBtn:hover, .time:hover { border-color: rgba(18, 20, 27, .35); }
  .mapTile:hover img { transform: scale(1.03); }
  .foot__legal a:hover { background: rgba(255, 255, 255, .1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}