/* GUHIT Studio - site styles.
   The page is a drawing sheet: hairline column grid, dimension strings between
   acts, a title block at the end. Palette and motion tokens come from the app's
   src/styles/tokens.css so the site and the product feel like one thing. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* Metric-matched fallbacks so the swap does not shift the layout. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Segoe UI"), local("Roboto");
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Mono Fallback";
  src: local("Menlo"), local("Consolas"), local("DejaVu Sans Mono"), local("monospace");
  size-adjust: 96%;
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root {
  /* Brand: the logo's navy field, its teal door-swing arc, off-white paper.
     --teal stays the app's darker interaction teal, which holds AA on paper;
     --arc is the logo's light teal and is only ever used as a mark or on navy. */
  --paper: #f7f5f0;
  --paper-2: #efece4;
  --surface: #ffffff;
  --navy: #1f2d44;
  --navy-2: #2b3c57;
  --navy-line: #3a4c68;
  --ink-2: #4b5c71;
  --ink-3: #5d6a79;
  --line: #ddd8cd;
  --line-2: #e7e3d9;
  --line-strong: #bab5a8;
  --arc: #8fc9cf;
  --teal: #0e8a8f;
  --teal-strong: #0a6d71;
  --teal-text: #0a6d71;
  --blue: #1f5f99;
  --ai: #6b4fbb;
  --chrome-text: #e2e9f1;
  --chrome-muted: #9aabc0;

  --dur-press: 80ms;
  --dur-hover: 120ms;
  --dur-base: 180ms;
  --dur-panel: 240ms;
  --dur-scene: 360ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.8, 0.3);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: linear(0, 0.35 12%, 0.72 24%, 0.96 36%, 1.06 48%, 1.05 58%, 1.01 72%, 0.995 86%, 1);
  --press-scale: 0.97;

  --measure: 1320px;
  --gutter: clamp(18px, 4.2vw, 68px);
  --cols: 12;

  --f-sans: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", "Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--f-sans);
  font-size: clamp(1rem, 0.94rem + 0.26vw, 1.12rem);
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: #cfe9e9; color: var(--navy); }

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

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 90;
  transform: translateY(-160%);
  background: var(--navy); color: var(--paper);
  padding: 10px 18px; text-decoration: none; font-weight: 600;
  transition: transform var(--dur-base) var(--ease-out);
}
.skip:focus-visible { transform: none; }

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}

/* ---------- the sheet grid ---------------------------------------------- */

.sheet-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
}
.sheet-grid__cols {
  width: 100%;
  max-width: var(--measure);
  margin-inline: var(--gutter);
  border-left: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  background-image: repeating-linear-gradient(
    to right,
    var(--line-2) 0 1px,
    transparent 1px calc(100% / var(--cols))
  );
}

.hero, main, .block, .tag { position: relative; z-index: 1; }

/* ---------- crosshair cursor -------------------------------------------- */

.crosshair {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-panel) var(--ease-out);
  will-change: transform;
}
.crosshair.on { opacity: 1; }
.crosshair i {
  position: absolute; background: var(--teal); opacity: .5;
}
.crosshair i:first-child { left: -13px; top: -.5px; width: 26px; height: 1px; }
.crosshair i:nth-child(2) { top: -13px; left: -.5px; height: 26px; width: 1px; }
.crosshair b {
  position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px;
  background: var(--teal); border-radius: 50%;
  transition: transform var(--dur-hover) var(--ease-out);
}
.crosshair.hot b { transform: scale(2.2); }
@media (hover: none), (pointer: coarse) { .crosshair { display: none; } }

/* ---------- type --------------------------------------------------------- */

.num { font-family: var(--f-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }

.h2 {
  font-size: clamp(2.15rem, 1.1rem + 4.4vw, 4.4rem);
  font-weight: 600;
  font-stretch: 108%;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 0.7em;
}
/* headings with no manual <br> get an even rag */
.band--dark .h2, .get .h2 { text-wrap: balance; }
.h3 {
  font-size: clamp(1.5rem, 1rem + 1.9vw, 2.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 0.6em;
}

p { margin: 0 0 1.1em; max-width: 60ch; }
b { font-weight: 600; }

/* ---------- buttons ------------------------------------------------------ */

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 14px; }
.cta--big { justify-content: center; margin-top: 44px; }

.btn {
  --bg: var(--navy);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.012em;
  text-decoration: none;
  color: var(--paper);
  background: var(--bg);
  border: 1px solid var(--navy);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              background-color var(--dur-hover) var(--ease-out);
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--teal-strong);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-base) var(--ease-out);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20, 40, 63, 0.18); }
.btn:hover::after { transform: scaleY(1); }
.btn:active { transform: translateY(0) scale(var(--press-scale)); transition-duration: var(--dur-press); }
.btn__os { width: 16px; height: 16px; flex: none; }

.btn--ghost {
  color: var(--navy); background: transparent;
}
.btn--ghost:hover { color: var(--paper); }

