/* ==========================================================================
   CIHANG — product site
   Minimal, Apple-style layout. Light by default, dark via the nav toggle. Frosted-glass surfaces.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg: #f5f4f1;
  --bg-alt: #ffffff;
  --bg-dark: #0c0c0d;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --muted-2: #86868b;
  --line: rgba(0, 0, 0, 0.08);
  --accent: #9a6544;          /* walnut */
  --accent-ink: #ffffff;
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-menu: rgb(250, 249, 247);
  --glass-line: rgba(255, 255, 255, 0.6);
  --bubble-user-bg: #1d1d1f;
  --bubble-user-ink: #f5f5f7;
  --bubble-bot-bg: rgba(0, 0, 0, 0.06);
  --bubble-bot-ink: #1d1d1f;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.06);
  --radius: 28px;
  --radius-s: 18px;
  --nav-h: 52px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  /* the app inside the phone (v41): grouped-list look — grey screen, white cells, iOS-style segmented control */
  --app-bg: #f2f1ee;
  --app-cell: #ffffff;
  --seg: rgba(120, 120, 128, .14);
  --seg-on: #ffffff;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0c0c0d;
  --bg-alt: #161617;
  --bg-dark: #000000;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --muted-2: #86868b;
  --line: rgba(255, 255, 255, 0.1);
  --accent: #d2a67f;
  --accent-ink: #1d1d1f;
  --glass: rgba(28, 28, 30, 0.55);
  --glass-strong: rgba(28, 28, 30, 0.8);
  --glass-menu: rgb(22, 22, 23);
  --glass-line: rgba(255, 255, 255, 0.12);
  --bubble-user-bg: #f5f5f7;
  --bubble-user-ink: #1d1d1f;
  --app-bg: #000000;
  --app-cell: #1c1c1e;
  --seg: rgba(120, 120, 128, .28);
  --seg-on: #636366;
  --bubble-bot-bg: rgba(255, 255, 255, 0.1);
  --bubble-bot-ink: #f5f5f7;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.35);
  color-scheme: dark;
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .35s ease, color .35s ease;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, figcaption, small, summary, .lede { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; background: var(--text); color: var(--bg); border-radius: 10px;
}
.skip:focus { top: 12px; }

/* ---------- Layout ---------- */
.container {
  width: min(1080px, 100% - 48px);
  margin-left: auto; margin-right: auto; margin-inline: auto;
}
.container--wide  { width: min(1400px, 100% - 48px); }
.container--narrow { width: min(760px, 100% - 48px); }

