/* Roest v10 (opus). Tokens come from tokens.css (exported from DESIGN.md).
   This file maps them to two themes and builds the components.
   v8: near-square shapes (8px cards, 4-6px inner, 6px buttons, 2-4px tags), 1px hairlines.
   v10: the page background is flat navy / cream, nothing else. No background glow spots, no
   per-section backgrounds, no light fields. Light lives only at the edges of the glass boxes
   (a static box-shadow halo behind each box) and on the footer's top hairline. */

/* ── Themes ─────────────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--color-navy);
  --surface: var(--color-navy-surface);
  --raised: var(--color-navy-raised);
  --well: var(--color-navy);
  --ink: var(--color-on-navy);
  --muted: var(--color-on-navy-muted);
  --gold: var(--color-primary);
  --gold-ink: var(--color-primary);
  --err: var(--color-error);
  --edge: rgb(255 255 255 / 0.06);
  --line: rgb(255 255 255 / 0.1);
  --line-2: rgb(255 255 255 / 0.17);
  --stage: var(--color-navy-surface);
  --chip: var(--color-navy-raised);
  --bar-bg: rgb(29 45 66 / 0.97);          /* scrolled header bar: navy surface, near-opaque */
  --bar-edge: rgb(255 255 255 / 0.11);
  --bar-shadow: 0 12px 32px -14px rgb(5 10 20 / 0.7);
  --pop: 0 14px 32px -18px rgb(5 10 20 / 0.7);
  --item-shadow: 0 0 0 1px var(--line) inset;
  --field-edge: rgb(255 255 255 / 0.16);
  --logo-filter: none;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: var(--color-cream);
  --surface: var(--color-cream-surface);
  --raised: var(--color-cream);
  --well: var(--color-cream);
  --ink: var(--color-on-cream);
  --muted: var(--color-on-cream-muted);
  --gold: var(--color-primary);
  /* DESIGN.md: no gold text in light mode. Anything that is gold text in dark mode is navy here. */
  --gold-ink: var(--color-on-cream);
  --err: var(--color-error-light);
  --edge: rgb(25 37 55 / 0.06);
  --line: rgb(25 37 55 / 0.12);
  --line-2: rgb(25 37 55 / 0.2);
  --stage: var(--color-cream-surface);
  --chip: var(--color-cream);
  --bar-bg: rgb(255 253 250 / 0.97);       /* scrolled header bar: cream lifted toward white */
  --bar-edge: rgb(25 37 55 / 0.11);
  --bar-shadow: 0 12px 30px -16px rgb(25 37 55 / 0.24);
  --pop: 0 14px 32px -20px rgb(25 37 55 / 0.3);
  --item-shadow: 0 0 0 1px var(--line) inset;
  --field-edge: rgb(25 37 55 / 0.22);
  /* Logo stays the logo gold on cream (a shape, not text); a soft navy shadow keeps the thin line readable. */
  --logo-filter: drop-shadow(0 0 0.5px rgb(25 37 55 / 0.55));
}

/* ── Base ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--bg);
  transition: background-color 0.4s ease;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 112px; /* below the scrolled header bar (20 + 72 + room) */
}

body {
  margin: 0;
  /* The page colour comes from <html> (the canvas) only: one flat colour from top to bottom,
     so no element can ever introduce a background step between sections. */
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body-md);
  font-size: var(--text-body-md);
  font-weight: var(--font-weight-body-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100vh;
  transition: background-color 0.4s ease, color 0.4s ease;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  text-wrap: balance;
  font-optical-sizing: auto;
}

h1 {
  font-size: clamp(2.6rem, 0.9rem + 4vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: clamp(2rem, 1.2rem + 1.9vw, var(--text-h2));
  line-height: 1.1;
  letter-spacing: var(--tracking-h2);
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: var(--gold);
  color: var(--color-navy);
  text-decoration: none;
  font-weight: 500;
}
.skip:focus { top: 16px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:root {
  --wide: 1920px;                    /* header + footer container (full-width bars) */
  --side: clamp(20px, 3vw, 48px);
}
.wide {
  width: 100%;
  max-width: calc(var(--wide) + 2 * var(--side));
  margin-inline: auto;
  padding-inline: var(--side);
}

.wrap {
  width: 100%;
  max-width: calc(1240px + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
  --pad: clamp(20px, 4vw, 48px);
}

.section { padding-block: clamp(96px, 10vw, var(--spacing-section)) 0; }
.section:last-of-type { padding-bottom: 0; }

.head {
  max-width: 46rem;
  margin: 0 auto var(--spacing-lg);
  text-align: center;
}
.head p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 1.125rem;
}

.muted { color: var(--muted); }

/* ── Button: gold, 6px corners, navy label; light sweep + rolling label + dot turns to a diamond on hover ── */
.btn {
  --h: 50px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h);
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-navy);
  font-family: var(--font-label);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 0.35s ease, transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.55) 48%, transparent 66%);
  transform: translateX(-110%);
  transition: transform 0.75s cubic-bezier(.2,.8,.2,1);
}
.btn__roll {
  position: relative;
  display: block;
  height: 1.2em;
  line-height: 1.2em;
  overflow: hidden;
}
.btn__roll > span {
  display: block;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}
.btn__roll > span + span { position: absolute; inset: 0; transform: translateY(110%); }
.btn__dot {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--color-navy);
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}
.btn:hover,
.btn:focus-visible {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateX(110%); }
.btn:hover .btn__roll > span:first-child,
.btn:focus-visible .btn__roll > span:first-child { transform: translateY(-110%); }
.btn:hover .btn__roll > span + span,
.btn:focus-visible .btn__roll > span + span { transform: translateY(0); }
.btn:hover .btn__dot,
.btn:focus-visible .btn__dot { transform: rotate(45deg) scale(1.3); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline-color: var(--ink); }
.btn--s { --h: 40px; padding: 0 18px; font-size: 0.9375rem; }

.more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-ink);
  font-weight: 500;
  text-decoration: none;
}
.more svg { width: 18px; height: 18px; transition: transform 0.35s cubic-bezier(.2,.8,.2,1); }

/* ── Header: two states (v10, like bct.dk) ───────────────────────────────
   Top of the page: full viewport width, transparent, no panel (as v8/v9).
   After the first scroll: an inset solid bar drops into place, detached from the viewport edges
   (gap on top, sides on the wide container edge), page-coloured, 1px hairline, soft shadow, 8px.
   The bar surface is its own element (.top__surface) that only fades and slides (opacity +
   transform). The contents only translate: down by the gap, and the two outer groups inward so
   they sit inside the bar. Nothing in the header changes size, and the header is fixed, so page
   content never moves. --vw is the layout viewport width (set by js/site.js, no scrollbar). */