.cta__note { font-size: 0.86rem; color: var(--ink-2); margin: 0; }
.cta__note--center { text-align: center; margin: 4px auto 0; width: fit-content; max-width: 100%; }
.btn__meta {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0;
  padding: 2px 6px; margin-left: 2px;
  border: 1px solid currentColor; opacity: 0.7;
}
.btn__meta:empty { display: none; }
.cta__alt { display: block; margin-top: 4px; }
.cta__alt a {
  color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.cta__alt a:hover { color: var(--teal-text); border-color: var(--teal-text); }

/* ---------- download help ------------------------------------------------ */

.dl-help {
  margin: 18px 0 0; max-width: 560px; text-align: left;
  background: var(--surface); border: 1px solid var(--navy);
  box-shadow: 6px 6px 0 var(--line);
  padding: 16px 18px 14px;
}
.dl-help[data-center] { margin-inline: auto; }
/* the step lists set their own display, so `hidden` needs to win explicitly */
.dl-help[hidden], .dl-help [hidden] { display: none; }
.dl-help__head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.dl-help__title { margin: 0 0 10px; font-weight: 600; font-size: 0.98rem; outline: none; }
.dl-help__close {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: transparent; color: var(--navy); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.dl-help__close svg { width: 14px; height: 14px; }
.dl-help__close:hover { background: var(--paper-2); }
.dl-help__close:active { transform: scale(var(--press-scale)); }
.dl-help__close:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dl-help__steps {
  list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 8px;
  font-size: 0.92rem; color: var(--ink-2);
}
.dl-help__steps li { counter-increment: step; position: relative; padding-left: 34px; line-height: 1.5; }
.dl-help__steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0.28em;
  font-family: var(--f-mono); font-size: 0.72rem; color: var(--teal-text);
}
.dl-help__steps b { color: var(--navy); font-weight: 600; }
.dl-help__note { margin: 10px 0 0; font-size: 0.8rem; color: var(--ink-3); }

.dl-guide {
  max-width: 880px; margin: 42px auto 0; text-align: left;
  border-top: 1px solid var(--line-strong); padding-top: 22px;
}
.dl-guide__h { margin: 0 0 14px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.dl-guide__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.dl-guide__os { margin: 0 0 10px; font-weight: 600; }
@media (max-width: 720px) { .dl-guide__cols { grid-template-columns: 1fr; } }

/* ---------- hero --------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(96px, 14vh, 170px) 0 clamp(56px, 9vh, 110px);
  overflow: clip;
}
.hero__field { position: absolute; inset: -18% 0 -10%; z-index: 0; pointer-events: none; }
.hero__field-inner {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 0 1px, transparent 1px 100%),
    linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 100%);
  background-size: 44px 44px;
  opacity: .5;
  mask-image: radial-gradient(120% 90% at 30% 35%, #000 0%, #000 42%, transparent 82%);
  will-change: transform;
}
.hero__wrap { z-index: 1; }

.hero__mark { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(22px, 4vh, 44px); }
.monogram { width: clamp(46px, 5vw, 58px); height: auto; aspect-ratio: 1; flex: none; }
.mg { stroke-dasharray: var(--len); stroke-dashoffset: 0; }
.hero__eyebrow {
  margin: 0; font-size: 0.84rem; letter-spacing: 0.01em; color: var(--ink-2);
  font-family: var(--f-mono);
  border-left: 1px solid var(--line-strong); padding-left: 18px;
}

.hero__h1 { margin: 0; display: block; }
.wordmark {
  display: block;
  font-size: clamp(4.4rem, 21vw, 20rem);
  font-weight: 600;
  font-stretch: 122%;
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin-left: -0.035em;
  color: var(--navy);
}
.hero__tagline {
  display: block;
  font-size: clamp(1.15rem, 0.7rem + 1.9vw, 2.05rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.16;
  margin-top: clamp(14px, 2.4vh, 26px);
  color: var(--navy);
}
.hero__lede {
  margin-top: clamp(20px, 3vh, 34px);
  max-width: 54ch;
  color: var(--ink-2);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.18rem);
}

.cue {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: clamp(26px, 5vh, 56px);
  text-decoration: none; color: var(--ink-2);
  font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.04em;
}
.cue__rail { display: block; width: 1px; height: 46px; background: var(--line-strong); position: relative; overflow: hidden; }
.cue__rail i { position: absolute; left: 0; top: 0; width: 1px; height: 16px; background: var(--teal); animation: cue 2.2s var(--ease-in-out) infinite; }
@keyframes cue { 0% { transform: translateY(-16px); } 55%, 100% { transform: translateY(46px); } }
.cue:hover { color: var(--teal-text); }

/* load sequence */
@media (prefers-reduced-motion: no-preference) {
  /* the mark draws itself once: frame, partition, bar, leaf, then the arc */
  .mg {
    stroke-dashoffset: var(--len);
    animation: draw var(--t) var(--ease-in-out) var(--d) forwards;
  }
  .hero__eyebrow, .wordmark, .hero__tagline, .hero__lede, .cta, .cta__note, .cue {
    animation: rise 700ms var(--ease-out) both;
  }
  .hero__eyebrow { animation-delay: calc(380ms + var(--intro-o, 0ms)); }
  .wordmark { animation-delay: calc(120ms + var(--intro-o, 0ms)); }
  .hero__tagline { animation-delay: calc(260ms + var(--intro-o, 0ms)); }
  .hero__lede { animation-delay: calc(360ms + var(--intro-o, 0ms)); }
  .cta { animation-delay: calc(440ms + var(--intro-o, 0ms)); }
  .cta__note { animation-delay: calc(500ms + var(--intro-o, 0ms)); }
  .cue { animation-delay: calc(620ms + var(--intro-o, 0ms)); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ---------- the load sequence overlay ------------------------------------ */

/* The hero's entrance waits for the mark to land in its place: main.js sets
   --intro-o on <html> to that moment, and the text rises from there. The
   intro is also the page's loader, so the moment is not known in advance:
   until main.js sets it nothing starts (the long default), and an intro that
   ends any other way (skipped, or its last-resort timer) shows the text at
   once (0ms). */
html.intro-on { --intro-o: 600s; }
html.intro-done { --intro-o: 0ms; }

.intro { display: none; }
html.intro-on .intro, html.intro-reduced .intro {
  display: block;
  position: fixed; inset: 0; z-index: 200;
  pointer-events: none;
}
.intro__field {
  position: absolute; inset: 0;
  background: var(--navy);
  transform-origin: 0 0;
  will-change: transform;
}
/* The same 44px module as the hero field. One <line> per grid line, built and
   animated by main.js so each one draws on its own clock, in a random order. */
.intro__grid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.intro__grid line {
  stroke: rgba(255, 255, 255, .14);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* ---------- the loader's hold state ------------------------------------- */
/* Shown only if the page is still loading when the animation reaches its
   collapse point. --markr is half the lit mark's height, set by main.js. */
.intro__load {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--markr, 180px) + 40px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0;
  transition: opacity 320ms linear;
}
.intro.is-loading .intro__load { opacity: 1; }
.intro__caption {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.intro__bar {
  width: 132px; height: 1px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}
.intro__bar i {
  display: block; height: 100%; width: 100%;
  background: var(--arc);
  transform: scaleX(var(--load, 0));
  transform-origin: 0 50%;
  transition: transform 260ms var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  /* the teal arc breathes while the loader waits, so the held G is not frozen.
     The arc is the only .mg that is a direct child of the monogram. */
  html.intro-on .monogram.is-waiting > .mg {
    animation: mg-breathe 1600ms var(--ease-in-out) infinite;
  }

  /* the hero is below the overlay, the mark alone rises above it */
  html.intro-on .hero, html.intro-on .hero__wrap { z-index: auto; }
  html.intro-on .crosshair { display: none; }
  html.intro-on .monogram {
    position: relative; z-index: 210;
    opacity: 0;
    transition: opacity 140ms linear;
    will-change: transform;
  }
  html.intro-on .monogram.is-lit { opacity: 1; }
  /* Under the intro every stroke is driven from main.js instead, on the same
     clock as the grid and the collapse, so no phase can drift into the next. */
  html.intro-on .mg { animation: none; stroke-dashoffset: var(--len); }
  /* After the landing the word leads: the eyebrow beside the mark first, then
     the rest while GUHIT is still being written. Nothing shows while the
     field is still moving, so nothing crosses the word. */
  html.intro-on .hero__eyebrow, html.intro-done .hero__eyebrow { animation-delay: calc(160ms + var(--intro-o)); }
  html.intro-on .hero__tagline, html.intro-done .hero__tagline { animation-delay: calc(520ms + var(--intro-o)); }
  html.intro-on .hero__lede, html.intro-done .hero__lede { animation-delay: calc(640ms + var(--intro-o)); }
  html.intro-on .cta, html.intro-done .cta { animation-delay: calc(740ms + var(--intro-o)); }
  html.intro-on .cta__note, html.intro-done .cta__note { animation-delay: calc(800ms + var(--intro-o)); }
  html.intro-on .cue, html.intro-done .cue { animation-delay: calc(960ms + var(--intro-o)); }
  /* the wordmark is not raised in, it is written once the mark has landed
     (see .write below), and until then it is not shown at all */
  html.intro-on .wordmark, html.intro-done .wordmark { animation: none; }
  html.intro-on .wordmark { visibility: hidden; }
  html.intro-on .intro.is-closing .intro__grid,
  html.intro-on .intro.is-closing .intro__load { opacity: 0; transition: opacity 260ms linear; }
}
@keyframes mg-breathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* Reduced motion: the field holds the static, already-drawn mark and the
   progress line, then fades. Nothing draws, nothing collapses. The hero's own
   stacking context has to stand down, or the mark cannot rise above the field. */
html.intro-reduced .hero, html.intro-reduced .hero__wrap { z-index: auto; }
html.intro-reduced .monogram { position: relative; z-index: 210; }
html.intro-reduced .crosshair { display: none; }

/* once the intro is over the mark stays drawn */
html.intro-done .mg { animation: none; stroke-dashoffset: 0; }

/* ---------- the wordmark, written -------------------------------------- */

/* The outline is a child of the wordmark's own box, sized 100% x 100% with a
   1:1 viewBox, so it cannot be positioned from stale metrics: whatever moves
   the heading moves the outline with it. The real text is hidden, not
   recoloured, so the two can never both paint. */
.hero__h1 { position: relative; }
.wordmark { position: relative; }
.write {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  visibility: visible;
}
.write text { fill: var(--navy); stroke: var(--navy); }
.write tspan {
  fill-opacity: 0;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: wm-draw 600ms var(--ease-out) calc(var(--i) * 150ms) forwards,
             wm-fill 200ms var(--ease-out) calc(var(--i) * 150ms + 600ms) forwards;
}
@keyframes wm-draw { to { stroke-dashoffset: 0; } }
@keyframes wm-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
html.intro-writing .wordmark { visibility: hidden; }

/* ---------- section tag (a dimension string) ----------------------------- */

.tag {
  display: flex; align-items: center; gap: 14px;
  max-width: var(--measure); margin-inline: auto;
  padding: clamp(46px, 8vh, 96px) var(--gutter) clamp(16px, 2vh, 26px);
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--ink-2);
  position: relative;
}
.tag::before, .tag::after {
  content: ""; height: 1px; background: var(--line-strong);
}
.tag::before { width: 44px; flex: none; }
.tag::after { flex: 1; }
.tag__no { color: var(--teal-text); font-weight: 400; }
.tag__name { text-transform: uppercase; }
.tag--dark { color: var(--chrome-muted); }
.tag--dark .tag__no { color: var(--arc); }

/* ---------- pinned acts -------------------------------------------------- */

.act { height: calc(var(--len, 3) * 100vh); }
@supports (height: 100svh) { .act { height: calc(var(--len, 3) * 100svh); } }

.act__stage {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center;
  overflow: clip;
}
@supports (height: 100svh) { .act__stage { height: 100svh; } }

.act__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  width: 100%;
}
.act__grid--flip { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
.act__grid--flip .act__copy { order: 2; }
.act__grid--flip .act__art { order: 1; }

.act__copy p { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.08rem); color: var(--ink-2); }
.act__copy .h2 { color: var(--navy); font-size: clamp(2rem, 1.1rem + 2.9vw, 3.5rem); }

.facts {
  margin: 26px 0 0; padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid; gap: 10px;
}
.facts > div { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.facts dt { font-size: 0.82rem; color: var(--ink-3); }
.facts dd { margin: 0; font-size: 0.86rem; color: var(--navy); text-align: right; }

.act__art { min-width: 0; }
.art__caption {
  margin: 14px 0 0; font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.02em;
}

/* the plan breaks the grid on purpose */
.art--plan { transform: rotate(-1.4deg); }
.plan { width: 100%; height: auto; max-height: 64svh; }
.plan text { font-family: var(--f-mono); fill: var(--navy); }
.p-room { font-size: 300px; text-anchor: middle; font-weight: 400; }
.p-area { font-size: 210px; text-anchor: middle; fill: var(--ink-2); }
.p-dim { font-size: 230px; fill: var(--blue); }

.seq { --v: clamp(0, calc((var(--p, 1) - var(--a, 0)) * var(--k, 1)), 1); }

.w-n { transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--v)); }
.w-e { transform-box: fill-box; transform-origin: center top; transform: scaleY(var(--v)); }
.w-s { transform-box: fill-box; transform-origin: right center; transform: scaleX(var(--v)); }
.w-w { transform-box: fill-box; transform-origin: center bottom; transform: scaleY(var(--v)); }
.door-gap { transform-box: fill-box; transform-origin: center; transform: scaleX(var(--v)); }
.grow-x { transform-box: fill-box; transform-origin: left center; transform: scaleX(calc(1 + var(--v) * 0.10435)); }
.ch { opacity: var(--v); }

/* ---------- see: css 3d -------------------------------------------------- */

/* The stage is sized from the model, not guessed. Rotated, scaled and seen
   through a 1600px perspective, the house projects at most --ext times its
   floor plate in both axes (the widest moment is mid-scroll, walls up and the
   roof still in the air). So the plate is derived from the room available,
   the stage gets the whole projection plus air, and nothing is ever clipped.
   The projection sits higher above the plate the further the model has
   rotated, so --drop tracks that with scroll and the figure stays optically
   centred at every position. Measured with .devdata/site2/probe-extent.mjs. */
.stage3d {
  --plate: min(340px, 22vw, 27svh);
  --ext: 1.76;
  perspective: calc(var(--plate) * 5.2);
  perspective-origin: 50% 46%;
  height: calc(var(--plate) * var(--ext));
  display: grid; place-items: center;
  overflow: visible;
}
@supports (container-type: inline-size) {
  .art--iso { container-type: inline-size; }
  .stage3d { --plate: min(340px, calc((100cqw - 28px) / var(--ext)), 27svh); }
}
.house {
  --w: var(--plate);
  --d: calc(var(--w) * 0.75);
  --h: calc(var(--w) * 0.34);
  --drop: calc(1.029 * var(--p, 1) - 0.881 * var(--p, 1) * var(--p, 1) - 0.014);
  width: var(--w); height: var(--d);
  position: relative;
  transform-style: preserve-3d;
  transform:
    translateY(calc(var(--plate) * var(--drop)))
    scale(calc(1 + var(--p, 1) * 0.12))
    rotateX(calc(var(--p, 1) * 56deg))
    rotateZ(calc(var(--p, 1) * -32deg));
}
.floor {
  position: absolute; inset: 0;
  background: var(--surface);
  border: 1px solid var(--navy);
  box-shadow: 0 0 0 0.5px var(--navy);
}
.floor__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 0 1px, transparent 1px 100%),
    linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 100%);
  background-size: 12.5% 16.66%;
  opacity: .8;
}
.wall {
  position: absolute;
  background: linear-gradient(to bottom, #ffffff, #f0ede6);
  border: 1px solid var(--navy);
  backface-visibility: visible;
}
.wall--n { top: 0; left: 0; width: 100%; height: var(--h); transform-origin: top; transform: rotateX(90deg) scaleY(var(--v)); }
.wall--s { bottom: 0; left: 0; width: 100%; height: var(--h); transform-origin: bottom; transform: rotateX(-90deg) scaleY(var(--v)); }
.wall--w { top: 0; left: 0; height: 100%; width: var(--h); transform-origin: left; transform: rotateY(-90deg) scaleX(var(--v)); }
.wall--e { top: 0; right: 0; height: 100%; width: var(--h); transform-origin: right; transform: rotateY(90deg) scaleX(var(--v)); }
.wall--p { top: 0; left: 62%; height: 100%; width: var(--h); transform-origin: left; transform: rotateY(-90deg) scaleX(calc(var(--v) * 0.94)); opacity: .96; }

.op { position: absolute; bottom: 0; background: var(--paper-2); border: 1px solid var(--navy); }
.op--door { left: 22%; width: 16%; height: 74%; background: #e3dcd0; }
.op--win { left: 58%; width: 20%; height: 40%; bottom: 30%; background: #dfe9ea; }
.wall--w .op--win, .wall--e .op--win { left: 34%; width: 26%; }

.roof {
  position: absolute;
  left: -5%; top: -5%; width: 110%; height: 110%;
  background: linear-gradient(145deg, #e9e5db, #d9d4c7);
  border: 1px solid var(--navy);
  transform: translateZ(calc(var(--h) * (1 + (1 - var(--v)) * 1.6)));
  opacity: var(--v);
}
.ridge { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--navy); opacity: .55; }

.shot {
  margin: clamp(18px, 3vh, 34px) 0 0;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  overflow: hidden;
}
.shot img { width: 100%; height: auto; }
.shot figcaption {
  font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-3);
  padding: 8px 12px; border-top: 1px solid var(--line);
  background: var(--paper);
}
.art--iso .shot { max-height: 32svh; display: grid; grid-template-rows: 1fr auto; }
.art--iso .shot img { object-fit: cover; object-position: top left; height: 100%; }

/* ---------- ask ---------------------------------------------------------- */

.art--ask { min-width: 0; }
.ask-demo { display: grid; gap: clamp(10px, 2vh, 18px); }
.bubble {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--ai);
  padding: 12px 16px;
  justify-self: start;
  max-width: 44ch;
  opacity: var(--v);
  transform: translateY(calc((1 - var(--v)) * 10px));
}
.bubble__who { display: block; font-size: 0.66rem; color: var(--ink-3); letter-spacing: 0.06em; margin-bottom: 3px; }
.typed { margin: 0; font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem); color: var(--navy); }
.typed .w { opacity: var(--v); }
.caret {
  display: inline-block; width: 2px; height: 1em; background: var(--ai);
  vertical-align: -0.14em; margin-left: 2px; opacity: calc(1 - var(--v));
}
.plan--ghost { max-height: 40svh; margin-inline: auto; }
.plan--ghost text { font-family: var(--f-mono); fill: var(--navy); }

