/* site/styles/site.css — the static site (09 W1). Hand-written; every DESIGN value is a var(--vt-*) (03 §8.2, the same
   rule as src/**: tools/check-css-gate.mjs's checkCssText runs over this file in the `site` job, and the built copy goes
   through scripts/check-tokens.mjs's colour scan). The --vt-* values come from the app's token pipeline, generated by
   tools/site/build-site.mjs into tokens-*.css: :root = Calm in the Soft atmosphere (BRAND §4.1), and [data-mode="…"]
   blocks carry the other palettes for /story's bands. Spacing stays on Calm's scale everywhere (the boards' rule).
   Layout dimensions (max-widths, the board's 1440 frame, the device picture's 390 × 844) are geometry, not tokens.
   P7: nothing animates; there is no `animation` and no `transition` in this file (the site job's static P7 check). */

:root {
  /* site composites, built only from tokens (the site job refuses a literal colour or length here) */
  --vt-site-gutter: var(--vt-space-7);
  --vt-site-s96: calc(var(--vt-space-7) + var(--vt-space-5));
  --vt-site-s128: calc(var(--vt-space-7) + var(--vt-space-7));
  --vt-site-s56: calc(var(--vt-space-6) + var(--vt-space-1));
  --vt-site-grid-gap: var(--vt-space-5);
}
@media (max-width: 899px) {
  :root {
    --vt-site-gutter: var(--vt-space-4);
    --vt-site-s96: var(--vt-space-7);
    --vt-site-s128: var(--vt-space-7);
    --vt-site-s56: var(--vt-space-6);
    --vt-site-grid-gap: var(--vt-space-5);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background-color: var(--vt-color-bg);
  color: var(--vt-color-ink);
  font-family: var(--vt-slot-body-family);
  font-size: var(--vt-slot-body-size);
  font-weight: var(--vt-slot-body-weight);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
p,
h1,
h2,
h3,
figure,
dl,
dd,
blockquote {
  margin: 0;
}
a {
  color: var(--vt-color-ink);
  text-decoration: none;
}
a:hover {
  color: var(--vt-color-focus);
}
:focus-visible {
  outline: var(--vt-border-w) solid var(--vt-color-focus);
  outline-offset: var(--vt-space-0);
}
svg {
  display: block;
}

/* ---- layout ------------------------------------------------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--vt-site-gutter);
  padding-right: var(--vt-site-gutter);
}
.stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.g0 { gap: var(--vt-space-0); }
.g1 { gap: var(--vt-space-1); }
.g2 { gap: var(--vt-space-2); }
.g3 { gap: var(--vt-space-3); }
.g4 { gap: var(--vt-space-4); }
.g5 { gap: var(--vt-space-5); }
.g6 { gap: var(--vt-space-6); }
.g7 { gap: var(--vt-space-7); }
.pt2 { padding-top: var(--vt-space-2); }
.center { text-align: center; align-items: center; }
.nw { white-space: nowrap; }
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--vt-site-grid-gap);
  row-gap: var(--vt-space-6);
}
.align-center { align-items: center; }
.align-start { align-items: start; }
.align-end { align-items: end; }
.col-1-3 { grid-column: 1 / span 3; }
.col-1-5 { grid-column: 1 / span 5; }
.col-1-6 { grid-column: 1 / span 6; }
.col-1-7 { grid-column: 1 / span 7; }
.col-4-5 { grid-column: 4 / span 5; }
.col-7-6 { grid-column: 7 / span 6; }
.col-8-5 { grid-column: 8 / span 5; }
.col-9-4 { grid-column: 9 / span 4; }
.grid12 > * { min-width: 0; }
.only-phone { display: none; }
@media (max-width: 899px) {
  .grid12 { display: flex; flex-direction: column; align-items: stretch; }
  .only-desk { display: none; }
  .only-phone { display: block; }
}
.measure { max-width: 560px; }
.measure-md { max-width: 440px; }
.measure-sm { max-width: 480px; }
@media (max-width: 899px) {
  .measure, .measure-md, .measure-sm { max-width: none; }
}

/* ---- type (tokens.ts BASE_SLOTS via the generated --vt-slot-*) ------------------------------------------------------ */
.t-display {
  font-family: var(--vt-slot-display-family);
  font-size: var(--vt-slot-display-size);
  font-weight: var(--vt-slot-display-weight);
  letter-spacing: var(--vt-slot-display-tracking);
  line-height: 1.17;
  text-wrap: balance;
}
.t-h2 {
  font-family: var(--vt-slot-heading-family);
  font-size: var(--vt-slot-heading-size);
  font-weight: var(--vt-slot-heading-weight);
  letter-spacing: var(--vt-slot-heading-tracking);
  line-height: 1.25;
  text-wrap: balance;
}
.t-tile {
  font-family: var(--vt-slot-tile-family);
  font-size: var(--vt-slot-tile-size);
  font-weight: var(--vt-slot-heading-weight);
  letter-spacing: var(--vt-slot-heading-tracking);
  line-height: 1.43;
  text-wrap: balance;
}
.t-h3 {
  font-family: var(--vt-slot-tile-family);
  font-size: var(--vt-slot-body-size);
  font-weight: var(--vt-slot-tile-weight);
  line-height: 1.5;
}
.t-lede {
  font-family: var(--vt-slot-tile-family);
  font-size: var(--vt-slot-tile-size);
  font-weight: var(--vt-slot-tile-weight);
  letter-spacing: var(--vt-slot-tile-tracking);
  line-height: 1.43;
  text-wrap: pretty;
}
.strong { font-weight: var(--vt-slot-label-weight); }
.eyebrow,
.micro {
  font-family: var(--vt-slot-micro-family);
  font-size: var(--vt-slot-micro-size);
  font-weight: var(--vt-slot-micro-weight);
  letter-spacing: var(--vt-slot-micro-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--vt-color-ink-muted);
  line-height: 1.5;
}
.micro { line-height: 1.4; text-wrap: pretty; }
.upper { text-transform: uppercase; }
.muted { color: var(--vt-color-ink-muted); }
.accent { color: var(--vt-color-accent); }
.ink { color: var(--vt-color-ink); }
.num,
.mono {
  font-family: var(--vt-font-mono);
  font-variant-numeric: tabular-nums;
}
p { text-wrap: pretty; }
@media (max-width: 899px) {
  .t-display { font-size: var(--vt-slot-heading-size); line-height: 1.25; }
  .t-h2 { font-family: var(--vt-slot-tile-family); font-size: var(--vt-slot-tile-size); line-height: 1.43; }
  .t-lede { font-family: var(--vt-slot-body-family); font-size: var(--vt-slot-body-size); line-height: 1.5; }
}

/* ---- the wordmark, header and footer (foundation.mjs siteHeader / siteFooter) ----------------------------------------- */
.wordmark {
  font-family: var(--vt-slot-display-family);
  font-weight: var(--vt-slot-display-weight);
  font-size: var(--vt-slot-tile-size);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--vt-color-ink);
}
.wordmark-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--vt-touch-min);
}
.site-header { background-color: var(--vt-color-bg); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-4);
  padding-top: var(--vt-space-4);
  padding-bottom: var(--vt-space-4);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
}
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--vt-touch-min);
  min-width: var(--vt-touch-min);
  padding: var(--vt-space-0) var(--vt-space-2);
  font-weight: var(--vt-slot-label-weight);
  white-space: nowrap;
}
.nav-link[aria-current='page'] {
  text-decoration: underline;
  text-decoration-color: var(--vt-color-ink-decor);
  text-underline-offset: 6px;
}
.site-footer {
  background-color: var(--vt-color-bg);
  border-top: var(--vt-border-w) solid var(--vt-color-line);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--vt-space-5);
  padding-top: var(--vt-space-6);
  padding-bottom: var(--vt-space-6);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--vt-space-5);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--vt-space-3);
}
.footer-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vt-space-1);
}
.store-line,
.copyright {
  color: var(--vt-color-ink-muted);
}
@media (max-width: 899px) {
  .header-inner { padding-top: var(--vt-space-3); padding-bottom: var(--vt-space-3); }
  .site-nav { gap: var(--vt-space-1); }
  .footer-inner { gap: var(--vt-space-4); padding-top: var(--vt-space-5); padding-bottom: var(--vt-space-5); }
  .footer-top { flex-direction: column; gap: var(--vt-space-4); }
  .footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--vt-space-3); row-gap: 0; }
  .footer-nav .nav-link { padding: 0; }
}