.top {
  --bar-h: 72px;
  --bar-gap: 20px;
  --bar-pad: 24px;                                         /* bar edge → content */
  --bar-inset: clamp(16px, 3.5vw, 64px);                   /* ~60px at 1700 wide */
  --x0: max(var(--side), (var(--vw, 100vw) - var(--wide)) / 2);   /* content edge at the top */
  --xb: max(var(--bar-inset), var(--x0) - var(--bar-pad)); /* bar edge once scrolled */
  --dx: calc(var(--xb) + var(--bar-pad) - var(--x0));      /* how far each side moves in */
  --ease-drop: cubic-bezier(.2, .8, .2, 1);
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  pointer-events: none;   /* the empty strip around the bar never blocks the page */
}
.top__bar,
.drawer { pointer-events: auto; }
.top__surface {
  position: absolute;
  top: var(--bar-gap);
  left: var(--xb);
  right: var(--xb);
  height: var(--bar-h);
  border: 1px solid var(--bar-edge);
  border-radius: var(--radius-lg);
  background: var(--bar-bg);
  box-shadow: var(--bar-shadow);
  opacity: 0;
  transform: translateY(-16px) scaleX(1.025);
  transition: opacity 0.3s ease-out, transform 0.35s var(--ease-drop);
  pointer-events: none;
}
.top__bar,
.top__bar > .logo,
.top__bar > .top__end { transition: transform 0.35s var(--ease-drop); }
.top.no-anim .top__surface,
.top.no-anim .top__bar,
.top.no-anim .top__bar > * { transition: none !important; }
.top.is-scrolled .top__surface,
.top.is-open .top__surface { opacity: 1; transform: none; }
.top.is-scrolled .top__bar,
.top.is-open .top__bar { transform: translateY(var(--bar-gap)); }
.top.is-scrolled .top__bar > .logo,
.top.is-open .top__bar > .logo { transform: translateX(var(--dx)); }
.top.is-scrolled .top__bar > .top__end,
.top.is-open .top__bar > .top__end { transform: translateX(calc(-1 * var(--dx))); }
.top__bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: var(--bar-h);
}
.logo {
  display: block;
  justify-self: start;
  border-radius: var(--radius-sm);
}
.logo img {
  height: 56px;
  width: auto;
  filter: var(--logo-filter);
}
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.top__end {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 6px;
}
.nav__link,
.uc__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--font-weight-label);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.nav__link:hover,
.uc__btn:hover,
.uc.is-open .uc__btn { background: var(--edge); }
.uc__btn svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
.uc.is-open .uc__btn svg { transform: rotate(180deg); }

.uc { position: relative; }
.uc__menu {
  position: absolute;
  top: calc(100% + 26px); /* v10: clears the scrolled bar (18px to its bottom edge) + 8px */
  left: 50%;
  width: 340px;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--pop);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.uc__menu::before { content: ""; position: absolute; inset: -30px 0 auto; height: 30px; } /* hover bridge */
.uc.is-open .uc__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.uc__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.uc__item:hover,
.uc__item:focus-visible { background: var(--edge); }
.uc__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--well);
  box-shadow: 0 0 0 1px var(--line) inset;
  color: var(--gold-ink);
}
.uc__icon svg { width: 18px; height: 18px; }
.uc__item strong { display: block; font-weight: 500; font-size: 0.9375rem; line-height: 1.35; }
.uc__item span span { display: block; color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }

.mode {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: 0 0 0 1px var(--line) inset;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.mode:hover { background: var(--edge); }
.mode svg { width: 18px; height: 18px; transition: transform 0.5s cubic-bezier(.2,.8,.2,1); }
.mode:hover svg { transform: rotate(-20deg); }
[data-theme="dark"] .mode .i-moon,
[data-theme="light"] .mode .i-sun { display: none; }

.top__cta { margin-left: 4px; }
.burger { display: none; }
.drawer { display: none; }

@media (max-width: 1024px) {
  .top__bar { grid-template-columns: auto 1fr; }
  .nav { display: none; }
  .top__end { gap: 8px; }
  .burger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    box-shadow: 0 0 0 1px var(--line-2) inset;
    cursor: pointer;
  }
  .burger span { position: relative; display: block; width: 16px; height: 1.5px; background: currentColor; transition: background-color 0.2s ease; }
  .burger span::before,
  .burger span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor; transition: transform 0.3s ease; }
  .burger span::before { transform: translateY(-5px); }
  .burger span::after { transform: translateY(5px); }
  .burger[aria-expanded="true"] span { background: transparent; }
  .burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
  .burger[aria-expanded="true"] span::after { transform: rotate(-45deg); }

  /* v10: the menu is a panel under the bar with the same inset edges (opening it also shows the
     bar), so it reads as one piece with the header in both states. */
  .drawer {
    position: absolute;
    top: calc(var(--bar-gap) + var(--bar-h) + 8px);
    left: var(--xb);
    right: var(--xb);
    display: block;
    max-height: calc(100svh - var(--bar-gap) - var(--bar-h) - 20px);
    overflow-y: auto;
    padding: 8px calc(var(--bar-pad) - 1px) var(--bar-pad); /* v11: boxes inset like the X in the bar */
    border: 1px solid var(--bar-edge);
    border-radius: var(--radius-lg);
    background: var(--bar-bg);
    box-shadow: var(--bar-shadow);
    animation: drawerIn 0.3s var(--ease-drop);
  }
  .drawer[hidden] { display: none; }
  .drawer__label { padding: 10px 12px 4px; color: var(--muted); font-size: var(--text-label); }
  .drawer .nav__link { width: 100%; height: 44px; font-size: 1rem; }
  .drawer__row { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-top: 6px; padding: 6px 0 0 12px; border-top: 1px solid var(--line); }
  .drawer .uc__btn,
  .drawer .mode { height: 44px; min-width: 44px; }
  .drawer .lng__item { min-height: 44px; }
}
@keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } }

/* 1025-1240: the full nav is tight, so the bar grows outward instead of the contents moving in
   (12px bar padding, contents stay where they were at the top: dx = 0). */
@media (max-width: 1240px) {
  .top { --bar-pad: 12px; --bar-inset: 16px; }
}
@media (max-width: 1024px) {
  .top { --bar-pad: 16px; }
  .top__cta { --h: 44px; }
}
@media (max-width: 640px) {
  .top { --bar-h: 64px; --bar-gap: 12px; --bar-pad: 12px; --bar-inset: 12px; }
  .top__bar { gap: 8px; }
  .logo img { height: 46px; }
  .top__cta { padding: 0 14px; font-size: 0.875rem; }
  .top__cta .btn__dot { display: none; }
}
@media (max-width: 380px) {
  .top__cta { padding: 0 10px; font-size: 0.8125rem; } /* v11: longer DA/NO CTA keeps the logo full size */
}
@media (max-width: 359px) {
  .top__cta { padding: 0 10px; font-size: 0.8125rem; }
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: max(640px, 100svh);
  padding: 120px 0 72px;
  overflow: hidden;
  isolation: isolate;
}
/* v10: the --glow light field behind the hero is gone. The page-coloured veil that keeps the
   headline clear of the orbit lines now lives inside the orbit art (.o1__veil, js/hero.js),
   and the hero no longer fades to the page colour at its bottom: there is nothing to fade. */