.proposal {
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--ai);
  background: var(--surface);
  padding: 14px 16px;
  opacity: var(--v);
  transform: translateY(calc((1 - var(--v)) * 14px));
}
.proposal__head { margin: 0 0 10px; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ai); text-transform: uppercase; }
.proposal__list { display: flex; gap: 14px; list-style: none; margin: 0 0 10px; padding: 0; font-size: 0.78rem; color: var(--ink-2); }
.proposal__list li { display: flex; align-items: center; gap: 6px; }
.pill { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; background: var(--paper-2); color: var(--navy); font-size: 0.74rem; }
.pill--ok { background: var(--paper-2); }
.proposal__row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 0.78rem; border: 1px solid var(--line); padding: 7px 10px; margin-bottom: 12px;
}
.proposal__row span { color: var(--blue); }
.proposal__cta { display: flex; align-items: center; gap: 14px; }
.applied {
  display: inline-grid; place-items: center;
  min-width: 96px; height: 38px; padding: 0 16px;
  background: var(--ai); color: #fff;
  font-weight: 600; font-size: 0.9rem;
}
.applied > * { grid-area: 1 / 1; }
.applied__check { width: 22px; height: 22px; }
.proposal__note { font-size: 0.78rem; color: var(--ink-3); }

/* ---------- split bands: coordinate, light ------------------------------ */