/* ---- buttons (components.css .vt-text-button) -------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vt-space-1);
  min-height: var(--vt-touch-min);
  min-width: var(--vt-touch-min);
  padding: var(--vt-space-1) var(--vt-space-3);
  border: var(--vt-border-w) solid var(--vt-color-line);
  border-radius: var(--vt-radius-md);
  background-color: var(--vt-color-surface);
  color: var(--vt-color-ink);
  font-weight: var(--vt-slot-label-weight);
  line-height: 1.5;
  white-space: nowrap;
}
.btn-primary {
  border-color: var(--vt-color-accent);
  background-color: var(--vt-color-accent);
  color: var(--vt-color-on-accent);
}
.btn-primary:hover { color: var(--vt-color-on-accent); border-color: var(--vt-color-focus); }
.btn-lg {
  min-height: var(--vt-space-6);
  padding: 0 var(--vt-space-4);
}
.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vt-space-2);
}
@media (max-width: 899px) {
  .actions { flex-direction: column; align-items: stretch; }
  .btn-lg { white-space: normal; text-align: center; }
}
.go-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--vt-space-1);
  min-height: var(--vt-touch-min);
  font-weight: var(--vt-slot-label-weight);
  text-decoration: underline;
  text-decoration-color: var(--vt-color-accent);
  text-underline-offset: 6px;
}
.go-link .icon { color: var(--vt-color-accent); }

/* ---- cards, pills, placeholders ------------------------------------------------------------------------------------ */
.card {
  border: var(--vt-border-w) solid var(--vt-color-line);
  border-radius: var(--vt-radius-sm);
  background-color: var(--vt-color-surface);
  padding: var(--vt-space-5);
  min-width: 0;
}
.card-alt { background-color: var(--vt-color-surface-alt); }
@media (max-width: 899px) {
  .card { padding: var(--vt-space-4); }
}
.pill {
  display: inline-block;
  padding: var(--vt-space-0) var(--vt-space-2);
  border-radius: var(--vt-radius-pill);
  font-family: var(--vt-slot-micro-family);
  font-size: var(--vt-slot-micro-size);
  font-weight: var(--vt-slot-micro-weight);
  letter-spacing: var(--vt-slot-micro-tracking);
  line-height: 1.4;
  white-space: nowrap;
}
.pill-researched { color: var(--vt-color-ev-researched-ink); background-color: var(--vt-color-ev-researched-fill); }
.pill-preliminary { color: var(--vt-color-ev-preliminary-ink); background-color: var(--vt-color-ev-preliminary-fill); }
.pill-traditional { color: var(--vt-color-ev-traditional-ink); background-color: var(--vt-color-ev-traditional-fill); }
.ph {
  font-family: var(--vt-font-mono);
  font-variant-numeric: tabular-nums;
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--vt-color-ink-decor);
  text-underline-offset: 5px;
  overflow-wrap: anywhere;
}
.icon { flex: 0 0 auto; }