.hero__inner {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 24px;
}
.hero h1 { max-width: 11.5em; }
/* v11: accent words in the headline. Dark: brand gold. Light: DESIGN.md allows no gold text, so they stay navy. */
.hero h1 .accent { color: var(--gold-ink); }
/* Light: navy text on a gold highlighter band behind the whole word (gold as fill only). */
[data-theme="light"] .hero h1 .accent {
  padding: 0 0.08em;
  margin: 0 -0.08em;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--color-primary) 60%, transparent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero__sub {
  max-width: 32rem;
  color: var(--muted);
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.3rem);
  line-height: 1.5;
}
.hero .btn { margin-top: 8px; }

/* Use-case page hero: same field, calmer and shorter */
.hero--page { min-height: max(560px, 78svh); padding-top: 140px; }
.hero--page h1 { max-width: 13em; font-size: clamp(2.4rem, 0.9rem + 3.4vw, 4.75rem); }

/* ── Problem / why AI ────────────────────────────────────────────────── */
.why {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 24px;
}
.why h2 { max-width: 15em; }
.why > p { max-width: 36rem; color: var(--muted); font-size: 1.125rem; }
.chores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 24px;
  max-width: 50rem;
}
@media (max-width: 640px) { .chores { grid-template-columns: 1fr; } }
.chore {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 16px 0 10px;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: var(--item-shadow);
  font-size: 0.9375rem;
  transition: background-color 0.6s ease;
}
.chore__tick {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: 0 0 0 1px var(--line-2) inset;
  color: var(--color-navy);
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}
.chore__tick svg { width: 16px; height: 16px; opacity: 0; transform: scale(0.4); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.3,1.6,.5,1); }
.chore__state {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.8125rem;
  transition: color 0.4s ease;
}
.chore__state b { font-weight: 500; }
.chore__state .s-ai { display: none; color: var(--gold-ink); }
.chore.is-done .chore__tick { background: var(--gold); box-shadow: none; }
.chore.is-done .chore__tick svg { opacity: 1; transform: scale(1); }
.chore.is-done .s-hand { display: none; }
.chore.is-done .s-ai { display: inline; }

/* ── Use-case tiles: stacked one by one, full width ──────────────────── */
.tiles { display: grid; gap: 20px; }
.tile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.3s ease;
}
.tile:hover { border-color: var(--glass-edge-2); } /* v9: no lift, the tile is glass (never animate a blurred box) */
.tile:hover .more svg { transform: translateX(5px); }
.tile:focus-visible { outline-offset: 4px; border-radius: var(--radius-lg); }
.tile__text { display: grid; gap: 16px; justify-items: start; padding-left: clamp(0px, 1vw, 16px); }
.tile__text h3 { font-size: clamp(1.75rem, 1.2rem + 1vw, 2.25rem); line-height: 1.05; letter-spacing: -0.025em; }
.tile__text > p { color: var(--muted); font-size: 1.0625rem; max-width: 26rem; }
.tile__stage {
  position: relative;
  min-height: 380px;
  display: grid;
  place-items: center;
  padding: clamp(18px, 2.4vw, 32px);
  border-radius: var(--radius-md);
  background: var(--stage);
  box-shadow: var(--item-shadow);
  overflow: hidden;
}

/* Placeholder stat */
.stat { display: grid; gap: 4px; justify-items: start; }
.stat__num {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold-ink);
}
.stat__label { color: var(--muted); font-size: 0.9375rem; line-height: 1.4; }
.ph {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  box-shadow: 0 0 0 1px currentColor inset;
  color: var(--gold-ink);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  opacity: 0.9;
}

/* ── Demo: lead follow-up chat ──────────────────────────────────────── */
.chat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 460px;
  min-height: 320px;
  justify-content: center;
  transition: transform 0.7s cubic-bezier(.3,.7,.2,1); /* v10: the conversation moves up as it grows */
}
.bubble {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 0.9875rem;
  line-height: 1.45;
}
.bubble--in {
  align-self: flex-start;
  border-bottom-left-radius: var(--radius-xs);
  background: var(--chip);
  box-shadow: var(--item-shadow);
}
.bubble--out {
  align-self: flex-end;
  border-bottom-right-radius: var(--radius-xs);
  background: var(--gold);
  color: var(--color-navy);
}
/* A reply and the typing dots before it share one grid cell: the cell is always the reply's
   size, so the dots never add height and the chat never grows or shifts during the loop. */
.say { display: grid; justify-items: end; align-items: start; }
.say > * { grid-area: 1 / 1; }
.say .bubble { max-width: 82%; }
.typing {
  display: inline-flex;
  gap: 5px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--gold) 30%, transparent);
}
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-ink); }
.typing.is-on i { animation: blink 1s infinite ease-in-out; } /* only while shown: hidden dots must not keep ticking */
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.booked {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: var(--radius-md);
  background: var(--chip);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent) inset;
  font-weight: 500;
}
.booked span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--gold); color: var(--color-navy); }
.booked svg { width: 16px; height: 16px; }
.cap {
  position: absolute;
  right: 18px;
  bottom: 14px;
  color: var(--muted);
  font-size: 0.75rem;
}

/* Sequenced demos: hidden until played. Without JS (or reduced motion) everything shows. */
.js [data-step] {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.js [data-step].is-on { opacity: 1; transform: none; }
.typing:not(.is-on) { visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
.js .typing.is-on { visibility: visible; }
html:not(.js) .typing { display: none; }
.js .chat.is-fading [data-step] { opacity: 0; transition-duration: 0.6s; }

/* ── Demo: consulting walkthrough (call → plan → build) ──────────────── */
.walk {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 720px;
}
.walk__rail {
  position: absolute;
  top: 31px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  border-radius: 1px;
  background: var(--line-2);
}
.walk__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--gold);
  transition: width 0.9s cubic-bezier(.6,0,.3,1);
}
.walk__step { position: relative; display: grid; justify-items: center; gap: 14px; }
.walk__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--chip);
  color: var(--muted);
  box-shadow: 0 0 0 1px var(--line) inset, 0 0 0 6px var(--stage);
  transition: background-color 0.5s ease, color 0.5s ease;
}
.walk__node svg { width: 26px; height: 26px; }
.walk__step.is-on .walk__node { background: var(--gold); color: var(--color-navy); box-shadow: 0 0 0 6px var(--stage); }
.walk__step.is-now .walk__node::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 2px var(--gold);
  animation: ring 1.8s ease-out infinite;
}
@keyframes ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
.walk__name { font-weight: 500; }
.walk__card {
  width: 100%;
  min-height: 168px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--chip);
  box-shadow: var(--item-shadow);
  font-size: 0.875rem;
  opacity: 0.35;
  transition: opacity 0.5s ease;
}
.walk__step.is-on .walk__card { opacity: 1; }
.walk__clock { font-family: var(--font-display); font-size: 2rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.walk__card .muted { margin-top: 8px; line-height: 1.4; }
.walk__list { display: grid; gap: 8px; }
.walk__list li { display: flex; align-items: center; gap: 8px; line-height: 1.3; transition: opacity 0.4s ease; }
.walk__list li::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  box-shadow: 0 0 0 1.5px var(--muted) inset;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.walk__list li.is-pick::before { background: var(--gold); box-shadow: 0 0 0 1.5px var(--gold) inset; }
.walk__list li.is-skip { opacity: 0.45; }
.walk__bar { height: 6px; margin: 14px 0 12px; border-radius: var(--radius-xs); background: var(--line); overflow: hidden; }
.walk__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--gold); transition: width 2.2s cubic-bezier(.4,0,.2,1); }
.walk__live { display: inline-flex; align-items: center; gap: 8px; opacity: 0; transition: opacity 0.4s ease; color: var(--gold-ink); font-weight: 500; }
.walk__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 30%, transparent); }
.walk__live.is-on { opacity: 1; }

