/* =============================================================================
   Kade · website-5 · revision 2 · the collection
   One ground, one accent, one label schema. Tokens first; scrollcraft.css
   derives the rest. The engine's selectors are untouched.
   ========================================================================== */

@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Archivo Variable";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin-wdth-italic.woff2") format("woff2-variations");
}

/* Interpolate the shared palette so every surface changes together. */
@property --sc-canvas { syntax: "<color>"; inherits: true; initial-value: #f8fbfd; }
@property --sc-surface { syntax: "<color>"; inherits: true; initial-value: #edf5fb; }
@property --sc-ink { syntax: "<color>"; inherits: true; initial-value: #0d1b2a; }
@property --sc-ink-soft { syntax: "<color>"; inherits: true; initial-value: #4f6478; }
@property --sc-accent { syntax: "<color>"; inherits: true; initial-value: #1b6fb3; }
@property --sc-accent-ink { syntax: "<color>"; inherits: true; initial-value: #f8fbfd; }
@property --text-lead { syntax: "<color>"; inherits: true; initial-value: #233649; }
@property --tint { syntax: "<color>"; inherits: true; initial-value: #bfe1f5; }
@property --tint-strong { syntax: "<color>"; inherits: true; initial-value: #a5d4ef; }
@property --bad { syntax: "<color>"; inherits: true; initial-value: #b4483a; }
@property --good { syntax: "<color>"; inherits: true; initial-value: #1f7a4d; }
@property --edge-color { syntax: "<color>"; inherits: true; initial-value: #ffffffe6; }

:root {
  color-scheme: light;
  --text-lead: #233649;
  --edge-color: #ffffffe6;
  /* light theme: off-white ground, baby-blue surfaces, navy ink */
  --sc-canvas:      #f8fbfd;
  --sc-surface:     #edf5fb;   /* baby blue, faint: cards and panels */
  --sc-ink:         #0d1b2a;
  --sc-ink-soft:    #4f6478;   /* tinted from the ink, 6:1 on the ground */
  --sc-accent:      #1b6fb3;   /* deeper Kade blue for links, focus, selection (5:1 on white) */
  --sc-accent-ink:  #f8fbfd;
  --tint:           #bfe1f5;   /* baby blue proper: the button, the live card's edge */
  --tint-strong:    #a5d4ef;
  --bad:            #b4483a;
  --good:           #1f7a4d;

  --sc-font-display: "Archivo Variable", "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Archivo Variable", "Archivo", system-ui, sans-serif;

  --sc-r-sm: 6px; --sc-r-md: 12px; --sc-r-lg: 16px;
  /* shadows tinted to the ground's blue and lighter than the dark defaults */
  --sc-shadow-color: 208 40% 30%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.08), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.14);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.08), 0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.18), 0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.14);
  --sc-edge: inset 0 1px 0 var(--edge-color);
  --sc-maxw: 74rem;
  --card-w: 24rem;
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);   /* letter reveal, from the animation brief */
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sc-canvas: #141414;
  --sc-surface: #202020;
  --sc-ink: #f2f2f2;
  --sc-ink-soft: #bcbcbc;
  --sc-accent: #83c9f4;
  --sc-accent-ink: #141414;
  --text-lead: #d9d9d9;
  --tint: #414141;
  --tint-strong: #626262;
  --bad: #f19a89;
  --good: #83d9b1;
  --edge-color: #ffffff14;
  --sc-shadow-color: 0 0% 0%;
}
:root[data-theme-ready] {
  transition-property: --sc-canvas, --sc-surface, --sc-ink, --sc-ink-soft, --sc-accent, --sc-accent-ink, --text-lead, --tint, --tint-strong, --bad, --good, --edge-color;
  transition-duration: var(--sc-d-slow);
  transition-timing-function: var(--sc-ease-out);
}
.sc-grain { opacity: 0.03; }

html { scroll-behavior: auto; }
body { font-weight: 430; overflow-x: clip; }
/* in-page links focus their target after the glide: no ring after a click,
   the engine's :focus-visible ring after a keyboard activation */
.object:focus:not(:focus-visible), #main:focus:not(:focus-visible), .transcript:focus:not(:focus-visible) { outline: none; }
strong { font-weight: 640; }
[data-sc-in]:focus-within, [data-sc-stagger] > :focus-within { opacity: 1; transform: none; }

/* the scroll progress bar: a hairline at the very top, eased in motion.js */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress__bar { height: 100%; background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }

/* titles arrive one letter at a time (motion.js splits them, once, on entry).
   Until the split runs they are held, so a slow load cannot paint the title
   whole and then hide it; the head script clears the hold after 3 s anyway. */
html.reveal-pending [data-chars]:not(.is-split) { opacity: 0; }
[data-chars] .ch__w { display: inline-block; white-space: nowrap; }
[data-chars] .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 520ms var(--ease-reveal), transform 520ms var(--ease-reveal);
}
[data-chars].is-in .ch { opacity: 1; transform: none; }
/* Effective site motion setting; system preference remains the fallback. */
:where(:root[data-motion="reduced"]) [data-chars] .ch { transition: none; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
:where(:root:not([data-motion])) [data-chars] .ch { transition: none; opacity: 1; transform: none; }
}
@media print {
  [data-chars] .ch { transition: none; opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- utilities */
.skip {
  position: fixed; top: 0; left: 0; z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; text-decoration: none;
  transform: translateY(-120%);
  transition: transform 160ms var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

/* The Kade logo: printed colours on light, a lifted palette on dark (navy goes near-white). */
.mark {
  display: block;
  height: 3.5rem; aspect-ratio: 379 / 480;
  background: url("assets/kade-logo.png") center / contain no-repeat;
}
[data-theme="dark"] .mark { background-image: url("assets/kade-logo-dark.png"); }
.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* the screening state: while the video plays, everything else steps back */
.dims { transition: opacity 700ms var(--sc-ease-out); }
body[data-screening] .dims { opacity: 0.14; }
body[data-screening] .dims:focus-within { opacity: 1; }
.house {
  position: fixed; inset: 0; z-index: 20;
  background: var(--sc-canvas);
  opacity: 0; pointer-events: none;
  transition: opacity 900ms var(--sc-ease-out);
}
body[data-screening] .house { opacity: 0.86; }

/* the label schema: every object carries a title and one fact line */
.label { max-width: 40rem; }
.label__title {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl);
  font-weight: 600;
  font-stretch: 86%;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sc-ink);
  text-wrap: balance;
}
.label__fact {
  margin: var(--sc-4) 0 0;
  font-size: var(--sc-t-lg);
  line-height: 1.45;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------- top */
.top { padding-block: clamp(0.9rem, 2vh, 1.25rem) 0; }
.top__wrap {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sc-5);
}
.top .index { justify-self: end; }
.theme-toggle {
  display: grid; place-items: center;
  width: 68px; height: 44px; padding: 0;
  border: 0; border-radius: 999px;
  background: transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.theme-toggle__track {
  position: relative; display: block;
  width: 64px; height: 32px;
  border: 1px solid #cecece; border-radius: 999px;
  background: #d7d7d7;
}
.theme-toggle__thumb {
  position: absolute; z-index: 1; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fafafa;
  box-shadow: 0 1px 3px #00000014;
  transform: translateX(32px);
}
.theme-toggle__moon, .theme-toggle__sun {
  position: absolute; top: 6px;
  width: 18px; height: 18px;
  transform-origin: center;
}
.theme-toggle__moon { left: 6px; color: #606b7a; }
.theme-toggle__sun { right: 6px; color: #f4f4f4; opacity: 0; transform: rotate(-60deg) scale(0.65); }
[data-theme-ready] .theme-toggle__track {
  transition: background-color var(--sc-d-slow) var(--sc-ease-out), border-color var(--sc-d-slow) var(--sc-ease-out);
}
[data-theme-ready] .theme-toggle__thumb {
  transition: transform var(--sc-d-slow) var(--sc-ease-out), background-color var(--sc-d-slow) var(--sc-ease-out), box-shadow var(--sc-d-slow) var(--sc-ease-out);
}
[data-theme-ready] :is(.theme-toggle__moon, .theme-toggle__sun) {
  transition: transform var(--sc-d-slow) var(--sc-ease-out), opacity var(--sc-d-base) var(--sc-ease-out);
}
[data-theme="dark"] .theme-toggle__track { background: #303030; border-color: #484848; }
[data-theme="dark"] .theme-toggle__thumb { transform: translateX(0); background: #1b1b1b; box-shadow: 0 1px 3px #00000033; }
[data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: rotate(30deg) scale(0.65); }
[data-theme="dark"] .theme-toggle__sun { opacity: 1; transform: rotate(0) scale(1); }
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover .theme-toggle__track { border-color: #a6a6a6; }
  [data-theme="dark"] .theme-toggle:hover .theme-toggle__track { border-color: #6b6b6b; }
}
.top__mark { display: block; border-radius: var(--sc-r-sm); }
.index { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: var(--sc-t-sm); }
.index a { color: var(--sc-ink-soft); text-decoration: none; padding: 0.25rem 0; border-radius: var(--sc-r-sm); }
@media (hover: hover) and (pointer: fine) { .index a:hover { color: var(--sc-ink); text-decoration: underline; text-underline-offset: 0.22em; } }
.index a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.index a[aria-current="page"] { color: var(--sc-ink); font-weight: 600; }
/* the 21st.dev "Random Letter Swap Navigation" (cnippet-dev), ported: each
   letter and its twin slide vertically in a random order on hover or focus */
.swap { display: inline; }
.swap__w { display: inline-flex; white-space: nowrap; }
.swap__l { position: relative; display: inline-block; overflow: hidden; line-height: 1.3; }
.swap__a, .swap__b { display: inline-block; transition: transform 320ms var(--sc-ease-in-out) var(--d, 0s); }
.swap__a { position: relative; }
.swap__b { position: absolute; left: 0; top: -100%; }
.index a.is-swapped .swap__a, .index a.is-swapped .swap__b { transform: translateY(100%); }
/* Effective site motion setting; system preference remains the fallback. */
:where(:root[data-motion="reduced"]) .swap__a,
:where(:root[data-motion="reduced"]) .swap__b { transition: none; }
@media (prefers-reduced-motion: reduce) {
:where(:root:not([data-motion])) .swap__a,
:where(:root:not([data-motion])) .swap__b { transition: none; }
}

/* ----------------------------------------------------------------- objects */
.object { padding-block: calc(var(--sc-section) * 0.55); }
.object--video { padding-top: clamp(1.5rem, 4vh, 3rem); }
.object--video .wrap { display: grid; gap: var(--sc-6); }
.label--lead { max-width: 46rem; }
.headline {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-3xl);
  font-weight: 620;
  font-stretch: 82%;
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--sc-ink);
  text-wrap: balance;
}
.sub {
  margin: var(--sc-4) 0 0;
  max-width: 44ch;
  font-size: var(--sc-t-lg);
  line-height: 1.45;
  color: var(--text-lead);
  text-wrap: pretty;
}

.screen {
  position: relative;
  z-index: 30;          /* above .house while screening */
  width: min(100%, calc(62svh * 4 / 3));   /* the play control and its caption clear the first viewport, 1366x768 included */
  margin: 0;
  isolation: isolate;
  will-change: clip-path;
}
.screen__video {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--sc-r-lg);
  background: var(--sc-surface);
  box-shadow: var(--sc-e3), var(--sc-edge);
  object-fit: cover;
}
.screen__video::cue { background: rgba(6, 9, 14, 0.82); color: #f8fbfd; font-family: var(--sc-font-text); font-size: 1.05em; line-height: 1.35; }
.play {
  position: absolute; z-index: 4;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: 7.5rem; height: 7.5rem;
  display: grid; place-items: center;
  padding: 0;
  border: 2px solid rgba(248, 251, 253, 0.6);
  border-radius: 50%;
  background: rgba(13, 27, 42, 0.62);   /* dark over the bright video, whatever the theme */
  color: #f8fbfd;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 160ms var(--sc-ease-out), background-color 160ms ease, border-color 160ms ease, opacity 320ms var(--sc-ease-out);
}
.play__glyph { width: 2.6rem; height: 2.6rem; fill: currentColor; translate: 0.15rem 0; }
.play__time { position: absolute; left: 50%; bottom: -1.9rem; translate: -50% 0; padding: 0.1rem 0.5rem; border-radius: var(--sc-r-sm); background: rgba(13, 27, 42, 0.62); font-size: var(--sc-t-sm); font-variant-numeric: tabular-nums; color: #f8fbfd; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .play:hover { background: var(--sc-accent); border-color: var(--sc-accent); transform: scale(1.04); } }
.play:active { transform: scale(0.97); }
.play:focus-visible { outline: 3px solid #f8fbfd; outline-offset: 4px; box-shadow: 0 0 0 7px var(--sc-accent); }
.screen.is-playing .play, .screen.is-played .play { opacity: 0; pointer-events: none; }
.screen__caption { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.screen__caption a { color: var(--sc-ink); }
.screen__nojs { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); }
.screen__nojs a { color: var(--sc-ink); }
.transcript { max-width: 46rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; }
.transcript summary { cursor: pointer; width: max-content; padding: 0.35rem 0.6rem 0.35rem 0; border-radius: var(--sc-r-sm); color: var(--sc-ink); font-weight: 560; }
.transcript summary:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.transcript__note { margin: var(--sc-4) 0 var(--sc-3); font-size: var(--sc-t-xs); }
.transcript__body p { margin: 0 0 var(--sc-3); text-wrap: pretty; }

/* pages that open with a title */
.object--page { padding-top: clamp(2rem, 6vh, 4rem); }
.object--page .wrap, .object--section .wrap { display: grid; gap: var(--sc-7); }
.book__row { display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; }
.book__aside { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-6); counter-reset: step; }
.steps li { padding-top: 1.25rem; border-top: 1px solid var(--sc-hairline-strong); }
.steps__title { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; font-stretch: 90%; letter-spacing: -0.02em; line-height: 1.15; }
.steps p { margin: 0.6rem 0 0; font-size: var(--sc-t-base); line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty; }
.steps p a, .sub a, .label__fact a { color: var(--sc-ink); text-underline-offset: 0.24em; }

/* book */
.object--book .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sc-6); }
/* Booking: a sweeping surface, rolling label, and travelling arrow. */
.cssbuttons-io {
  position: relative; isolation: isolate; display: inline-flex;
  align-items: center; justify-content: center; gap: 1rem;
  padding: 1rem 1.4rem; min-height: 56px;
  font: 500 18px var(--sc-font-text); letter-spacing: 0.02em;
  border: 0; border-radius: 0.8em; cursor: pointer;
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  color: #fff; overflow: hidden; text-decoration: none; white-space: nowrap;
  transition: transform 240ms var(--sc-ease-out);
}
.cssbuttons-io::before {
  content: ""; position: absolute; z-index: -1; inset: -1px -12%;
  background: #000; transform: skew(-18deg);
  transition: transform 520ms var(--sc-ease-out);
}
.cta__label { position: relative; display: block; overflow: hidden; line-height: 1.4; }
.cta__ink { display: block; transition: transform 420ms var(--sc-ease-out); }
.cta__label::after {
  content: attr(data-label); position: absolute; inset: 0;
  transform: translateY(115%); transition: transform 420ms var(--sc-ease-out);
}
.cta__arrow { width: 22px; height: 22px; flex: 0 0 auto; transition: transform 420ms var(--sc-ease-out); }
.cssbuttons-io:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.cssbuttons-io:active { transform: scale(0.97); }
[data-theme="dark"] .cssbuttons-io { color: #141414; transition: transform 240ms var(--sc-ease-out), color 320ms var(--sc-ease-out); }
[data-theme="dark"] .cssbuttons-io::before { background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .cssbuttons-io:hover::before { transform: translateX(105%) skew(-18deg); }
  .cssbuttons-io:hover .cta__ink { transform: translateY(-115%); }
  .cssbuttons-io:hover .cta__label::after { transform: translateY(0); }
  .cssbuttons-io:hover .cta__arrow { transform: translateX(4px) rotate(-35deg); }
  [data-theme="dark"] .cssbuttons-io:hover { color: #fff; }
}

/* calculator */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) var(--card-w);
  gap: var(--sc-7);
  align-items: start;
  will-change: clip-path;
}
.calc__form { display: grid; gap: var(--sc-4); }
.field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 0.5rem; min-width: 0; }
.field label { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.2; }
.field__value { font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.field input[type="range"] { grid-column: 1 / -1; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 1.6rem; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--tint); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--tint); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.25rem; height: 1.25rem; margin-top: calc((4px - 1.25rem) / 2); border-radius: 50%; border: 2px solid var(--sc-canvas); background: var(--sc-accent); box-shadow: var(--sc-e2); transition: transform 140ms var(--sc-ease-out), box-shadow 140ms ease; }
input[type="range"]::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--sc-canvas); background: var(--sc-accent); box-shadow: var(--sc-e2); transition: transform 140ms var(--sc-ease-out), box-shadow 140ms ease; }
@media (hover: hover) and (pointer: fine) { input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); } input[type="range"]:hover::-moz-range-thumb { transform: scale(1.12); } }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
input[type="range"]:active::-moz-range-thumb { transform: scale(1.18); }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--sc-canvas), 0 0 0 5px var(--sc-accent); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--sc-canvas), 0 0 0 5px var(--sc-accent); }
.calc__fine { margin: var(--sc-3) 0 0; font-size: 0.74rem; line-height: 1.5; color: var(--sc-ink-soft); max-width: 60ch; }
.calc__fine a { color: var(--sc-ink); }