.band--split { padding-top: clamp(16px, 3vh, 36px); }
.split {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 5vw, 76px); align-items: center;
}
.split--flip { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
.split--flip .split__copy { order: 2; }
.split__copy .h2 { font-size: clamp(2rem, 1.1rem + 2.9vw, 3.5rem); }
.split__copy p { color: var(--ink-2); font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.08rem); }
.split__art { min-width: 0; display: grid; gap: clamp(14px, 2.2vh, 22px); }
.split__art .shot { margin: 0; }
@media (max-width: 1000px) {
  .split, .split--flip { grid-template-columns: minmax(0, 1fr); }
  .split--flip .split__copy { order: 0; }
}

/* two frames side by side under the sun: night inside, and a render */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.duo .shot { margin: 0; }
.duo .shot img { aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 560px) { .duo { grid-template-columns: minmax(0, 1fr); } }

/* the colors and line types of the service runs, as the plan draws them */
.legend {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 0.72rem; color: var(--ink-2);
}
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend li::before { content: ""; width: 22px; height: 0; border-top: 2.5px solid var(--c); }
.legend li[data-dash]::before { border-top-style: dashed; }

/* The sun: five frames of the live view, one per preset, stacked in time
   order. Frame i fades in over frame i - 1 as --sun passes from i - 1 to i,
   so a blend is always a true crossfade and never goes grey. --sun is a
   registered number, so it glides between presets; while the visitor drags
   it follows the pointer exactly. */