/* ── Demo: Roest Ops board ───────────────────────────────────────────── */
.board {
  width: 100%;
  max-width: 760px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--bg);
  box-shadow: var(--item-shadow);
}
.board__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 14px; font-size: 0.875rem; }
.board__top b { font-weight: 500; }
.board__live { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.board__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.board__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.col { min-height: 250px; padding: 8px; border-radius: var(--radius-sm); background: var(--stage); }
.col__name { display: flex; justify-content: space-between; padding: 2px 4px 10px; color: var(--muted); font-size: 0.8125rem; }
.col__list { display: grid; gap: 6px; align-content: start; }
/* Every card has the same fixed height (two lines max), so a column's height depends only on
   how many cards it holds, which the loop keeps constant: the board never resizes. */
.card {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--chip);
  box-shadow: var(--item-shadow);
  font-size: 0.8125rem;
  line-height: 1.3;
  overflow: hidden;
  will-change: transform;
}
.who {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem; /* v10: 12px floor for any text in a demo (was 11px) */
  font-weight: 600;
  background: var(--edge);
  color: var(--ink);
}
.who--agent { background: var(--gold); color: var(--color-navy); }
.who--lead { background: transparent; box-shadow: 0 0 0 1.5px var(--gold) inset; color: var(--gold-ink); }
.col--done .card { opacity: 0.75; }
.col--run .card { box-shadow: var(--item-shadow), 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent) inset; }
.board__key { display: flex; flex-wrap: wrap; gap: 16px; padding: 14px 6px 2px; color: var(--muted); font-size: 0.75rem; }
.board__key span { display: inline-flex; align-items: center; gap: 6px; }
.board__key .who { width: 12px; height: 12px; border-radius: var(--radius-xs); font-size: 0; }

/* ── How it works: click-through ─────────────────────────────────────── */
.tour {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.tour__tabs { display: grid; gap: 8px; }
.tour__tab {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px 16px;
  align-items: center;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  box-shadow: 0 0 0 1px transparent inset;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.tour__tab:hover { background: var(--edge); }
.tour__tab[aria-selected="true"] { background: var(--stage); box-shadow: 0 0 0 1px var(--line) inset; }
.tour__dot {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: 0 0 0 1px var(--line-2) inset;
  color: var(--muted);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tour__dot svg { width: 18px; height: 18px; }
.tour__tab[aria-selected="true"] .tour__dot { background: var(--gold); color: var(--color-navy); box-shadow: none; }
.tour__tab strong { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.tour__tab span.t { color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
.tour__tab .tour__time {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: transparent;
  overflow: hidden;
}
.tour__tab .tour__time::after { content: ""; display: block; height: 100%; width: 0; background: var(--gold); }
.tour.is-auto .tour__tab[aria-selected="true"] .tour__time::after { animation: fill var(--auto, 6s) linear forwards; }
@keyframes fill { to { width: 100%; } }

.tour__stage {
  position: relative;
  min-height: 400px;
  border-radius: var(--radius-lg);
  background: var(--stage);
  box-shadow: var(--item-shadow);
  overflow: hidden;
}
.tour__pane {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 40px;
  animation: paneIn 0.6s cubic-bezier(.2,.8,.2,1);
}
.tour__pane[hidden] { display: none; }
@keyframes paneIn { from { opacity: 0; transform: translateY(12px); } }

.call { display: grid; justify-items: center; gap: 14px; text-align: center; width: 100%; max-width: 440px; }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 10px; }
.slot { display: grid; place-items: center; height: 42px; border-radius: var(--radius-sm); background: var(--chip); box-shadow: var(--item-shadow); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.slot--on { background: var(--gold) !important; color: var(--color-navy); font-weight: 500; }
.duo-av { display: flex; justify-content: center; }
.duo-av span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--raised); box-shadow: 0 0 0 3px var(--surface); font-weight: 600; font-size: 0.875rem; }
.duo-av span + span { margin-left: -8px; }
[data-theme="light"] .duo-av span { background: var(--bg); }
.call__ring { position: relative; display: grid; place-items: center; width: 104px; height: 104px; }
.call__ring::before,
.call__ring::after { content: ""; position: absolute; inset: 8px; border-radius: var(--radius-lg); box-shadow: 0 0 0 1.5px var(--gold); opacity: 0; animation: ring 2.4s ease-out infinite; }
.call__ring::after { animation-delay: 1.2s; }
.call__ring span { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-lg); background: var(--gold); color: var(--color-navy); }
.call__ring svg { width: 30px; height: 30px; }
.call strong { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; line-height: 1.1; }

.hub { position: relative; width: 100%; max-width: 460px; aspect-ratio: 46 / 30; }
.hub svg.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub__lines path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 6; animation: dash 1.6s linear infinite; opacity: 0.7; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.hub__core,
.hub__tool { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: var(--radius-sm); white-space: nowrap; }
.hub__core { left: 50%; top: 50%; width: 76px; height: 76px; border-radius: var(--radius-lg); background: var(--gold); color: var(--color-navy); font-family: var(--font-display); font-size: 1.25rem; }
.hub__tool { height: 40px; padding: 0 16px; background: var(--chip); box-shadow: var(--item-shadow); font-size: 0.875rem; }

.rows { display: grid; gap: 10px; width: 100%; max-width: 440px; }
.row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--chip); box-shadow: var(--item-shadow); font-size: 0.9375rem; }
.row__what { flex: 1; }
.state { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 500; }
.state--done { background: var(--gold); color: var(--color-navy); }
.state--soon { box-shadow: 0 0 0 1px var(--muted) inset; color: var(--muted); }
.state svg { width: 14px; height: 14px; }