/* ---- landing (Main.dc.html / LandingPhone / LandingHeroB) --------------------------------------------------------- */
.hero {
  padding-top: var(--vt-space-6);
  padding-bottom: var(--vt-space-7);
}
.hero-h1 { max-width: 560px; }
.hero-figure,
.center-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vt-space-3);
}
.disc-box {
  position: relative;
  width: 560px;
  height: 640px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.disc {
  position: absolute;
  top: 40px;
  left: 0;
  width: 560px;
  height: 560px;
  max-width: 100%;
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-color-accent);
  opacity: 0.08;
}
.device-link {
  position: relative;
  display: flex;
  border-radius: var(--vt-radius-lg);
}
.label-lines {
  display: flex;
  justify-content: center;
  gap: var(--vt-space-1);
  text-align: center;
  font-family: var(--vt-slot-micro-family);
  font-size: var(--vt-slot-micro-size);
  font-weight: var(--vt-slot-micro-weight);
  letter-spacing: var(--vt-slot-micro-tracking);
  color: var(--vt-color-ink-muted);
}
.label-lines span + span::before { content: '· '; }
@media (max-width: 899px) {
  .hero { padding-top: var(--vt-space-5); padding-bottom: var(--vt-space-6); }
  .disc-box { width: auto; height: auto; }
  .disc { display: none; }
  .label-lines { flex-direction: column; gap: var(--vt-space-0); }
  .label-lines span + span::before { content: none; }
}
.band-surface {
  background-color: var(--vt-color-surface);
  border-top: var(--vt-border-w) solid var(--vt-color-line);
  border-bottom: var(--vt-border-w) solid var(--vt-color-line);
}
.section-pad {
  padding-top: var(--vt-space-7);
  padding-bottom: var(--vt-space-7);
}
.section-pad-lg {
  padding-top: var(--vt-site-s96);
  padding-bottom: var(--vt-space-7);
}
.section-pad-inner {
  padding-top: var(--vt-space-7);
  padding-bottom: var(--vt-space-7);
}
.rule-top { border-top: var(--vt-border-w) solid var(--vt-color-line); }
.claim-block { padding-top: var(--vt-site-s56); }
.beatviz,
.stormarc {
  width: 100%;
  height: auto;
  overflow: visible;
}
.bv-tone { stroke: var(--vt-color-ink-muted); stroke-width: 1; }
.bv-sum { stroke: var(--vt-color-ink-muted); stroke-width: 1.2; }
.bv-env { stroke: var(--vt-color-accent); stroke-width: 1.8; }
.bv-tone,
.bv-sum,
.bv-env,
.sa-wind,
.sa-rain {
  stroke-linejoin: round;
  stroke-linecap: round;
}
.svg-label {
  fill: var(--vt-color-ink-muted);
  font-family: var(--vt-slot-micro-family);
  font-size: var(--vt-slot-micro-size);
  font-weight: var(--vt-slot-micro-weight);
  letter-spacing: var(--vt-slot-micro-tracking);
  font-variant-numeric: tabular-nums;
}
.svg-label-ink { fill: var(--vt-color-ink); }
.sa-rule { stroke: var(--vt-color-line); stroke-width: 1; }
.sa-wind { stroke: var(--vt-color-ink-muted); stroke-width: 1.2; }
.sa-rain { stroke: var(--vt-color-ink); stroke-width: 1.8; }
.caption-row {
  display: flex;
  justify-content: space-between;
  gap: var(--vt-space-4);
}
@media (max-width: 899px) {
  .section-pad, .section-pad-lg, .section-pad-inner { padding-top: var(--vt-space-6); padding-bottom: var(--vt-space-6); }
  .claim-block { padding: var(--vt-space-3) 0; border-top: var(--vt-border-w) solid var(--vt-color-line); border-bottom: var(--vt-border-w) solid var(--vt-color-line); }
  .caption-row { flex-direction: column; gap: var(--vt-space-1); }
  .release-grid { flex-direction: column-reverse; }
}
.tier-row {
  display: flex;
  gap: var(--vt-space-4);
  padding: var(--vt-space-3) 0;
  border-top: var(--vt-border-w) solid var(--vt-color-line);
}
.tier-word {
  flex: 0 0 128px;
  font-family: var(--vt-font-mono);
}
.tier-researched { color: var(--vt-color-ev-researched-ink); }
.tier-preliminary { color: var(--vt-color-ev-preliminary-ink); }
.tier-traditional { color: var(--vt-color-ev-traditional-ink); }
@media (max-width: 899px) {
  .tier-row { flex-direction: column; gap: var(--vt-space-0); }
  .tier-word { flex-basis: auto; }
}
.sources {
  margin: 0;
  padding: 0 0 0 var(--vt-space-4);
}
.spec-row {
  display: flex;
  align-items: baseline;
  gap: var(--vt-space-4);
  padding: var(--vt-space-3) 0;
  border-top: var(--vt-border-w) solid var(--vt-color-line);
}
.spec-key { flex: 0 0 120px; }
.spec-key-price {
  flex: 0 0 168px;
  font-family: var(--vt-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--vt-slot-heading-size);
  line-height: 1.25;
}
@media (max-width: 899px) {
  .spec-row { flex-direction: column; gap: var(--vt-space-0); }
  .spec-key, .spec-key-price { flex-basis: auto; }
  .spec-key-price { font-size: var(--vt-slot-tile-size); }
}
.closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-5);
}
@media (max-width: 899px) {
  .closing { flex-direction: column; align-items: stretch; gap: var(--vt-space-4); }
}