@property --sun { syntax: "<number>"; inherits: true; initial-value: 0; }
.sun {
  --sun: 0;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  transition: --sun 900ms var(--ease-in-out);
}
.sun.is-dragging { transition: none; }
.sun__frames { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.sun__f {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: clamp(0, calc(var(--sun) - var(--i) + 1), 1);
}
.sun__tag {
  position: absolute; left: 12px; bottom: 10px;
  font-size: 0.64rem; letter-spacing: 0.04em; color: #fff;
  background: rgba(31, 45, 68, 0.68); padding: 3px 8px;
}
.sun__ctl { position: relative; padding: 12px 16px 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.sun__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-3);
}
.sun__label output { color: var(--navy); font-size: 0.86rem; white-space: nowrap; }
/* The native range stays on top for the pointer, the keyboard and screen
   readers, with its own track and thumb made invisible. The hairline, its
   teal fill and the knob are drawn here from --sun, so they glide with the
   frames instead of jumping from preset to preset. */
.sun__rail { position: relative; height: 22px; }
.sun__rail::before, .sun__rail::after {
  content: ""; position: absolute; top: 50%; left: 8px; height: 2px; margin-top: -1px; pointer-events: none;
}
.sun__rail::before { right: 8px; background: var(--line-strong); }
.sun__rail::after { width: calc((100% - 16px) * var(--sun) / 4); background: var(--teal); }
.sun__range {
  -webkit-appearance: none; appearance: none;
  position: relative; z-index: 1; display: block;
  width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer;
}
.sun__range:focus { outline: none; }
.sun__range::-webkit-slider-runnable-track { height: 22px; background: transparent; }
.sun__range::-moz-range-track { height: 22px; background: transparent; }
.sun__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 22px; opacity: 0; }
.sun__range::-moz-range-thumb { width: 16px; height: 22px; border: 0; opacity: 0; }
.sun__knob {
  position: absolute; top: 50%; left: calc((100% - 16px) * var(--sun) / 4);
  width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--navy);
  box-shadow: 0 0 0 4px rgba(14, 138, 143, 0.16);
  pointer-events: none;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.sun__rail:hover .sun__knob { box-shadow: 0 0 0 6px rgba(14, 138, 143, 0.2); }
.sun__range:active + .sun__knob { transform: scale(1.18); }
.sun__range:focus-visible + .sun__knob { outline: 2px solid var(--teal); outline-offset: 3px; }
.sun__hint { color: var(--ink-3); opacity: 0.8; }
@media (hover: none), (max-width: 560px) { .sun__hint { display: none; } }
.sun__ticks {
  display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0;
  font-size: 0.64rem; color: var(--ink-3);
}
.sun__ticks li { transition: color var(--dur-base) var(--ease-out); }
.sun__ticks li.is-on { color: var(--teal-text); }

/* ---------- bands -------------------------------------------------------- */

.band { padding: clamp(28px, 5vh, 56px) 0 clamp(70px, 12vh, 150px); }
.band__head { max-width: 62ch; margin-bottom: clamp(36px, 6vh, 66px); }
.band__lede { color: var(--ink-2); font-size: clamp(1rem, 0.94rem + 0.4vw, 1.18rem); }

.band--mcp { padding-top: clamp(60px, 10vh, 120px); border-top: 1px solid var(--line); }
.mcp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.mcp p { color: var(--ink-2); }
.mcp__foot { font-size: 0.88rem; }

.code {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--chrome-text);
  overflow: hidden;
}
.code code {
  font-family: var(--f-mono); font-size: clamp(0.68rem, 0.6rem + 0.42vw, 0.86rem);
  padding: 14px 16px; flex: 1; min-width: 0;
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5;
}
.copy {
  flex: none; border: 0; border-left: 1px solid var(--navy-2);
  background: var(--navy-2); color: var(--chrome-text);
  font: inherit; font-size: 0.8rem; font-weight: 600;
  padding: 0 18px; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.copy:hover { background: var(--teal-strong); color: #fff; }
.copy:active { transform: scale(var(--press-scale)); }
.copy__label { display: block; transition: transform var(--dur-base) var(--ease-spring); }
.copy.done { background: var(--teal-strong); color: #fff; }
.code__hint { margin: 10px 0 24px; font-size: 0.74rem; color: var(--ink-3); }

/* ---------- together: a live session ------------------------------------ */
/* The app's live session, drawn as a window to watch and to join: its eight
   participant colors (src/styles/tokens.css --peer-0 to --peer-7), its
   cursor (an arrow and a name that grows into a bubble while someone types),
   its Chat panel and its undo question. main.js section 9 drives it. */

:root {
  --peer-0: #c92a2a;
  --peer-1: #1864ab;
  --peer-2: #2b8a3e;
  --peer-3: #c2410c;
  --peer-4: #c2255c;
  --peer-5: #7a5c00;
  --peer-6: #3b5bdb;
  --peer-7: #495057;
}

.band--live { padding-top: clamp(60px, 10vh, 120px); border-top: 1px solid var(--line); }
.together {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(28px, 5vw, 76px); align-items: end;
  margin-bottom: clamp(26px, 4.5vh, 48px);
}
.together__copy .h2 { font-size: clamp(2rem, 1.1rem + 2.9vw, 3.5rem); }
.together__copy p { color: var(--ink-2); font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.08rem); }
.together__copy p:last-child { margin-bottom: 0; }
.together__facts { margin: 0; }

.live {
  position: relative;
  border: 1px solid var(--navy);
  background: var(--surface);
  box-shadow: 0 22px 50px -24px rgba(31, 45, 68, 0.42);
}
.live__bar {
  display: flex; align-items: center; gap: 14px;
  height: 46px; padding: 0 12px 0 14px;
  background: var(--navy); color: var(--chrome-text);
  font-size: 0.82rem;
}
.live__title { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; white-space: nowrap; }
.live__title > span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.live__mark { width: 22px; height: 22px; flex: none; }
.live__saved { color: var(--chrome-muted); font-size: 0.7rem; font-weight: 400; }
.live__people { margin-left: auto; display: flex; padding-left: 8px; }
.live__av {
  width: 26px; height: 26px; margin-left: -7px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--peer); color: #fff;
  font-style: normal; font-size: 0.7rem; font-weight: 600;
  box-shadow: 0 0 0 2px var(--navy);
}
.live__av[hidden] { display: none; }
.live__av.is-in { animation: live-pop var(--dur-panel) var(--ease-spring); }
@keyframes live-pop { from { transform: scale(0); } }
.live__share {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border: 1px solid var(--navy-line);
  font-weight: 600; white-space: nowrap;
}
.live__dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #4fc38a; box-shadow: 0 0 0 2px rgba(79, 195, 138, 0.22);
}