/* ── Just the two of us ──────────────────────────────────────────────── */
.duo {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: clamp(56px, 7vw, 104px) clamp(24px, 5vw, 80px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: transparent;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.duo__dots { display: flex; gap: 18px; }
.duo__dots i { width: 12px; height: 12px; border-radius: var(--radius-xs); background: var(--gold); animation: bob 4s ease-in-out infinite; }
.duo__dots i + i { animation-delay: -2s; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.duo h2 { max-width: 17em; }
.duo p { color: var(--muted); font-size: 1.125rem; }
.duo .btn { margin-top: 10px; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.qa { display: grid; border-top: 1px solid var(--line); }
.qa > li { border-bottom: 1px solid var(--line); }
.qa details { transition: background-color 0.3s ease; }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 4px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary i {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: 0 0 0 1px var(--line-2) inset;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), background-color 0.3s ease, box-shadow 0.3s ease;
}
.qa summary i::before,
.qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: var(--ink); }
.qa summary i::after { transform: rotate(90deg); transition: transform 0.4s ease; }
.qa details[open] summary i { background: var(--gold); box-shadow: none; transform: rotate(180deg); }
.qa details[open] summary i::before,
.qa details[open] summary i::after { background: var(--color-navy); }
.qa details[open] summary i::after { transform: rotate(0deg); }
.qa details p { padding: 0 4px 26px; max-width: 52rem; color: var(--muted); font-size: 1.0625rem; }

/* ── Contact ─────────────────────────────────────────────────────────── */
.contact { max-width: 840px; margin-inline: auto; }
.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: transparent;
}
.field { display: grid; gap: 8px; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--text-label); font-weight: var(--font-weight-label); }
.field label span { color: var(--gold-ink); margin-left: 2px; }
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--stage);
  box-shadow: 0 0 0 1px var(--field-edge) inset;
  font-size: 1rem;
  transition: box-shadow 0.25s ease;
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.field input:focus,
.field textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--gold) inset; }
.field [aria-invalid="true"] { box-shadow: 0 0 0 2px var(--err) inset; }
[data-theme="light"] .field [aria-invalid="true"] { box-shadow: 0 0 0 2px #a3472f inset; }
.form__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.form__help { color: var(--muted); font-size: 0.9375rem; min-height: 1.4em; }
.form__help.is-err { color: var(--err); }
.sent {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(36px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: transparent;
  text-align: center;
}
.sent[hidden] { display: none; }
.sent__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--gold); color: var(--color-navy); }
.sent__icon svg { width: 28px; height: 28px; }
.sent p { max-width: 30rem; color: var(--muted); }
.sent a { color: var(--gold-ink); }
.sent__alt { font-size: 0.9375rem; }
.mails { margin-top: 24px; text-align: center; color: var(--muted); }
.mails a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ── Use-case page blocks ────────────────────────────────────────────── */
.stage-xl {
  display: grid;
  place-items: center;
  min-height: 440px;
  padding: clamp(24px, 4vw, 56px);
  border-radius: var(--radius-lg);
  background: var(--stage);
  box-shadow: var(--item-shadow);
  position: relative;
  overflow: hidden;
}
.stage-xl .chat { max-width: 540px; }
.stage-xl .walk { max-width: 880px; }
.stage-xl .board { max-width: 920px; }
.plain { max-width: 46rem; margin-inline: auto; text-align: center; display: grid; gap: 20px; }
.plain p { color: var(--muted); font-size: 1.1875rem; line-height: 1.65; }
.plain p strong { color: var(--ink); font-weight: 500; }
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.stats .stat {
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding: 36px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: transparent;
}
.stats .stat__num { flex-direction: column; gap: 14px; font-size: clamp(2.75rem, 2rem + 1.6vw, 3.75rem); }
.stats .stat__num .ph { order: -1; }
.stats .stat__label { max-width: 16rem; font-size: 1rem; }
.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.flow li {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: transparent;
}
.flow__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--gold); color: var(--color-navy); margin-bottom: 6px; }
.flow__icon svg { width: 22px; height: 22px; }
.flow p { color: var(--muted); }
.cta-band {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: clamp(56px, 7vw, 96px) 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: transparent;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-band h2 { max-width: 16em; }
.cta-band p { color: var(--muted); }

/* Legal pages */
.legal { max-width: 46rem; margin-inline: auto; padding-top: 160px; }
.legal h1 { font-size: clamp(2rem, 1.1rem + 3.2vw, 3.75rem); overflow-wrap: break-word; } /* v10: "Personvernerklæring" fits at 360 */
.draft { display: inline-flex; align-items: center; height: 26px; margin-bottom: 20px; padding: 0 8px; border-radius: var(--radius-xs); box-shadow: 0 0 0 1px var(--gold) inset; color: var(--gold-ink); font-size: var(--text-label); font-weight: 500; }
.legal h2 { margin-top: 48px; font-size: 1.625rem; letter-spacing: -0.01em; }
.legal p, .legal li { margin-top: 12px; color: var(--muted); }
.legal li { padding-left: 18px; position: relative; }
.legal li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.legal address { font-style: normal; margin-top: 12px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); line-height: 1.7; }
.legal a { color: var(--gold-ink); }

/* ── Footer: full viewport width glass band (v9), one hairline on top, same container as the header ── */
.foot {
  margin-top: clamp(64px, 8vw, 120px);
  border-top: 1px solid var(--glass-edge);
  background: var(--glass-band);
  /* v10: blur only, no saturate: saturate(135%) over the flat navy pushed the band 9 levels off the
     page colour, which read as a second background. Now the band sits within 3-4 levels. */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--glass-hi) inset;
}
.foot__in { padding-block: clamp(40px, 4.5vw, 64px) 24px; }
.foot__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; flex-wrap: wrap; }
.foot__logo { display: block; border-radius: var(--radius-sm); }
.foot__logo img { height: 80px; width: auto; filter: var(--logo-filter); }
.foot__cols { display: flex; gap: clamp(32px, 6vw, 112px); flex-wrap: wrap; }
.foot__cols p { margin-bottom: 14px; color: var(--ink); font-size: var(--text-label); font-weight: 500; }
.foot__cols li + li { margin-top: 10px; }
.foot__cols a { color: var(--muted); font-size: 0.9375rem; text-decoration: none; transition: color 0.2s ease; }
.foot__cols a:hover { color: var(--ink); }
.foot__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8125rem; }

/* ── Language dropdown (same component as Use cases) ─────────────────── */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.flag {
  display: block;
  flex: none;
  width: 21px;
  height: 14px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgb(25 37 55 / 0.12);
}
[data-theme="dark"] .flag { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14); }
.flag svg { display: block; width: 100%; height: 100%; }
.lng__btn { gap: 8px; padding: 0 10px 0 12px; }
.uc--lang .uc__menu { left: auto; right: 0; width: 140px; transform: translateY(-4px); }
.uc--lang.is-open .uc__menu { transform: translateY(0); }
.lng__item { gap: 12px; padding: 10px 12px; font-weight: 500; font-size: 0.9375rem; }
.lng__item .flag { width: 24px; height: 16px; }
.drawer .uc--lang .uc__menu { top: auto; bottom: calc(100% + 8px); }