/* ---- the shipped Calm screen as a still picture (Calm.tsx + calm.css + components.css, 390 × 844) ------------------ */
.device {
  display: inline-flex;
  flex: 0 0 auto;
  padding: var(--vt-space-1);
  border: var(--vt-border-w) solid var(--vt-color-line);
  border-radius: var(--vt-radius-lg);
  background-color: var(--vt-color-surface);
}
.device-screen {
  position: relative;
  overflow: hidden;
  border-radius: var(--vt-radius-md);
  flex: 0 0 auto;
}
.device-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  transform-origin: 0 0;
}
.device-72 .device-screen { width: 280.8px; height: 607.68px; }
.device-72 .device-inner { transform: scale(0.72); }
.device-80 .device-screen { width: 312px; height: 675.2px; }
.device-80 .device-inner { transform: scale(0.8); }
.device-72.device-crop .device-screen { height: 495.36px; }
.device-80.device-crop .device-screen { height: 550.4px; }
/* SITE-7 (audit 2026-10-20): at 320 the 0.8 picture (312 + frame 18 = 330 px) was wider than the viewport (scrollWidth 325
   on /). Under 360 px both pictures draw at 0.64 (249.6 + 18 = 267.6 px, inside 320 minus the gutters). */
@media (max-width: 359px) {
  .device-72 .device-screen,
  .device-80 .device-screen { width: 249.6px; height: 540.16px; }
  .device-72 .device-inner,
  .device-80 .device-inner { transform: scale(0.64); }
  .device-72.device-crop .device-screen,
  .device-80.device-crop .device-screen { height: 440.32px; }
}
.cs {
  width: 390px;
  height: 844px;
  display: flex;
  flex-direction: column;
  gap: var(--vt-space-2);
  padding: var(--vt-space-3) var(--vt-space-3) var(--vt-space-2);
  background-color: var(--vt-color-bg);
  color: var(--vt-color-ink);
  font-family: var(--vt-font-body);
  line-height: normal;
  position: relative;
  overflow: hidden;
}
.cs-top {
  display: flex;
  justify-content: flex-end;
  min-height: var(--vt-touch-min);
  flex: 0 0 auto;
}
.cs-glyph {
  width: var(--vt-touch-min);
  height: var(--vt-touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-stage {
  flex: 2 1 0;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-form {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-disc {
  width: 148.8px;
  height: 148.8px;
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-color-accent);
  opacity: 0.012;
}
.cs-breath .cs-disc { width: 194.4px; height: 194.4px; opacity: 0.08; }
.cs-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vt-space-3);
}
.cs-orb {
  position: relative;
  width: 76px;
  height: 76px;
}
.cs-halo {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 92px;
  height: 92px;
  border: var(--vt-border-w) solid var(--vt-color-accent);
  border-radius: var(--vt-radius-pill);
  opacity: 0.45;
  transform: scale(1.04);
}
.cs-orb-core {
  position: relative;
  width: 76px;
  height: 76px;
  border: var(--vt-border-w) solid var(--vt-color-accent);
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-orb-glyph { fill: var(--vt-color-on-accent); }
/* both glyphs at the app's size: .vt-orb-glyph and .vt-glyph svg are var(--vt-space-4) (components.css, calm.css) */
.cs-orb-glyph,
.cs-glyph svg {
  width: var(--vt-space-4);
  height: var(--vt-space-4);
}
.cs-status { text-align: center; line-height: 21px; }
.cs-phase {
  min-height: var(--vt-space-4);
  font-size: var(--vt-slot-label-size);
  color: var(--vt-color-ink-muted);
}
.cs-limit {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  font-family: var(--vt-font-mono);
  font-size: var(--vt-slot-micro-size);
  letter-spacing: var(--vt-slot-micro-tracking);
  color: var(--vt-color-ink-muted);
}
.cs-meter {
  width: var(--vt-space-7);
  height: var(--vt-space-1);
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-color-surface-alt);
}
.cs-rows {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--vt-space-2);
}
.cs-row {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  padding: var(--vt-space-1) var(--vt-space-2) var(--vt-space-1) var(--vt-space-3);
  border: var(--vt-border-w) solid var(--vt-color-line);
  border-radius: var(--vt-radius-sm);
  background-color: var(--vt-color-surface);
}
.cs-on { border-color: var(--vt-color-accent); }
.cs-row-text {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--vt-touch-min);
  display: flex;
  flex-direction: column;
  gap: var(--vt-space-0);
  padding: var(--vt-space-1) 0;
}
.cs-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--vt-space-2);
  line-height: 21px;
}
.cs-row-name { font-family: var(--vt-font-display); font-weight: var(--vt-slot-tile-weight); }
.cs-row-value { font-size: var(--vt-slot-label-size); white-space: nowrap; }
.cs-row-hint { font-size: var(--vt-slot-label-size); line-height: 18px; color: var(--vt-color-ink-muted); }
.cs-switch {
  flex: 0 0 auto;
  min-width: var(--vt-touch-min);
  min-height: var(--vt-touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-track {
  position: relative;
  width: 50px;
  height: 26px;
  border: var(--vt-border-w) solid var(--vt-color-line);
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-color-surface-alt);
}
.cs-knob {
  position: absolute;
  top: var(--vt-space-0);
  left: var(--vt-space-0);
  width: var(--vt-space-3);
  height: var(--vt-space-3);
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-color-ink-muted);
}
.cs-on .cs-track { border-color: var(--vt-color-accent); background-color: var(--vt-color-accent); }
.cs-on .cs-knob { left: var(--vt-space-4); background-color: var(--vt-color-on-accent); }
/* the Calm picture keeps the Calm palette inside any band (gen-story.mjs: a calm screen sits on a dark section) */
.device .cs { color: var(--vt-color-ink); }