.live__body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 23vw, 290px); }
.live__canvas {
  position: relative; overflow: hidden;
  width: 100%;
  aspect-ratio: 118 / 90;
  max-height: 74svh;
  background: var(--paper);
  cursor: default;
}
.live__plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.live__plan text { font-family: var(--f-mono); }
.live__plan text:not([fill]) { fill: var(--navy); }
.live__sel {
  fill: var(--peer-1); fill-opacity: 0.07;
  stroke: var(--peer-1); stroke-width: 34;
  opacity: 0; transition: opacity var(--dur-hover) var(--ease-out);
}
.live__sel.is-on { opacity: 1; }
.live__east { fill: var(--navy); transition: fill var(--dur-hover) var(--ease-out); }
.live__east.is-held { fill: var(--peer-0); }
.live__layer { position: absolute; inset: 0; pointer-events: none; }

/* a cursor: placed by a transform written each frame, so it never lags */
.lc { position: absolute; top: 0; left: 0; z-index: 2; width: 0; height: 0; will-change: transform; }
.lc__body { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.lc.is-in .lc__body { animation: lc-in var(--dur-base) var(--ease-out); }
@keyframes lc-in { from { opacity: 0; transform: scale(0.6); } }
/* the page's svg rule (max-width: 100%) would shrink it to the zero-wide cursor */
.lc__arrow { position: absolute; top: -2px; left: -2px; max-width: none; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(20, 40, 63, 0.35)); }
.lc__arrow path { fill: var(--peer); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.lc__label {
  position: absolute; top: 16px; left: 12px;
  display: flex; flex-direction: column;
  width: max-content; max-width: 220px;
  padding: 2px 7px 3px; border-radius: 3px 9px 9px 9px;
  background: var(--peer); color: #fff;
  font-size: 0.72rem; font-weight: 600; line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(20, 40, 63, 0.25);
  transform-origin: top left;
}
.lc[data-flip="true"] .lc__label { left: auto; right: 8px; border-radius: 9px 3px 9px 9px; transform-origin: top right; }
.lc.is-bubble .lc__label { gap: 1px; padding: 4px 10px 6px; border-radius: 3px 12px 12px 12px; white-space: normal; }
.lc.is-bubble[data-flip="true"] .lc__label { border-radius: 12px 3px 12px 12px; }
.lc.is-bubble .lc__name { font-size: 10px; opacity: 0.85; }
.lc__text { display: none; font-size: 0.86rem; font-weight: 500; overflow-wrap: anywhere; }
.lc.is-bubble .lc__text { display: block; }
.lc.is-typing .lc__text::after {
  content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  vertical-align: -0.15em; background: currentColor;
  animation: lc-caret 1s steps(1) infinite;
}
@keyframes lc-caret { 50% { opacity: 0; } }
.lc__ring {
  position: absolute; left: -15px; top: -15px; width: 30px; height: 30px;
  border: 2px solid var(--peer); border-radius: 50%; opacity: 0;
}
/* the visitor: the real pointer is the arrow, so only the name follows it */
.lc--you { transition: opacity var(--dur-base) var(--ease-out); }
.lc--you .lc__label { top: 20px; left: 14px; }
.lc--you[data-flip="true"] .lc__label { right: 6px; }
.lc--you.is-gone { opacity: 0; }

/* cursor chat at the visitor's pointer, as in the app: a bubble in your color */
.you-chat { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: auto; will-change: transform; }
.you-chat__bubble {
  position: absolute; top: 20px; left: 14px;
  display: flex; flex-direction: column; gap: 2px;
  width: max-content; max-width: 260px;
  padding: 5px 11px 7px; border-radius: 3px 14px 14px 14px;
  background: var(--peer-3); color: #fff;
  box-shadow: 0 4px 16px rgba(20, 40, 63, 0.24);
  transform-origin: top left;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.you-chat[data-flip="true"] .you-chat__bubble { left: auto; right: 6px; border-radius: 14px 3px 14px 14px; transform-origin: top right; }
.you-chat[data-flip-y="true"] .you-chat__bubble { top: auto; bottom: 8px; }
.you-chat[data-stage="enter"] .you-chat__bubble { opacity: 0; transform: scale(0.85); }
.you-chat[data-stage="exit"] .you-chat__bubble {
  opacity: 0; transform: scale(0.94);
  transition-duration: calc(var(--dur-base) * 0.7); transition-timing-function: var(--ease-in);
}
.you-chat__name { font-size: 10px; font-weight: 600; opacity: 0.85; }
.you-chat__input {
  width: 190px; min-width: 130px; max-width: 238px; field-sizing: content;
  margin: 0; padding: 0; border: 0; outline: 0; background: transparent;
  color: #fff; caret-color: #fff;
  font: 500 0.86rem/1.35 var(--f-sans);
}
.you-chat__input::placeholder { color: rgba(255, 255, 255, 0.72); }
.you-chat__text { font-size: 0.86rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }

.live__try {
  position: absolute; left: 14px; top: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--navy); font: inherit; font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px -5px rgba(31, 45, 68, 0.45);
  transition: border-color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.live__try:hover { border-color: var(--teal); }
.live__try:active { transform: scale(var(--press-scale)); }
.live__try kbd {
  display: grid; place-items: center; min-width: 21px; height: 21px;
  background: var(--navy); color: #fff;
  font-family: var(--f-mono); font-size: 0.76rem;
}

/* the undo question, as the app asks it before taking back someone's step */
.live__ask {
  position: absolute; top: 0; left: 0; z-index: 1; width: 250px;
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 30px -12px rgba(31, 45, 68, 0.5);
  color: var(--navy); font-size: 0.78rem; line-height: 1.4;
  transform-origin: top left;
  opacity: 0; transform: scale(0.96);
  transition: opacity calc(var(--dur-base) * 0.7) var(--ease-in), transform calc(var(--dur-base) * 0.7) var(--ease-in);
}
.live__ask.is-on {
  opacity: 1; transform: none;
  transition-duration: var(--dur-base); transition-timing-function: var(--ease-out);
}
.live__ask { border-top: 2px solid var(--peer-1); }
.live__ask-who { margin: 0 0 6px; color: var(--peer-1); font-size: 0.64rem; letter-spacing: 0.04em; }
.live__ask-title { margin: 0 0 4px; font-weight: 600; }
.live__ask-text { margin: 0 0 10px; color: var(--ink-2); font-size: 0.76rem; }
.live__ask-row { display: flex; justify-content: flex-end; gap: 6px; }
.live__ask-row span {
  padding: 4px 10px; border: 1px solid var(--line-strong);
  font-size: 0.72rem; font-weight: 600;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press) var(--ease-out);
}
.live__ask-row .is-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.live__ask-row .is-primary.is-pressed { background: var(--teal-strong); transform: scale(var(--press-scale)); }

.live__chat { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--surface); }
.live__chat-head {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.78rem; font-weight: 600;
}
.live__chat-head .num {
  min-width: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--paper-2); color: var(--ink-2);
  font-size: 0.68rem; text-align: center;
}
.live__chat-note { margin-left: auto; color: var(--ink-3); font-size: 0.68rem; font-weight: 400; }
.live__log {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  margin: 0; padding: 10px 14px 14px; list-style: none;
}
.msg { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; align-items: start; }
.msg.is-new { animation: msg-in var(--dur-base) var(--ease-out); }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }
.msg__av {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--peer); color: #fff;
  font-style: normal; font-size: 0.66rem; font-weight: 600;
}
.msg__meta { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: 0.66rem; color: var(--ink-3); }
.msg__meta b { color: var(--peer); font-size: 0.76rem; }
.msg__text { margin: 1px 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--navy); overflow-wrap: anywhere; }
.msg__at { display: inline-block; max-width: none; color: var(--peer); opacity: 0.75; vertical-align: -1px; }

