/* Dently — main styles. Base DNA mistral (ruled square grid), donor stripe (two-tone light type, bento, facts). */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-background); color: var(--color-ink);
  font: 400 var(--type-body)/var(--type-body-leading) var(--font-body); letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--color-ink); color: #fff; padding: 8px 12px; }
.skip:focus { left: 8px; }

/* pixel sprites (rendered by js) */
.px { display: inline-block; line-height: 0; }
.px svg { display: block; shape-rendering: crispEdges; }

/* mono labels — mistral type.eyebrow / type.chip */
.eyebrow { font: 400 var(--type-eyebrow)/20px var(--font-mono); text-transform: uppercase; color: var(--color-ink-soft); letter-spacing: 0; }
.mono-tag, .mono { font: 400 var(--type-chip)/16px var(--font-mono); text-transform: uppercase; letter-spacing: 0; }

/* two-tone heading — stripe components §4 */
.two-tone { font: 300 var(--type-h2-size)/var(--type-h2-leading) var(--font-display); letter-spacing: var(--type-h2-tracking); max-width: 856px; }
.two-tone .ink { color: var(--color-ink); }
.two-tone .soft { color: var(--color-ink-soft); }
.two-tone--dark .ink { color: var(--color-ink-on-dark); }
.two-tone--dark .soft { color: var(--color-ink-soft-on-dark); }

/* ---------- buttons — mistral §2 shape, stripe one action colour ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 8px 16px; border-radius: var(--radius-button); border: 0;
  font: 500 16px/24px var(--font-display); letter-spacing: 0.01em; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui);
}
.btn--primary { background: var(--color-accent); color: var(--color-accent-contrast); }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--ghost { background: var(--color-action-ghost); color: var(--color-ink); }
.btn--ghost:hover { background: var(--color-action-ghost-hover); }
.btn--light { background: #f4f5f2; color: var(--color-ink); }
.btn--light:hover { background: #fff; }
.btn--dark { background: var(--color-ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* 5-step pixel chevron (mistral) */
.chev { width: 6px; height: 10px; display: inline-block; background: currentColor; transition: transform var(--dur-ui) var(--ease-ui);
  clip-path: polygon(0 0,33% 0,33% 20%,66% 20%,66% 40%,100% 40%,100% 60%,66% 60%,66% 80%,33% 80%,33% 100%,0 100%,0 80%,33% 80%,33% 60%,0 60%,0 40%,33% 40%,33% 20%,0 20%); }
.btn:hover .chev, .nav__cta:hover .chev, .nav__ghost:hover .chev { transform: translateX(2px); }