/* the card: one schema for the illustrations and for the visitor's own */
.card {
  width: var(--card-w); max-width: 100%;
  flex: 0 0 auto;
  padding: 1.35rem 1.4rem 1.4rem;
  border-radius: var(--sc-r-lg);
  background: var(--sc-surface);
  box-shadow: var(--sc-e2), var(--sc-edge);
  color: var(--sc-ink);
}
.card__body { border-radius: inherit; }
.card--live { border: 2px solid var(--tint-strong); }
.card__tag { margin: 0 0 0.6rem; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--bad); }
.card__tag--live { color: var(--sc-accent); }
.card__name { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 600; font-stretch: 88%; letter-spacing: -0.02em; line-height: 1.05; }
.card__type { margin: 0.5rem 0 0; font-size: var(--sc-t-sm); line-height: 1.45; color: var(--sc-ink-soft); text-wrap: pretty; }
.card__in, .card__out { margin: 1rem 0 0; display: grid; gap: 0.35rem; }
.card__in { grid-template-columns: 1fr 1fr; gap: 0.35rem 0.75rem; padding-top: 0.9rem; border-top: 1px solid var(--sc-hairline); }
.card__in > div, .card__out > div { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; min-width: 0; }
.card__in > div { flex-direction: column; gap: 0.1rem; align-items: start; }
.card__in dt, .card__out dt { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.3; }
.card__in dd, .card__out dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 620; line-height: 1.2; }
.card__in dd { font-size: var(--sc-t-base); }
.card__out { padding-top: 0.9rem; border-top: 1px solid var(--sc-hairline); }
.card__out dd { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-stretch: 90%; letter-spacing: -0.02em; white-space: nowrap; transition: color 240ms ease; }
.card__out dd.is-bad { color: var(--bad); }
.card__out dd.is-good { color: var(--good); }
.card.is-ticking .card__out dd { color: var(--sc-accent); }
.card__note { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); line-height: 1.45; color: var(--sc-ink-soft); text-wrap: pretty; }
.card__link { display: inline-block; margin-top: 1rem; font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink); text-underline-offset: 0.24em; }
.card__link:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }
.cta--card { margin-top: 1rem; width: 100%; }