.live__status {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 6px 12px; border-top: 1px solid var(--line);
  background: var(--paper-2); color: var(--ink-3);
  font-size: 0.68rem;
}
.live__state { display: inline-flex; align-items: center; gap: 7px; }
.live__state .live__dot { width: 6px; height: 6px; }

.crosshair.away { opacity: 0; }

@media (hover: hover) { .live__cap-touch { display: none; } }
@media (hover: none) { .live__cap-fine { display: none; } }

@media (max-width: 1000px) {
  .together { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .live__body { grid-template-columns: minmax(0, 1fr); }
  .live__chat { border-left: 0; border-top: 1px solid var(--line); }
  .live__log { max-height: 210px; }
}
@media (max-width: 560px) {
  /* main.js shows a tighter part of the plan here (SMALL); this follows it */
  .live__canvas { aspect-ratio: 96 / 88; }
  .you-chat__bubble { max-width: min(260px, 72vw); }
  .live__saved, .live__pos { display: none; }
  .live__share { padding: 4px 9px; }
  .lc__label { font-size: 0.66rem; }
  .lc.is-bubble .lc__label { max-width: 150px; }
  .lc__text { font-size: 0.76rem; }
  .live__try { left: 10px; top: 10px; }
}

/* ---------- formats: two moving rails ---------------------------------- */
/* What comes in moves toward the label, what goes out moves away from it.
   Each track holds its list twice and slides by exactly one copy, so the loop
   has no seam. The two rails run at different speeds so they never line up.
   Pointing at a rail, or tabbing into it, holds it still. */

.rails { display: grid; gap: 12px; margin: 0 0 clamp(40px, 7vh, 80px); }
.rail {
  display: grid; grid-template-columns: 124px minmax(0, 1fr);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper);
}
.rail__label {
  margin: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; max-width: none;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
  border-right: 1px solid var(--line-strong);
}
.rail__arrow { width: 20px; height: 12px; flex: none; fill: none; stroke: var(--teal); stroke-width: 1.4; stroke-linecap: square; }
.rail__window {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.rail__move { display: flex; width: max-content; will-change: transform; }
.rail__track { display: flex; align-items: stretch; flex: none; list-style: none; margin: 0; padding: 0; }
.chip {
  position: relative;
  display: grid; gap: 1px; align-content: center;
  padding: 16px 18px 15px; min-width: 196px;
  transition: background-color var(--dur-base) var(--ease-out);
}
.chip::before {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 8px; height: 2px;
  background: var(--teal); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.chip:hover { background: var(--surface); }
.chip:hover::before { transform: scaleX(1); }
.chip__ext { font-size: clamp(1.25rem, 1.08rem + 0.6vw, 1.65rem); letter-spacing: -0.03em; line-height: 1.15; color: var(--navy); }
.chip__for { font-size: 0.84rem; color: var(--ink-2); white-space: nowrap; }
.chip__dir { font-size: 0.66rem; color: var(--ink-3); letter-spacing: 0.02em; white-space: nowrap; margin-top: 3px; }
.chip--own .chip__ext { color: var(--teal-text); }
/* between two files, a dimension string: a hairline with its two ticks */
.rail__tick { display: flex; align-items: center; flex: none; }
.rail__tick svg { width: 36px; height: 12px; fill: none; stroke: var(--line-strong); stroke-width: 1; }

@media (prefers-reduced-motion: no-preference) {
  .rail__move { animation: rail-in 46s linear infinite; }
  .rail[data-dir="out"] .rail__move { animation-name: rail-out; animation-duration: 64s; }
  .rail:hover .rail__move, .rail:focus-within .rail__move { animation-play-state: paused; }
}
/* Held still for reduced motion: the rail scrolls sideways instead, with the
   second copy gone and no faded edges, so every format can still be reached. */
@media (prefers-reduced-motion: reduce) {
  .rail__window { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .rail__track[aria-hidden="true"] { display: none; }
}
@keyframes rail-in { to { transform: translateX(-50%); } }
@keyframes rail-out { from { transform: translateX(-50%); } to { transform: none; } }

@media (max-width: 720px) {
  .rail { grid-template-columns: minmax(0, 1fr); }
  .rail__label { border-right: 0; border-bottom: 1px solid var(--line); padding: 9px 16px; }
}

/* ---------- sheets for the people who sign ------------------------------- */

.sheets { margin-top: clamp(56px, 9vh, 110px); }
.sheets__head { max-width: 64ch; margin-bottom: clamp(22px, 4vh, 40px); }
.sheets__head p { color: var(--ink-2); }
.sheets__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.sheets__row .shot {
  margin: 0;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.sheets__row .shot:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--line); }
.sheets__row .shot img { background: #fff; }
.shot__open { display: block; cursor: zoom-in; }
.shot__open:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
@media (max-width: 860px) { .sheets__row { grid-template-columns: minmax(0, 1fr); } }

/* one deliberate break in the column grid: the sheet runs past both gutters */
.shot--wide { margin-top: 0; margin-inline: calc(var(--gutter) * -1); border-inline: 0; }
.shot--wide img { background: #fff; max-height: 74svh; object-fit: contain; }

/* ---------- secure (inverted) -------------------------------------------- */

.band--dark {
  background: var(--navy);
  color: var(--chrome-text);
  padding-top: clamp(40px, 7vh, 80px);
}
.tag--dark { background: var(--navy); margin-bottom: 0; max-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--measure)) / 2 + var(--gutter))); }
.tag--dark::before, .tag--dark::after { background: var(--navy-line); }
.band--dark .h2 { color: #fff; max-width: 18ch; }
.cells {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--navy-line);
  border-left: 1px solid var(--navy-line);
}
.cell {
  border-right: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line);
  padding: 26px 24px 30px;
  transition: background-color var(--dur-base) var(--ease-out);
}
.cell:hover { background: #27374f; }
@media (max-width: 1100px) {
  .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .cells { grid-template-columns: minmax(0, 1fr); } }
.cell h3 { margin: 0 0 10px; font-size: 1.06rem; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.cell p { margin: 0; font-size: 0.9rem; color: var(--chrome-muted); line-height: 1.6; max-width: 40ch; }

/* ---------- philippines -------------------------------------------------- */

.ph { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.ph__copy > p { color: var(--ink-2); }
.ph__list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.ph__list li {
  padding: 16px 0; border-bottom: 1px solid var(--line);
  font-size: 0.96rem; color: var(--ink-2); max-width: 58ch;
}
.ph__list b { color: var(--navy); }
.ph__motif svg { width: 100%; height: auto; }
.ph__motif text { font-family: var(--f-mono); }

/* ---------- keys --------------------------------------------------------- */

.band--keys { border-top: 1px solid var(--line); padding-top: clamp(60px, 10vh, 120px); }
.keys { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 18px); }
.key { display: grid; gap: 8px; justify-items: center; }
.key kbd {
  display: grid; place-items: center;
  width: clamp(52px, 6vw, 66px); height: clamp(52px, 6vw, 66px);
  font-family: var(--f-sans); font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--navy);
  box-shadow: 3px 3px 0 var(--navy);
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out);
}
.key span { font-family: var(--f-mono); font-size: 0.66rem; color: var(--ink-3); letter-spacing: 0.02em; }
.key:hover kbd { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--navy); }
.keys__foot { font-size: 0.74rem; color: var(--ink-3); margin: 0; }
.kbd-inline {
  font-family: var(--f-mono); font-size: 0.84em; font-weight: 400; color: var(--navy);
  border: 1px solid var(--line-strong); background: var(--surface); padding: 0 5px;
  white-space: nowrap;
}