/* ---- /story (StoryDesktop / StoryPhone) ------------------------------------------------------------------------------ */
.band {
  background-color: var(--vt-color-bg);
  color: var(--vt-color-ink);
}
.story-section { position: relative; }
.story-hero { overflow: hidden; padding-bottom: var(--vt-space-6); }
.story-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 704px;
}
.story-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 640px;
  height: 640px;
  transform: translate(-50%, -50%);
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-color-accent);
  opacity: 0.08;
}
.story-hero-text {
  position: relative;
  max-width: 560px;
}
.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vt-space-2);
}
.scroll-cue-line {
  width: 1px;
  height: var(--vt-space-5);
  background-color: var(--vt-color-ink-decor);
}
.band-first { padding-top: var(--vt-site-s128); padding-bottom: var(--vt-site-s96); }
.band-mid { padding-bottom: var(--vt-site-s96); }
.band-last { padding-bottom: var(--vt-site-s128); }
.band-solo { padding-top: var(--vt-site-s128); padding-bottom: var(--vt-site-s128); }
.band-last-cta { padding-top: var(--vt-site-s96); padding-bottom: var(--vt-site-s128); }
.divided {
  border-top: var(--vt-border-w) solid var(--vt-color-line);
  padding-top: var(--vt-site-s96);
}
.tone-spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--vt-space-5);
}
.tone-spec-row {
  display: flex;
  flex-direction: column;
  gap: var(--vt-space-0);
  padding: var(--vt-space-3) 0;
  border-top: var(--vt-border-w) solid var(--vt-color-line);
}
.tone-spec-value {
  font-family: var(--vt-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--vt-slot-tile-size);
  white-space: nowrap;
}
.tone-spec-unit { font-size: var(--vt-slot-body-size); color: var(--vt-color-ink-muted); }
.tier-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vt-space-5);
}
.example {
  display: flex;
  gap: var(--vt-space-6);
}
.example-head { flex: 0 0 208px; }
.example-line {
  font-family: var(--vt-slot-tile-family);
  font-size: var(--vt-slot-tile-size);
  line-height: 1.43;
}
.pattern-table { border-bottom: var(--vt-border-w) solid var(--vt-color-line); }
.pt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, 64px);
  padding: var(--vt-space-2) 0;
  border-top: var(--vt-border-w) solid var(--vt-color-line);
}
.pt-row > * + * { text-align: right; }
.inline-row {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
}
.night-stack,
.night-head,
.night-lines { align-items: center; text-align: center; }
.night-dot {
  width: var(--vt-space-3);
  height: var(--vt-space-3);
  border-radius: var(--vt-radius-pill);
  background-color: var(--vt-color-ink);
}
.night-status {
  display: inline-flex;
  padding: var(--vt-space-0) var(--vt-space-2);
  border: var(--vt-border-w) solid var(--vt-color-line);
  border-radius: var(--vt-radius-pill);
}
.price-card { padding: 0; overflow: hidden; }
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--vt-space-4);
  padding: var(--vt-space-4) var(--vt-space-5);
}
.price-row + .price-row { border-top: var(--vt-border-w) solid var(--vt-color-line); }
.price-value { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.price-amount {
  font-family: var(--vt-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--vt-slot-tile-size);
  white-space: nowrap;
}
.price-note { padding-left: var(--vt-space-5); }
.rm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: var(--vt-border-w) solid var(--vt-color-line);
}
.rm-item {
  display: flex;
  gap: var(--vt-space-3);
  padding: var(--vt-space-3) 0;
  border-top: var(--vt-border-w) solid var(--vt-color-line);
}
.rm-marker {
  flex: 0 0 auto;
  width: var(--vt-space-1);
  height: var(--vt-space-1);
  margin-top: var(--vt-space-1);
  border: var(--vt-border-w) solid var(--vt-color-ink-muted);
  border-radius: var(--vt-radius-sm);
}
.rm-now { border-color: var(--vt-color-accent); background-color: var(--vt-color-accent); }
.fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: var(--vt-border-w) solid var(--vt-color-line);
}
.fact-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: var(--vt-space-4);
  align-items: baseline;
  padding: var(--vt-space-3) 0;
  border-top: var(--vt-border-w) solid var(--vt-color-line);
}
@media (max-width: 899px) {
  .story-hero { padding-top: var(--vt-space-6); padding-bottom: var(--vt-space-5); }
  .story-stage { min-height: 460px; }
  .story-halo { width: 480px; height: 480px; }
  .tone-spec, .tier-cards { display: flex; flex-direction: column; gap: var(--vt-space-3); }
  .tone-spec { gap: 0; border-bottom: var(--vt-border-w) solid var(--vt-color-line); }
  .tone-spec-row { flex-direction: row; justify-content: space-between; align-items: baseline; padding: var(--vt-space-2) 0; }
  .example { flex-direction: column; gap: var(--vt-space-3); }
  .example-head { flex-basis: auto; }
  .example-line { font-family: var(--vt-slot-body-family); font-size: var(--vt-slot-body-size); line-height: 1.5; }
  .pt-row { grid-template-columns: minmax(0, 1fr) repeat(4, 48px); }
  .night-stack, .night-head, .night-lines { align-items: flex-start; text-align: left; }
  .price-row { padding: var(--vt-space-4); }
  .price-note { padding-left: var(--vt-space-4); }
  .fact-row { display: flex; flex-direction: column; gap: var(--vt-space-0); }
}