/* ── 360 product video demo (js/spin.js) ─────────────────────────────── */
.spin { position: relative; display: grid; justify-items: center; gap: 20px; width: 100%; }
.spin__view {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 560px;
  height: calc(360px * var(--s, 1));
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.spin[data-spin="page"] .spin__view { cursor: grab; }
.spin.is-drag .spin__view { cursor: grabbing; }
.spin__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(260px * var(--s, 1));
  height: calc(330px * var(--s, 1));
  border-radius: var(--radius-md);
  background: var(--raised);
  box-shadow: var(--item-shadow);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94) rotate(-2deg);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.2,.8,.2,1);
}
[data-theme="light"] .spin__frame { background: #fffdf9; }
.spin.is-photo .spin__frame { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
.spin__obj { position: relative; width: 260px; height: 330px; transform: scale(var(--s, 1)); }
.prod { position: absolute; left: 50%; bottom: 46px; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.prod__cap {
  width: 66px;
  height: 46px;
  border-radius: 12px 12px 6px 6px;
  background-color: #1d2d42;
  background-image:
    linear-gradient(90deg, rgb(5 10 20 / 0.6), rgb(255 255 255 / 0) 24%, rgb(255 255 255 / 0.2) 40%, rgb(255 255 255 / 0) 56%, rgb(5 10 20 / 0.6)),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.1) 0 2px, transparent 2px 6px);
}
.prod__neck { width: 46px; height: 14px; background: linear-gradient(90deg, #6f6250, #d4c4a6 40%, #8a7a62); }
.prod__body {
  position: relative;
  width: 150px;
  height: 200px;
  border-radius: 36px 36px 26px 26px;
  background: #b9a789;
  overflow: hidden;
  box-shadow: 0 18px 30px -18px rgb(5 10 20 / 0.55);
}
.prod__wrap { position: absolute; left: 0; right: 0; top: 25%; height: 52%; }
.prod__wrap i { position: absolute; left: 50%; top: 0; height: 100%; background-repeat: no-repeat; will-change: transform; }
.prod__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.18), transparent 14%, transparent 88%, rgb(25 37 55 / 0.25)),
    linear-gradient(90deg, rgb(25 37 55 / 0.55) 0%, rgb(25 37 55 / 0.12) 18%, rgb(255 255 255 / 0.32) 33%, rgb(255 255 255 / 0.04) 47%, rgb(25 37 55 / 0.06) 70%, rgb(25 37 55 / 0.6) 100%);
}
.spin__table {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 250px;
  height: 52px;
  margin-left: -125px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, var(--color-navy-raised), var(--color-navy-surface));
  box-shadow: 0 0 0 1px rgb(176 158 128 / 0.4) inset, 0 16px 30px -18px rgb(5 10 20 / 0.7);
  transition: opacity 0.5s ease;
}
[data-theme="light"] .spin__table { background: radial-gradient(ellipse at 50% 35%, #fffdf9, #e8dfcf); box-shadow: 0 0 0 1px rgb(176 158 128 / 0.6) inset, 0 16px 30px -18px rgb(25 37 55 / 0.4); }
.spin.is-photo .spin__table { opacity: 0; }
.spin__dots { position: absolute; left: 7%; right: 7%; top: 50%; height: 0; }
.spin__dots i { position: absolute; left: 50%; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--gold); }
.spin__badge {
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--chip);
  box-shadow: var(--item-shadow);
  font-size: 0.8125rem;
  font-weight: 500;
}
.spin__badge::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--muted); }
.spin:not(.is-photo) .spin__badge::before { background: var(--gold); }
.spin__badge b { display: none; font-weight: 500; }
.spin__badge b.is-on { display: inline; }
.spin__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--radius-md); background: var(--well); box-shadow: 0 0 0 1px var(--line) inset; }
.seg button {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--gold); color: var(--color-navy); }
.spin__drag { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.9375rem; }
.spin__drag { --track: var(--line-2); }
[data-theme="light"] .spin__drag { --track: rgb(25 37 55 / 0.14); }
/* v10: the input is a 44px tall touch target; the visible 4px track is drawn inside it */
.spin__drag input { -webkit-appearance: none; appearance: none; width: 180px; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.spin__drag input::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-xs); background: var(--track); }
.spin__drag input::-moz-range-track { height: 4px; border-radius: var(--radius-xs); background: var(--track); }
.spin__drag input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 22px; margin-top: -9px; border-radius: var(--radius-xs); background: var(--gold); }
.spin__drag input::-moz-range-thumb { width: 14px; height: 22px; border: 0; border-radius: var(--radius-xs); background: var(--gold); }
.spin__cap { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.8125rem; }
.stage-xl .spin { --s: 1.15; }
.stage-xl .spin__view { max-width: 640px; }
@media (max-width: 640px) {
  .stage-xl .spin { --s: 0.95; }
  .spin__drag input { width: 140px; }
}

/* ── Glass (v9, v10) ─────────────────────────────────────────────────
   DESIGN.md "Glass box": low-alpha tint of the page colour, backdrop blur, 1px light hairline,
   8px corners. Exactly on: the 4 use-case tiles on home (outer tile only; .tile__stage keeps its
   solid background), the founders card (.duo), the contact form box (.form and its sent state),
   the demo box around each use-case page demo (.showcase; .stage-xl inside keeps its background)
   and the footer band. Not on How it works (.tour) or the FAQ (.qa).
   v10: no light fields behind the glass any more (Nicolai: no spots, no seams). The glass reads
   as glass through its own edges: a clearer hairline, a brighter inner top highlight, a faint
   top-down sheen in the tint, and a soft halo just around the border (a static box-shadow that
   sits behind and outside the box: about 40px spread, low alpha, gold above, navy below).
   Box-shadows are never clipped (no ancestor of a glass box has overflow:hidden), so a halo can
   never end in a straight line. Perf: blur stays modest, nothing glassy animates. */