/* ---------- get ---------------------------------------------------------- */

.band--get { text-align: center; padding-bottom: clamp(60px, 10vh, 120px); }
.get .h2 { font-size: clamp(2rem, 1rem + 4.6vw, 4.6rem); margin-inline: auto; }

/* ---------- title block -------------------------------------------------- */

.block { border-top: 2px solid var(--navy); padding: 0 0 46px; background: var(--paper); }
.block__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-left: 1px solid var(--line-strong);
}
.bf {
  border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  padding: 12px 14px 14px; display: grid; gap: 3px; min-height: 66px; align-content: start;
}
.bf--wide { grid-column: span 2; }
.bf__k { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.bf__v { font-size: 0.92rem; color: var(--navy); }
.bf__v a { text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out); }
.bf__v a:hover { color: var(--teal-text); border-color: var(--teal-text); }
.block__note { margin: 22px 0 0; font-size: 0.76rem; color: var(--ink-3); max-width: 70ch; }

/* ---------- scroll enter animations -------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* entry-only ranges. A `cover` range never completes for content near the
       end of the document, which leaves those elements stuck at opacity 0. */
    .rise {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 58%;
    }
    .key kbd {
      animation: press linear both;
      animation-timeline: view();
      animation-range: entry calc(10% + var(--i) * 3.5%) entry calc(40% + var(--i) * 3.5%);
    }
  }

  html.no-sda .rise {
    opacity: 0; transform: translateY(20px);
    transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  }
  html.no-sda .rise.is-in { opacity: 1; transform: none; }
  html.no-sda .key kbd { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--navy); }
  html.no-sda .key.is-in kbd {
    transform: none; box-shadow: 3px 3px 0 var(--navy);
    transition: transform 260ms var(--ease-spring) calc(var(--i) * 45ms),
                box-shadow 260ms var(--ease-spring) calc(var(--i) * 45ms);
  }
}

@keyframes press {
  0% { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--navy); }
  60% { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--navy); }
  100% { transform: none; box-shadow: 3px 3px 0 var(--navy); }
}

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --cols: 8; }
  .mcp { grid-template-columns: minmax(0, 1fr); }
  .ph { grid-template-columns: minmax(0, 1fr); }
  .ph__motif { max-width: 300px; }
}

@media (max-width: 860px) {
  :root { --cols: 4; }
  .act { height: auto; }
  .act__stage { position: static; height: auto; padding: 8px 0 clamp(50px, 9vh, 90px); }
  .act__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .act__grid--flip .act__copy, .act__grid--flip .act__art { order: 0; }
  .plan, .plan--ghost { max-height: none; }
  .art--iso .shot { max-height: none; }
  .art--iso .shot img { height: auto; object-fit: fill; }
  .stage3d { --plate: min(400px, 51vw); }
  @supports (container-type: inline-size) {
    .stage3d { --plate: min(400px, calc((100cqw - 20px) / var(--ext))); }
  }
  .block__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art--plan { transform: none; }
}

@media (max-width: 560px) {
  .cta .btn { flex: 1 1 100%; justify-content: center; }
  .facts > div { flex-direction: column; gap: 2px; }
  .facts dd { text-align: left; }
  .bf--wide { grid-column: span 2; }
  .keys { gap: 8px; }
}

/* ---------- reduced motion ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mg { stroke-dashoffset: 0; }
  .act { height: auto; }
  .act__stage { position: static; height: auto; padding: 8px 0 clamp(50px, 9vh, 90px); }
  .plan, .plan--ghost { max-height: none; }
  .art--iso .shot { max-height: none; }
  .art--iso .shot img { height: auto; object-fit: fill; }
  .art--plan { transform: none; }
  .crosshair { display: none; }
  .cue__rail i { display: none; }
  /* --p falls back to 1, so .house already renders its end state here. */
}