/* the case rail */
.cases__stage { display: grid; align-content: center; padding-block: var(--sc-6); }
.rail {
  display: flex; align-items: stretch; gap: var(--sc-6);
  padding-inline: var(--sc-gutter);
  width: max-content;
}
.rail__lead { flex: 0 0 auto; width: 20rem; align-self: center; }

/* blog */
.posts { margin-top: var(--sc-7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5); }
.post {
  display: grid; align-content: start; gap: 0.5rem;
  padding: 1.25rem 0 1.4rem;
  border-top: 1px solid var(--sc-hairline-strong);
  color: var(--sc-ink);
  text-decoration: none;
  border-radius: var(--sc-r-sm);
}
.post__meta { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.post__title { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; font-stretch: 90%; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.post__fact { margin: 0; font-size: var(--sc-t-sm); line-height: 1.45; color: var(--sc-ink-soft); text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) { .post:hover .post__title { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } }
.post:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }

/* your AI experts */
.experts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-6); }
.expert {
  display: grid; grid-template-rows: auto 1fr;
  border-radius: var(--sc-r-lg);
  background: var(--sc-surface);
  box-shadow: var(--sc-e2), var(--sc-edge);
  overflow: hidden;
}
.expert__photo { aspect-ratio: 1; background: var(--tint); }
.expert__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.expert__body { display: grid; align-content: start; gap: var(--sc-4); padding: 1.5rem 1.6rem 1.7rem; }
.expert__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sc-4); }
.expert__name { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 600; font-stretch: 88%; letter-spacing: -0.02em; line-height: 1.05; }
.expert__title { margin: 0.4rem 0 0; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-accent); }
.expert__in {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--sc-hairline-strong);
  color: var(--sc-ink);
  font-family: var(--sc-font-display); font-weight: 700; font-size: 0.95rem; line-height: 1;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .expert__in[href]:hover { background: var(--sc-ink); border-color: var(--sc-ink); color: var(--sc-canvas); } }