/* /story with motion allowed: story.js adds .scrub to <html> and writes the slewed palette onto every band through CSSOM.
   With no script, or under prefers-reduced-motion, each band keeps its own static palette (the boards' end states). */
.scrub .band { background-color: var(--vt-color-bg); }

/* ---- legal pages (Support / Privacy / Impressum boards) --------------------------------------------------------------- */
.legal-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--vt-space-4);
  padding-top: var(--vt-space-7);
  padding-bottom: var(--vt-space-7);
}
.legal-head-left { grid-column: span 4; }
.legal-head-right { grid-column: span 8; padding-top: var(--vt-space-5); min-width: 0; }
.legal-sections { padding-bottom: var(--vt-space-4); }
.legal-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--vt-space-4);
  padding: var(--vt-space-6) 0;
  border-top: var(--vt-border-w) solid var(--vt-color-line);
}
.legal-section-head { grid-column: span 4; padding-right: var(--vt-space-5); }
.legal-section-body { grid-column: span 8; min-width: 0; }
.legal-section-body p { max-width: 533px; line-height: 1.625; }
.legal-section-body .card p,
.legal-section-body .md p { max-width: none; }
@media (max-width: 899px) {
  .legal-head, .legal-section { display: flex; flex-direction: column; gap: var(--vt-space-5); }
  .legal-head { padding-top: var(--vt-space-6); padding-bottom: var(--vt-space-6); }
  .legal-head-right { padding-top: 0; }
  .legal-section { gap: var(--vt-space-4); padding: var(--vt-space-5) 0; }
  .legal-section-head { padding-right: 0; }
  .legal-section-body p { max-width: none; }
}
.contact-card { max-width: 570px; }
.contact-address {
  display: flex;
  align-items: center;
  min-height: var(--vt-touch-min);
  font-family: var(--vt-slot-tile-family);
  font-size: var(--vt-slot-tile-size);
  font-weight: var(--vt-slot-label-weight);
}
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vt-space-4);
}
.span2 { grid-column: span 2; min-width: 0; }
.plain-list { list-style: none; margin: 0; padding: 0; }
@media (max-width: 899px) {
  .grid3 { display: flex; flex-direction: column; gap: var(--vt-space-3); }
  .contact-address { font-family: var(--vt-slot-body-family); font-size: var(--vt-slot-body-size); }
}
.step-card { padding: var(--vt-space-4); }
.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-2);
  min-height: var(--vt-touch-min);
}
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vt-space-5);
  height: var(--vt-space-5);
  border: var(--vt-border-w) solid var(--vt-color-line);
  border-radius: var(--vt-radius-pill);
  font-family: var(--vt-font-mono);
  font-size: var(--vt-slot-micro-size);
}
.echo {
  display: inline-flex;
  align-items: center;
  min-height: var(--vt-touch-min);
  border: var(--vt-border-w) solid var(--vt-color-line);
  color: var(--vt-color-ink-muted);
  white-space: nowrap;
}
.echo-glyph { justify-content: center; width: var(--vt-touch-min); border-radius: var(--vt-radius-sm); color: var(--vt-color-ink); }
.echo-button { padding: var(--vt-space-1) var(--vt-space-3); border-radius: var(--vt-radius-md); font-weight: var(--vt-slot-label-weight); }
.echo-json {
  padding: 0 var(--vt-space-2);
  border-radius: var(--vt-radius-sm);
  background-color: var(--vt-color-surface);
  font-family: var(--vt-font-mono);
  font-size: var(--vt-slot-micro-size);
  white-space: pre;
}
.export-row { align-items: start; }
/* SITE-7 (audit 2026-10-20): in the one-column layout the skeleton's column took its max-content width (scrollWidth 337 on
   /support/ at 320) — stretch it; the skeleton scrolls inside (overflow-x: auto) */