.icon-btn { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 4px; background: var(--color-accent-quiet); z-index: 2; transition: background-color var(--dur-ui) var(--ease-ui); }
.icon-btn:hover { background: #d5e5ff; }

/* ---------- §00 Header — mistral §00 cell bar ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: calc(var(--nav-height) + 1px);
  display: flex; align-items: stretch; background: var(--color-background); border-bottom: 1px solid var(--color-border);
}
.cell { border-color: var(--color-border); }
.nav__logo { width: 48px; display: grid; place-items: center; border-right: 1px solid var(--color-border); }
.nav__items { display: flex; flex: 1; }
.nav__item { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-right: 1px solid var(--color-border); font: 500 16px/24px var(--font-display); letter-spacing: 0.01em; transition: background-color var(--dur-ui) var(--ease-ui); }
.nav__item:hover { background: var(--color-surface); }
.nav__actions { display: flex; }
.nav__ghost { border-left: 1px solid var(--color-border); border-right: 0; }
.nav__cta { display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--color-accent); color: #fff; font: 500 16px/24px var(--font-display); letter-spacing: 0.01em; transition: background-color var(--dur-ui) var(--ease-ui); }
.nav__cta:hover { background: var(--color-accent-hover); }

/* ---------- §01 Hero — mistral §01 ---------- */
.hero { position: relative; padding-top: calc(var(--nav-height) + 1px); }
.hero__stage {
  display: grid; grid-template-columns: minmax(0, 1fr) 432px; grid-template-rows: minmax(0, 1fr) 360px;
  height: calc(100dvh - var(--nav-height) - 1px); min-height: 640px; overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.hero__title-cell { grid-area: 1 / 1; display: flex; align-items: flex-end; padding: 0 var(--space-gutter) 40px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); overflow: hidden; }
.hero__title { font: 300 var(--type-hero-size)/var(--type-hero-leading) var(--font-display); letter-spacing: var(--type-hero-tracking); white-space: nowrap; }
.hero__title span { display: block; }
.hero__title .ink { color: var(--color-ink); }
.hero__title .soft { color: var(--color-ink-soft); }

.hero__lede-cell { grid-area: 1 / 2; position: relative; z-index: 3; }
.hero__lede-panel { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: var(--color-background); border-left: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background: var(--color-surface); }
.hero__lede-content { position: absolute; left: 40px; bottom: 40px; width: 352px; transform-origin: 0 100%; }
.hero__icons { display: flex; gap: 12px; margin-bottom: 20px; overflow: hidden; height: 40px; }
.hero__icon { display: block; transform: translateY(110%); }
.hero__lede { font: 400 26px/32px var(--font-display); letter-spacing: -0.01em; color: var(--color-ink); }

.hero__mosaic-cell { grid-area: 2 / 1; position: relative; border-right: 1px solid var(--color-border); overflow: hidden; }
.odontogram { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(6, 1fr); }
.odo { position: relative; background: var(--t, var(--ramp-3)); box-shadow: inset -1px -1px 0 rgba(11, 27, 43, 0.12); display: grid; place-items: center; }
.odo__n { position: absolute; left: 5px; top: 4px; font: 400 10px/1 var(--font-mono); color: rgba(11, 27, 43, 0.72); }
.odo--tooth { background: var(--t); }
.odo__diamond { position: absolute; width: 70%; aspect-ratio: 1; background: var(--d); transform: rotate(45deg) scale(0.62); }
.odo__dot { position: absolute; width: 4px; height: 4px; background: var(--color-ink); right: -2px; bottom: -2px; z-index: 2; }
.hero__tag { position: absolute; z-index: 3; color: var(--color-ink); background: rgba(250, 250, 247, 0.8); padding: 2px 6px; }
.hero__tag--a { left: 12px; top: 12px; }
.hero__tag--b { right: 12px; bottom: 12px; }

.hero__side-cell { grid-area: 2 / 2; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; position: relative; z-index: 1; background: var(--color-background); }
.hero__arrows { display: flex; flex-direction: column; gap: 6px; }
.hero__arrows .px { animation: fading-arrow 2s linear infinite; opacity: .2; }
.hero__arrows .px:nth-child(2) { animation-delay: .2s; }
.hero__arrows .px:nth-child(3) { animation-delay: .4s; }
@keyframes fading-arrow { 0%, 40% { opacity: .2; } 50% { opacity: 1; } 60%, 100% { opacity: .2; } } /* mistral M01-c */
.hero__live .eyebrow { display: flex; align-items: center; gap: 8px; }
.hero__live-line { margin: 8px 0 20px; font: 300 20px/28px var(--font-display); color: var(--color-ink-soft); }
.hero__live-line strong { font-weight: 500; color: var(--color-ink); font-variant-numeric: tabular-nums; }
#sg-clock { font-variant-numeric: tabular-nums; color: var(--color-ink); }
.live-dot { width: 8px; height: 8px; background: #22c55e; position: relative; }
.live-dot::after { content: ""; position: absolute; inset: 0; border: 0 solid #22c55e; animation: dot-pulse 2s linear infinite; } /* mistral dot-pulse */
@keyframes dot-pulse { 0% { opacity: 1; border-width: 0; inset: 0; } 50%, 100% { opacity: 0; border-width: 1px; inset: -6px; } }

/* pinned mode (js adds .hero--pinned ≥1024px, motion allowed) — mistral lg:min-h-[200dvh] + sticky stage */
.hero--pinned { height: calc(200dvh + var(--nav-height)); }
.hero--pinned.hero--layered { height: calc(300dvh + var(--nav-height)); } /* collapse over the first 100dvh, the next sheet slides over during the last */
.hero--pinned .hero__stage { position: sticky; top: calc(var(--nav-height) + 1px); }
.hero--pinned .hero__lede-content { width: 640px; }
.hero--pinned .hero__lede { font-size: 44px; line-height: 52px; letter-spacing: -0.02em; }
.hero--pinned .hero__icons { height: 64px; margin-bottom: 28px; }
.hero--pinned .hero__icon .px svg { width: 64px; height: 64px; }

/* pick 2 — the odontogram is a live chart: teeth are buttons that cycle condition */
button.odo { border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; transition: background-color .35s var(--ease-ui), transform .2s var(--ease-ui); }
@media (hover: hover) { button.odo:hover { transform: translateY(-2px); z-index: 2; box-shadow: inset 0 0 0 2px var(--color-ink); } }
button.odo:focus-visible { outline: 2px solid var(--color-ink); outline-offset: -2px; z-index: 2; }
.odo.is-missing .px { opacity: .3; }
.odo.is-pop .px { animation: odo-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes odo-pop { 0% { transform: var(--flip, none) scale(.6); } 100% { transform: var(--flip, none) scale(1); } }
.hero__tag--c { left: 12px; bottom: 12px; background: var(--color-ink); color: #fff; }
.odo-tip { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, calc(-100% - 8px)); padding: 4px 8px; background: var(--color-ink); color: #fff; font: 400 11px/16px var(--font-mono); text-transform: uppercase; white-space: nowrap; }

/* ---------- §02 Modules — mistral §02 ---------- */
.modules { border-bottom: 1px solid var(--color-border); }
.modules__row { display: grid; grid-template-columns: repeat(6, 1fr); }
.module { height: 136px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-right: 1px solid var(--color-border); }
.module:last-child { border-right: 0; }
.module .mono-tag { color: var(--color-ink); }

/* ---------- §03 Editorial + markitecture — mistral §04/§05 ---------- */
.editorial { padding: var(--space-section-top) var(--space-gutter) 0; text-align: center; }
.editorial__icons { display: flex; justify-content: center; gap: 16px; height: 36px; overflow: hidden; margin-bottom: 24px; }
.icon-rise { display: block; transform: translateY(100px); transition: transform 1s var(--ease-icon-rise); transition-delay: calc(var(--i) * 50ms); }
.in-view .icon-rise { transform: translateY(0); }
.editorial__title { font: 300 var(--type-display-size)/var(--type-display-leading) var(--font-display); letter-spacing: var(--type-display-tracking); }

.markitecture { padding: 64px var(--space-gutter) 120px; display: flex; justify-content: center; overflow: hidden; }
.markitecture__grid { --u: 192px; position: relative; width: calc(var(--u) * 5); height: calc(var(--u) * 3); }
.mk-block { position: absolute; left: calc(var(--c) * var(--u)); top: calc(var(--r) * var(--u)); width: calc(var(--w) * var(--u) + 1px); height: calc(var(--h) * var(--u) + 1px); border: 1px solid var(--color-border); background: var(--color-background); opacity: 0; }
.mk-filler { background: var(--color-surface); }
.mk-filler--t { background: var(--color-surface-tertiary); }
.mk-tile { display: flex; flex-direction: column; justify-content: space-between; padding: 13px; transition: background-color var(--dur-ui) var(--ease-ui); }
.mk-tile:hover { background: #fff; }
.mk-logo { width: 32px; height: 32px; display: grid; place-items: center; background: var(--logo); }
.mk-text strong { display: block; font: 500 18px/24px var(--font-display); letter-spacing: -0.01em; }
.mk-tile[style*="--w:2"] .mk-text strong { font-size: 24px; line-height: 32px; }
.mk-text small { display: block; font: 400 var(--type-body-small)/var(--type-body-small-leading) var(--font-body); color: var(--color-ink-soft); }
.mk-diamond { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: 84px; height: 84px; border: 1px solid var(--color-border); background: var(--color-surface); transform: rotate(45deg) scale(0); opacity: 0; }
.tech::after { content: ""; position: absolute; top: -2px; left: -2px; width: 4px; height: 4px; background: var(--color-ink); z-index: 2; }
/* mistral M05-a / M05-b — exact keyframes */
.in-view .mk-block { animation: markitecture-fall .5s ease-in forwards; animation-delay: calc((11 - var(--i, 0)) * 60ms); }
.in-view .mk-diamond { animation: markitecture-fall-rotated .5s ease-in forwards; animation-delay: calc((11 - var(--i, 0)) * 60ms); }
@keyframes markitecture-fall { 0% { opacity: 0; transform: translateY(-300px); } 50% { opacity: 1; transform: translateY(0) scaleY(1); } 65% { opacity: 1; transform: translateY(0) scaleY(.95); } 80% { opacity: 1; transform: translateY(0) scaleY(1.02); } to { opacity: 1; transform: translateY(0) scaleY(1); } }
@keyframes markitecture-fall-rotated { 0% { opacity: 0; transform: rotate(45deg) scale(0); } to { opacity: 1; transform: rotate(45deg) scale(1); } }

/* ---------- rails — stripe guide rails ---------- */
.rails { position: relative; max-width: 1266px; margin: 0 auto; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }

/* ---------- §04 Bento — stripe §02 ---------- */
.float { box-shadow: var(--shadow-float); }
/* gradient plates — stripe card-backgrounds, re-mapped to the cool ramp */
.plate { background-color: var(--ramp-1); }
.plate::before { content: ""; position: absolute; inset: 0; background: url(../assets/textures/noise.png); opacity: .12; mix-blend-mode: multiply; pointer-events: none; }
.plate--mint { background: radial-gradient(120% 90% at 100% 100%, var(--ramp-3) 0%, var(--ramp-2) 30%, var(--ramp-1) 60%, #fff 100%); }
.plate--sky { background: radial-gradient(120% 100% at 0% 100%, var(--ramp-4) 0%, #bfe6ff 40%, #fff 90%); }
.plate--aqua { background: linear-gradient(160deg, #fff 10%, var(--ramp-2) 60%, var(--ramp-3) 100%); }
.plate--blue { background: linear-gradient(200deg, #fff 5%, #cfe0ff 45%, var(--ramp-4) 100%); }
.plate--indigo { background: radial-gradient(120% 100% at 100% 100%, var(--ramp-6) 0%, var(--ramp-5) 35%, #cfe0ff 80%, #fff 100%); }
.plate--wide { background: linear-gradient(100deg, var(--ramp-1) 0%, var(--ramp-2) 30%, var(--ramp-4) 70%, var(--ramp-5) 100%); }

/* WhatsApp mock */
.wa { position: absolute; left: 24px; right: 24px; bottom: 24px; background: #efeae2; border-radius: 6px; overflow: hidden; font-size: 13px; line-height: 18px; }
.wa--center { position: relative; left: auto; right: auto; bottom: auto; width: 360px; margin: 0 auto; }
.wa__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #075e54; color: #fff; }
.wa__head strong { display: block; font-weight: 500; }
.wa__head small { display: block; opacity: .75; font-size: 11px; }
.wa__avatar { width: 30px; height: 30px; display: grid; place-items: center; background: #fff; }
.wa__body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.wa__msg { max-width: 86%; padding: 7px 9px 16px; border-radius: 6px; position: relative; background: #fff; color: #111b21; }
.wa__msg--out { align-self: flex-end; background: #d9fdd3; min-width: 60px; }
.wa__msg time { position: absolute; right: 8px; bottom: 3px; font-size: 10px; color: #667781; }

/* invoice mock */
.invoice { position: absolute; left: 24px; right: 24px; bottom: -8px; padding: 20px; background: #fff; border-radius: 6px 6px 0 0; font-size: 14px; }
.invoice__top { display: flex; justify-content: space-between; font: 500 18px/24px var(--font-display); }
.invoice__top .mono { color: var(--color-ink-soft); }
.invoice__who { color: var(--color-ink-soft); margin: 4px 0 14px; }
.invoice__lines li, .invoice__total { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px dashed var(--color-border); }
.invoice__total { font-weight: 500; border-top: 1px solid var(--color-ink); }
.invoice__status { display: flex; gap: 8px; margin-top: 12px; }
.pill { font: 400 11px/16px var(--font-mono); text-transform: uppercase; padding: 4px 8px; border-radius: 4px; background: var(--color-surface); }
.pill--ok { background: #dcfce7; color: #166534; }

/* ---------- §04b Grow — daima M01-a ---------- */
.grow { position: relative; }
.grow__stage { position: relative; padding: var(--space-section-y) var(--space-gutter); display: flex; flex-direction: column; gap: 48px; }
.grow__title { max-width: 900px; }
.grow__frame { position: relative; height: 70vh; min-height: 420px; overflow: hidden; border-radius: 6px; }
.grow__shot { position: absolute; left: 50%; bottom: -4%; width: 78%; max-width: none; transform: translateX(-50%); border-radius: 6px 6px 0 0; box-shadow: var(--shadow-float); }
.grow__tag { position: absolute; z-index: 9; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-float); font: 500 14px/20px var(--font-display); }
.grow__tag--a { left: 6%; top: 16%; }
.grow__tag--b { right: 6%; top: 34%; }
/* pinned mode (js ≥1024px): 200vh section, sticky 100vh stage; the frame is a band under the headline and grows to full-bleed over the first viewport */
.grow--pinned { height: 200vh; }
.grow--pinned .grow__stage { position: sticky; top: 0; height: 100vh; padding: 0; display: block; overflow: hidden; }
.grow--pinned .grow__title { position: absolute; left: 104px; top: 16vh; }
.grow--pinned .grow__frame { position: absolute; top: 55vh; left: 104px; right: 104px; height: 45vh; min-height: 0; }

/* H — daima M01-b progressive blur: three stacked backdrop blurs, masks start at 62.5 / 75 / 87.5% */
.pblur { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.pblur i { position: absolute; inset: 0; border-radius: 0; }
.pblur i:nth-child(1) { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 62.5%, #000 75%, #000 87.5%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 62.5%, #000 75%, #000 87.5%, rgba(0,0,0,0) 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 6; }
.pblur i:nth-child(2) { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, #000 87.5%, #000 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, #000 87.5%, #000 100%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); z-index: 7; }
.pblur i:nth-child(3) { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, #000 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, #000 100%); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); z-index: 8; }
.pblur--short { z-index: 2; }
.pblur--dark { top: auto; bottom: 0; height: 60vh; z-index: 1; }
.dark { position: relative; }
.dark__head, .flow, .dark__cards { position: relative; z-index: 2; }

/* ---------- §05 Facts — stripe §05 ---------- */
.facts { position: relative; padding: 120px var(--space-gutter) 0; text-align: center; overflow: hidden; border-top: 1px solid var(--color-border); background: linear-gradient(180deg, var(--color-background) 40%, #eef6ff 100%); }
.facts__title { font: 300 var(--type-display-size)/var(--type-display-leading) var(--font-display); letter-spacing: var(--type-display-tracking); position: relative; z-index: 1; }
.facts__row { position: relative; z-index: 1; max-width: 1232px; margin: 80px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fact { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; position: relative; }
.fact::before, .fact::after { content: ""; position: absolute; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--ramp-4), transparent); opacity: 0; transition: opacity var(--dur-ink) var(--ease-ink); }
.fact::before { top: 0; } .fact::after { bottom: 0; }
.fact.is-active::before, .fact.is-active::after { opacity: 1; }
.fact__num { font: 300 48px/48px var(--font-display); letter-spacing: -0.02em; color: var(--color-ink-quiet); transition: color var(--dur-ink) var(--ease-ink); }
.fact__label { font: 300 16px/22.4px var(--font-display); color: var(--color-ink-quiet); transition: color var(--dur-ink) var(--ease-ink); }
.fact.is-active .fact__num, .fact.is-active .fact__label { color: var(--color-ink); }
.facts__burst { display: block; width: 100%; height: 420px; margin-top: -40px; }

/* ---------- §05b A day at the clinic ---------- */
.day__pin { position: relative; overflow: clip; padding: var(--space-section-y) 0 72px; border-top: 1px solid var(--color-border); }
.day__sky { position: absolute; inset: 0 0 auto; height: 60%; pointer-events: none; }
.day__sky--am { background: linear-gradient(180deg, rgba(159, 230, 214, .35), transparent); }
.day__sky--pm { background: linear-gradient(180deg, rgba(43, 58, 156, .16), rgba(243, 182, 63, .08) 60%, transparent); opacity: 0; }
.day__head { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding: 0 var(--space-gutter); }
.day__head .two-tone { margin-top: 16px; max-width: 720px; }
.day__clock { font: 300 clamp(72px, 10vw, 152px)/0.9 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.day__rail { position: relative; margin: 48px var(--space-gutter) 0; height: 32px; border-top: 1px solid var(--color-border); }
.day__progress { position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: 0 50%; }
.day__ticks { display: flex; justify-content: space-between; padding-top: 8px; }
.day__ticks .mono { color: var(--color-ink-soft); }
.day__track { display: flex; margin-top: 24px; padding: 0 var(--space-gutter); }
.day__card { flex: 0 0 340px; min-height: 300px; display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--color-border); margin-right: -1px; background: var(--color-background); position: relative; transition: background-color .5s var(--ease-ui); }
.day__card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--color-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.day__card.is-past::before { transform: scaleX(1); }
.day__card.is-now { background: #fff; }
.day__time { display: flex; align-items: center; justify-content: space-between; }
.day__time .mono { font-size: 13px; color: var(--color-accent); }
.day__card h3 { font: 500 22px/28px var(--font-display); letter-spacing: -0.01em; }
.day__text { color: var(--color-ink-soft); font-size: 15px; line-height: 22px; flex: 1; }
.day__chip { align-self: flex-start; padding: 4px 8px; border-radius: var(--radius-chip); background: var(--color-surface); }
.day__card.is-past .day__chip { background: var(--color-accent-quiet); color: var(--color-accent); }

.day--pinned .day__pin { height: 100vh; padding-top: 88px; display: flex; flex-direction: column; justify-content: center; }
.day--pinned .day__track { width: max-content; }

/* ---------- §07 Segments — aspensearch §04 list as control surface (M04-a row fill) ---------- */
.segments__inner { max-width: 1266px; margin: 0 auto; padding: var(--space-section-y) 32px; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 64px; }
.seg { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
.seg__rows { border-top: 1px solid var(--color-border); }
.seg__row { position: relative; width: 100%; display: grid; grid-template-columns: 56px 1fr 24px; gap: 16px; align-items: start; padding: 28px 24px 28px 16px; border: 0; border-bottom: 1px solid var(--color-border); background: transparent; text-align: left; cursor: pointer; isolation: isolate; color: var(--color-ink); }
.seg__fill { position: absolute; inset: 0; z-index: -1; background: var(--color-ink); transform: scaleY(0); transform-origin: top; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.seg__row.is-active .seg__fill { transform: scaleY(1); }
.seg__num { padding-top: 10px; color: var(--color-ink-soft); transition: color .8s cubic-bezier(.16,1,.3,1); }
.seg__main { display: block; min-width: 0; }
.seg__title { display: block; font: 300 var(--type-h3-size)/var(--type-h3-leading) var(--font-display); letter-spacing: var(--type-h3-tracking); }
.seg__lead { display: block; max-height: 0; overflow: hidden; font: 300 17px/1.45 var(--font-display); color: var(--color-ink-soft-on-dark); transition: max-height .8s cubic-bezier(.16,1,.3,1), margin .8s cubic-bezier(.16,1,.3,1); }
.seg__facts { display: flex; flex-wrap: wrap; gap: 8px; max-height: 0; overflow: hidden; transition: max-height .8s cubic-bezier(.16,1,.3,1), margin .8s cubic-bezier(.16,1,.3,1); }
.seg__facts span { font: 400 var(--type-chip)/16px var(--font-mono); text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius-chip); background: rgba(255,255,255,.12); color: #fff; }
.seg__arrow { margin-top: 14px; color: var(--color-ink-soft); transition: transform .8s cubic-bezier(.16,1,.3,1), color .8s; }
.seg__row.is-active { color: #fff; }
.seg__row.is-active .seg__num, .seg__row.is-active .seg__arrow { color: var(--ramp-2); }
.seg__row.is-active .seg__arrow { transform: rotate(90deg); }
.seg__row.is-active .seg__lead { max-height: 240px; margin-top: 12px; }
.seg__row.is-active .seg__facts { max-height: 140px; margin-top: 16px; }
.seg__row:not(.is-active):hover { background: var(--color-surface); }
.seg__view { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.seg__frame { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; border: 1px solid var(--color-border); }
.seg__shot { position: absolute; left: 50%; top: 32px; width: 62%; transform: translate(-50%, 24px); opacity: 0; border-radius: 6px 6px 0 0; background: #fff; transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.seg__shot--wide { left: 32px; top: 32px; height: calc(100% - 32px); width: auto; max-width: none; transform: translate(0, 24px); }
.seg__shot.is-active { opacity: 1; transform: translate(-50%, 0); }
.seg__shot--wide.is-active { transform: translate(0, 0); }
.seg__cta { align-self: flex-start; }

/* C — verteal M02-c inversion: one attribute, .35s cubic-bezier(.4,0,.2,1) */
body, .segments, .segments__inner, .seg__rows, .seg__row, .seg__frame, .two-tone span { transition: background-color .35s cubic-bezier(.4,0,.2,1), color .35s cubic-bezier(.4,0,.2,1), border-color .35s cubic-bezier(.4,0,.2,1); }
html[data-invert] body, html[data-invert] main > .segments { background: var(--color-dark-band); }
html[data-invert] .segments__inner, html[data-invert] .seg__rows, html[data-invert] .seg__row, html[data-invert] .seg__frame { border-color: var(--color-border-on-dark); }
html[data-invert] .segments .two-tone .ink, html[data-invert] .seg__row { color: var(--color-ink-on-dark); }
html[data-invert] .segments .two-tone .soft { color: var(--color-ink-soft-on-dark); }
html[data-invert] .seg__fill { background: var(--color-accent); }
html[data-invert] .seg__row:not(.is-active):hover { background: rgba(255,255,255,.04); }

/* ---------- §07b No-show calculator ---------- */
main > section.calc { background: var(--color-dark-band); color: var(--color-ink-on-dark); }
.calc__inner { max-width: 1266px; margin: 0 auto; padding: var(--space-section-y) 32px; border-left: 1px solid var(--color-border-on-dark); border-right: 1px solid var(--color-border-on-dark); display: flex; flex-direction: column; gap: 56px; }
.calc .eyebrow { color: var(--color-ink-soft-on-dark); margin-bottom: 16px; }
.calc__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-top: 1px solid var(--color-border-on-dark); border-left: 1px solid var(--color-border-on-dark); }
.calc__form { display: grid; grid-template-columns: 1fr 1fr; }
.calc__field { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 14px; padding: 22px 24px; border-right: 1px solid var(--color-border-on-dark); border-bottom: 1px solid var(--color-border-on-dark); }
.calc__field .mono-tag { color: var(--color-ink-soft-on-dark); }
.calc__field output { font: 300 28px/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.calc__field input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--ramp-4); height: 44px; margin: 0; }
.calc__field--fee { grid-template-columns: 1fr; }
.calc__money { display: flex; gap: 8px; }
.calc__money select, .calc__money input { background: var(--color-dark-surface); color: #fff; border: 1px solid var(--color-border-on-dark); border-radius: var(--radius-button); padding: 8px 10px; font-size: 18px; }
.calc__money input { width: 100%; font-variant-numeric: tabular-nums; }
.calc__out { display: flex; flex-direction: column; gap: 0; border-right: 1px solid var(--color-border-on-dark); border-bottom: 1px solid var(--color-border-on-dark); background: var(--color-dark-surface); }
.calc__stat { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-bottom: 1px solid var(--color-border-on-dark); }
.calc__stat .mono-tag { color: var(--color-ink-soft-on-dark); }
.calc__stat strong { font: 300 36px/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.calc__stat--big strong { font-size: 64px; background: linear-gradient(68deg, var(--ramp-2) 0%, var(--ramp-4) 45%, #a9b8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* stripe gradient stat */
.calc__stat small { color: var(--color-ink-soft-on-dark); font-size: 15px; }
.calc__stat small b { color: #fff; font-weight: 500; }
.calc__cta { margin: 24px 24px 12px; align-self: flex-start; }
.calc__note { padding: 0 24px 22px; font-size: 13px; color: var(--color-ink-soft-on-dark); }
.calc .ink-words .w:not(.is-on) { color: rgba(238, 243, 249, 0.2) !important; }

/* ---------- §08 Dark band — stripe §07 + mistral §09/§10 ---------- */
.dark { background: var(--color-dark-band); color: var(--color-ink-on-dark); padding: var(--space-section-top) var(--space-gutter) 0; }
.dark__head { max-width: 1232px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.dark .eyebrow { color: var(--color-ink-soft-on-dark); }
.flow { max-width: 1100px; margin: 80px auto 96px; display: grid; grid-template-columns: 200px 1fr 200px; align-items: center; position: relative; min-height: 300px;
  background-image: radial-gradient(rgba(169, 184, 204, .18) 1px, transparent 1px); background-size: 16px 16px; }
.flow__col { display: flex; flex-direction: column; gap: 32px; position: relative; z-index: 2; }
.node { height: 34px; display: flex; align-items: center; justify-content: center; padding: 0 16px; border-radius: 4px; background: var(--color-dark-node); color: #f2f7fe; font-size: 14px; outline: 1px dashed #2d4e80; outline-offset: 3px;
  box-shadow: rgba(3, 3, 39, .25) 0 14.088px 21.132px -14.088px, rgba(0, 0, 0, .1) 0 8.453px 16.906px -8.453px; }
.node--out { background: var(--color-accent); }
.flow__col--out { grid-column: 3; }
.flow__col--in { grid-column: 1; }
.flow__lines { position: absolute; left: 200px; right: 200px; top: 50%; height: 260px; width: calc(100% - 400px); transform: translateY(-50%); overflow: visible; }
.flow__lines path { fill: none; stroke: #5b7fb3; stroke-width: 1.2; stroke-dasharray: 3 5; animation: dash-travel 2s linear infinite; vector-effect: non-scaling-stroke; }
@keyframes dash-travel { to { stroke-dashoffset: -16; } } /* stripe M07-a [approx] */
.flow__hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--color-dark-surface); border: 1px solid #2d4e80; z-index: 3; }
.flow__hub strong { font: 500 16px/1 var(--font-display); }
.dark__cards { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-border-on-dark); }
.dcard { display: flex; flex-direction: column; justify-content: space-between; gap: 96px; padding: 40px; border-right: 1px solid var(--color-border-on-dark); }
.dcard:first-child { border-left: 1px solid var(--color-border-on-dark); }
.dcard > div { display: flex; flex-direction: column; gap: 24px; }
.dcard h3 { font: 500 var(--type-cell-lg)/var(--type-cell-lg-leading) var(--font-display); letter-spacing: -0.01em; }
.dcard p { color: var(--color-ink-soft-on-dark); }

/* ---------- §09 CTA band — mistral §11 ---------- */
.cta-band { position: relative; display: flex; align-items: flex-end; min-height: 380px; padding: 40px 40px 80px; color: #fff;
  background: url(../assets/textures/noise.png), linear-gradient(115deg, var(--ramp-5) 0%, #1f72ec 55%, var(--ramp-4) 100%); background-blend-mode: soft-light, normal; }
.cta-band__row { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.cta-band__copy { max-width: 672px; display: flex; flex-direction: column; gap: 24px; }
.cta-band .eyebrow { color: #fff; }
.cta-band h2 { font: 500 var(--type-cell-xl)/var(--type-cell-xl-leading) var(--font-display); letter-spacing: -0.01em; }
.cta-band__sprite { position: absolute; top: -40px; right: 5%; }

/* ---------- §10 Demo — stripe §09 layout ---------- */
.demo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; row-gap: 56px; padding: var(--space-section-y) 32px; }
.demo__intro { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 40px; }
.contact { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.contact > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.contact dt { color: var(--color-ink-soft); padding-top: 3px; }
.contact a { color: var(--color-accent); }
.form { grid-column: 7 / 13; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.field { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-background); transition: background-color var(--dur-ui) var(--ease-ui); }
.field:focus-within { background: #fff; }
.field .mono-tag { color: var(--color-ink-soft); }
.field em { font-style: normal; text-transform: none; }
.field input, .field textarea { border: 0; background: transparent; padding: 4px 0; font-size: 17px; outline: none; resize: vertical; }
.field--full { grid-column: 1 / -1; }
.check { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); font-size: 14px; color: var(--color-ink-soft); }
.check input { width: 16px; height: 16px; accent-color: var(--color-accent); }
.check a { color: var(--color-accent); }
.form__submit { display: flex; align-items: center; gap: 16px; padding: 16px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.form__status { font-size: 14px; color: var(--color-ink-soft); }
.form__status.is-error { color: #be123c; }
.form__status.is-ok { color: #15803d; }

/* ---------- §11 Footer — mistral §12 ---------- */
.footer { border-top: 1px solid var(--color-border); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); }
.footer__cols > div { padding: 24px; border-right: 1px solid var(--color-border); }
.footer__cols > div:last-child { border-right: 0; }
.footer h3 { font: 400 16px/24px var(--font-body); color: var(--color-ink-soft); margin-bottom: 24px; }
.footer li a { font: 500 16px/28px var(--font-display); transition: color var(--dur-ui) var(--ease-ui); }
.footer li a:hover { color: var(--color-accent); }
.footer__sub { position: relative; height: 320px; border-top: 1px solid var(--color-border); overflow: hidden;
  background: linear-gradient(180deg, var(--color-background) 30%, #e8f3ff 100%); }
.footer__line { position: absolute; left: 40px; top: 40px; font: 300 22px/28px var(--font-display); color: var(--color-ink-soft); max-width: 300px; }
.footer__copy { position: absolute; left: 40px; bottom: 32px; font-size: 14px; color: var(--color-ink-soft); }
.footer__mark { position: absolute; left: 50%; bottom: -60px; transform: translateX(-50%); }
.footer__glint { position: absolute; right: 6px; top: 18px; opacity: 0; transform: scale(0); }

/* A — verteal M02-a ink-in: unrevealed words at 20% ink, revealed → own colour over .5s cubic-bezier(.16,1,.3,1) */
.ink-words .w { transition: color .5s cubic-bezier(.16,1,.3,1); }
.ink-words .w:not(.is-on) { color: rgba(11, 27, 43, 0.2) !important; }
.dark .ink-words .w:not(.is-on), html[data-invert] .segments .ink-words .w:not(.is-on) { color: rgba(238, 243, 249, 0.2) !important; }

/* B — serotoninn M01-f / M07-b paper layers: everything after the hero is a sheet that slides over it */
main > section:where(:not(.hero)) { position: relative; z-index: 2; background: var(--color-background); }
main > section.dark { background: var(--color-dark-band); }
main > .cta-band { z-index: 4; }
.hero--layered + .modules { margin-top: -100dvh; box-shadow: 0 -24px 48px -24px rgba(11, 27, 43, .18); }

/* J — amritpalace M00-a/b: header hides down (0.6s) / returns up (0.7s), frosts after the hero (.45s) */
.nav { transition: transform .7s cubic-bezier(0.731, 0.001, 0.287, 0.995), background-color .45s ease; }
.nav.is-hidden { transform: translateY(-100%); transition-duration: .6s, .45s; }
.nav.is-frosted { background: rgba(250, 250, 247, .72); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.actionbar { display: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mk-block, .mk-diamond { opacity: 1; animation: none !important; }
  .mk-diamond { transform: rotate(45deg) scale(1); }
  .icon-rise, .hero__icon { transform: none; transition: none; }
  .hero__arrows .px, .live-dot::after, .flow__lines path { animation: none; }
  .hero__arrows .px { opacity: .6; }
}

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .hero__stage { grid-template-columns: minmax(0, 1fr) 360px; }
  .hero__lede-content { width: 280px; }
  .hero__lede { font-size: 22px; line-height: 28px; }
  .markitecture__grid { --u: 150px; }
  .mk-text small { display: none; }
  .features__grid { grid-template-columns: 1fr; }
  .rail { display: none; }
  .seg { grid-template-columns: 1fr; }
  .seg__view { position: relative; top: 0; }
}

/* ---------- mobile (mistral/stripe mobile notes: stack, full-width buttons) ---------- */
@media (max-width: 1023px) {
  .nav__items, .nav__ghost { display: none; }
  .nav { justify-content: space-between; }
  .nav__actions { margin-left: auto; }

  .hero__stage { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .hero__title-cell { order: 1; border-right: 0; padding: 48px 16px 24px; }
  .hero__title { white-space: normal; }
  .hero__lede-cell { order: 2; }
  .hero__lede-panel { position: relative; height: auto; border-left: 0; }
  .hero__bg { display: none; }
  .hero__lede-content { position: relative; left: auto; bottom: auto; width: auto; padding: 24px 16px 28px; }
  .hero__icon { transform: none; }
  .hero__lede { font-size: 20px; line-height: 26px; }
  .hero__side-cell { order: 3; padding: 24px 16px 28px; }
  .hero__arrows { display: none; }
  .hero__mosaic-cell { order: 4; height: 180px; border-right: 0; }
  .odontogram { grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(3, 1fr); }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { justify-content: space-between; }

  .modules__row { grid-template-columns: repeat(3, 1fr); }
  .module:nth-child(n+4) { display: none; }
  .module { height: 104px; }

  .markitecture { padding: 40px 16px 64px; }
  .markitecture__grid { width: 100%; height: auto; display: grid; grid-template-columns: 1fr 1fr; }
  .mk-block { position: relative; left: auto; top: auto; width: auto; height: auto; min-height: 120px; margin: 0 -1px -1px 0; }
  .mk-filler, .mk-diamond { display: none; }
  .mk-tile[style*="--w:2"] { grid-column: span 2; }
  .mk-text small { display: block; }

  .rails { border: 0; }

  .facts { padding-top: 72px; }
  .facts__row { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .fact__num { font-size: 36px; line-height: 40px; }
  .fact__label { font-size: 14px; }

  .features__grid { padding: 0; }
  .panels { border: 0; }
  .panel__head { flex-direction: column; align-items: flex-start; padding: 20px 16px; }
  .panel__body { padding: 20px 16px; }
  .pixfield { aspect-ratio: 4 / 5; }
  .wa--center { width: 88%; }
  .pixfield__shot { width: 56%; }
  .pixfield__shot--wide { width: 92%; }
  .chips { flex-direction: column; align-items: flex-start; }
  .stock li { grid-template-columns: 1fr 60px 64px; font-size: 13px; }

  .segments__inner { padding: 64px 16px; border: 0; }
  .seg__frame { aspect-ratio: 4 / 3; }
  .seg__row { grid-template-columns: 36px 1fr 16px; padding: 22px 12px; }

  .flow { grid-template-columns: 1fr; gap: 28px; background-size: 12px 12px; margin: 48px auto 64px; }
  .flow__lines { display: none; }
  .flow__hub { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; }
  .flow__col--in, .flow__col--out { grid-column: auto; }
  .flow__col { flex-direction: row; flex-wrap: wrap; gap: 12px; justify-content: center; }
  .dark__cards { grid-template-columns: 1fr; }
  .dcard { border-left: 1px solid var(--color-border-on-dark); gap: 32px; padding: 28px 20px; border-bottom: 1px solid var(--color-border-on-dark); }

  .grow__frame { height: 56vh; }
  .grow__shot { width: 150%; left: 8%; transform: none; }
  .grow__tag { font-size: 12px; padding: 6px 10px; }
  .day__head { display: contents; }
  .nav:not(.is-hidden) ~ main .day__clock { top: 49px; }
  .day__clock { transition: top .6s cubic-bezier(0.731, 0.001, 0.287, 0.995); }
  .day__head > div { padding: 0 16px; }
  .day__clock { position: sticky; top: 0; z-index: 3; margin: 16px 0 12px; padding: 8px 16px; font-size: 56px; background: rgba(250, 250, 247, .88); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border-bottom: 1px solid var(--color-border); }
  .day__rail { display: none; }
  .day__track { flex-direction: column; padding: 0 16px; }
  .day__card { flex: none; min-height: 0; margin: 0 0 -1px; }
  .day__card::before { transform: scaleX(1); }
  .calc__inner { padding: 64px 16px; border: 0; }
  .calc__grid { grid-template-columns: minmax(0, 1fr); }
  .calc__form { grid-template-columns: minmax(0, 1fr); }
  .calc__stat--big strong { font-size: 48px; }
  .cta-band { padding: 72px 16px 40px; }
  .cta-band__row { flex-direction: column; align-items: stretch; }
  .cta-band__sprite { top: -26px; right: 24px; }

  .demo { display: flex; flex-direction: column; padding: 64px 16px; gap: 40px; }
  .form { grid-template-columns: 1fr; }
  .contact > div { grid-template-columns: 1fr; gap: 4px; }

  .footer__cols { grid-template-columns: 1fr 1fr; }
  .actionbar { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 60; padding: 8px; border: 1px solid var(--color-border); border-radius: 10px; background: rgba(250, 250, 247, .8); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); transform: translateY(140%); transition: transform .7s cubic-bezier(0.731, 0.001, 0.287, 0.995); }
  .actionbar.is-on { transform: none; }
  .actionbar .btn { min-height: 44px; }
  .footer { padding-bottom: 80px; }
  .footer__cols > div { border-bottom: 1px solid var(--color-border); }
  .footer__cols > div:nth-child(2n) { border-right: 0; }
  .footer__sub { height: 260px; }
  .footer__line { left: 16px; top: 24px; font-size: 18px; }
  .footer__copy { left: 16px; bottom: 16px; }
}


/* =====================================================================
   MOBILE / TABLET PASS
   <1024px  stacked layout (pins are off, see js), tablet variant below
   <768px   phone
   ===================================================================== */

/* labels: body face, tabular numerals, never below 12px */
.eyebrow, .mono-tag, .mono, .chips li, .seg__facts span, .pill, .day__chip, .odo__n, .odo-tip, .seg__num,
.wa__msg time, .wa__head small, .stock__head .mono, .day__ticks .mono, .hero__tag {
  font-family: var(--font-body); font-weight: 500; letter-spacing: 0.05em; font-variant-numeric: tabular-nums;
}
.eyebrow { font-size: 13px; }
.mono-tag, .mono, .chips li, .seg__facts span, .pill, .day__chip, .seg__num, .odo__n, .odo-tip, .wa__head small, .stock__head .mono, .day__ticks .mono { font-size: 12px; line-height: 16px; }
.wa__msg time { font-size: 12px; }
.odo__n { left: 4px; top: 3px; }

/* touch */
html { -webkit-tap-highlight-color: rgba(24, 99, 220, .14); }
a, button, input, select, textarea, label, [role=tab] { touch-action: manipulation; }
#burst { touch-action: pan-y; }
input[type=range] { height: 44px; margin: 0; }
.calc__field { row-gap: 4px; }
.calc__money select, .calc__money input { min-height: 48px; }
.field input, .field textarea { min-height: 44px; }
.check input { width: 22px; height: 22px; flex: none; }
.contact > div { padding: 2px 0; }
.contact a { display: inline-block; padding: 12px 0; }
.footer li a { display: block; padding: 8px 0; line-height: 28px; }
.footer__cols h3 { margin-bottom: 12px; }

/* notch / home-indicator safe areas */
.nav { padding-top: env(safe-area-inset-top); height: calc(var(--nav-height) + 1px + env(safe-area-inset-top)); }
.actionbar { bottom: max(8px, env(safe-area-inset-bottom)); }

/* ---- below 1024: shared by tablet and phone ---- */
@media (max-width: 1023px) {
  .nav__cta, .nav__ghost { min-height: 44px; }
  .hero { padding-top: calc(var(--nav-height) + 1px + env(safe-area-inset-top)); }
  .hero__title-cell { padding: 56px var(--space-gutter) 28px; }
  .hero__lede-content, .hero__side-cell { padding-left: var(--space-gutter); padding-right: var(--space-gutter); }
  .hero__side-cell { padding-top: 24px; padding-bottom: 32px; gap: 0; }
  .hero__lede { font-size: 24px; line-height: 30px; }
  .hero__mosaic-cell { height: 240px; }
  .odo-tip { display: none; }
  .grow__stage { padding: var(--space-section-y) var(--space-gutter); }
  .grow__shot { width: 140%; left: 4%; }
  .pblur i:nth-child(3) { display: none; } /* two blur layers are enough on small GPUs */
  .hero__mosaic-cell .pblur { display: none; } /* the lower tooth row is a tap target: keep it sharp */
  .module .mono-tag { text-align: center; padding: 0 6px; letter-spacing: 0.03em; }
  .pblur--dark { height: 40vh; }
  .day__head > div, .day__track { padding-left: var(--space-gutter); padding-right: var(--space-gutter); }
  .day__clock { padding-left: var(--space-gutter); padding-right: var(--space-gutter); }
  .actionbar { display: grid; }
}

/* ---- tablet 768–1023 ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav__items { display: flex; flex: 1; }
  .nav__ghost { display: flex; }
  .hero__stage { flex-direction: row; flex-wrap: wrap; }
  .hero__title-cell { flex: 1 1 100%; order: 1; padding-top: 72px; padding-bottom: 36px; }
  .hero__lede-cell { flex: 1 1 54%; order: 2; }
  .hero__side-cell { flex: 1 1 46%; order: 3; border-left: 1px solid var(--color-border); justify-content: flex-end; }
  .hero__lede-content { padding-top: 28px; padding-bottom: 36px; }
  .hero__lede-panel { border-bottom: 0; }
  .hero__mosaic-cell { flex: 1 1 100%; order: 4; height: 300px; border-top: 1px solid var(--color-border); }
  .btn-row { flex-direction: row; }
  .btn-row .btn { justify-content: center; }

  .modules__row { grid-template-columns: repeat(6, 1fr); }
  .module:nth-child(n+4) { display: flex; }
  .markitecture__grid { max-width: 720px; margin: 0 auto; }


  .facts__row { grid-template-columns: repeat(4, 1fr); }
  .fact__num { font-size: 40px; }
  .panel__head h3 { font-size: 32px; line-height: 38px; }
  .pixfield { aspect-ratio: 1038 / 524; }
  .chips { flex-direction: row; flex-wrap: wrap; }
  .wa--center { width: 340px; }
  .pixfield__shot { width: 30%; }
  .pixfield__shot--wide { width: 72%; }

  .day__track { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .day__card { margin: 0 -1px -1px 0; }
  .seg__row { grid-template-columns: 56px 1fr 24px; padding: 28px 24px 28px 16px; }
  .seg__frame { aspect-ratio: 16 / 10; }

  .calc__form { grid-template-columns: 1fr 1fr; }
  .dark__cards { grid-template-columns: repeat(3, 1fr); }
  .dcard { padding: 28px 20px; gap: 48px; }
  .dcard:first-child { border-left: 1px solid var(--color-border-on-dark); }
  .flow { grid-template-columns: 1fr; }
  .cta-band { padding: 72px var(--space-gutter) 56px; }
  .cta-band__row { flex-direction: row; align-items: flex-end; }
  .demo { padding: var(--space-section-y) var(--space-gutter); }
  .form { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: repeat(4, 1fr); }
  .footer__cols > div { border-bottom: 0; }
  .footer__cols > div:nth-child(2n) { border-right: 1px solid var(--color-border); }
  .footer__cols > div:last-child { border-right: 0; }
}

/* ---- phone <768 ---- */
@media (max-width: 767px) {
  .hero__title-cell { padding: 40px var(--space-gutter) 20px; }
  .hero__lede { font-size: 20px; line-height: 26px; }
  .hero__mosaic-cell { height: 200px; }
  .grow__frame { height: 52vh; }
  .grow__tag--b { top: 42%; }
  .calc__field output { font-size: 26px; }
  .calc__stat--big strong { font-size: 44px; }
  .day__clock { font-size: 52px; }
  .dcard h3 { font-size: 26px; line-height: 32px; }
  .panel__head h3 { font-size: 26px; line-height: 32px; }
  .panel__head .btn { width: 100%; justify-content: space-between; }
  .seg__title { font-size: 24px; line-height: 30px; }
  .footer__cols > div { padding: 20px 16px; }
  .btn { min-height: 48px; }
}

/* landscape phones: short viewports must not trap the reader in pinned/full-height boxes */
@media (max-height: 520px) and (orientation: landscape) {
  .hero__mosaic-cell { height: 160px; }
  .grow__frame { height: 80vh; }
}

/* very narrow (<=360) */
@media (max-width: 360px) {
  .hero__title { font-size: 40px; }
  .btn { padding-left: 12px; padding-right: 12px; }
  .actionbar { grid-template-columns: 1fr; }
  .actionbar .btn--ghost { display: none; }
}

/* grid children may shrink below their content (fixes 320px overflow) */
.calc__grid > *, .calc__form > *, .calc__field, .calc__money { min-width: 0; }
.calc__money input { min-width: 0; width: 100%; }
.calc__money select { flex: none; }


/* =====================================================================
   TIER A
   ===================================================================== */

/* A2 — live clinic feed (hero) — Magic UI Animated List, re-drawn as ruled cells */
.feed { position: relative; margin: 12px 0 20px; height: 124px; padding-top: 2px; overflow: hidden; }
.feed__item { position: absolute; left: 1px; right: 1px; top: 2px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; border: 1px solid var(--color-border); border-radius: 6px; box-shadow: 0 12px 24px -18px rgba(11, 27, 43, .35); transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .6s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.feed__icon { width: 36px; height: 36px; display: grid; place-items: center; background: var(--color-surface); border-radius: 4px; }
.feed__text { min-width: 0; }
.feed__title { display: block; font: 500 14px/18px var(--font-display); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed__meta { display: block; font-size: 12px; line-height: 16px; color: var(--color-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed__time { font: 500 12px/16px var(--font-body); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.feed__item.is-new { box-shadow: 0 0 0 1px var(--color-accent), 0 12px 24px -18px rgba(11, 27, 43, .35); }

/* A3 — paper vs Dently */
.ba__inner { max-width: 1266px; margin: 0 auto; padding: var(--space-section-y) 32px; display: flex; flex-direction: column; gap: 48px; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
.ba__head .eyebrow { margin-bottom: 16px; }
.ba__stage { position: relative; aspect-ratio: 1645 / 840; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; background: #f1e9d4; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); background: #fff; }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--color-accent); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); pointer-events: none; }
.ba__handle { position: absolute; top: 50%; left: var(--pos); width: 64px; height: 64px; transform: translate(-50%, -50%); display: grid; place-items: center; background: #fff; border: 2px solid var(--color-accent); border-radius: 6px; box-shadow: 0 16px 32px -16px rgba(11, 27, 43, .45); cursor: grab; transition: transform .25s var(--ease-ui); }
.ba__handle::before, .ba__handle::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 6px solid transparent; transform: translateY(-50%); }
.ba__handle::before { left: -16px; border-right-color: var(--color-accent); }
.ba__handle::after { right: -16px; border-left-color: var(--color-accent); }
.ba__stage.is-dragging .ba__handle { cursor: grabbing; transform: translate(-50%, -50%) scale(1.06); }
.ba__handle:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.ba__label { position: absolute; bottom: 16px; padding: 6px 10px; border-radius: 4px; background: rgba(11, 27, 43, .82); color: #fff; font: 500 12px/16px var(--font-body); letter-spacing: .05em; text-transform: uppercase; pointer-events: none; transition: opacity .3s var(--ease-ui); }
.ba__label--l { left: 16px; }
.ba__label--r { right: 16px; background: var(--color-accent); }
.ba__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
.ba__notes li { padding: 20px 24px 0 0; font: 300 17px/1.45 var(--font-display); color: var(--color-ink-soft); }
.ba__notes strong { font-weight: 500; color: var(--color-ink); }

/* A1 — the loupe (Magic UI Lens → a dentist's loupe) */
.loupe { position: fixed; left: 0; top: 0; z-index: 70; width: 184px; height: 184px; border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .18s ease, transform .25s cubic-bezier(.16, 1, .3, 1); background-color: #fff; background-repeat: no-repeat; border: 2px solid var(--color-accent); box-shadow: 0 0 0 6px rgba(255, 255, 255, .65), 0 24px 48px -16px rgba(11, 27, 43, .45); }
.loupe.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.loupe__cross { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); background: linear-gradient(var(--color-accent), var(--color-accent)) center / 1px 100% no-repeat, linear-gradient(var(--color-accent), var(--color-accent)) center / 100% 1px no-repeat; opacity: .6; }
.loupe__zoom { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); padding: 2px 8px; border-radius: 4px; background: var(--color-accent); color: #fff; font: 500 12px/16px var(--font-body); font-variant-numeric: tabular-nums; }
.has-loupe { cursor: zoom-in; }
@media (hover: none) { .loupe { width: 156px; height: 156px; } }

/* A4 — signal packets on the flow diagram (Magic UI Animated Beam) */
.flow__packets { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.packet { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; display: grid; place-items: center; background: var(--color-dark-node); border: 1px solid #3b6bb8; border-radius: 4px; box-shadow: 0 0 14px rgba(54, 181, 254, .35); will-change: transform; }
.packet--out { background: var(--color-accent); border-color: #5b9bff; }
.flow__hub { transition: box-shadow .4s ease, border-color .4s ease; }
.flow__hub.is-pulse { border-color: var(--ramp-4); box-shadow: 0 0 0 6px rgba(54, 181, 254, .12), 0 0 40px rgba(54, 181, 254, .35); }

@media (prefers-reduced-motion: reduce) {
  .feed__item, .loupe { transition: none; }
}

/* tablet / phone */
@media (max-width: 1023px) {
  .ba__inner { padding: var(--space-section-y) var(--space-gutter); border: 0; }
  .ba__notes { grid-template-columns: 1fr; }
  .ba__notes li { padding: 14px 0; border-bottom: 1px solid var(--color-border); }
  .feed { height: 132px; }
}
@media (max-width: 767px) {
  .ba__stage { aspect-ratio: 4 / 3; }
  .ba__img { object-position: 36% 50%; }
  .ba__handle { width: 56px; height: 56px; }
  .feed__title { font-size: 14px; }
}


/* =====================================================================
   SPINE — the page is one clinic day; Mei Ling is the thread
   ===================================================================== */
.daybar { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-left: 1px solid var(--color-border); min-width: 0; }
.daybar__time { font: 500 16px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--color-ink); }
.daybar__thread { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 10px 4px 8px; border-radius: 4px; background: var(--color-surface); font: 500 12px/16px var(--font-body); letter-spacing: .02em; color: var(--color-ink-soft); white-space: nowrap; }
.daybar__who { color: var(--color-ink); }
.daybar__what { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.daybar__dot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--cond-amber); transition: background-color .4s var(--ease-ui); }
.daybar__thread[data-state="ok"] .daybar__dot { background: #22c55e; }
.daybar__thread[data-state="chair"] .daybar__dot { background: var(--ramp-4); }
.daybar__thread[data-state="done"] .daybar__dot { background: var(--color-accent); }
.daybar__thread.is-tick { animation: thread-tick .6s cubic-bezier(.16, 1, .3, 1); }
@keyframes thread-tick { 0% { background: var(--color-accent-quiet); } 100% { background: var(--color-surface); } }
@media (max-width: 1023px) {
  .daybar { flex: 1; justify-content: center; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); gap: 8px; padding: 0 10px; }
  .daybar__who { display: none; }
}
@media (max-width: 767px) { .daybar__thread { padding: 4px 8px 4px 6px; } }
@media (max-width: 360px) { .daybar__what { display: none; } .daybar__thread { padding: 6px; } }
@media (prefers-reduced-motion: reduce) { .daybar__thread.is-tick { animation: none; } }


/* =====================================================================
   B4 — 08:30 the turn: a reminders switch the visitor flips
   ===================================================================== */
.turn__inner { max-width: 1266px; margin: 0 auto; padding: var(--space-section-y) 32px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
.turn__copy { display: flex; flex-direction: column; gap: 28px; }
.turn__copy .eyebrow { margin-bottom: -12px; }
.switch { display: flex; align-items: center; gap: 20px; width: 100%; max-width: 520px; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: 6px; background: #fff; text-align: left; cursor: pointer; transition: border-color .3s var(--ease-ui), box-shadow .3s var(--ease-ui); }
.switch:hover { border-color: #c8d6ee; }
.switch:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.switch__track { position: relative; flex: none; width: 96px; height: 52px; border-radius: 6px; background: var(--color-surface-tertiary); box-shadow: inset 0 2px 4px rgba(11, 27, 43, .12); transition: background-color .35s var(--ease-ui); }
.switch__knob { position: absolute; left: 4px; top: 4px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 4px; background: #fff; box-shadow: 0 2px 0 rgba(11, 27, 43, .08), 0 6px 14px -6px rgba(11, 27, 43, .35); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.switch__knob .px { filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s; }
.switch[aria-checked="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-quiet); }
.switch[aria-checked="true"] .switch__track { background: var(--color-accent); }
.switch[aria-checked="true"] .switch__knob { transform: translateX(44px); }
.switch[aria-checked="true"] .switch__knob .px { filter: none; opacity: 1; }
.switch:active .switch__knob { transform: scale(.94); }
.switch[aria-checked="true"]:active .switch__knob { transform: translateX(44px) scale(.94); }
.switch__text strong { display: block; font: 500 20px/26px var(--font-display); color: var(--color-ink); }
.switch__text small { display: block; margin-top: 2px; font-size: 15px; line-height: 21px; color: var(--color-ink-soft); }
.slots { max-width: 520px; }
.slots__head { display: flex; justify-content: space-between; font: 500 13px/18px var(--font-body); color: var(--color-ink-soft); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.slots__head #slots-count { color: var(--color-ink); }
.slots__grid { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
.slot { position: relative; aspect-ratio: 1; border-radius: 3px; background: var(--color-surface-tertiary); transition: background-color .35s var(--ease-ui), transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.slot[data-who] { box-shadow: 0 0 0 2px var(--color-background), 0 0 0 3px var(--color-ink); }
.slot.is-ok { background: var(--color-accent); transform: scale(1.06); }
.slot.is-move { background: var(--cond-amber); }
.slot.is-wait { background: #b8bfc8; }
.slots__legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 13px; color: var(--color-ink-soft); }
.slots__legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.k-ok { background: var(--color-accent); } .k-move { background: var(--cond-amber); } .k-wait { background: #b8bfc8; }
.turn__phone { display: flex; justify-content: center; }
.wa--phone { position: relative; left: auto; right: auto; bottom: auto; width: 100%; max-width: 380px; min-height: 380px; border: 8px solid var(--color-ink); border-radius: 28px; box-shadow: var(--shadow-float); }
.wa--phone .wa__body { min-height: 300px; justify-content: flex-end; }
.wa__empty { margin: auto; padding: 8px 12px; border-radius: 6px; background: rgba(255, 255, 255, .7); color: #667781; font-size: 13px; }
.wa__msg { animation: wa-in .45s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes wa-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.wa__typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 6px; background: #d9fdd3; }
.wa__typing i { width: 6px; height: 6px; border-radius: 50%; background: #667781; animation: wa-dot 1s infinite; }
.wa__typing i:nth-child(2) { animation-delay: .15s; } .wa__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* =====================================================================
   C2 — 10:40 in the chair: the X-ray develops, then the chart updates
   ===================================================================== */
.xray__inner { max-width: 1266px; margin: 0 auto; padding: var(--space-section-y) 32px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
.xray__film { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #0b1b2b; box-shadow: var(--shadow-float); }
.xray__canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.xray__tag { position: absolute; left: 14px; top: 12px; padding: 4px 8px; border-radius: 4px; background: rgba(215, 245, 236, .12); color: #d7f5ec; font: 500 12px/16px var(--font-body); letter-spacing: .04em; }
.xray__labels span { position: absolute; transform: translate(-50%, -50%); padding: 2px 6px; border-radius: 3px; background: rgba(11, 27, 43, .7); color: #d7f5ec; font: 500 12px/16px var(--font-body); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .5s var(--ease-ui); }
.xray__film.is-developed .xray__labels span { opacity: 1; }
.xray__mark { position: absolute; left: 53.9%; top: 44%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 2px solid var(--cond-rose); border-radius: 50%; opacity: 0; transform: scale(1.6); transition: opacity .4s var(--ease-ui), transform .6s cubic-bezier(.16, 1, .3, 1); }
.xray__mark span { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; padding: 2px 8px; border-radius: 3px; background: var(--cond-rose); color: #fff; font: 500 12px/16px var(--font-body); }
.xray__film.is-developed .xray__mark { opacity: 1; transform: none; }
.xray__film.is-charted .xray__mark { border-color: var(--cond-amber); }
.xray__film.is-charted .xray__mark span { background: var(--cond-amber); color: var(--color-ink); }
.xray__copy { display: flex; flex-direction: column; gap: 24px; }
.xray__copy .eyebrow { margin-bottom: -8px; }
.xray__chart { display: grid; grid-template-columns: repeat(4, 56px); gap: 4px; }
.xray__cell { position: relative; height: 56px; display: grid; place-items: center; border-radius: 4px; background: var(--t, var(--ramp-1)); transition: background-color .5s var(--ease-ui); }
.xray__cell b { position: absolute; left: 4px; top: 3px; font: 500 12px/1 var(--font-body); color: rgba(11, 27, 43, .7); font-variant-numeric: tabular-nums; }
.xray__cell.is-pop .px { animation: odo-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
.xray__status { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 4px; background: var(--color-surface); font: 500 14px/20px var(--font-body); color: var(--color-ink); }
.xray__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--cond-rose); transition: background-color .4s; }
.xray__status.is-done .xray__dot { background: var(--cond-amber); }

@media (max-width: 1023px) {
  .turn__inner, .xray__inner { grid-template-columns: 1fr; padding: var(--space-section-y) var(--space-gutter); border: 0; gap: 36px; }
  .xray__film { order: 2; }
  .wa--phone { max-width: 360px; }
}
@media (max-width: 767px) {
  .switch { gap: 14px; padding: 14px; }
  .switch__track { width: 80px; height: 44px; }
  .switch__knob { width: 36px; height: 36px; }
  .switch[aria-checked="true"] .switch__knob { transform: translateX(36px); }
  .switch[aria-checked="true"]:active .switch__knob { transform: translateX(36px) scale(.94); }
  .switch__text strong { font-size: 18px; }
  .slots__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .wa--phone { min-height: 340px; border-width: 6px; border-radius: 22px; }
  .xray__film { aspect-ratio: 4 / 3; }
  .xray__chart { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .wa__msg, .wa__typing i { animation: none; }
  .switch__knob, .slot, .xray__mark { transition: none; }
}

/* capability chips (were defined with the removed feature stack) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font: 500 12px/16px var(--font-body); letter-spacing: .05em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--radius-chip); background: var(--color-surface); color: var(--color-ink); }
.xray__labels span { background: rgba(11, 27, 43, .55); }


/* =====================================================================
   B5 — 10:45 at the chair: the tablet tilts up from the tray
   ===================================================================== */
.chair__inner { max-width: 1266px; margin: 0 auto; padding: var(--space-section-y) 32px; display: flex; flex-direction: column; gap: 48px; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
.chair__head .eyebrow { margin-bottom: 16px; }
.chair__stage { position: relative; perspective: 1400px; perspective-origin: 50% 100%; padding-bottom: 28px; }
.tablet { position: relative; margin: 0 auto; width: min(1100px, 100%); padding: 14px; border-radius: 22px; background: #0b1b2b; box-shadow: 0 1px 0 #2a3d55 inset, 0 40px 80px -30px rgba(11, 27, 43, .55); transform-origin: 50% 100%; container-type: inline-size; will-change: transform; }
.tablet::before { content: ""; position: absolute; left: 50%; top: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #26384f; }
.tablet__screen { display: grid; grid-template-columns: 170px minmax(0, 1fr); border-radius: 10px; overflow: hidden; background: #fff; font-family: var(--font-body); color: var(--color-ink); }
.chair__tray { position: absolute; left: 8%; right: 8%; bottom: 0; height: 28px; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: radial-gradient(60% 100% at 50% 0%, rgba(11, 27, 43, .18), transparent 70%); pointer-events: none; }
.chair__chips { justify-content: center; }

/* the app inside */
.tapp__side { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--color-border); background: #fafbfc; }
.tapp__logo { width: 32px; height: 32px; display: grid; place-items: center; margin: 0 0 12px 6px; }
.tapp__nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--color-ink-soft); }
.tapp__nav.is-on { background: var(--color-accent-quiet); color: var(--color-accent); font-weight: 500; }
.tapp__main { display: flex; flex-direction: column; min-width: 0; }
.tapp__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--color-border); font-size: 15px; }
.tapp__crumb, .tapp__meta { color: var(--color-ink-soft); font-size: 13px; }
.tapp__meta { margin-left: 8px; }
.tapp__live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; background: #e8f7ee; color: #166534; font-size: 12px; font-weight: 500; white-space: nowrap; }
.tapp__live i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.tapp__tabs { display: flex; gap: 4px; padding: 10px 20px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; color: var(--color-ink-soft); }
.tapp__tabs span { padding: 8px 12px; border-bottom: 2px solid transparent; }
.tapp__tabs .is-on { color: var(--color-ink); border-bottom-color: var(--color-accent); font-weight: 500; }
.tapp__body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; padding: 20px; }
.tchart__head { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 12px; color: var(--color-ink-soft); }
.tchart__legend i { display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 10px; border-radius: 2px; vertical-align: -1px; }
.k-filled { background: var(--cond-amber); } .k-crown { background: var(--cond-violet); } .k-missing { background: #cfd5dc; }
.tchart__row { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; margin-bottom: 3px; }
.tchart__t { position: relative; aspect-ratio: 1 / 1.35; display: grid; place-items: center; border-radius: 3px; background: var(--ramp-1); }
.tchart__t b { position: absolute; left: 3px; top: 2px; font: 500 12px/1 var(--font-body); color: rgba(11, 27, 43, .65); font-variant-numeric: tabular-nums; }
.tchart__t .px { margin-top: 14px; }
.tchart__t--filled { background: var(--cond-amber); }
.tchart__t--crown { background: var(--cond-violet); }
.tchart__t--missing { background: #eef1f4; }
.tchart__t--missing .px { opacity: .25; }
.tchart__t.is-today { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-accent); z-index: 1; }
.tnote { display: flex; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 6px; background: #fafbfc; font-size: 13px; line-height: 19px; color: var(--color-ink-soft); }
.tnote strong { color: var(--color-ink); font-weight: 500; }
.tbill { align-self: start; padding: 16px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 14px; }
.tbill__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font: 500 16px/22px var(--font-display); }
.tbill__no { font: 500 12px/16px var(--font-body); color: var(--color-ink-soft); }
.tbill__lines { overflow: hidden; }
.tbill__lines li { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px dashed var(--color-border); font-variant-numeric: tabular-nums; }
.tbill__new { max-height: 0; padding: 0 !important; opacity: 0; transform: translateX(16px); border-top-color: transparent !important; transition: max-height .5s cubic-bezier(.16, 1, .3, 1), padding .5s cubic-bezier(.16, 1, .3, 1), opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1), background-color 1.2s ease; }
.tablet.is-billed .tbill__new { max-height: 44px; padding: 9px 6px !important; margin: 0 -6px; opacity: 1; transform: none; border-top-color: var(--color-border) !important; background: var(--color-accent-quiet); }
.tablet.is-billed .tbill__new:nth-child(3) { transition-delay: .35s; }
.tablet.is-billed.is-settled .tbill__new { background: transparent; }
.tbill__total { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--color-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.tbill__foot { display: flex; gap: 6px; margin-top: 12px; }

/* the tablet's own layout below ~720px of tablet width (phones, small tablets) */
@container (max-width: 720px) {
  .tablet__screen { grid-template-columns: 1fr; min-height: 0; }
  .tapp__side { display: none; }
  .tapp__meta { display: none; }
  .tapp__top { padding: 12px 14px; }
  .tapp__tabs { padding: 6px 10px 0; overflow: hidden; }
  .tapp__tabs span:nth-child(n+4) { display: none; }
  .tapp__body { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
  .tchart__row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .tchart__t:not(.is-left) { display: none; }
  .tchart__legend { display: none; }
}
@media (max-width: 1023px) {
  .chair__inner { padding: var(--space-section-y) var(--space-gutter); border: 0; gap: 32px; }
  .tablet { padding: 10px; border-radius: 18px; }
}
@media (max-width: 767px) { .tablet { padding: 8px; border-radius: 16px; } .tablet__screen { border-radius: 8px; } }
@media (prefers-reduced-motion: reduce) { .tbill__new { transition: none; } }

.tnext { margin-top: 12px; border-top: 1px solid var(--color-border); }
.tnext li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--color-border); font-size: 13px; color: var(--color-ink-soft); }
.tnext strong { color: var(--color-ink); font-weight: 500; }
.tbill__foot .pill, .tnext .pill { white-space: nowrap; }
@container (max-width: 720px) { .tnext li { grid-template-columns: 16px 1fr; } .tnext .pill { display: none; } }