.expert__in:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.expert__in--pending, .expert__link--pending { color: var(--sc-ink-soft); cursor: default; }
.expert__bio { margin: 0; font-size: var(--sc-t-base); line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty; }
.expert__link { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink); text-decoration: none; }
.expert__link[href]:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.expert__link:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }
.experts__note { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.posts--page { margin-top: 0; }

/* the plate */
.object--contact { padding-bottom: clamp(2rem, 6vh, 4rem); }
.plate { display: grid; gap: var(--sc-6); }
.plate__lines { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.plate__lines > div { display: grid; gap: 0.3rem; }
.plate__lines dt { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.plate__lines dd { margin: 0; font-size: var(--sc-t-base); color: var(--sc-ink-soft); }
.plate__lines a { color: var(--sc-ink); font-weight: 600; text-underline-offset: 0.26em; }
.plate__lines a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }
.plate__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-6); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.mark--plate { height: 4.5rem; flex: 0 0 auto; }
.plate__note { margin: 0; max-width: 60ch; font-size: var(--sc-t-xs); line-height: 1.55; color: var(--sc-ink-soft); text-align: right; }
.plate__legal { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); font-size: var(--sc-t-xs); }
.plate__legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sc-ink-soft); text-underline-offset: 0.26em; }
.plate__legal a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .plate__legal a:hover { color: var(--sc-ink); } }