@media (max-width: 899px) {
  .export-row { align-items: stretch; }
}
.export-skeleton {
  padding: var(--vt-space-3);
  border: var(--vt-border-w) solid var(--vt-color-line);
  border-radius: var(--vt-radius-sm);
  background-color: var(--vt-color-surface);
  font-family: var(--vt-font-mono);
  font-size: var(--vt-slot-micro-size);
  line-height: 1.75;
  color: var(--vt-color-ink-muted);
  overflow-x: auto;
}
.pre { white-space: pre; }
.row-echo { display: flex; flex-direction: column; gap: var(--vt-space-0); padding: var(--vt-space-3) var(--vt-space-4); }
.row-echo-name { font-family: var(--vt-font-display); font-weight: var(--vt-slot-tile-weight); }
.lead-in { font-weight: var(--vt-slot-label-weight); }
.fact-strip {
  margin: 0;
  padding: var(--vt-space-1) var(--vt-space-5);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--vt-space-4);
}
.fact-item {
  display: flex;
  align-items: center;
  gap: var(--vt-space-2);
  min-height: var(--vt-touch-min);
  font-weight: var(--vt-slot-label-weight);
}
.fact-item .icon { color: var(--vt-color-accent); }
@media (max-width: 899px) {
  .fact-strip { flex-direction: column; align-items: flex-start; gap: 0; padding: var(--vt-space-2) var(--vt-space-4); }
}
.def-list { margin: 0; padding: var(--vt-space-1) var(--vt-space-5); }
.def-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--vt-space-4);
  align-items: baseline;
  padding: var(--vt-space-4) 0;
}
.def-row + .def-row { border-top: var(--vt-border-w) solid var(--vt-color-line); }
.def-row dt { grid-column: span 3; }
.def-row dd { grid-column: span 5; min-width: 0; }
@media (max-width: 899px) {
  .def-list { padding: var(--vt-space-1) var(--vt-space-4); }
  .def-row { display: flex; flex-direction: column; gap: var(--vt-space-1); padding: var(--vt-space-3) 0; }
}
/* PRIVACY.md rendered (site/src/markdown.mjs) */
.md { display: flex; flex-direction: column; gap: var(--vt-space-4); }
.md code { font-family: var(--vt-font-mono); }
.md strong { font-weight: var(--vt-slot-heading-weight); }
.md-table-wrap { overflow-x: auto; }
.md-table {
  width: 100%;
  border-collapse: collapse;
  border: var(--vt-border-w) solid var(--vt-color-line);
  border-radius: var(--vt-radius-sm);
  background-color: var(--vt-color-surface);
}
.md-table th,
.md-table td {
  text-align: left;
  vertical-align: baseline;
  padding: var(--vt-space-3) var(--vt-space-4);
  border-top: var(--vt-border-w) solid var(--vt-color-line);
  font-weight: var(--vt-slot-body-weight);
}
.md-table thead th {
  border-top: 0;
  font-family: var(--vt-slot-micro-family);
  font-size: var(--vt-slot-micro-size);
  letter-spacing: var(--vt-slot-micro-tracking);
  color: var(--vt-color-ink-muted);
}