.section { padding-block: clamp(80px, 10vw, 140px); }
.section--alt  { background: var(--bg-alt); transition: background-color .35s ease; }
.section--dark { background: var(--bg-dark); color: #f5f5f7; }
.section--dark { --text: #f5f5f7; --muted: #a1a1a6; --line: rgba(255,255,255,.12); --glass: rgba(28,28,30,.55); --glass-line: rgba(255,255,255,.12); --accent: #d2a67f; }

.container + .container,
.container + .container--wide { margin-top: clamp(40px, 6vw, 72px); }

/* ---------- Glass ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
}

/* ---------- Type ---------- */
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.display {
  font-size: clamp(44px, 7.2vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.headline {
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  max-width: 24ch;
}
@media (max-width: 640px) { .br-lg { display: none; } }
.sub-headline {
  font-size: clamp(24px, 2.7vw, 31px);
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: 28px;
}
.lede {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--muted);
  max-width: 62ch;
  margin-top: 22px;
  font-weight: 400;
}
.hero .lede { margin-left: auto; margin-right: auto; margin-inline: auto; }

/* ---------- Buttons ---------- */
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.hero .cta-row { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 22px; border-radius: 999px;
  font-weight: 500; font-size: 16px; letter-spacing: -0.01em;
  transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); opacity: .9; }
.btn--primary { background: var(--text); color: var(--bg); }
.btn--ghost { border: 1px solid var(--line); background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.section--dark .btn--primary { background: #f5f5f7; color: #1d1d1f; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  transition: background-color .35s ease;
}
.nav__inner {
  width: min(1080px, 100% - 48px); margin-left: auto; margin-right: auto; margin-inline: auto;
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__brand { font-weight: 700; letter-spacing: .22em; font-size: 15px; }
.nav__links { display: flex; gap: 28px; font-size: 14px; color: var(--muted); }
.nav__links a { transition: color .2s ease; padding: 6px 0; }
.nav__links a:hover, .nav__links a.is-active { color: var(--text); }
.nav__actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 999px; border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .2s ease;
}
.icon-btn:hover { background: var(--line); }
.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
.nav__menu { display: none; }
.nav__sheet-foot { display: none; }

@media (max-width: 820px) {
  .nav__menu { display: inline-flex; }
  .nav__links {
    position: absolute; left: 0; right: 0; top: var(--nav-h);
    flex-direction: column; gap: 0; padding: 8px 24px 16px;
    background: var(--glass-menu);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav__links a { padding: 12px 0; font-size: 17px; color: var(--text); border-bottom: 1px solid var(--line); }
  .nav__links a:last-child { border-bottom: 0; }
  .nav.is-open .nav__links { display: flex; }
}

/* ---------- Film (full-screen hero video) ---------- */
/* Edge-to-edge, one viewport tall. The 16:9 frame is cropped mostly from the top:
   main.js sets object-position so that at most ~4% of the frame is lost at the bottom,
   which keeps the captions burned into the film readable. */
.film { background: #000; }
.film__frame {
  position: relative; background: #000; overflow: hidden; width: 100%;
  height: calc(100vh - var(--nav-h));
  height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h));
  min-height: 420px;
}
.film__frame video, .film__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 85%; display: block; }
.video-controls {
  position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 12px; z-index: 2;
}
.video-time { color: #f5f5f7; font-size: 13px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.6); flex: none; min-width: 84px; }
.video-seek {
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 22px; margin: 0; background: transparent; cursor: pointer;
  --p: 0%;
}
.video-seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, #ffffff var(--p), rgba(255,255,255,.32) var(--p));
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.video-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; margin-top: -5px;
  box-shadow: 0 1px 4px rgba(0,0,0,.45); transition: transform .15s ease;
}
.video-seek:hover::-webkit-slider-thumb, .video-seek:active::-webkit-slider-thumb { transform: scale(1.25); }
.video-seek::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,.32); }
.video-seek::-moz-range-progress { height: 4px; border-radius: 999px; background: #fff; }
.video-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.video-seek:focus-visible { outline: none; }
.video-seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255,255,255,.35); }
.vbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500;
  color: #f5f5f7; background: rgba(28,28,30,.55); border: 1px solid rgba(255,255,255,.18);
  transition: transform .2s ease, background-color .2s ease;
}
.vbtn:hover { transform: translateY(-1px); background: rgba(28,28,30,.7); }
.vbtn svg { flex: none; }
#video-play { width: 40px; padding: 0; justify-content: center; }
.ic-sound, .ic-play { display: none; }
.vbtn[aria-pressed="true"] .ic-muted, #video-play[aria-pressed="true"] .ic-play { display: none; }
.vbtn[aria-pressed="true"] .ic-sound { display: block; }
#video-play[aria-pressed="false"] .ic-pause { display: none; }
#video-play[aria-pressed="false"] .ic-play { display: block; }
.film__cue {
  position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; opacity: .85; animation: cue 2s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
.film__intro { display: none; }
@media (max-width: 820px) {
  .film__frame { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .film__frame video, .film__frame img { object-position: 50% 50%; }
  .film__cue { display: none; }
  .video-controls { left: 10px; right: 10px; bottom: 10px; gap: 8px; }
  .video-time { font-size: 11px; min-width: 66px; }
  .vbtn span { display: none; }
  #video-sound { width: 34px; padding: 0; justify-content: center; }
  .vbtn { height: 34px; padding: 0 12px; font-size: 13px; }
  #video-play { width: 34px; }
}

/* ---------- Buy ---------- */
.buy { padding-block: clamp(56px, 7vw, 96px) clamp(40px, 6vw, 80px); }
.buy__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.buy__gallery { position: sticky; top: calc(var(--nav-h) + 24px); }
.buy__main {
  border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
  aspect-ratio: 16 / 10;
}
.buy__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
.buy__main img.is-fading { opacity: 0; }
.buy__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.buy__thumbs button {
  width: 76px; height: 56px; padding: 0; border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer;
  border: 1.5px solid var(--line); transition: border-color .2s ease, transform .2s ease;
}
.buy__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.buy__thumbs button:hover { transform: translateY(-1px); }
.buy__thumbs button.is-active { border-color: var(--text); }

.buy__title { font-size: clamp(40px, 5vw, 64px); letter-spacing: .04em; font-weight: 700; line-height: 1; }
.buy__sub { margin-top: 12px; color: var(--muted); font-size: 17px; max-width: 44ch; }
.buy__group { margin-top: 28px; }
.buy__group h3 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.buy__options { display: grid; gap: 10px; }
.opt {
  text-align: left; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--bg-alt);
  cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: border-color .2s ease, box-shadow .2s ease;
}
.opt strong { font-size: 16px; font-weight: 600; }
.opt span { font-size: 14px; color: var(--muted); line-height: 1.4; }
.opt:hover { border-color: rgba(0,0,0,.25); }
.opt.is-active { border-color: var(--text); box-shadow: 0 0 0 1px var(--text) inset; }
.buy__swatches { display: flex; gap: 10px; }
.swatch {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--bg-alt); font-size: 14px; font-weight: 500; cursor: pointer;
}
.swatch.is-active { border-color: var(--text); }
.swatch i { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch__cream { background: linear-gradient(135deg, #ebe5da 50%, #6b4a33 50%); }
.swatch__navy { background: linear-gradient(135deg, #262c34 50%, #6b4a33 50%); }
.swatch__titanium { background: linear-gradient(135deg, #6b6c6e 50%, #6b4a33 50%); }
@media (max-width: 640px) { .buy__swatches { flex-wrap: wrap; } }

.buy__includes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 18px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.buy__includes li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--muted); min-width: 0; }
.buy__includes li span { min-width: 0; }
.buy__includes strong { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); min-width: 66px; white-space: nowrap; flex-shrink: 0; }

.buy__price {
  margin-top: 26px; padding: 18px 18px 18px 22px; border-radius: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.buy__price-text { display: flex; flex-direction: column; }
.buy__amount { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.buy__note { font-size: 13px; color: var(--muted); margin-top: 4px; }

@media (max-width: 900px) {
  .buy__grid { grid-template-columns: minmax(0, 1fr); }
  .buy__gallery { position: static; }
  .buy__includes { grid-template-columns: 1fr; }
}

/* ---------- Cards / media ---------- */
.card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.section--alt .card { background: var(--bg); }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }   /* photos and scene renders are 16:9, so nothing is cut */
.card--tall { background: #fff; }
.card--tall img { aspect-ratio: auto; height: auto; flex: 1 1 0; min-height: 0; object-fit: contain; object-position: 50% 50%; background: #fff; padding: 4% 4%; box-sizing: border-box; }
.card--tall figcaption { text-align: center; background: var(--bg); }
.card figcaption { padding: 18px 22px 22px; font-size: 15px; color: var(--muted); line-height: 1.45; }
.card figcaption strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 4px; }

/* Spot card: a render with one highlighted part — thin outline, scan beam, pulse rings and a label */
.spot { position: relative; overflow: hidden; }
.spot__fx { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.spot__beam { transform-box: view-box; animation: spotbeam 3.4s ease-in-out infinite alternate; filter: blur(3px); }
@keyframes spotbeam { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.spot__ring { fill: none; stroke: #8fe3d6; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: lidarring 3.2s cubic-bezier(.2,.5,.3,1) infinite; filter: drop-shadow(0 0 4px rgba(143,227,214,.8)); }
.spot__ring--2 { animation-delay: 1.6s; }
.spot__core { fill: #c9fff6; filter: drop-shadow(0 0 8px #8fe3d6); }
.spot__tag {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%);
  padding: 6px 11px 6px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  color: #0f3d38; background: rgba(255,255,255,.88); border: 1px solid rgba(143,227,214,.9); box-shadow: 0 4px 14px rgba(0,0,0,.14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.spot__tag::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3fcdb9; margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 6px #8fe3d6; }
.spot__tag::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 22px; background: rgba(63,205,185,.9); }
.split .card img { height: auto; }     /* the overlay is placed in image percentages, so the render must not be cropped */
@media (max-width: 700px) { .spot__tag { font-size: 11.5px; padding: 5px 9px 5px 8px; } .spot__tag::after { height: 16px; } }
@media (prefers-reduced-motion: reduce) { .spot__beam { animation: none; } .spot__ring { animation: none; opacity: .5; transform: scale(1.4); } .spot__ring--2 { display: none; } }

/* LiDAR card: the overhead render with a thin animated scan drawn on top */
.lidar { position: relative; overflow: hidden; }
.lidar__fx { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lidar__ring { fill: none; stroke: #8fe3d6; stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: lidarring 4.2s cubic-bezier(.2,.5,.3,1) infinite; filter: drop-shadow(0 0 4px rgba(143,227,214,.8)); }
.lidar__ring--2 { animation-delay: 1.4s; }
.lidar__ring--3 { animation-delay: 2.8s; }
.lidar__ring--s { stroke-width: 2; animation-duration: 3.2s; }
.lidar__ring--s.lidar__ring--2 { animation-delay: 1.6s; }
@keyframes lidarring { 0% { transform: scale(.18); opacity: .95; } 70% { opacity: .35; } 100% { transform: scale(2.6); opacity: 0; } }
.lidar__sweep { opacity: .9; animation: lidarsweep 5s linear infinite; filter: blur(4px); }
@keyframes lidarsweep { to { transform: rotate(360deg); } }
.lidar__glow { animation: lidarglow 2.5s ease-in-out infinite; }
@keyframes lidarglow { 50% { opacity: .45; } }
.lidar__core { fill: #c9fff6; filter: drop-shadow(0 0 6px #8fe3d6); }
@media (prefers-reduced-motion: reduce) {
  .lidar__ring { animation: none; opacity: .5; transform: scale(1.4); }
  .lidar__ring--2 { transform: scale(2); opacity: .3; } .lidar__ring--3 { display: none; }
  .lidar__sweep, .lidar__glow { animation: none; }
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  border-top: 1px solid var(--line); padding-top: 28px;
}
.stat__num { display: block; font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stat__label { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Fold demo ---------- */
.fold-demo { position: relative; }
.fold-stage {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9; background: #ffffff; box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.fold-img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s cubic-bezier(.4,0,.2,1);
}
.fold-img.is-active { opacity: 1; }

.fold-controls {
  position: absolute; left: 22px; right: 22px; bottom: 22px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.fold-controls > * { pointer-events: auto; }

.fold-readout {
  display: flex; align-items: flex-end; gap: 16px;
  padding: 16px 18px; border-radius: var(--radius-s);
  color: var(--text);
}
.fold-bar {
  width: 10px; height: 88px; border-radius: 999px; background: var(--line); position: relative; overflow: hidden;
}
.fold-bar__fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: var(--accent); border-radius: 999px;
  transition: height .8s cubic-bezier(.4,0,.2,1);
}
.fold-demo.is-folded .fold-bar__fill { height: 58%; }
.fold-readout__label { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fold-readout__value { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }

.segmented {
  display: inline-flex; padding: 4px; border-radius: 999px; gap: 2px;
}
.segmented button {
  border: 0; background: transparent; padding: 9px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500; cursor: pointer; color: var(--muted);
  transition: background-color .25s ease, color .25s ease;
}
.segmented button[aria-pressed="true"] { background: var(--text); color: var(--bg); }

@media (max-width: 640px) {
  .fold-stage { aspect-ratio: 4 / 3; border-radius: 20px; }
  .fold-controls { position: static; margin-top: 12px; align-items: center; }
  .fold-readout { padding: 10px 14px; gap: 12px; align-items: center; }
  .fold-bar { height: 44px; width: 8px; }
  .fold-readout__value { font-size: 20px; }
  .fold-readout__label { font-size: 11px; }
  .segmented button { padding: 8px 12px; font-size: 13px; }
}

/* ---------- Design section ---------- */
.design-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: stretch; }
.design-side { display: flex; flex-direction: column; gap: 18px; }
.design-side .card img { aspect-ratio: 16 / 9; }
.material-list { border-radius: var(--radius); padding: 10px 26px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.material-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.material-list li:last-child { border-bottom: 0; }
.material-list span { display: block; font-weight: 600; font-size: 16px; }
.material-list small { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); line-height: 1.4; }
@media (max-width: 900px) {
  .design-grid { grid-template-columns: minmax(0, 1fr); }
  .card--tall img { aspect-ratio: 4 / 3; flex: none; padding: 3% 4%; }
}

/* ---------- Voice section ---------- */
.voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .voice-grid { grid-template-columns: 1fr; } }

.chat {
  border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 10px;
}
.chat__head {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted);
  padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.chat__dot { width: 8px; height: 8px; border-radius: 50%; background: #4cd964; box-shadow: 0 0 0 4px rgba(76,217,100,.18); }
.wave { margin-left: auto; display: inline-flex; gap: 3px; align-items: center; height: 16px; }
.wave i { display: block; width: 3px; height: 6px; border-radius: 2px; background: var(--accent); animation: wave 1.1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .15s; }
.wave i:nth-child(3) { animation-delay: .3s; }
.wave i:nth-child(4) { animation-delay: .45s; }
.wave i:nth-child(5) { animation-delay: .6s; }
@keyframes wave { 0%, 100% { height: 5px; } 50% { height: 16px; } }

.bubble {
  max-width: 82%; padding: 12px 16px; border-radius: 20px; font-size: 16px; line-height: 1.4;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease var(--d, 0s), transform .5s ease var(--d, 0s);
}
.chat.play .bubble { opacity: 1; transform: none; }
.bubble--user { align-self: flex-end; background: var(--bubble-user-bg); color: var(--bubble-user-ink); border-bottom-right-radius: 6px; }
.bubble--bot  { align-self: flex-start; background: var(--bubble-bot-bg); color: var(--bubble-bot-ink); border-bottom-left-radius: 6px; }

.feature-list { display: grid; gap: 26px; }
.feature h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: 16px; }

/* ---------- Plan rooms, halo and the app card (used by the demo) ---------- */
.navmap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(16px, 2.2vw, 32px); align-items: start; }

.navmap__room {
  fill: rgba(255, 255, 255, 0); stroke: rgba(255, 255, 255, 0); stroke-width: 3;
  cursor: pointer; transition: fill .3s ease, stroke .3s ease;
}
.navmap__room:hover { fill: rgba(255, 255, 255, .18); }
.navmap__room.is-active {
  fill: rgba(255, 255, 255, .38); stroke: rgba(255, 255, 255, .85);
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, .95)) drop-shadow(0 0 30px rgba(255, 255, 255, .6));
  animation: roomglow 2s ease-in-out infinite;
}
@keyframes roomglow { 50% { fill: rgba(255, 255, 255, .24); } }
@keyframes dash { to { stroke-dashoffset: -28; } }

/* Destination halo: three particle rings, brightest inside, radiating outward (yellow-white) */
.halo { opacity: 0; transition: opacity .4s ease; }
.halo.is-on { opacity: 1; }
.halo__ring {
  fill: none; stroke-linecap: round; transform-box: fill-box; transform-origin: center;
  stroke-dasharray: 1.5 7; filter: drop-shadow(0 0 5px #ffd36b) drop-shadow(0 0 10px #ffc24d);
}
.halo__ring--1 { stroke: #fffbe8; stroke-width: 3.5; }
.halo__ring--2 { stroke: #ffefb8; stroke-width: 3; }
.halo__ring--3 { stroke: #ffd98a; stroke-width: 2.5; }
.halo.is-on .halo__ring { animation: haloburst 2.4s ease-out infinite; }
.halo.is-on .halo__ring--2 { animation-delay: .5s; }
.halo.is-on .halo__ring--3 { animation-delay: 1s; }
@keyframes haloburst {
  0%   { transform: scale(.25); opacity: 1; }
  70%  { opacity: .55; }
  100% { transform: scale(1.6); opacity: 0; }
}

.navmap__legend {
  position: absolute; right: 2%; bottom: 3%; z-index: 2; padding: 12px 14px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--text);
}

.phone {
  position: relative; height: var(--map-h, 640px); aspect-ratio: 1319 / 2718; flex: none;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.18));
}
:root[data-theme="dark"] .phone__screen { background: #121213; }

.navmap__tele { display: grid; grid-template-columns: 1.25fr 1fr 1.15fr; gap: 6px; }
.tele { padding: 7px 8px; border-radius: 11px; background: var(--bg-alt); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tele__label { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tele__value { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tele small { font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.batt { position: relative; display: inline-block; width: 19px; height: 10px; border: 1.5px solid var(--text); border-radius: 3px; flex: none; }
.batt::before { content: ""; position: absolute; left: 1px; top: 1px; bottom: 1px; width: calc(var(--lvl, 50%) - 2px); background: #4cd964; border-radius: 1.5px; transition: width .4s ease, background-color .3s ease; }
.batt::after { content: ""; position: absolute; right: -4px; top: 2px; width: 2px; height: 4px; background: var(--text); border-radius: 0 1px 1px 0; }
.batt.is-low::before { background: #ff9f0a; }
.batt.is-charging::before { background: #4cd964; animation: charge 1.2s ease-in-out infinite; }
@keyframes charge { 50% { opacity: .45; } }
.navmap__log { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 48px; overflow-y: auto; padding: 2px 0; scrollbar-width: none; }
.navmap__log::-webkit-scrollbar { display: none; }
.msg { max-width: 90%; padding: 7px 10px; border-radius: 13px; font-size: 12px; line-height: 1.35; }
.msg--bot { align-self: flex-start; background: var(--bg-alt); border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 5px; }
.msg--user { align-self: flex-end; background: var(--bubble-user-bg); color: var(--bubble-user-ink); border-bottom-right-radius: 5px; }
.msg--typing { color: var(--muted); }
.msg--typing i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 3px; animation: wave 1s ease-in-out infinite; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }

.navmap__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.navmap__chips button {
  height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-alt);
  color: var(--text); font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease;
}
.navmap__chips button:hover { border-color: var(--text); }
.navmap__chips button:first-child { background: var(--text); color: var(--bg); border-color: var(--text); }

.navmap__ask { display: flex; gap: 6px; }
.navmap__ask input {
  flex: 1; min-width: 0; height: 34px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 12px;
  border: 1px solid var(--line); background: var(--bg-alt); color: var(--text); outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.navmap__ask input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(154,101,68,.15); }
.navmap__ask input::placeholder { color: var(--muted-2); }
.navmap__ask button {
  width: 34px; height: 34px; border-radius: 999px; border: 0; flex: none; cursor: pointer;
  background: var(--text); color: var(--bg); display: inline-flex; align-items: center; justify-content: center;
}
.navmap__ask .navmap__mic { background: var(--bg-alt); color: var(--text); border: 1px solid var(--line); transition: background-color .2s ease, color .2s ease; }
.navmap__ask .navmap__mic:hover { border-color: var(--text); }
.navmap__ask .navmap__mic[aria-pressed="true"] { background: #ff3b30; color: #fff; border-color: #ff3b30; animation: micpulse 1.2s ease-in-out infinite; }
@keyframes micpulse { 50% { box-shadow: 0 0 0 7px rgba(255,59,48,.22); } }

@media (max-width: 1100px) {
  .navmap__tele { grid-template-columns: 1fr; gap: 4px; }
  .tele { flex-direction: row; align-items: center; gap: 8px; padding: 5px 8px; }
  .tele__label { min-width: 48px; }
  .tele small { display: none; }
  .lab__tele { gap: 0; }
  .lab__tele .tele { border-left: 0; border-top: 1px solid var(--line); padding: 8px 12px; }
  .lab__tele .tele:first-child { border-top: 0; }
}
@media (max-width: 820px) {
  .navmap__tele { grid-template-columns: 1.25fr 1fr 1.15fr; }
  .tele { flex-direction: column; align-items: stretch; }
  .tele small { display: block; }
  .navmap__log { min-height: 120px; }
}

/* full-width banner figure */
.banner { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background: var(--bg-alt); }
.banner img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.banner figcaption { padding: 18px 22px 22px; font-size: 15px; color: var(--muted); }
.banner figcaption strong { color: var(--text); font-weight: 600; margin-right: 6px; }
@media (max-width: 640px) { .banner img { aspect-ratio: 16 / 9; } }

/* ---------- Perception ---------- */
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: stretch; }
.split .card img { aspect-ratio: 16 / 9; }
.spec-list { border-radius: var(--radius); padding: 10px 26px; display: flex; flex-direction: column; justify-content: center; }
.spec-list > div { padding: 15px 0; border-bottom: 1px solid var(--line); }
.spec-list > div:last-child { border-bottom: 0; }
.spec-list dt { font-weight: 600; font-size: 16px; }
.spec-list dd { margin-top: 3px; font-size: 14px; color: var(--muted); line-height: 1.4; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.ways { text-align: center; }
.ways__title { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; font-weight: 700; margin-bottom: 26px; }
.ways__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.way {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 14px 22px; border-radius: var(--radius-s);
}
.way svg { width: 44px; height: 44px; color: var(--accent); margin-bottom: 14px; }
.way span { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.way small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.35; }
@media (max-width: 900px) { .ways__list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ways__list { grid-template-columns: repeat(2, 1fr); gap: 10px; } .way { padding: 20px 10px 18px; } }

/* ---------- Specs ---------- */
.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.spec { padding: 26px 24px 22px; border-radius: var(--radius-s); min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; }
.spec__num { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.spec__label { margin-top: 18px; font-size: 14px; color: var(--muted); line-height: 1.35; }
@media (max-width: 900px) { .spec-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .spec-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .spec { padding: 18px; min-height: 120px; } }


/* ---------- FAQ ---------- */
.faq { margin-top: 8px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative;
  font-size: 19px; font-weight: 600; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq p { padding: 0 0 24px; color: var(--muted); max-width: 64ch; font-size: 17px; }

/* ---------- Closing ---------- */
.closing { text-align: center; }
.closing__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 21 / 9; margin-bottom: clamp(40px, 6vw, 72px); }
.closing__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .closing__media { aspect-ratio: 16 / 9; border-radius: 20px; } }
.closing .headline { margin-left: auto; margin-right: auto; margin-inline: auto; max-width: 20ch; }
.closing .cta-row { justify-content: center; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: 36px; font-size: 13px; color: var(--muted); }
.footer__inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.footer__brand { font-weight: 700; letter-spacing: .22em; color: var(--text); font-size: 14px; }
.footer__by { margin-top: 6px; }
.footer__note { max-width: 44ch; }
.footer__links { display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 500; }
.footer__links a { color: var(--muted); }
.footer__links a:hover { color: var(--text); }
@media (max-width: 720px) { .footer__inner { flex-direction: column; } }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2,.6,.2,1) var(--d, 0s), transform .8s cubic-bezier(.2,.6,.2,1) var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .bubble { opacity: 1; transform: none; transition: none; }
  .halo__ring, .navmap__room{ animation: none !important; }
  .wave i { animation: none; }
  .fold-img { transition: opacity .3s ease; }
}

/* ---------- Scroll-driven unfold sequence ---------- */
.unfold { height: 150vh; margin-top: 8px; }
.unfold__sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
.unfold__stage {
  position: relative; width: min(100%, calc((100vh - 150px) * 16 / 9)); aspect-ratio: 16 / 9; max-width: 100%;
  border-radius: var(--radius); overflow: hidden; background: #d9cdb8; box-shadow: var(--shadow); border: 1px solid var(--line);
}
.unfold__poster, .unfold__canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.unfold__canvas { opacity: 0; transition: opacity .25s ease; }
.unfold.is-drawn .unfold__canvas { opacity: 1; }
.unfold__readout { position: absolute; left: 22px; bottom: 22px; }
.unfold__hint {
  position: absolute; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text);
  transition: opacity .35s ease, transform .35s ease;
}
.unfold__hint svg { animation: hintbob 1.6s ease-in-out infinite; }
.unfold.is-scrolled .unfold__hint { opacity: 0; transform: translateY(6px); pointer-events: none; }
@keyframes hintbob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (max-width: 820px) {
  .unfold { height: 135vh; }
  .unfold__stage { width: 100%; }
  .unfold__readout { left: 12px; bottom: 12px; padding: 10px 12px; gap: 10px; }
  .unfold__readout .fold-readout__value { font-size: 18px; }
  .unfold__readout .fold-bar { height: 48px; width: 8px; }
  .unfold__hint { right: 12px; bottom: 12px; }
}

/* ---------- Scroll-driven mapping (point cloud over the map demo) ----------
   #scan is a tall scroll track; the whole map demo (.navmap) sticks inside it while scan.js draws the
   point cloud on a canvas over the plan. --reveal (plan, legend, phone panel), --cloud (canvas) and
   --ui (readouts, captions) are set by scan.js from the scroll position. */
.scan { height: 370vh; margin-top: clamp(8px, 2vw, 20px); --reveal: 1; --cloud: 0; --ui: 1; --ui-steps: 1; }
.scan .navmap { position: sticky; top: calc(var(--nav-h) + 16px); }
.scan__stage { position: relative; max-width: calc((100vh - var(--nav-h) - 72px) * 1.518); margin-left: auto; margin-right: auto; margin-inline: auto; }
/* the drawing layer covers the whole demo on desktop (the app panel's column too) and just the stage on phones */
.scan__layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 3; pointer-events: none; }
.scan .navmap__plan, .scan .navmap__svg, .scan .navmap__legend { opacity: var(--reveal); }
.scan .phone { opacity: var(--reveal); transform: translateY(calc((1 - var(--reveal)) * 16px)); }
.scan__canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; display: block; opacity: var(--cloud); }
.scan__hud { position: absolute; left: 18px; top: 18px; z-index: 4; display: flex; gap: 18px; padding: 10px 16px; border-radius: 16px; opacity: var(--ui); }
.scan__hud > div { display: flex; flex-direction: column; min-width: 56px; }
.scan__hud strong { font-size: 17px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.scan__k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.scan__tag { position: absolute; right: 18px; bottom: 18px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text); opacity: var(--ui); }
.scan__tag i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 3px rgba(255,59,48,.2); animation: blink 1.2s ease-in-out infinite; }
.scan:not(.is-scrolled) .scan__tag { opacity: 0; }   /* the hint sits there first */
.scan.is-done .scan__tag i { background: #4cd964; box-shadow: 0 0 0 3px rgba(76,217,100,.22); animation: none; }
.scan__steps { position: absolute; left: 18px; bottom: 18px; z-index: 4; width: min(360px, calc(100% - 36px)); display: grid; align-items: end; opacity: var(--ui-steps); pointer-events: none; }
.scan__step { grid-area: 1 / 1; padding: 14px 18px; border-radius: 18px; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.scan__step.is-on { opacity: 1; transform: none; }
.scan__step strong { display: block; font-size: 17px; letter-spacing: -0.015em; margin-bottom: 3px; }
.scan__step span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.45; text-wrap: pretty; }
.scan__hint {
  position: absolute; right: 18px; bottom: 18px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--text); transition: opacity .35s ease, transform .35s ease;
}
.scan__hint svg { animation: hintbob 1.6s ease-in-out infinite; }
.scan.is-scrolled .scan__hint { opacity: 0; transform: translateY(6px); }
.scan__hud, .scan__tag, .scan__steps, .scan__hint { transition: opacity .3s ease; }
@media (max-width: 820px) {
  /* phones: only the stage sticks, inside its own track; the chips and the app card follow after it */
  .scan { height: auto; margin-top: 0; }
  .scan .navmap { position: static; }
  .scan__stage { position: sticky; top: calc(var(--nav-h) + 8px); max-width: none; height: min(calc(100vh - var(--nav-h) - 16px), 132vw); height: min(calc(100svh - var(--nav-h) - 16px), 132vw); overflow: hidden; }
  .scan__stage .navmap__stage { margin-left: 0; margin-right: 0; margin-inline: 0; }
  .scan__hud { left: 12px; top: 12px; gap: 12px; padding: 8px 12px; border-radius: 14px; }
  .scan__hud strong { font-size: 15px; }
  .scan__tag { left: 12px; right: auto; top: 70px; bottom: auto; font-size: 11.5px; padding: 6px 10px; gap: 7px; }
  .scan__tag i { width: 7px; height: 7px; }
  .scan__steps { left: 12px; bottom: 12px; width: calc(100% - 24px); }
  .scan__step { padding: 12px 14px; }
  .scan__step strong { font-size: 16px; }
  .scan__step span { font-size: 13px; }
  .scan__step:last-child span { display: none; }   /* the last caption sits over the small plan: title only */
  .scan__hint { display: none; }
}
@media (max-width: 700px) {
  .scan__stage { margin-left: -20px; margin-right: -20px; margin-inline: -20px; }
}

/* ---------- Lab: one plan, three ways (scan → send → drive) ---------- */
.lab__scan { height: 420vh; margin-top: clamp(8px, 2vw, 20px); --reveal: 1; --cloud: 0; --ui: 1; --ui-steps: 1; }
.lab__sticky { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; grid-template-columns: minmax(0, 1fr) var(--phone-w, 340px); gap: clamp(16px, 2.2vw, 28px); align-items: center; }
.lab__track { min-width: 0; }
.lab__stage { position: relative; max-width: calc((100vh - var(--nav-h) - 72px) * 1.518); max-width: calc(var(--plan-h, calc(100vh - var(--nav-h) - 72px)) * 1.518); margin-left: auto; margin-right: auto; margin-inline: auto; }
.lab__plan { position: relative; aspect-ratio: 1791 / 1180; border-radius: var(--radius); overflow: hidden; }
.lab__svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; display: block; background: #d9d2c5; opacity: var(--reveal); transition: opacity .25s ease; }
.lab__svg .outside { fill: #d9d2c5; }
.lab__svg .plan-img { image-rendering: auto; }
.lab__svg .navmap__room { pointer-events: all; }
.lab__svg.is-drive .navmap__room { pointer-events: none; }
.lab__svg .lab__route { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18 14; opacity: 0; transition: opacity .3s ease; filter: drop-shadow(0 0 1.5px rgba(0,0,0,.55)) drop-shadow(0 1px 3px rgba(0,0,0,.25)); }
.lab__svg.is-driving .lab__route { opacity: .96; animation: dash 1s linear infinite; }
.lab__svg .lab__pin { cursor: pointer; opacity: 0; transition: opacity .45s ease var(--d, 0s); }
.lab__sticky.play .lab__pin { opacity: 1; }
.lab__svg .lab__pin rect { fill: rgba(255,255,255,.88); stroke: rgba(0,0,0,.08); stroke-width: 1.5; }
.lab__svg .lab__pin circle { fill: var(--accent); }
.lab__svg .lab__pin text { font: 500 24px/1 Inter, system-ui, sans-serif; fill: #1d1d1f; }
.lab__svg .lab__pin.is-active rect { fill: #1d1d1f; }
.lab__svg .lab__pin.is-active text { fill: #f5f5f7; }
.lab__svg .lab__pin.is-active circle { fill: #4cd964; }
.lab__svg .lab__pin.is-target rect { fill: #ffd98a; stroke: #e0a83a; }
.lab__svg .lab__pin.is-target circle { fill: #c4801f; }
.lab__svg .lab__dock rect { fill: #1d1d1f; }
.lab__svg .lab__dock path { fill: #4cd964; }
.lab__svg .lab__dock .dockpad__pulse { fill: none; stroke: #4cd964; stroke-width: 3; opacity: 0; }
.lab__svg .lab__dock.is-home .dockpad__pulse { animation: dockpulse 1.6s ease-out infinite; }
/* the app lives in a phone: a dark shell, a screen with a status bar and a home indicator, and the panel as the
   screen's content, scrolling inside the phone when it is taller than the screen (desktop: as tall as the plan) */
.lab__phone { position: relative; opacity: var(--reveal); transform: translateY(calc((1 - var(--reveal)) * 16px)); width: var(--phone-w, 340px); height: max(var(--plan-h, 700px), 560px); height: calc(var(--phone-w, 340px) / 0.478); padding: 10px; border-radius: calc(var(--phone-w, 340px) * 0.165); background: #1a1a1c; box-shadow: 0 24px 50px rgba(0,0,0,.28), inset 0 0 0 1.5px #4a4a4e, inset 0 0 0 3px #101011; }
/* side keys: action + volume on the left, power on the right (decorative) */
.lab__phone::before { content: ""; position: absolute; left: -3px; top: 17%; width: 3px; height: 10%; border-radius: 2px 0 0 2px; background: #2a2a2d; box-shadow: 0 calc(var(--phone-w, 340px) * 0.16) 0 #2a2a2d, 0 calc(var(--phone-w, 340px) * 0.30) 0 #2a2a2d; }
.lab__phone::after { content: ""; position: absolute; right: -3px; top: 24%; width: 3px; height: 13%; border-radius: 0 2px 2px 0; background: #2a2a2d; }
.lab__phone-screen { height: 100%; display: flex; flex-direction: column; border-radius: calc(var(--phone-w, 340px) * 0.165 - 10px); background: var(--app-bg); overflow: hidden; }
.lab__phone-bar { position: relative; flex: none; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 10px 24px 0; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.lab__phone-island { position: absolute; left: 50%; top: 11px; width: 88px; height: 26px; margin-left: -44px; border-radius: 999px; background: #0b0b0c; }
.lab__phone-status { display: inline-flex; align-items: center; gap: 2px; }
.lab__phone-status i { align-self: flex-end; margin-bottom: 1px; }
.lab__phone-status i + i { margin-left: 1.5px; }
.lab__phone-wifi { width: 17px; height: 17px; margin-left: 5px; }
.lab__phone-status i { width: 3px; border-radius: 1px; background: var(--text); }
.lab__phone-status i:nth-child(1) { height: 5px; } .lab__phone-status i:nth-child(2) { height: 7px; } .lab__phone-status i:nth-child(3) { height: 9px; } .lab__phone-status i:nth-child(4) { height: 11px; }
.lab__phone-status b { position: relative; width: 25px; height: 12px; margin-left: 6px; border-radius: 4px; border: 1.5px solid rgba(127,127,127,.55); box-shadow: inset 0 0 0 1.5px var(--app-bg), inset 0 0 0 20px var(--text); }
.lab__phone-status b::after { content: ""; position: absolute; right: -4.5px; top: 2.5px; width: 2px; height: 4px; border-radius: 0 2px 2px 0; background: rgba(127,127,127,.55); }
.lab__phone-home { flex: none; height: 22px; position: relative; }
/* app header: icon, wordmark + live status, bell */
.lab__app-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 0; }
.lab__app-icon { flex: none; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(160deg, #b5805a, #7d5034); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.lab__app-icon svg { width: 22px; height: 22px; }
.lab__app-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lab__app-title b { font-size: 15px; font-weight: 700; letter-spacing: .06em; line-height: 1.15; }
.lab__app-title .lab__status { min-height: 0; font-size: 12px; }
.lab__app-title .lab__status .drive__dot { width: 7px; height: 7px; }
.lab__app-title #lab-status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab__phone-home::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 120px; height: 5px; margin-left: -60px; border-radius: 999px; background: var(--text); opacity: .85; }
.lab__panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 6px 14px 12px; background: var(--app-bg); scrollbar-width: none; }   /* iOS: no visible scrollbar; v42: rows are fixed and the conversation absorbs the rest, so nothing scrolls on desktop */
.lab__panel::-webkit-scrollbar { display: none; }
.lab__modes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: 11px; background: var(--seg); }
.lab__mode { height: 34px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.lab__mode.is-active { background: var(--seg-on); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.08); }
/* v40 — nudge towards "Drive it": the idle tab keeps a faint fill so it reads as a switch, and once the map is
   ready the joystick tab breathes with a walnut ring + a dot badge until the visitor has tried it once (.is-driven). */
.lab__mode:not(.is-active):hover { color: var(--text); }
.lab__scan.is-done:not(.is-driven) .lab__mode[data-mode="drive"]:not(.is-active) { position: relative; color: var(--accent); background: rgba(154, 101, 68, .12); animation: lab-nudge 2.4s ease-out infinite; }
.lab__scan.is-done:not(.is-driven) .lab__mode[data-mode="drive"]:not(.is-active)::after { content: ""; position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--app-bg); animation: lab-nudge-dot 2.4s ease-in-out infinite; }
@keyframes lab-nudge { 0% { box-shadow: 0 0 0 0 rgba(154, 101, 68, .5); } 55% { box-shadow: 0 0 0 9px rgba(154, 101, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(154, 101, 68, 0); } }
@keyframes lab-nudge-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .lab__scan.is-done:not(.is-driven) .lab__mode[data-mode="drive"]:not(.is-active), .lab__scan.is-done:not(.is-driven) .lab__mode[data-mode="drive"]:not(.is-active)::after { animation: none; } }
.lab__send { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }
.lab__rooms-list { display: flex; flex-wrap: wrap; gap: 8px; }
.lab__rooms-list button {
  height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; background: var(--app-cell);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.lab__rooms-list button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lab__rooms-list button.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }
.lab__rooms-list button.is-active::before { background: #4cd964; }
/* the app card inside the panel (Send it): telemetry, conversation, quick commands, input, rooms */
.lab__tele { gap: 0; background: var(--app-cell); border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden; }
.lab__tele .tele { padding: 8px 10px; border-radius: 0; border: 0; border-left: 1px solid var(--line); background: transparent; }
.lab__tele .tele:first-child { border-left: 0; }
.lab__tele .tele__label { font-size: 9.5px; }
.lab__tele .tele__value { font-size: 14px; }
.lab__tele .tele small { font-size: 10px; letter-spacing: -0.01em; }
.lab__log { flex: 1 1 auto; min-height: 56px; max-height: none; gap: 6px; padding: 2px 0; }
.lab__log .msg { font-size: 13px; padding: 8px 12px; border-radius: 16px; max-width: 88%; }
.lab__log .msg--bot { background: var(--app-cell); border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.04); border-bottom-left-radius: 6px; }
.lab__log .msg--user { background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
:root[data-theme="dark"] .lab__log .msg--user { color: #1d1d1f; }
/* quick commands: one row that scrolls sideways, bleeding to the screen edges (iOS suggestion chips) */
.lab__chips { flex: none; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; -webkit-overflow-scrolling: touch; }
.lab__chips::-webkit-scrollbar { display: none; }
.lab__chips button { flex: none; height: 30px; padding: 0 11px; font-size: 12.5px; border-color: transparent; background: var(--app-cell); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.lab__chips button:hover { border-color: var(--text); }
.lab__ask { flex: none; gap: 8px; }
.lab__ask input { height: 40px; font-size: 13.5px; border-color: transparent; background: var(--app-cell); box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 0 14px; }
.lab__ask button { width: 40px; height: 40px; }
.lab__ask .navmap__mic { background: var(--app-cell); border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.lab__ask button[type="submit"] { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .lab__ask button[type="submit"] { color: #1d1d1f; }
.lab__drive .drive__hud { gap: 8px; }
.lab__drive .drive__stat { background: var(--app-cell); border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.04); border-radius: 14px; padding: 7px 10px; }
.lab__drive .drive__stat strong { font-size: 16px; }
/* the pad shrinks with the phone so Manual mode also fits one screen: panel height − the fixed rows (≈ 474 px incl. bezel/bar) */
.lab__drive .joy { --joy: clamp(116px, calc(var(--phone-w, 340px) / 0.478 - 474px), 172px); width: var(--joy); height: var(--joy); }
.lab__drive .joy__cross::before { height: calc(var(--joy) * 0.58); } .lab__drive .joy__cross::after { width: calc(var(--joy) * 0.58); }
.lab__drive .joy__ring { top: calc(var(--joy) * 0.1); right: calc(var(--joy) * 0.1); bottom: calc(var(--joy) * 0.1); left: calc(var(--joy) * 0.1); inset: calc(var(--joy) * 0.1); }
.lab__drive .joy__knob { width: calc(var(--joy) * 0.43); height: calc(var(--joy) * 0.43); margin: calc(var(--joy) * -0.215) 0 0 calc(var(--joy) * -0.215); }
.lab__drive .drive__keys { font-size: 11.5px; line-height: 1.45; }
.lab__drive .drive__reset { height: 36px; }
.lab__drive .switch { background: var(--app-cell); border-radius: 14px; padding: 8px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
@media (min-width: 821px) and (max-width: 1150px), (min-width: 821px) and (max-height: 760px) { .lab__panel .drive__keys { display: none; } .lab__drive { gap: 8px; } .lab__drive .switch { padding: 6px 12px; } }
.lab__drive .drive__reset { align-self: stretch; background: var(--app-cell); border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.lab__rooms-list { flex: none; gap: 6px; }
.lab__rooms-list button { height: 30px; padding: 0 11px; font-size: 12.5px; gap: 6px; }
.lab__rooms-list button::before { width: 6px; height: 6px; }
.lab__scan.is-listening .lab__ask input { border-color: #ff3b30; }
.lab__scan.is-noassist .lab__plan { box-shadow: 0 0 0 2px rgba(255,90,95,.4); }
.lab__modes--float { display: none; position: absolute; right: 10px; top: 10px; z-index: 4; width: auto; grid-template-columns: auto auto; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.lab__scan.is-done .lab__modes--float, .lab__scan.is-done .lab__mini { opacity: 1; pointer-events: auto; }
.lab__modes--float { padding: 3px; border-radius: 999px; }
.lab__modes--float .lab__mode { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 999px; }
.lab__mini { display: none; position: absolute; left: 10px; top: 10px; z-index: 4; padding: 8px 12px; border-radius: 14px; max-width: 55%; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.lab__mini b { display: block; font-size: 15px; letter-spacing: -0.01em; }
.lab__mini span { display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lab__mini em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.lab__drive { display: flex; flex-direction: column; gap: 10px; }
.lab__send[hidden], .lab__drive[hidden] { display: none !important; }
.lab__stage.is-bump { animation: drivebump .36s ease-out; }
.lab__drive .joy { margin: 2px auto 0; }
.lab__svg .label { font: 500 26px/1 Inter, system-ui, sans-serif; }
@media (max-width: 820px) {
  /* phones: the whole pair (stage above, app below) is pinned inside a tall track, and never taller than the
     screen — the app scrolls inside its card, so the plan stays in view while you tap rooms or drive */
  .lab__scan { height: 340vh; margin-top: 0; }
  .lab__sticky { position: sticky; top: calc(var(--nav-h) + 8px); display: flex; flex-direction: column; align-items: stretch; gap: 10px; max-height: calc(100vh - var(--nav-h) - 16px); max-height: calc(100svh - var(--nav-h) - 16px); }
  .lab__track { width: 100%; }
  .lab__track { height: auto; flex: none; }
  .lab__stage { position: relative; top: auto; max-width: none; height: min(calc(100vh - var(--nav-h) - 28px), 132vw); height: min(calc(100svh - var(--nav-h) - 28px), 132vw); overflow: hidden; }
  .lab__plan { border-radius: 0; }
  .lab__phone { flex: 1 1 auto; min-height: 0; width: auto; height: auto; padding: 0; border-radius: var(--radius); background: var(--app-bg); border: 1px solid var(--line); box-shadow: var(--shadow); transform: none; display: flex; flex-direction: column; }
  .lab__phone::before, .lab__phone::after { display: none; }
  .lab__phone-screen { border-radius: var(--radius); flex: 1 1 auto; min-height: 0; height: auto; }
  .lab__phone-bar, .lab__phone-home { display: none; }
  .lab__panel { padding: 10px 14px 12px; gap: 10px; }
  .lab__log { min-height: 110px; max-height: 150px; }
  .lab__drive .joy { --joy: 196px; }
  .lab__app-head { gap: 8px; }
  .lab__app-icon { width: 30px; height: 30px; border-radius: 9px; }
  .lab__app-icon svg { width: 18px; height: 18px; }
  .lab__app-title b { font-size: 13.5px; }
  .lab__svg .lab__pin text { display: none; }
  .lab__svg .lab__pin rect { display: none; }
  .lab__svg .lab__pin circle { r: 40; stroke: rgba(255,255,255,.92); stroke-width: 14; paint-order: stroke; }
  .lab__stage.is-drive .lab__mini { display: block; }
  /* while the camera zooms in onto the chair, the pad and the mini HUD wait, then fade in */
  .lab__stage .joy { transition: opacity .35s ease; }
  .lab__stage.is-zooming .joy, .lab__stage.is-zooming .lab__mini { opacity: 0 !important; }
  .lab__svg .lab__pin.is-active circle { stroke: #1d1d1f; }
  .lab__panel .drive__keys { display: none; }
  .lab__drive { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  .lab__drive .drive__hud { display: contents; }
  .lab__drive .switch { grid-column: 1 / 4; }
  .lab__drive .drive__reset { grid-column: 4 / -1; }
  .lab__drive > .joy { grid-column: 1 / -1; }   /* fallback only: JS moves the pad into the stage on phones */
  .lab__stage.is-drive .lab__plan { aspect-ratio: 4 / 5; }   /* the chase view needs a tall window on phones */
}
@media (max-width: 700px) {
  .lab__stage { margin-left: -20px; margin-right: -20px; margin-inline: -20px; }
}

/* ---------- Joystick demo ---------- */
.drive { margin-top: clamp(56px, 8vw, 96px); }
@keyframes drivebump {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -2px); }
  60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } 100% { transform: translate(0, 0); }
}
.drive__flash { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none; background: rgba(255,90,95,.28); opacity: 0; }
.drive__flash.is-on { animation: driveflash .5s ease-out; }
@keyframes driveflash { 0% { opacity: 1; } 100% { opacity: 0; } }
.drive__svg { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.drive__svg .outside { fill: #d9d2c5; }
.drive__svg .mini { pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.22)); }
.drive__svg .mini__frame { fill: rgba(255,255,255,.7); stroke: rgba(255,255,255,.9); stroke-width: 14; }
.drive__svg .mini use { opacity: .92; }
.drive__svg .mini__goal { fill: #ffd98a; stroke: #fff; stroke-width: 10; }
.drive__svg .mini__dot { fill: #1d1d1f; stroke: #fff; stroke-width: 8; }
.drive__svg .mini__nose { fill: #1d1d1f; }
.drive__svg .floor { fill: #e9e2d6; }
.drive__svg .floor--living { fill: url(#dplanks); }
.drive__svg .floor--bed { fill: url(#dplanks2); }
.drive__svg .floor--kitchen { fill: url(#dtiles); }
.drive__svg .floor--hall { fill: #e3dcd0; }
.drive__svg .rug { fill: rgba(190,170,140,.22); stroke: rgba(150,130,100,.25); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.drive__svg .walls { filter: drop-shadow(2px 3px 3px rgba(0,0,0,.22)); }
.drive__svg .wall { fill: #33302c; }
.drive__svg .door { fill: none; stroke: rgba(29,29,31,.22); stroke-width: 2; stroke-dasharray: 5 6; }
.drive__svg .door-leaf { stroke: rgba(29,29,31,.42); stroke-width: 4; stroke-dasharray: none; stroke-linecap: round; }
.drive__svg .furniture { filter: drop-shadow(0 3px 2px rgba(0,0,0,.10)); }
.drive__svg .wood { fill: #b28c67; stroke: #93704f; stroke-width: 2; }
.drive__svg .wood-dk { fill: #8f6b4b; }
.drive__svg .soft { fill: #f5f1ea; stroke: #d9d0c1; stroke-width: 2; }
.drive__svg .soft-dk { fill: #e7e0d3; }
.drive__svg .seam { fill: none; stroke: #ddd4c5; stroke-width: 2; }
.drive__svg .pillow { fill: #fff; stroke: #d9d0c1; stroke-width: 2; }
.drive__svg .duvet { fill: #dfe7ec; stroke: #c2ced7; stroke-width: 2; }
.drive__svg .grey { fill: #d5cec2; stroke: #bbb2a1; stroke-width: 2; }
.drive__svg .grey-dk { fill: #c1b8a8; stroke: #a89e8c; stroke-width: 2; }
.drive__svg .paper { fill: #fbf9f4; stroke: #d9d0c1; stroke-width: 1.5; }
.drive__svg .sink { fill: #eef0f2; stroke: #b3b9bf; stroke-width: 2; }
.drive__svg .ink { fill: #2a2a2c; }
.drive__svg .hob { fill: #3a3a3c; }
.drive__svg .hob-ring { fill: none; stroke: #9a9a9e; stroke-width: 1.5; }
.drive__svg .stool { fill: #a6764f; stroke: #85593a; stroke-width: 2; }
.drive__svg .pot { fill: #b98a65; }
.drive__svg .leaf { fill: #86b573; }
.drive__svg .leaf-dk { fill: #629553; }
.drive__svg .lamp { fill: #ffd98a; filter: drop-shadow(0 0 8px #ffe08f); }
.drive__svg .label { font: 500 22px/1 Inter, system-ui, sans-serif; fill: #7a7267; letter-spacing: .02em; transition: fill .3s ease; }
.drive__svg .label.is-on { fill: #c4801f; font-weight: 600; }
.drive__svg .dockpad { fill: rgba(98,210,111,0); stroke: rgba(29,29,31,.2); stroke-width: 2; stroke-dasharray: 6 6; transition: fill .3s ease, stroke .3s ease; }
.drive__svg .dockpad.is-home { fill: rgba(98,210,111,.14); stroke: #62d26f; stroke-dasharray: none; }
.drive__svg .dock { fill: #1d1d1f; }
.drive__svg .dock-bolt { fill: #62d26f; }
.drive__svg .dock-bolt.is-home { filter: drop-shadow(0 0 6px #62d26f); }
.drive__svg .scan { fill: url(#dscan); stroke: rgba(29,29,31,.10); stroke-width: 1; stroke-linejoin: round; }
.drive__svg .scan.is-near { fill: url(#dscanhot); stroke: rgba(255,159,67,.45); }
.drive__svg .scan--rear { opacity: .55; }
.drive__svg .dot { fill: rgba(29,29,31,.28); }
.drive__svg .dot.is-near { fill: #ff9f43; r: 4; }
.drive__svg .trail__dot { fill: #9a6544; }
.drive__svg .brake__ring { fill: none; stroke: #ff5a5f; stroke-width: 4; animation: brakepulse .75s ease-out forwards; }
@keyframes brakepulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.drive__svg .sensor-ring { fill: none; stroke: rgba(29,29,31,.12); stroke-width: 2; stroke-dasharray: 2 6; }
.drive__svg .sensor-ring.is-on { stroke: #ff9f43; stroke-dasharray: none; stroke-width: 3; }
.drive__svg .vac { filter: drop-shadow(0 4px 4px rgba(0,0,0,.28)); }
.drive__svg .vac__body { fill: #2b2b2e; }
.drive__svg .vac__ring { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 2; }
.drive__svg .vac__bin { fill: #6e6e73; }
.drive__svg .vac__eye { fill: #62d26f; }
.drive__svg .vac.is-waiting .vac__eye { fill: #ff9f43; animation: vacblink 1s steps(1) infinite; }
@keyframes vacblink { 50% { opacity: .25; } }
.drive__svg .bot image { filter: drop-shadow(0 8px 8px rgba(0,0,0,.28)); }
.drive__svg .target { opacity: 0; transition: opacity .3s ease; }
.drive__svg .target.is-on { opacity: 1; }
.drive__svg .target circle { fill: none; stroke: #ffd98a; stroke-width: 3; filter: drop-shadow(0 0 6px #ffe9a8); animation: haloburst 2.4s ease-out infinite; }
.drive__svg .target circle:nth-child(2) { animation-delay: .5s; stroke: #ffefb8; }
.drive__svg .target circle:nth-child(3) { animation-delay: 1s; stroke: #fffbe8; }
.drive__svg .goal-zone { fill: rgba(255,255,255,.35); stroke: rgba(255,255,255,.9); stroke-width: 2; stroke-dasharray: 8 8; }
.drive__toast {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 22px 28px 20px; border-radius: 22px; text-align: center; min-width: 280px; max-width: min(92%, 420px); box-shadow: var(--shadow);
}
.drive__toast strong { display: block; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 6px; text-wrap: balance; }
.drive__toast span { display: block; font-size: 14px; color: var(--muted); text-wrap: balance; }
.drive__toast small { display: block; font-size: 12px; color: var(--muted); margin-top: 8px; }
.drive__toast .btn { margin-top: 14px; }
.drive__toast-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.drive__toast .drive__stars, .drive__stars { display: flex; justify-content: center; gap: 3px; margin: 2px 0 8px; }
.drive__stars i { display: block; width: 16px; height: 16px; background: var(--line); clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%); }
.drive__stars--loop i:nth-child(3n) { margin-right: 7px; }
.drive__stars--loop i:last-child { margin-right: 0; }
.drive__stars i.is-on { background: #e0a83a; animation: starpop .5s cubic-bezier(.2,1.4,.4,1) both; }
.drive__stars i.is-on:nth-child(2) { animation-delay: .12s; } .drive__stars i.is-on:nth-child(3) { animation-delay: .24s; }
@keyframes starpop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.drive__hud { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.drive__stat { padding: 9px 11px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); min-width: 0; }
.drive__stat--3 { grid-column: span 3; }
.drive__stat--2 { grid-column: span 2; }
.drive__stat strong { display: block; font-size: 18px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drive__stat small { display: block; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.drive__k { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.drive__k em { font-style: normal; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.drive__status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-height: 20px; }
.drive__dot { width: 8px; height: 8px; border-radius: 50%; background: #9a9a9e; flex: none; transition: background .2s ease; }
.drive__status.is-driving .drive__dot { background: #62d26f; box-shadow: 0 0 0 4px rgba(98,210,111,.18); }
.drive__status.is-assist .drive__dot { background: #ff9f43; box-shadow: 0 0 0 4px rgba(255,159,67,.2); }
.drive__status.is-stopped .drive__dot { background: #ff5a5f; box-shadow: 0 0 0 4px rgba(255,90,95,.18); }

.joy {
  position: relative; width: 196px; height: 196px; margin: 2px auto 0; border-radius: 50%; touch-action: none; cursor: grab; user-select: none;
  background: radial-gradient(circle at 50% 42%, #f8f6f1, #e7e2d9 66%, #d8d1c5 100%);
  box-shadow: inset 0 2px 6px rgba(255,255,255,.9), inset 0 -10px 18px rgba(0,0,0,.09), 0 10px 24px rgba(0,0,0,.10);
  outline: none;
}
.joy:focus-visible { box-shadow: 0 0 0 3px var(--accent), inset 0 2px 6px rgba(255,255,255,.9); }
.joy.is-active { cursor: grabbing; }
.joy__ring { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; inset: 20px; border-radius: 50%; border: 1px dashed rgba(0,0,0,.16); }
.joy__arc {
  position: absolute; top: -8px; right: -8px; bottom: -8px; left: -8px; inset: -8px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: conic-gradient(from calc(var(--ang, 0deg) - 40deg), transparent 0deg, #62d26f 40deg, transparent 80deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 7px), #000 calc(100% - 6px));
}
.joy__cross::before, .joy__cross::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(0,0,0,.09); transform: translate(-50%, -50%); }
.joy__cross::before { width: 2px; height: 116px; }
.joy__cross::after { width: 116px; height: 2px; }
.joy__shade {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(0,0,0,.45), rgba(0,0,0,0) 70%); opacity: .35; filter: blur(4px);
  transform: translate(0, 6px); transition: transform .22s cubic-bezier(.2,1.2,.4,1), opacity .22s ease;
}
.joy__knob {
  position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #8f6848 0%, #5e4030 46%, #3b2719 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.3), inset 0 -5px 10px rgba(0,0,0,.4);
  transition: transform .22s cubic-bezier(.2,1.2,.4,1);
  will-change: transform;
}
.joy__knob::after { content: ""; position: absolute; top: 9px; right: 9px; bottom: 9px; left: 9px; inset: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.joy.is-active .joy__knob, .joy.is-active .joy__shade { transition: none; }
.joy__knob i { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2a2a2c, #0f0f10); box-shadow: inset 0 1px 2px rgba(255,255,255,.2); }

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 2px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switch__track { position: relative; flex: none; width: 42px; height: 26px; border-radius: 13px; background: rgba(120,120,128,.32); transition: background .2s ease; }
.switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.switch input:checked + .switch__track { background: #62d26f; }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--accent); }
.switch__text { font-size: 13px; font-weight: 500; line-height: 1.3; }
.switch__text small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.drive__keys { font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.6; }
.drive__keys kbd { display: inline-block; min-width: 20px; padding: 1px 5px; margin: 0 1px; border-radius: 5px; border: 1px solid var(--line); background: var(--bg); font: 600 11px/1.5 Inter, system-ui, sans-serif; color: var(--text); }
.drive__reset { align-self: center; }
@media (max-width: 900px) {
  .drive__hud { grid-column: 1 / -1; grid-template-columns: repeat(12, 1fr); }
  .drive__hud .drive__stat--3 { grid-column: span 3; } .drive__hud .drive__stat--2 { grid-column: span 2; }
  .drive__status { grid-column: 1 / -1; }
  .joy { grid-row: span 3; }
  .drive__keys { text-align: left; }
}
@media (max-width: 700px) {
  /* phone: a taller scene with a camera that follows the chair, the joystick floating inside it */
  .drive { margin-top: 48px; }
  .lab__stage .joy{
    position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 148px; height: 148px; margin: 0;
    background: radial-gradient(circle at 50% 42%, rgba(248,246,241,.92), rgba(231,226,217,.92) 66%, rgba(216,209,197,.92) 100%);
    box-shadow: inset 0 2px 6px rgba(255,255,255,.9), inset 0 -8px 14px rgba(0,0,0,.08), 0 10px 24px rgba(0,0,0,.18);
  }
  .lab__stage .joy__ring{ top: 14px; right: 14px; bottom: 14px; left: 14px; inset: 14px; }
  .lab__stage .joy__cross::before{ height: 88px; } .lab__stage .joy__cross::after{ width: 88px; }
  .lab__stage .joy__knob{ width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .lab__stage .joy__knob i{ width: 16px; height: 16px; margin: -8px 0 0 -8px; }
  .lab__stage .joy__shade{ width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .lab__stage .joy__arc{ top: -6px; right: -6px; bottom: -6px; left: -6px; inset: -6px; }
  .drive__toast { width: 86%; min-width: 0; padding: 16px 16px 14px; }
  .drive__toast strong { font-size: 18px; }
  .drive__toast span { font-size: 13px; }
  .drive__toast small { margin-top: 4px; }
  .drive__hud { display: contents; }
  .drive__hud .drive__stat--3 { grid-column: span 3; }
  .drive__hud .drive__stat--2 { grid-column: span 2; }
  .drive__stat { padding: 10px 12px; }
  .drive__stat strong { font-size: 19px; }
  .drive__k { font-size: 11px; }
  .drive__status { grid-column: 1 / -1; font-size: 13.5px; padding: 2px 4px; }   /* fallback only: JS moves the pad into the scene on phones */
  .switch { grid-column: 1 / 4; }
  .switch__text { font-size: 14px; }
  .drive__keys { display: none; }
  .drive__reset { grid-column: 4 / 7; justify-self: end; align-self: center; height: 40px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .drive__svg .target circle, .drive__svg .brake__ring, .drive__svg .vac.is-waiting .vac__eye, .drive__stars i.is-on, .drive__flash.is-on{ animation: none; }
  .drive__svg .target circle { opacity: .7; }
}

/* Dock: clickable, shows charging state */
.navmap__dockpad { cursor: pointer; outline: none; }
@keyframes dockpulse { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.4); opacity: 0; } }

/* ---------- Who it's for ---------- */
/* v43: "A day with CIHANG" — the picnic photo beside a vertical day, each moment tagged with the situation it serves
   (the four persona cards and the horizontal timeline were merged into this one block; no icons) */
.life { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: stretch; }
.life__photo { display: flex; flex-direction: column; margin: 0; }
.life__photo img { aspect-ratio: 16 / 9; }
.life__day { list-style: none; margin: 0; padding: 6px 24px; display: flex; flex-direction: column; justify-content: space-between; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-alt); box-shadow: var(--shadow); }
.life__day li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.life__day li:first-child { border-top: 0; }
.life__day time { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.life__day strong { display: block; font-size: 16px; letter-spacing: -0.01em; margin-bottom: 2px; text-wrap: balance; }
.life__day span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.45; text-wrap: pretty; }
.life__day em { font-style: normal; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); white-space: nowrap; }


.orgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.orgs .card img { aspect-ratio: 4 / 3; }   /* v44: tighter, taller crops — more photograph, less corridor */

@media (max-width: 1100px) { .life { grid-template-columns: 1fr; } .life__day { padding: 4px 20px; } }
@media (max-width: 1000px) { .orgs { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .life__day li { grid-template-columns: 50px minmax(0, 1fr); row-gap: 8px; } .life__day em { grid-column: 2; justify-self: start; } }

/* ==========================================================================
   Phone layout. Everything below 700 px is tuned for a thumb and a small screen:
   larger type, one column, the demos rebuilt, and a buy bar that follows you.
   ========================================================================== */

/* ---------- Languages ---------- */
.i18n-loading body { visibility: hidden; }
.lang { position: relative; }
.lang__btn { width: auto; padding: 0 9px 0 8px; gap: 5px; }
.lang__code { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; }
.lang__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 168px; padding: 6px; border-radius: 16px; display: grid; gap: 2px; z-index: 60; box-shadow: var(--shadow); }
.lang__menu[hidden] { display: none; }
.lang__item { text-align: left; padding: 9px 12px; border-radius: 10px; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.lang__item:hover { background: rgba(0,0,0,.06); }
:root[data-theme="dark"] .lang__item:hover { background: rgba(255,255,255,.08); }
.lang__item.is-active { background: var(--text); color: var(--bg); }
.nav__sheet-langs { display: none; }
.lang__pill { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.lang__pill.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }
/* CJK: system fonts with proper glyphs, and no negative tracking on headlines */
:root:lang(zh-CN) { --font: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; }
:root:lang(ja) { --font: "Inter", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", sans-serif; }
:root:lang(ko) { --font: "Inter", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", sans-serif; }
:root:lang(zh-CN) .headline, :root:lang(ja) .headline, :root:lang(ko) .headline,
:root:lang(zh-CN) .buy__title, :root:lang(ja) .buy__title, :root:lang(ko) .buy__title,
:root:lang(zh-CN) .film__title, :root:lang(ja) .film__title, :root:lang(ko) .film__title { letter-spacing: 0; }
:root:lang(zh-CN) .lede, :root:lang(ja) .lede, :root:lang(ko) .lede,
:root:lang(zh-CN) p, :root:lang(ja) p, :root:lang(ko) p { line-height: 1.7; }
:root:lang(ja) body, :root:lang(zh-CN) body, :root:lang(ko) body { word-break: normal; overflow-wrap: anywhere; }

/* ---------- Menu sheet (≤ 820px) ---------- */
@media (max-width: 820px) {
  .nav__links {
    /* the nav's backdrop-filter makes it the containing block, so the sheet is absolute and sized to the viewport */
    position: absolute; left: 0; right: 0; top: var(--nav-h);
    height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h));
    padding: 12px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    border-bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav__links > a { padding: 14px 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); border-bottom: 1px solid var(--line); }
  .nav__links > a.is-active { color: var(--accent); }
  .nav__sheet-langs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 22px; }
  .nav__sheet-foot { display: flex; gap: 10px; margin-top: auto; padding-top: 24px; }
  .nav__sheet-foot .btn { flex: 1; height: 50px; font-size: 16px; padding: 0 18px; border-bottom: 0; }
  .nav__sheet-foot .btn--primary { background: var(--text); color: var(--bg); }
  .nav.is-open .nav__links { display: flex; }
  body.menu-open { overflow: hidden; }
  .lang__code { display: none; }
  .lang__btn { width: 36px; padding: 0; }
}

/* ---------- Sticky buy bar (phones only) ---------- */
.buybar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px; border-radius: 999px;
  transform: translateY(120%); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.buybar.is-on { transform: none; opacity: 1; }
.buybar__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.buybar__text strong { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.buybar__text span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar .btn { height: 44px; padding: 0 22px; flex: none; }
@media (max-width: 700px) { .buybar { display: flex; } .buybar[hidden] { display: none; } }

.navmap__roomlist { display: none; }

@media (max-width: 700px) {
  :root { --radius: 22px; --radius-s: 16px; }
  .container, .container--wide, .container--narrow { width: min(100%, 100% - 40px); }
  .container + .container, .container + .container--wide { margin-top: 36px; }
  .section { padding-block: 64px; }
  .eyebrow { font-size: 12px; margin-bottom: 14px; }
  .headline { font-size: clamp(29px, 8.4vw, 36px); line-height: 1.1; letter-spacing: -0.028em; max-width: none; }
  .sub-headline { font-size: 24px; margin-bottom: 20px; }
  .lede { font-size: 17px; line-height: 1.5; margin-top: 16px; }
  .btn { height: 48px; font-size: 16px; }
  .card figcaption { padding: 16px 18px 18px; font-size: 15px; line-height: 1.45; }
  .card figcaption strong { font-size: 16px; }
  .stat-row { gap: 22px 18px; padding-top: 24px; }
  .stat__num { font-size: 30px; }
  .stat__label { font-size: 14px; margin-top: 6px; }

  /* Film: the video stays whole, the controls sit under it, then a short opener */
  .film { background: #0c0c0d; color: #f5f5f7; }
  .film__frame { display: flex; flex-direction: column; aspect-ratio: auto; height: auto; overflow: visible; }
  .film__frame video, .film__frame img { aspect-ratio: 16 / 9; height: auto; width: 100%; object-fit: cover; }
  .video-controls { position: static; padding: 12px 20px 0; gap: 10px; }
  .video-time { font-size: 12px; min-width: 74px; text-shadow: none; color: #a1a1a6; }
  .vbtn { height: 38px; }
  #video-sound, #video-play { width: 38px; }
  .film__intro { display: block; padding: 22px 20px 34px; }
  .film__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #d2a67f; margin: 0 0 10px; }
  .film__title { font-size: clamp(28px, 8.2vw, 34px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; max-width: 15ch; }
  .film__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 15px; font-weight: 500; color: #a1a1a6; }
  .film__more svg { animation: cue 2s ease-in-out infinite; transform: none; }
  @keyframes cuephone { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
  .film__more svg { animation-name: cuephone; }

  /* Buy: kept short so the picture is never far above the price */
  .buy { padding-block: 40px 56px; }
  .buy__grid { gap: 20px; }
  .buy__main { aspect-ratio: 4 / 3; border-radius: 22px; }
  .buy__main img { object-fit: contain; background: #fff; }
  .buy__thumbs { gap: 8px; margin-top: 10px; }
  .buy__thumbs button { flex: 1; width: auto; height: 54px; border-radius: 12px; }
  .buy__title { font-size: 40px; }
  .buy__sub { font-size: 16px; margin-top: 8px; }
  .buy__group { margin-top: 18px; }
  .buy__group h3 { margin-bottom: 8px; }
  .buy__options { grid-template-columns: 1fr 1fr; gap: 8px; }
  .opt { padding: 12px 10px; border-radius: 14px; align-items: center; text-align: center; }
  .opt strong { font-size: 16px; }
  .opt span { display: none; }                      /* the price note below says what the version is for */
  .buy__swatches { gap: 8px; }
  .swatch { flex: 1; justify-content: center; font-size: 14.5px; padding: 8px 10px 8px 8px; gap: 8px; }
  .swatch__more { display: none; }
  .buy__includes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; margin-top: 18px; padding-top: 16px; }
  .buy__includes li { gap: 8px; font-size: 13.5px; }
  .buy__includes strong { font-size: 17px; min-width: 52px; }
  /* long 'Offline' labels (Hors ligne, Sin conexión, オフライン, 오프라인): one column so the text beside them has room */
  :root:lang(fr) .buy__includes, :root:lang(es) .buy__includes, :root:lang(ja) .buy__includes, :root:lang(ko) .buy__includes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .buy__price { margin-top: 18px; padding: 14px 14px 14px 18px; }
  .buy__amount { font-size: 28px; }
  .buy__price .btn { flex: 1; }

  /* Fold */
  .unfold { height: 130vh; }
  .unfold__stage { width: 100%; aspect-ratio: 3 / 2; border-radius: 22px; }
  .unfold__poster, .unfold__canvas { object-fit: cover; object-position: 15% 50%; }   /* 3:2 keeps the film caption and the chair whole */

  /* Design */
  .design-side { gap: 14px; }
  .material-list { padding: 4px 20px; }
  .material-list li { padding: 14px 0; }
  .material-list span { font-size: 16px; }
  .material-list small { font-size: 14px; }
  .banner figcaption { padding: 16px 18px 18px; font-size: 15px; }
  .banner figcaption strong { display: block; margin: 0 0 3px; font-size: 16px; }

  /* Voice */
  .chat { padding: 18px; border-radius: 22px; }
  .bubble { font-size: 16px; padding: 11px 15px; }
  .feature-list { gap: 22px; }
  .feature h3 { font-size: 19px; }
  .feature p { font-size: 16px; }

  /* Autonomy: the plan gets the whole width; rooms become dots plus a chip list; the app is a card */
  .navmap { gap: 14px; }
  :root[data-theme="dark"] .phone__screen { background: var(--bg); }
  .navmap__tele { grid-template-columns: 1.25fr 1fr 1.15fr; gap: 8px; }
  .tele { flex-direction: column; align-items: stretch; padding: 10px 12px; border-radius: 14px; }
  .tele__label { font-size: 10px; min-width: 0; }
  .tele__value { font-size: 16px; }
  .tele small { display: block; font-size: 11px; }
  .navmap__log { min-height: 64px; max-height: 160px; gap: 8px; }
  .msg { font-size: 14.5px; padding: 9px 13px; border-radius: 16px; max-width: 88%; }
  .navmap__chips { gap: 8px; }
  .navmap__chips button { height: 34px; padding: 0 14px; font-size: 13.5px; }
  .navmap__ask { gap: 8px; }
  .navmap__ask input { height: 44px; font-size: 16px; padding: 0 16px; }
  .navmap__ask button { width: 44px; height: 44px; }
  .navmap__ask button svg { width: 18px; height: 18px; }

  /* Perception */
  .split .card img { height: auto; }
  .spec-list { padding: 4px 20px; }
  .spec-list > div { padding: 13px 0; }
  .spec-list dt { font-size: 16px; }
  .spec-list dd { font-size: 14.5px; }
  .ways__title { font-size: 26px; margin-bottom: 18px; }
  .ways__list { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 12px; margin: 0 -20px; scrollbar-width: none; }
  .ways__list::-webkit-scrollbar { display: none; }
  .way { flex: 0 0 44%; scroll-snap-align: start; padding: 22px 12px 20px; }
  .way svg { width: 40px; height: 40px; margin-bottom: 12px; }
  .way span { font-size: 16px; }
  .way small { font-size: 13.5px; }

  /* People */
  .life { gap: 14px; }
  .life__day { padding: 2px 18px; }
  .life__day li { padding: 13px 0; }
  .life__day strong { font-size: 17px; }
  .life__day span { font-size: 14.5px; }

  /* Specs: one line per number */
  .spec-grid { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
  .spec-grid .spec.glass {
    flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 0;
    padding: 15px 2px; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .spec__num { font-size: 24px; white-space: nowrap; }
  .spec__label { margin-top: 0; font-size: 15px; text-align: right; max-width: 58%; }

  /* FAQ + closing */
  .faq summary { font-size: 17.5px; padding: 18px 40px 18px 0; }
  .faq p { font-size: 16.5px; padding-bottom: 20px; }
  .closing .cta-row { flex-direction: column; align-items: stretch; }
  .closing .cta-row .btn { width: 100%; }
  .footer { padding-block: 32px 40px; }
}

/* the point cloud could not start (very old browser): no scroll track, the plan and its controls just sit in the page */
.scan--off, .scan--off .lab__track { height: auto !important; }
.scan--off .lab__sticky, .scan--off .lab__stage { position: static !important; height: auto !important; top: auto !important; }
.scan--off .scan__layer { display: none; }

/* ---------- Older browser cores (no aspect-ratio: Chromium < 88, Safari < 15 — still common in some desktop browsers) ----------
   Boxes whose content is absolutely positioned would collapse to nothing; give them their height with padding instead. */
@supports not (aspect-ratio: 1 / 1) {
  .unfold__stage::before { content: ""; display: block; padding-top: 56.25%; }
  .lab__plan::before { content: ""; display: block; padding-top: 65.885%; }
  .film__frame { height: calc(100vh - var(--nav-h)); }
  .card img, .design-side .card img, .split .card img, .orgs .card img, .life__photo img { height: auto; }
  .banner img { height: auto; }
  @media (max-width: 700px) {
    .lab__stage.is-drive .lab__plan::before { padding-top: 125%; }
    .unfold__stage::before { padding-top: 66.667%; }
  }
}

/* =========================================================================
   Contact & pre-order form (v46)
   One form lives in #contact; the overlay borrows the same node, so these
   rules dress it in both places. Explicit top/right/bottom/left before every
   inset, and vh before svh, for the older cores the rest of the site supports.
   ========================================================================= */

.contact .lede { max-width: 54ch; }
.contact__slot { margin-top: clamp(28px, 4vw, 44px); }

.pform { display: flex; flex-direction: column; gap: 20px; }
.pform__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}
.fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fld > span { font-size: 13px; color: var(--muted); }
.fld input,
.fld textarea {
  font: inherit;
  font-size: 16px;                   /* 16px keeps iOS from zooming on focus */
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 15px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.fld textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--muted-2); }
.fld input:focus, .fld textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(154, 101, 68, .16);
}
:root[data-theme="dark"] .fld input:focus,
:root[data-theme="dark"] .fld textarea:focus { box-shadow: 0 0 0 3px rgba(210, 166, 127, .2); }
.fld input.is-bad, .fld textarea.is-bad { border-color: #c0392b; }
:root[data-theme="dark"] .fld input.is-bad,
:root[data-theme="dark"] .fld textarea.is-bad { border-color: #ff8a80; }

/* version: the same segmented control the app inside the phone uses */
.pform__seg { display: flex; gap: 2px; background: var(--seg); border-radius: 14px; padding: 3px; }
.pform__opt { flex: 1 1 0; position: relative; min-width: 0; margin: 0; }
.pform__opt input {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.pform__opt span {
  display: block; text-align: center; padding: 11px 8px; border-radius: 11px;
  font-size: 15px; color: var(--muted);
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.pform__opt input:checked + span {
  background: var(--seg-on); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}
.pform__opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the field no person ever sees; anything typed here is a machine */
.pform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pform__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pform__send { min-width: 148px; }
.pform__send[disabled] { opacity: .55; cursor: default; transform: none; }
.pform__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted-2); max-width: 40ch; }
.pform__msg { margin: 0; font-size: 14.5px; line-height: 1.6; }
.pform__msg:empty { display: none; }
.pform__msg.is-bad-msg { color: #c0392b; }
:root[data-theme="dark"] .pform__msg.is-bad-msg { color: #ff8a80; }
.pform__msg.is-bad-msg a { color: inherit; }
.pform__msg.is-ok { color: var(--text); font-size: 17px; }
.pform__again {
  font: inherit; font-size: 14.5px; color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.pform.is-sent .pform__grid,
.pform.is-sent .fld--full,
.pform.is-sent .pform__foot { display: none; }

/* ---------- the overlay ---------- */
.modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal[hidden] { display: none; }
.modal__scrim {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background: rgba(0, 0, 0, .34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .22s ease;
}
.modal.is-open .modal__scrim { opacity: 1; }
.modal__panel {
  position: relative;
  width: 100%; max-width: 620px;
  max-height: calc(100vh - 48px); max-height: calc(100svh - 48px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--glass-menu);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 34px 30px;
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .22s ease, transform .22s ease;
}
.modal.is-open .modal__panel { opacity: 1; transform: translateY(0) scale(1); }
.modal__x {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.modal__x:hover { background: var(--seg); color: var(--text); }
.modal__title { margin: 0; font-size: clamp(22px, 2.4vw, 27px); letter-spacing: -.02em; padding-right: 32px; }
.modal__sub { margin: 10px 0 26px; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 46ch; }
.modal__slot .pform { gap: 18px; }
/* inside the panel the fields sit a shade deeper, so they read as fields */
.modal__slot .fld input, .modal__slot .fld textarea { background: var(--bg); }
body.modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .modal__scrim, .modal__panel { transition: none; }
  .modal__panel { transform: none; }
}

/* ---------- narrow ---------- */
@media (max-width: 760px) {
  .pform__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pform__note { max-width: none; }
}
@media (max-width: 700px) {
  /* a sheet from the bottom edge, the way the phone menu already behaves */
  .modal { align-items: flex-end; padding: 0; }
  .modal__panel {
    max-width: none;
    max-height: 96vh; max-height: 96svh;
    border-radius: 28px 28px 0 0;
    border-bottom: 0;
    padding: 28px 20px calc(24px + env(safe-area-inset-bottom));
    transform: translateY(24px);
  }
  .modal.is-open .modal__panel { transform: translateY(0); }
  .modal__title { font-size: 23px; margin-bottom: 20px; }
  /* the sheet's own title says what this is; the full sentence stays in the
     Contact section, where there is room for it */
  .modal__sub { display: none; }
  .pform__foot { gap: 12px; }
  .pform__send { width: 100%; }
  /* on a phone the sheet is the whole screen, so the Send button has to be reachable
     without a long scroll: tighter rows, shorter message box */
  .modal__slot .pform { gap: 14px; }
  .modal__slot .pform__grid { gap: 14px; }
  .modal__slot .fld { gap: 6px; }
  .modal__slot .fld input, .modal__slot .fld textarea { padding: 11px 13px; border-radius: 12px; }
  .modal__slot .fld textarea { min-height: 74px; }
  .modal__slot .pform__opt span { padding: 10px 8px; }
  .modal__slot .pform__note { font-size: 12.5px; }
}
/* the sticky buy bar steps aside while the form is open */
body.modal-open .buybar { display: none; }

/* ---------- Split section header (v47, Autonomy): eyebrow on top, then the headline and the lede side by side
   on the demo's width, so the intro is wider and about half as tall. Stacks again under 900 px. ---------- */
.sec-head__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 88px); align-items: start;
}
.sec-head__row .headline { max-width: none; }
.sec-head__row .lede {
  margin-top: 0; padding-top: .3em;          /* first line sits level with the headline's cap height */
  max-width: 54ch; justify-self: end;
  font-size: clamp(17px, 1.4vw, 20px);
}
@media (max-width: 900px) {
  .sec-head__row { display: block; }
  .sec-head__row .lede { margin-top: 18px; padding-top: 0; max-width: 62ch; justify-self: auto; }
}

/* ---------- v49: clearer hints once the map is ready (Leo 10/15: 不同房间点击切换 以及manual模式的暗示需要更明显) ----------
   Rooms: each pin's dot sends out a soft glowing ring (staggered) and a line on the plan says what to do, until a room has
   been chosen (.has-sent); then the line points at Manual. Manual: a warm breathing glow, the accent colour and a joystick
   icon until it has been tried (.is-driven). Glow, not spin. */
.lab__svg .lab__pin circle.lab__pin-pulse { fill: none !important; stroke: var(--accent); stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.lab__scan.is-done:not(.has-sent) .lab__sticky.play .lab__pin:not(.is-active) circle.lab__pin-pulse { animation: pin-pulse 2.4s ease-out infinite; animation-delay: var(--pd, 0s); }
@keyframes pin-pulse { 0% { opacity: .75; transform: scale(1); } 70% { opacity: 0; transform: scale(var(--pulse-s, 3.4)); } 100% { opacity: 0; transform: scale(var(--pulse-s, 3.4)); } }
.lab__svg .lab__pin rect { transition: filter .2s ease; }
.lab__svg .lab__pin:hover rect { filter: drop-shadow(0 2px 6px rgba(0,0,0,.28)); }
.lab__scan.is-done:not(.has-sent) .lab__svg .lab__pin rect { stroke: rgba(154, 101, 68, .35); }
.lab__coach { position: absolute; left: 50%; top: 14px; z-index: 5; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 9px 15px; border-radius: 999px;
  transform: translate(-50%, -6px); opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .35s ease; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.lab__scan.is-done:not(.is-driven) .lab__coach { opacity: 1; transform: translate(-50%, 0); }
.lab__coach svg { flex: none; width: 18px; height: 18px; color: var(--accent); }
.lab__coach-ic { animation: coach-tap 1.5s ease-in-out infinite; }
@keyframes coach-tap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.lab__coach-or { font-weight: 500; color: var(--muted); }
.lab__coach b { color: var(--accent); font-weight: 700; }
.lab__coach-joy, .lab__coach-now, .lab__coach-arrow { display: none; }
.lab__coach-arrow { font-style: normal; color: var(--accent); animation: coach-arrow 1.2s ease-in-out infinite; }
@keyframes coach-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.lab__scan.has-sent .lab__coach-ic, .lab__scan.has-sent .lab__coach-t, .lab__scan.has-sent .lab__coach-or { display: none; }
.lab__scan.has-sent .lab__coach-joy, .lab__scan.has-sent .lab__coach-now { display: inline-block; }
.lab__scan.has-sent .lab__coach-arrow { display: inline-block; }
.lab__stage.is-drive .lab__coach { opacity: 0 !important; }
/* Manual: breathing warm glow + accent + joystick icon until tried (replaces the v40 ring burst) */
.lab__scan.is-done:not(.is-driven) .lab__mode[data-mode="drive"]:not(.is-active) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--accent); background: rgba(154, 101, 68, .14); animation: lab-glow 2.2s ease-in-out infinite; }
.lab__scan.is-done.has-sent:not(.is-driven) .lab__mode[data-mode="drive"]:not(.is-active) { animation-duration: 1.4s; background: rgba(154, 101, 68, .2); }
.lab__scan.is-done:not(.is-driven) .lab__mode[data-mode="drive"]:not(.is-active)::before { content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Cpath d='M12 10v6M5 16h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Cpath d='M12 10v6M5 16h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes lab-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(154, 101, 68, 0), 0 0 0 0 rgba(154, 101, 68, 0); } 50% { box-shadow: 0 0 0 2px rgba(154, 101, 68, .4), 0 0 18px 4px rgba(154, 101, 68, .38); } }
:root[data-theme="dark"] .lab__scan.is-done:not(.is-driven) .lab__mode[data-mode="drive"]:not(.is-active) { background: rgba(214, 160, 120, .16); }
@media (max-width: 820px) {
  .lab__svg .lab__pin circle.lab__pin-pulse { --pulse-s: 1.7; stroke-width: 8; }
  .lab__coach { top: auto; bottom: 12px; white-space: normal; flex-wrap: wrap; justify-content: center; text-align: center; font-size: 12.5px; padding: 8px 12px; border-radius: 16px; width: max-content; }
  .lab__coach-arrow { transform: rotate(-45deg); animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lab__scan.is-done:not(.has-sent) .lab__sticky.play .lab__pin:not(.is-active) circle.lab__pin-pulse, .lab__coach-ic, .lab__coach-arrow,
  .lab__scan.is-done:not(.is-driven) .lab__mode[data-mode="drive"]:not(.is-active) { animation: none; }
}

/* v50: the demo pointer on the Autonomy plan (assets/js/lab-demo.js) — glides to a room and clicks it, then points at Manual */
.lab__ghost { position: absolute; left: 0; top: 0; z-index: 30; width: 0; height: 0; pointer-events: none; opacity: 0; transform: translate(0, 0); transition: transform var(--gd, .9s) cubic-bezier(.55, .06, .25, 1), opacity .3s ease; will-change: transform; }
.lab__ghost.is-on { opacity: 1; }
.lab__ghost-arrow { position: absolute; left: -2.8px; top: -2.8px; width: 28px; height: 36px; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); transform-origin: 2.8px 2.8px; transition: transform .14s ease; }
.lab__ghost-arrow path { fill: #111; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.lab__ghost.is-press .lab__ghost-arrow { transform: scale(.8); }
.lab__ghost-ring { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--accent); background: rgba(154, 101, 68, .16); opacity: 0; transform: scale(.3); }
.lab__ghost.is-click .lab__ghost-ring { animation: ghost-ring .62s ease-out; }
.lab__ghost.is-hint .lab__ghost-ring { animation: ghost-ring 1.1s ease-out infinite; }
.lab__ghost.is-hint .lab__ghost-arrow { animation: ghost-tap 1.1s ease-in-out infinite; }
.lab__ghost-dot { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .5); border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 3px 10px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(0, 0, 0, .06); transition: transform .14s ease; }
.lab__ghost.is-press .lab__ghost-dot { transform: scale(.76); }
.lab__ghost.is-hint .lab__ghost-dot { animation: ghost-tapdot 1.1s ease-in-out infinite; }
@keyframes ghost-ring { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes ghost-tap { 0%, 100% { transform: translate(0, 0) scale(1); } 35% { transform: translate(-2px, -2px) scale(.84); } 60% { transform: translate(0, 0) scale(1); } }
@keyframes ghost-tapdot { 0%, 100% { transform: scale(1); } 35% { transform: scale(.8); } 60% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .lab__ghost { display: none; } }
/* v51: Korean breaks between words, not syllables (keeps the no-orphan glue working) */
:lang(ko) :is(p, li, dd, figcaption, small, .lede, h1, h2, h3) { word-break: keep-all; overflow-wrap: anywhere; }