/* ----------------------------------------------------------- reduced motion */
/* Effective site motion setting; system preference remains the fallback. */
:root:where([data-motion="reduced"])[data-theme-ready],
:where(:root[data-motion="reduced"]) .theme-toggle,
:where(:root[data-motion="reduced"])[data-theme-ready] :is(.theme-toggle__track,
:where(:root[data-motion="reduced"]) .theme-toggle__thumb,
:where(:root[data-motion="reduced"]) .theme-toggle__moon,
:where(:root[data-motion="reduced"]) .theme-toggle__sun) { transition: none; }
:where(:root[data-motion="reduced"]) .dims,
:where(:root[data-motion="reduced"]) .play,
:where(:root[data-motion="reduced"]) .cta,
:where(:root[data-motion="reduced"]) .card__out dd { transition: none; }
:where(:root[data-motion="reduced"]) .cssbuttons-io::before,
:where(:root[data-motion="reduced"]) .cssbuttons-io span { transition: none; }
:where(:root[data-motion="reduced"]) .cssbuttons-io:active { transform: none; }
:where(:root[data-motion="reduced"]) .cases__stage { padding-block: 0; }
:where(:root[data-motion="reduced"]) .rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); width: 100%; max-width: var(--sc-maxw); margin-inline: auto; transform: none !important; }
:where(:root[data-motion="reduced"]) .rail__lead { grid-column: 1 / -1; width: auto; padding-right: 0; }
@media (prefers-reduced-motion: reduce) {
:root:where(:not([data-motion]))[data-theme-ready],
:where(:root:not([data-motion])) .theme-toggle,
:where(:root:not([data-motion]))[data-theme-ready] :is(.theme-toggle__track,
:where(:root:not([data-motion])) .theme-toggle__thumb,
:where(:root:not([data-motion])) .theme-toggle__moon,
:where(:root:not([data-motion])) .theme-toggle__sun) { transition: none; }
:where(:root:not([data-motion])) .dims,
:where(:root:not([data-motion])) .play,
:where(:root:not([data-motion])) .cta,
:where(:root:not([data-motion])) .card__out dd { transition: none; }
:where(:root:not([data-motion])) .cssbuttons-io::before,
:where(:root:not([data-motion])) .cssbuttons-io span { transition: none; }
:where(:root:not([data-motion])) .cssbuttons-io:active { transform: none; }
:where(:root:not([data-motion])) .cases__stage { padding-block: 0; }
:where(:root:not([data-motion])) .rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); width: 100%; max-width: var(--sc-maxw); margin-inline: auto; transform: none !important; }
:where(:root:not([data-motion])) .rail__lead { grid-column: 1 / -1; width: auto; padding-right: 0; }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 860px) {
  :root { --card-w: 100%; }
  .top__wrap { grid-template-columns: 1fr auto; gap: var(--sc-3); }
  .top .index { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
  .theme-toggle { grid-row: 1; grid-column: 2; }
  .index { gap: 0.15rem 0.9rem; }
  .headline { font-size: var(--sc-t-2xl); }
  .sub { font-size: var(--sc-t-base); }
  .object--video .wrap { gap: var(--sc-5); }
  .play { width: 5.5rem; height: 5.5rem; }
  .play__glyph { width: 2rem; height: 2rem; }
  .object--book .wrap { grid-template-columns: 1fr; align-items: start; }
  .cta { width: 100%; }
  .calc { grid-template-columns: 1fr; gap: var(--sc-6); }
  /* the rail is a stack on phones (page.js switches the act to flow) */
  .cases__stage { padding-block: 0; grid-template-columns: minmax(0, 1fr); } /* a definite track, so the rail's 100% resolves and auto-fit collapses to one column on phones */
  .rail { display: grid; width: 100%; gap: var(--sc-5); padding-inline: var(--sc-gutter); }
  .rail__lead { width: auto; padding-right: 0; }
  .posts { grid-template-columns: 1fr; gap: 0; }
  .steps { grid-template-columns: 1fr; gap: var(--sc-4); }
  .experts { grid-template-columns: 1fr; }
  .book__row { flex-direction: column; align-items: stretch; }
  .plate__lines { grid-template-columns: 1fr; gap: var(--sc-4); }
  .plate__foot { flex-direction: column; align-items: flex-start; }
  .plate__note { text-align: left; }
}

/* Shared entrance rhythm. Default HTML remains visible if JavaScript fails. */
.motion-reveal {
  opacity: 0; translate: 0 26px;
  transition: opacity 700ms var(--sc-ease-out) var(--arrival-delay, 0ms),
    translate 700ms var(--sc-ease-out) var(--arrival-delay, 0ms);
}
.motion-reveal.has-arrived, .motion-reveal:focus-within { opacity: 1; translate: 0 0; }
.screen.motion-reveal { scale: 0.98; transition: opacity 800ms var(--sc-ease-out), translate 800ms var(--sc-ease-out), scale 800ms var(--sc-ease-out); }
.screen.has-arrived { scale: 1; }
.cta.motion-reveal { transition: opacity 700ms var(--sc-ease-out), translate 700ms var(--sc-ease-out), transform 160ms var(--sc-ease-out); }
.rolling-number { font-variant-numeric: tabular-nums; }
.motion-setting { display: flex; align-items: center; gap: 12px; width: fit-content; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.motion-setting[hidden] { display: none; }
.motion-setting select { font: inherit; color: var(--sc-ink); background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); padding: 10px 30px 10px 12px; cursor: pointer; }
.motion-setting select:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
/* If the engine mounted in flow mode, retain its accessible grid for this visit. */
#cases[data-sc-act="flow"] .rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); width: 100%; max-width: var(--sc-maxw); margin-inline: auto; transform: none !important; }
#cases[data-sc-act="flow"] .rail__lead { width: auto; grid-column: 1 / -1; }
.field__value { min-width: 5ch; text-align: right; transition: color 180ms ease, transform 180ms var(--sc-ease-out); }
.field:focus-within .field__value { color: var(--sc-accent); transform: translateY(-2px); }
.field input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--sc-accent) var(--range-fill, 0%), var(--tint) var(--range-fill, 0%)); }
.field input[type="range"]::-moz-range-track { background: linear-gradient(to right, var(--sc-accent) var(--range-fill, 0%), var(--tint) var(--range-fill, 0%)); }
.field input[type="range"]::-webkit-slider-thumb { transition: transform 160ms var(--sc-ease-out), box-shadow 160ms ease; }
.field input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
.expert__photo { overflow: hidden; }
.expert__photo img { transition: transform 700ms var(--sc-ease-out); }
.post__title, .expert__in, .top__mark { transition: transform 240ms var(--sc-ease-out); }
[data-theme-ready] .theme-toggle__thumb { transition: transform 520ms var(--sc-ease-out), background-color 420ms ease, box-shadow 420ms ease; }
[data-theme-ready] :is(.theme-toggle__moon, .theme-toggle__sun) { transition: transform 520ms var(--sc-ease-out), opacity 240ms ease; }
.theme-toggle__sun { transform: rotate(-120deg) scale(0.65); }
[data-theme="dark"] .theme-toggle__moon { transform: rotate(90deg) scale(0.65); }
.theme-toggle:active .theme-toggle__track { scale: 0.94; }
.theme-toggle__track { transition: scale 160ms var(--sc-ease-out), background-color 420ms ease, border-color 420ms ease; }
@media (hover: hover) and (pointer: fine) {
  .expert:hover .expert__photo img { transform: scale(1.035); }
  .expert__in:hover { transform: rotate(-8deg); }
  .post:hover .post__title { transform: translateX(5px); }
  .top__mark:hover { transform: translateY(-2px); }
  .field input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
}
/* Effective site motion setting; system preference remains the fallback. */
:where(:root[data-motion="reduced"]) #cases { height: auto !important; }
:where(:root[data-motion="reduced"]) #cases .sc-stage { position: static; height: auto; min-height: 0; overflow: visible; }
:where(:root[data-motion="reduced"]) .motion-reveal,
:where(:root[data-motion="reduced"]) .screen.motion-reveal { opacity: 1; translate: none; scale: none; transition: opacity 120ms ease; }
:where(:root[data-motion="reduced"]) .cta__ink,
:where(:root[data-motion="reduced"]) .cta__label::after,
:where(:root[data-motion="reduced"]) .cta__arrow,
:where(:root[data-motion="reduced"]) .expert__photo img,
:where(:root[data-motion="reduced"]) .post__title,
:where(:root[data-motion="reduced"]) .expert__in,
:where(:root[data-motion="reduced"]) .top__mark,
:where(:root[data-motion="reduced"])[data-theme-ready] .theme-toggle__thumb,
:where(:root[data-motion="reduced"])[data-theme-ready] .theme-toggle__moon,
:where(:root[data-motion="reduced"])[data-theme-ready] .theme-toggle__sun { transition: none; }
:where(:root[data-motion="reduced"]) .cta:hover .cta__ink,
:where(:root[data-motion="reduced"]) .cta:hover .cta__arrow,
:where(:root[data-motion="reduced"]) .expert:hover .expert__photo img,
:where(:root[data-motion="reduced"]) .post:hover .post__title,
:where(:root[data-motion="reduced"]) .expert__in:hover,
:where(:root[data-motion="reduced"]) .top__mark:hover,
:where(:root[data-motion="reduced"]) .field:focus-within .field__value { transform: none; }
:where(:root[data-motion="reduced"]) .cta__label::after { display: none; }
:where(:root[data-motion="reduced"]) .theme-toggle:active .theme-toggle__track { scale: none; }
:where(:root[data-motion="reduced"]) .field input[type="range"]::-webkit-slider-thumb { transition: none; }
:where(:root[data-motion="reduced"]) .field input[type="range"]:active::-webkit-slider-thumb,
:where(:root[data-motion="reduced"]) .field input[type="range"]:hover::-webkit-slider-thumb { transform: none; }
:where(:root[data-motion="reduced"]) .field input[type="range"]:active::-moz-range-thumb,
:where(:root[data-motion="reduced"]) .field input[type="range"]:hover::-moz-range-thumb,
:where(:root[data-motion="reduced"]) [data-sc-tilt] { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
:where(:root:not([data-motion])) #cases { height: auto !important; }
:where(:root:not([data-motion])) #cases .sc-stage { position: static; height: auto; min-height: 0; overflow: visible; }
:where(:root:not([data-motion])) .motion-reveal,
:where(:root:not([data-motion])) .screen.motion-reveal { opacity: 1; translate: none; scale: none; transition: opacity 120ms ease; }
:where(:root:not([data-motion])) .cta__ink,
:where(:root:not([data-motion])) .cta__label::after,
:where(:root:not([data-motion])) .cta__arrow,
:where(:root:not([data-motion])) .expert__photo img,
:where(:root:not([data-motion])) .post__title,
:where(:root:not([data-motion])) .expert__in,
:where(:root:not([data-motion])) .top__mark,
:where(:root:not([data-motion]))[data-theme-ready] .theme-toggle__thumb,
:where(:root:not([data-motion]))[data-theme-ready] .theme-toggle__moon,
:where(:root:not([data-motion]))[data-theme-ready] .theme-toggle__sun { transition: none; }
:where(:root:not([data-motion])) .cta:hover .cta__ink,
:where(:root:not([data-motion])) .cta:hover .cta__arrow,
:where(:root:not([data-motion])) .expert:hover .expert__photo img,
:where(:root:not([data-motion])) .post:hover .post__title,
:where(:root:not([data-motion])) .expert__in:hover,
:where(:root:not([data-motion])) .top__mark:hover,
:where(:root:not([data-motion])) .field:focus-within .field__value { transform: none; }
:where(:root:not([data-motion])) .cta__label::after { display: none; }
:where(:root:not([data-motion])) .theme-toggle:active .theme-toggle__track { scale: none; }
:where(:root:not([data-motion])) .field input[type="range"]::-webkit-slider-thumb { transition: none; }
:where(:root:not([data-motion])) .field input[type="range"]:active::-webkit-slider-thumb,
:where(:root:not([data-motion])) .field input[type="range"]:hover::-webkit-slider-thumb { transform: none; }
:where(:root:not([data-motion])) .field input[type="range"]:active::-moz-range-thumb,
:where(:root:not([data-motion])) .field input[type="range"]:hover::-moz-range-thumb,
:where(:root:not([data-motion])) [data-sc-tilt] { transform: none !important; }
}
@media print {
  #cases { height: auto !important; }
  #cases .sc-stage { position: static; height: auto; min-height: 0; overflow: visible; }
  .motion-reveal, .screen.motion-reveal { opacity: 1; translate: none; scale: none; transition: opacity 120ms ease; }
  .cta__ink, .cta__label::after, .cta__arrow, .expert__photo img, .post__title, .expert__in, .top__mark,
  [data-theme-ready] .theme-toggle__thumb, [data-theme-ready] .theme-toggle__moon, [data-theme-ready] .theme-toggle__sun { transition: none; }
  .cta:hover .cta__ink, .cta:hover .cta__arrow, .expert:hover .expert__photo img, .post:hover .post__title,
  .expert__in:hover, .top__mark:hover, .field:focus-within .field__value { transform: none; }
  .cta__label::after { display: none; }
  .theme-toggle:active .theme-toggle__track { scale: none; }
  .field input[type="range"]::-webkit-slider-thumb { transition: none; }
  .field input[type="range"]:active::-webkit-slider-thumb, .field input[type="range"]:hover::-webkit-slider-thumb { transform: none; }
  .field input[type="range"]:active::-moz-range-thumb, .field input[type="range"]:hover::-moz-range-thumb, [data-sc-tilt] { transform: none !important; }
}