:root,
[data-theme="dark"] {
  --glass: rgb(29 45 66 / 0.46);              /* navy-surface, low alpha */
  --glass-sheen: rgb(255 255 255 / 0.035);    /* top of the box, fades out by 45% */
  --glass-band: rgb(29 45 66 / 0.3);          /* footer band: very light tint */
  --glass-edge: rgb(255 255 255 / 0.19);      /* v9 0.12 */
  --glass-edge-2: rgb(255 255 255 / 0.3);
  --glass-hi: rgb(255 255 255 / 0.16);        /* 1px top highlight, inset (v9 0.07) */
  --glass-blur: blur(12px) saturate(135%);
  --halo:
    0 -6px 40px -10px rgb(176 158 128 / 0.26),  /* gold, leaning up */
    0 14px 48px -12px rgb(92 128 176 / 0.32);   /* lighter brand navy, leaning down (no purple) */
  --foot-line: rgb(196 177 147 / 0.75);         /* footer top light: gold-hover tone */
  --foot-soft: rgb(176 158 128 / 0.32);
}
[data-theme="light"] {
  --glass: rgb(255 255 255 / 0.5);
  --glass-sheen: rgb(255 255 255 / 0.5);
  --glass-band: rgb(255 255 255 / 0.32);
  --glass-edge: rgb(25 37 55 / 0.16);         /* v9 0.12 */
  --glass-edge-2: rgb(25 37 55 / 0.26);
  --glass-hi: rgb(255 255 255 / 1);
  --glass-blur: blur(12px) saturate(135%);
  --halo:
    0 -6px 40px -10px rgb(176 158 128 / 0.34),
    0 14px 44px -14px rgb(25 37 55 / 0.16);
  --foot-line: rgb(176 158 128 / 0.9);
  --foot-soft: rgb(176 158 128 / 0.4);
}
.tile,
.duo,
.form,
.sent,
.showcase {
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--glass-sheen), transparent 45%), var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--halo);
}
/* Use-case pages: the demo box is a glass frame around the (unchanged) demo stage. */
.showcase { padding: clamp(12px, 2.2vw, 32px); } /* same rhythm as the home tile around its stage */

/* Footer light: only a soft line along its top hairline, brightest in the middle, fading out to
   both sides. A crisp 1px line plus a 6px soft copy of it, both static. Nothing else glows. */
.foot { position: relative; }
.foot::before,
.foot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.foot::before {
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, var(--foot-line) 50%, transparent 96%);
}
.foot::after {
  top: -3px;
  height: 5px;
  background: linear-gradient(90deg, transparent 14%, var(--foot-soft) 50%, transparent 86%);
  -webkit-mask: linear-gradient(180deg, transparent, #000 50%, transparent);
  mask: linear-gradient(180deg, transparent, #000 50%, transparent);
}

/* ── Touch sizes (v10 mobile pass): every tap target >= 44px up to tablet width ── */
@media (max-width: 1024px) {
  .foot__cols li + li { margin-top: 0; }
  .foot__cols a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .foot__cols p { margin-bottom: 4px; }
  .seg button { height: 44px; }
}
@media (max-width: 520px) {
  .form [type="submit"] { width: 100%; justify-content: center; }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .tile { grid-template-columns: 1fr; }
  .tile__text { padding-left: 0; }
  .tour { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tile__stage { min-height: 0; padding: 18px 12px; }
  .walk { grid-template-columns: 1fr; gap: 12px; }
  .walk__rail { top: 0; bottom: 0; left: 32px; right: auto; width: 4px; height: auto; }
  .walk__fill { inset: 0 0 auto 0; width: 100% !important; height: var(--h, 0%); transition: height 0.9s cubic-bezier(.6,0,.3,1); }
  .walk__step { grid-template-columns: 66px 1fr; justify-items: start; align-items: start; column-gap: 14px; row-gap: 0; }
  .walk__name { grid-column: 2; grid-row: 1; padding-top: 4px; }
  .walk__node { grid-row: 1 / span 2; }
  .walk__card { grid-column: 2; min-height: 0; margin-top: 6px; }
  /* Phones: the board shows Running and Done only; new work still flows in from the hidden To do column. */
  .board { padding: 12px; }
  .board__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .board .col:first-child { display: none; }
  .col { padding: 8px; min-height: 0; }
  .card { padding: 10px 8px; gap: 8px; font-size: 0.8125rem; }
  .form { grid-template-columns: 1fr; }
  .tour__stage { min-height: 360px; }
  .tour__pane { padding: 24px; }
  .stage-xl { min-height: 0; padding: 20px 12px; }
  .qa summary { padding: 20px 2px; }
  .qa details p { padding: 0 2px 22px; }
  .foot__logo img { height: 64px; }
}

/* ── v11: mobile header + menu fixes ─────────────────────────────────── */
/* Icons sit dead centre in their boxes on every engine: iOS Safari gives <button> a 1px 6px UA
   padding and rounds the old 1.5px bars unevenly, so the glyphs are pinned absolutely instead. */
.mode, .burger { position: relative; padding: 0; -webkit-appearance: none; appearance: none; line-height: 0; }
.mode svg { position: absolute; inset: 0; margin: auto; }
@media (max-width: 1024px) {
  .burger span { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 1px; }
  .burger span::before,
  .burger span::after { top: 0; left: 0; width: 18px; height: 2px; border-radius: 1px; }
  .burger span::before { transform: translateY(-6px); }
  .burger span::after { transform: translateY(6px); }

  /* Menu: Use cases, How it works and Contact are equal titles. Use cases opens its four pages
     in place; the other titles fold away so the sub-pages get the focus. */
  .drawer .dsub__btn { justify-content: space-between; padding-right: 0; text-align: left; }
  .dsub__chev {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 1px var(--line) inset;
    transition: background-color 0.2s ease;
  }
  .dsub__chev svg { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; transition: transform 0.4s cubic-bezier(.2,.8,.2,1); }
  .dsub__btn[aria-expanded="true"] .dsub__chev { background: var(--edge); }
  .dsub__btn[aria-expanded="true"] .dsub__chev svg { transform: rotate(180deg); }
  .dsub, .dmain {
    display: grid;
    transition: grid-template-rows 0.42s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease, visibility 0s linear 0s;
  }
  .dsub__in, .dmain__in { min-height: 0; overflow: hidden; }
  .dsub { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition-property: grid-template-rows, opacity, visibility; transition-delay: 0s, 0s, 0.42s; }
  .dmain { grid-template-rows: 1fr; }
  .drawer.is-sub .dsub { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
  .drawer.is-sub .dmain { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0.42s; }
  .dsub__in { display: grid; gap: 2px; padding: 4px 0 6px; }
  .dsub__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 4px 12px;
    border-radius: var(--radius-md);
    color: var(--ink);
    font-family: var(--font-label);
    font-size: 1rem;
    font-weight: var(--font-weight-label);
    text-decoration: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(.2,.8,.2,1), background-color 0.2s ease;
  }
  .dsub__item:hover, .dsub__item:focus-visible, .dsub__item[aria-current="page"] { background: var(--edge); }
  .drawer.is-sub .dsub__item { opacity: 1; transform: none; }
  .drawer.is-sub .dsub__item:nth-child(1) { transition-delay: 0.08s, 0.08s, 0s; }
  .drawer.is-sub .dsub__item:nth-child(2) { transition-delay: 0.13s, 0.13s, 0s; }
  .drawer.is-sub .dsub__item:nth-child(3) { transition-delay: 0.18s, 0.18s, 0s; }
  .drawer.is-sub .dsub__item:nth-child(4) { transition-delay: 0.23s, 0.23s, 0s; }
}

/* Phones: the "Roest's own test" caption sits under the chat instead of on top of it. */
@media (max-width: 640px) {
  .tile__stage .cap,
  .stage-xl .cap { position: static; justify-self: end; margin-top: 10px; }
}

/* ── v13 (Nicolai 11-06) ─────────────────────────────────────────────
   Home tiles: more air so the glass halos never touch. Product-video tile: no navy frame around
   the clip (the clip is the box). Stats rows: number line and labels line up across tiles, text
   headline ("They sell harder.") smaller and on one line. Example note under example stats. */
.tiles { gap: clamp(32px, 4vw, 56px); }
/* (v13 frameless video tile reverted: he wants the stage frame back to match the other tiles) */
.stats .stat { grid-template-rows: auto 1fr auto; align-content: start; }
.stats .stat__num { min-height: clamp(2.75rem, 2rem + 1.6vw, 3.75rem); justify-content: center; }
.stats .stat__num--text { font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2rem); white-space: nowrap; }
.stats .stat__src { align-self: end; margin-top: 0; }
.stats__note { margin-top: 20px; text-align: center; color: var(--muted); font-size: 0.875rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── 360 clips (v11: real videos, placeholders until the media lands) ── */
.clip { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-md); background: #e9e6e1; }
.clip img, .clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip video { opacity: 0; }
.clip video.is-on, .clip.is-live video { opacity: 1; }
.tile__stage .clip { border-radius: 0; }
.tile__stage .spin__badge { position: absolute; left: 16px; top: 16px; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin-inline: auto; }
.compare figure { display: grid; gap: 12px; margin: 0; }
.compare figcaption { color: var(--muted); font-size: 0.9375rem; text-align: center; }
.compare__note { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; color: var(--muted); font-size: 0.8125rem; }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; max-width: 380px; } }

.shop { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--stage); overflow: hidden; }
.shop__head { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.shop__head b { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; }
.shop__head span { color: var(--muted); font-size: 0.875rem; }
.shop__rows { display: grid; }
.shop__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 20px; }
.shop__row + .shop__row { border-top: 1px solid var(--line); }
.shop__row.is-on { background: rgb(176 158 128 / 0.06); }
.pcard { position: relative; display: grid; gap: 8px; }
.pcard img, .pcard video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); background: #e9e6e1; }
.pcard video { display: none; }
.pcard.is-live img { display: none; }
.pcard.is-live video { display: block; }
.pcard p { font-size: 0.9375rem; }
.pcard p span { color: var(--muted); }
.pcard p span::before { content: "· "; }
.pcard > b { font-weight: 500; font-size: 0.875rem; }
.pcard em { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: var(--radius-xs); background: var(--gold); color: var(--color-navy, #192537); font-style: normal; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; }
.shop__slider { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 8px 24px 20px; }
.shop__label { color: var(--muted); font-size: 0.8125rem; }
.shop__label--after { text-align: right; }
.shop__slider input { -webkit-appearance: none; appearance: none; width: 220px; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.shop__slider input::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-xs); background: var(--line-2, var(--line)); }
.shop__slider input::-moz-range-track { height: 4px; border-radius: var(--radius-xs); background: var(--line); }
.shop__slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--gold); }
.shop__slider input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--gold); }
@media (max-width: 760px) {
  .shop__row { grid-template-columns: repeat(2, 1fr); }
  .shop__slider { grid-template-columns: 1fr; justify-items: center; }
  .shop__label--after { text-align: center; }
  .shop__slider input { width: min(220px, 70vw); }
}