/* forced colours: the OS paints; borders and hairlines stay (03 §7.5) */
@media (forced-colors: active) {
  .btn-primary { border-color: ButtonText; }
  .disc, .story-halo, .cs-disc { display: none; }
}

/* Waves: its muted ink (a saturated mid-blue) reads as a link in a full sentence, so sentences stay in ink there and the
   hierarchy comes from order and the stack gap (gen-story.mjs para(), review V11); eyebrows and labels keep it. */
[data-mode='waves'] p.muted,
[data-mode='waves'] .muted p {
  color: var(--vt-color-ink);
}

/* P7 on a phone: a Calm screen (light) on a dark band is a large bright patch; a flick carries it through the viewport at
   the thumb's speed. On a 390 x 844 viewport the 0.8 picture covers 52 % of it, so it is drawn at 0.45 there (176 x 310,
   16.5 % — under VISUAL_GOVERNOR.MAX_FLASH_AREA_FRACTION, 25 %) at half opacity over the band, so a flick past it adds
   nothing over what the text itself carries at that speed. Measured by tests/site/story-p7.test.ts (the phone flick, p2p in
   [5, 30] Hz: 0.198 at 0.8, 0.107 at 0.5, 0.050-0.052 at 0.45 + opacity 0.5 = the 0.050 of the same flick with the
   palette frozen; DEVIATIONS 2026-10-20 site stage). */
@media (max-width: 899px) {
  .band:not([data-mode='calm']) .device-80 .device-screen { width: 175.5px; height: 379.8px; }
  .band:not([data-mode='calm']) .device-80.device-crop .device-screen { height: 309.6px; }
  .band:not([data-mode='calm']) .device-80 .device-inner { transform: scale(0.45); }
}
/* the same picture on a dark band at any width: half opacity over the band (desktop flick 0.042-0.047 p2p at full opacity
   against 0.015 with the palette frozen; DEVIATIONS 2026-10-20 site stage) */
.band:not([data-mode='calm']) .device .cs { opacity: 0.5; }