/* placeholder: a labelled empty slot (the demos page's "not available yet" panels) */
.placeholder {
  width: min(100%, 54rem);
  padding: clamp(2.5rem, 8vw, 5rem) var(--sc-6);
  border: 1.5px dashed var(--sc-hairline-strong); border-radius: var(--sc-r-lg);
  background: color-mix(in oklab, var(--sc-surface) 60%, transparent);
  text-align: center;
}
.placeholder__title { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; font-stretch: 90%; letter-spacing: -0.02em; color: var(--sc-ink); }
.placeholder__fact { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* ------------------------------------------------ home hero (2026-09-23) */
/* Headline, subheadline, one primary action and a quiet link to the demos. */
.object--hero { padding-top: clamp(2.5rem, 10vh, 6rem); padding-bottom: clamp(1.5rem, 5vh, 3.5rem); }
.object--hero .wrap { display: grid; gap: var(--sc-6); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-6); }
.hero__link {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px;
  font-size: var(--sc-t-base); font-weight: 600; color: var(--sc-ink); text-decoration: none;
}
.hero__text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.28em; }
.hero__arrow { display: inline-block; transition: transform 220ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .hero__link:hover .hero__arrow { transform: translateX(3px); } }
.hero__link:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }

/* --------------------------------------------------- demos (2026-09-23) */
.object--demos .wrap { gap: var(--sc-6); }
.demos { display: grid; gap: var(--sc-6); }
.demos__pick { display: grid; gap: var(--sc-2); width: min(100%, 20rem); }
.demos__label { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.demos__control { position: relative; }
.demos__control::after {
  content: ""; position: absolute; right: 1.05rem; top: 50%;
  width: 0.5rem; height: 0.5rem; pointer-events: none;
  border-right: 1.5px solid var(--sc-ink); border-bottom: 1.5px solid var(--sc-ink);
  transform: translateY(-70%) rotate(45deg);
}
.demos__select {
  -webkit-appearance: none; appearance: none; width: 100%; min-height: 48px;
  padding: 0.7rem 2.75rem 0.7rem 0.95rem;
  font: inherit; font-size: var(--sc-t-base); font-weight: 560; color: var(--sc-ink);
  background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-edge); cursor: pointer;
  transition: border-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .demos__select:hover { border-color: var(--sc-ink-soft); } }