/* ── Name length fallback: full name by default, short where it can't fit ── */
.name-short { display: none; }
@media (max-width: 1100px) {
  .tile__text .name-long { display: none; }
  .tile__text .name-short { display: inline; }
}
@media (max-width: 900px) {
  .foot .name-long { display: none; }
  .foot .name-short { display: inline; }
}

/* Shop demo is desktop only; phones keep the still-vs-video pair. */
@media (max-width: 760px) { .shop-only { display: none; } }

/* v11: before/after drag over the shop, like a photo compare slider. */
.ba { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--stage); overflow: hidden; user-select: none; touch-action: none; }
.ba__pane .shop__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 20px; }
.ba__pane .shop__row + .shop__row { border-top: 1px solid var(--line); }
.ba__pane--after { position: absolute; inset: 0; background: var(--stage); }
.ba__pane--after .shop__row { background: rgb(176 158 128 / 0.06); }
.ba__tag { position: absolute; z-index: 2; padding: 4px 10px; border-radius: var(--radius-xs); background: var(--color-navy, #192537); color: #f4f1ec; font-size: 0.75rem; }
.ba__tag--before { top: 14px; left: 14px; }
.ba__tag--after { bottom: 14px; right: 14px; }
.ba__bar { position: absolute; top: 0; bottom: 0; z-index: 3; width: 0; }
.ba__bar i { position: absolute; top: 0; bottom: 0; left: -1px; border-left: 2px dashed var(--gold); }
.ba__bar button { position: absolute; top: 50%; left: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 0; border-radius: 50%; background: var(--gold); color: var(--color-navy, #192537); cursor: ew-resize; }
.ba__bar button::before { content: "\2039\00a0\203a"; font-size: 1.25rem; line-height: 1; font-weight: 600; }
/* v12: real compare slider. Panes share one frame; the after pane is clipped to the bar. */
.ba__pane--before, .ba__pane--after { pointer-events: none; }
.ba__pane--after { clip-path: inset(0 0 0 50%); will-change: clip-path; }
.ba__bar { left: 50%; cursor: ew-resize; }
.ba__bar i { border-left: 2px dashed #f4f1ec; filter: drop-shadow(0 0 1px rgb(25 37 53 / 0.6)); }
.ba__bar button { display: grid; place-items: center; padding: 0; appearance: none; -webkit-appearance: none; border: 2px solid #f4f1ec; box-shadow: 0 2px 10px rgb(25 37 53 / 0.35); }
.ba__bar button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ba { cursor: ew-resize; }
.ba.is-dragging, .ba.is-dragging * { cursor: grabbing; }
.ba__tag--before { top: 14px; left: 14px; bottom: auto; }
.ba__tag--after { top: 14px; right: 14px; bottom: auto; left: auto; background: var(--gold); color: #192537; }
/* Until real clips land: placeholder posters do a slow faux turn so the bestsellers read as video. */
.pcard.is-fake img { display: block; animation: faux-turn 4s ease-in-out infinite; transform-origin: 50% 50%; }
.pcard.is-fake video { display: none; }
@keyframes faux-turn { 0%,100% { transform: scaleX(1); } 25% { transform: scaleX(0.15); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(0.15); } }
@media (prefers-reduced-motion: reduce) { .pcard.is-fake img { animation: none; } }


.stat__src { margin-top: 8px; color: var(--muted); font-size: 0.75rem; }
.stat__num--text { font-size: clamp(1.5rem, 1rem + 1vw, 2rem); }

/* v12: demo media is 2:3 (vertical clips cropped, no side fill). */
.compare .clip, .pcard img, .pcard video { aspect-ratio: 2 / 3; object-fit: cover; }