.demos__select:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.demos__panels { display: grid; }
.demo { display: grid; gap: var(--sc-4); min-width: 0; }
.demo[hidden] { display: none; }
.demo__title { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; font-stretch: 90%; letter-spacing: -0.02em; line-height: 1.15; }
/* The embed measures its own height: no overflow clipping and no fixed height here. */
.demo__embed { width: 100%; min-width: 0; }
.demo__embed iframe { display: block; }
.demo__placeholder { width: 100%; }
.demo__placeholder .placeholder__title { line-height: 1.2; text-wrap: balance; }
/* Booking prompt under a live demo; same copy as the /restaurants lander, industry-neutral. */
.demo__cta { max-width: 42rem; margin: var(--sc-6) auto 0; text-align: center; }
.demo__cta-title { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; font-stretch: 90%; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.demo__cta-note { margin: var(--sc-3) 0 0; font-size: var(--sc-t-base); line-height: 1.65; color: var(--sc-ink-soft); text-wrap: pretty; }
.demo__cta .demo__actions { margin-top: var(--sc-5); }
.demo__actions { margin-top: var(--sc-6); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sc-3) var(--sc-6); }
.demo.is-entering { animation: demo-in 240ms var(--sc-ease-out); }
@keyframes demo-in { from { opacity: 0; transform: translateY(6px); } }
:where(:root[data-motion="reduced"]) .demo.is-entering,
:where(:root[data-motion="reduced"]) .hero__arrow { animation: none; transition: none; }
@media (max-width: 860px) {
  .hero__actions { gap: var(--sc-2); }
  .demos__pick { width: 100%; }
  .demo__actions .cta { width: 100%; }
}

/* ------------------------------------------ centred layout (2026-09-23) */
/* User request: centre everything on the main site. Headings, intros, actions,
   the booking band, the demos picker, the expert and post cards, and the footer
   are centred. The header bar keeps its logo-left, links-right layout; the
   calculator's slider rows keep label-left, value-right so the numbers line up. */
.label, .label--lead { margin-inline: auto; text-align: center; }
.label .sub, .label .label__fact { margin-inline: auto; }

/* home */
.hero__actions { justify-content: center; }
.object--book .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; text-align: center; }
.object--book .book__action { display: flex; justify-content: center; }
.calc__fine { margin-inline: auto; text-align: center; }
.card--live { text-align: center; }
.card--live .card__out > div { text-align: left; }

/* demos */
.demos__pick { margin-inline: auto; text-align: center; }
.demos__select { text-align: center; text-align-last: center; padding-inline: 2.75rem; }
.demo__title { text-align: center; }

/* experts and blog index cards */
.expert__body { justify-items: center; text-align: center; }
.expert__head { flex-direction: column; align-items: center; gap: var(--sc-3); }
.post { justify-items: center; text-align: center; }

/* footer */
.plate__lines > div { justify-items: center; text-align: center; }
.plate__foot { flex-direction: column; justify-content: center; gap: var(--sc-4); }
.plate__note { text-align: center; }
.plate__legal { justify-content: center; }
.motion-setting { margin-inline: auto; }
@media (max-width: 860px) {
  .plate__foot { align-items: center; }
  .object--book .book__action { width: 100%; }
}

/* ------------------------------------------------ lamp hero (2026-09-23) */
/* A CSS port of the Aceternity "lamp" component (React + Tailwind + Framer Motion in the
   original): two conic cyan beams under a bright line, on slate-950. Same geometry and
   timing: the beams, bulb and line open from half to full width over 800 ms after 300 ms.
   It sits in a rounded panel, like the original's container, so the light header above
   keeps its place. Decorative layers are aria-hidden; reduced motion shows it lit. */
.object--hero { padding-top: clamp(0.75rem, 2vh, 1.5rem); padding-bottom: clamp(1.5rem, 5vh, 3.5rem); }
.lamp {
  --lamp-night: #020617;   /* slate-950 */
  --lamp-cyan: #06b6d4;    /* cyan-500 */
  --lamp-cyan-2: #22d3ee;  /* cyan-400 */
  --lamp-w: min(30rem, 46vw);
  position: relative; isolation: isolate; overflow: hidden;
  width: min(100% - 2 * clamp(0.75rem, 3vw, 2rem), 84rem); margin-inline: auto;
  border-radius: var(--sc-r-lg);
  background: var(--lamp-night);
  color: #e2e8f0;
}
.lamp__stage {
  position: absolute; inset: 0 0 auto; z-index: 0; height: 30rem;
  display: flex; align-items: center; justify-content: center;
  transform: scaleY(1.25); pointer-events: none;
}
.lamp__stage > * { position: absolute; }
.lamp__cone { height: 14rem; width: var(--lamp-w); overflow: visible; }
.lamp__cone--left { right: 50%; transform-origin: right center; background-image: conic-gradient(from 70deg at center top, var(--lamp-cyan), transparent, transparent); }
.lamp__cone--right { left: 50%; transform-origin: left center; background-image: conic-gradient(from 290deg at center top, transparent, transparent, var(--lamp-cyan)); }
.lamp__fade { position: absolute; bottom: 0; z-index: 20; background: var(--lamp-night); }
.lamp__fade--bottom { left: 0; width: 100%; height: 10rem; -webkit-mask-image: linear-gradient(to top, #fff, transparent); mask-image: linear-gradient(to top, #fff, transparent); }
.lamp__cone--left .lamp__fade--side { left: 0; width: 10rem; height: 100%; -webkit-mask-image: linear-gradient(to right, #fff, transparent); mask-image: linear-gradient(to right, #fff, transparent); }
.lamp__cone--right .lamp__fade--side { right: 0; width: 10rem; height: 100%; -webkit-mask-image: linear-gradient(to left, #fff, transparent); mask-image: linear-gradient(to left, #fff, transparent); }
.lamp__floor { top: 50%; width: 100%; height: 12rem; transform: translateY(3rem) scaleX(1.5); background: var(--lamp-night); filter: blur(40px); }
.lamp__haze { top: 50%; z-index: 50; width: 100%; height: 12rem; opacity: 0.1; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lamp__glow { z-index: 50; width: calc(var(--lamp-w) * 28 / 30); height: 9rem; transform: translateY(-50%); border-radius: 999px; background: var(--lamp-cyan); opacity: 0.5; filter: blur(64px); }
.lamp__bulb { z-index: 30; width: calc(var(--lamp-w) * 16 / 30); height: 9rem; transform: translateY(-6rem); border-radius: 999px; background: var(--lamp-cyan-2); filter: blur(40px); }
.lamp__line { z-index: 50; width: var(--lamp-w); height: 2px; transform: translateY(-7rem); background: var(--lamp-cyan-2); }
.lamp__cap { z-index: 40; width: 100%; height: 11rem; transform: translateY(-12.5rem); background: var(--lamp-night); }
.lamp__cone { animation: lamp-open 800ms cubic-bezier(0.42, 0, 0.58, 1) 300ms both; }
.lamp__bulb, .lamp__line { animation: lamp-widen 800ms cubic-bezier(0.42, 0, 0.58, 1) 300ms both; }
@keyframes lamp-open { from { scale: 0.5 1; opacity: 0.5; } }
@keyframes lamp-widen { from { scale: 0.5 1; } }
:where(:root[data-motion="reduced"]) .lamp__stage > * { animation: none; }
.lamp__content {
  position: relative; z-index: 60;
  display: grid; justify-items: center; gap: var(--sc-6);
  padding: 14.5rem clamp(1.25rem, 4vw, 3rem) clamp(3rem, 7vw, 4.5rem);  /* text sits under the light, not inside the glow */
  text-align: center;
}
.lamp .headline { color: #e2e8f0; }
.lamp .sub { color: #94a3b8; }
.lamp .hero__link { color: #e2e8f0; }
.lamp .hero__link:focus-visible, .lamp .cssbuttons-io:focus-visible { outline-color: var(--lamp-cyan-2); }
.lamp ::selection { background: #155e75; color: #fff; }
/* The booking button uses its dark-theme colours on the night panel, in either site theme. */
.lamp .cssbuttons-io { color: var(--lamp-night); }
.lamp .cssbuttons-io::before { background: #fff; }
@media (hover: hover) and (pointer: fine) { .lamp .cssbuttons-io:hover { color: #fff; } }
@media (max-width: 860px) {
  .lamp__content { padding-top: 12rem; gap: var(--sc-5); }
}