/* ==========================================================================
   buildmog.com: the landing page, account, privacy, terms and 404.
   Every color, font, radius, shadow and easing comes from src/tokens.css.
   Mobile first: 16 px side gutters, tap targets of 44 px or more, and no
   horizontal scroll at 390 px. Serif only for the wordmark, headlines and big
   numbers; mono only for part numbers and the fine print under prices.
   ========================================================================== */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, figure, blockquote, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--accent-soft); color: var(--text); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 12px 16px; border-radius: var(--radius-xs); background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none; }
.skip:focus { left: 8px; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
@media (min-width: 720px) { .wrap { padding-left: 28px; padding-right: 28px; } }

/* ---------- type ---------- */
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: clamp(44px, 12.5vw, 92px); line-height: 0.98; }
.h1-line, .h-line { display: block; }
h2 { font-size: clamp(38px, 6.6vw, 60px); }
h3 { font: 600 18px/1.3 var(--font-ui); letter-spacing: -0.005em; }
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font: 600 12.5px/1.2 var(--font-ui);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2);
}
.lede { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5; color: var(--text-2); max-width: 52ch; }
.section-lede { margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--text-2); max-width: 58ch; }
.section-lede a { color: var(--text); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: 600 16px/1.1 var(--font-ui);
  text-align: center; text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.btn-lg { min-height: 56px; padding: 0 26px; font-size: 17px; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-primary { background: var(--accent-grad); color: var(--accent-ink); box-shadow: 0 12px 26px -12px var(--glow); }
.btn-secondary { background: var(--surface-solid); color: var(--text); border-color: var(--border-strong); }
.btn-ink { background: var(--text); color: var(--bg); }
.btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border); }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
@media (hover: hover) {
  .btn-primary:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); }
  .btn-secondary:hover { border-color: var(--text-3); transform: translateY(-1px); }
  .btn-ink:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
  .btn-ghost:hover { color: var(--text); border-color: var(--border-strong); }
}
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
button.btn { font: 600 16px/1.1 var(--font-ui); }
button.btn.btn-sm { font-size: 15px; }
.link-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(var(--glass-blur));
  backdrop-filter: saturate(1.3) blur(var(--glass-blur));
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.topbar.is-scrolled { border-bottom-color: var(--border); box-shadow: 0 10px 30px -24px var(--glow); }
.topbar-inner { display: flex; align-items: center; gap: 10px; height: 64px; }
.wordmark {
  display: inline-block; margin-right: auto; padding: 7px 0;
  font: 400 30px/1 var(--font-display); letter-spacing: var(--display-tracking);
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.wordmark-dot { display: inline-block; width: 0.19em; height: 0.19em; margin-left: 0.05em; border-radius: 50%; background: var(--accent); }
.nav-links { list-style: none; margin: 0; padding: 0; display: none; }
.nav-links a { text-decoration: none; }
.menu-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface-solid); color: var(--text); cursor: pointer;
}
.menu-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-btn .menu-close, .topbar.nav-open .menu-btn .menu-open { display: none; }
.topbar.nav-open .menu-btn .menu-close { display: inline; }
.topbar.nav-open .nav-links {
  display: flex; flex-direction: column;
  position: absolute; top: 100%; left: 0; right: 0;
  padding: 6px max(16px, env(safe-area-inset-left)) 18px;
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-2);
}
.topbar.nav-open .nav-links a {
  display: flex; align-items: center; min-height: 52px;
  font-size: 18px; font-weight: 500; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.topbar.nav-open .nav-links li:last-child a { border-bottom: 0; }
/* no script: the links wrap onto a second row instead of a menu */
html:not(.js) .menu-btn { display: none; }
html:not(.js) .topbar-inner { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 6px; }
html:not(.js) .nav { order: 3; width: 100%; }
html:not(.js) .nav-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
html:not(.js) .nav-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); }
@media (min-width: 900px) {
  .menu-btn { display: none; }
  .nav-links, html:not(.js) .nav-links { display: flex; gap: 2px; margin-right: 10px; }
  html:not(.js) .topbar-inner { flex-wrap: nowrap; height: 64px; padding: 0 28px; }
  html:not(.js) .nav { order: 0; width: auto; }
  .nav-links a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border-radius: var(--radius-pill);
    font-size: 15px; font-weight: 500; color: var(--text-2);
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .nav-links a:hover { color: var(--text); background: var(--bg-2); }
  .nav-links a[aria-current="page"] { color: var(--text); }
}

/* ---------- the room that builds itself: a scroll-scrubbed frame sequence (src/room.js) ----------
   The hero IS the stage: a full-bleed sticky picture of the room assembling, with the hero copy over it as the first
   "beat" and shorter messages after it, all in the same place. Three layouts by the stage's shape, the same rule in
   room.js: wide screens (aspect 1 and up) cover-fit the 16:9 frames and pin the copy to the bottom left, its last line
   on the rug's bottom edge (--rug, a fraction of the frame's height, measured on version 1's first frame) like an
   underline; portrait tablets (5/8 to 1) fit the whole 16:9 room to the width at the bottom with the copy in the band
   above; phones (under 5/8) draw a 3:4 crop the same way, with the CTAs in a bar at the bottom. With JS and motion the
   stage pins for 500svh of scroll while the frames scrub, eased and cross-faded in room.js; without JS or under Reduce
   Motion it is one viewport: the finished room with the hero copy. Three promise chips float in around Mog as his hands
   meet (room.js places them). Colours on the picture are tokens only: the hologram core for text, the accent ink for
   the scrims and the stage, the accent for the bar and the chips' dots. */
.hero-room { position: relative; margin-top: -65px; }   /* the stage starts under the sticky topbar (64 px + its 1 px border), so the first viewport is all picture */
.room { position: relative; height: 100svh; --rug: 0.946; }
html.js .room { height: 500svh; }   /* 150 frames over 400svh of travel: about 24 px a frame on a laptop */
html.js .room.is-still { height: 100svh; }
.room-stage {
  position: sticky; top: 0; height: 100svh; width: 100%; overflow: hidden; isolation: isolate;
  background: var(--accent-ink);
}
.room-poster, .room-final, .room-frames { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.room-poster, .room-final { object-fit: cover; object-position: center; margin: 0; }
.room-final { opacity: 0; z-index: 1; }
.room-poster { z-index: 2; transition: opacity var(--dur-slow) var(--ease-out); }
.room-frames { z-index: 1; }
.room.is-live .room-poster { opacity: 0; }
html:not(.js) .room-final, .room.is-still .room-final { opacity: 1; z-index: 2; }
html:not(.js) .room-frames, .room.is-still .room-frames, html:not(.js) .room-poster, .room.is-still .room-poster,
html:not(.js) .room-bar, .room.is-still .room-bar, html:not(.js) .room-hint, .room.is-still .room-hint, .room.is-done .room-hint { display: none; }
.room-bar { position: absolute; left: 0; top: 0; z-index: 4; height: 3px; width: 0; background: var(--accent); transition: width 200ms linear; }
.room-bar.done { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out) 200ms; }
.room-beats { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* a beat is the whole stage: its scrim (::before) and its copy fade together; the copy slides 14 px as it lands */
.beat {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.beat.on { opacity: 1; visibility: visible; transition: opacity var(--dur-med) var(--ease-out); }
.beat::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent-ink) 78%, transparent) 0%, color-mix(in srgb, var(--accent-ink) 46%, transparent) 30%, transparent 52%),
    linear-gradient(0deg, color-mix(in srgb, var(--accent-ink) 58%, transparent) 0%, transparent 46%);
}
/* wide screens: the copy's bottom sits on the rug's bottom edge. The frame is cover-fit, so its drawn height is
   max(100svh, 56.25vw) and the edge is at (100svh - that) / 2 + rug x that from the top; room.js adds .is-top on a
   screen too short for the copy, so it never runs under the topbar. */
.beat-copy {
  position: absolute; left: max(20px, 4vw); width: min(540px, 42vw); max-width: none; margin: 0; padding: 0;
  bottom: max(28px, calc(50svh + max(100svh, 56.25vw) * (0.5 - var(--rug))));
  transform: translateY(14px); transition: transform var(--dur-med) var(--ease-out);
}
.beat-copy.is-top { bottom: auto; top: 80px; }
.beat.on .beat-copy { transform: none; pointer-events: auto; }
.beat-copy h1 {
  font-size: clamp(40px, 4.6vw, 72px); margin-bottom: 16px; text-wrap: wrap; color: var(--holo-core);
  text-shadow: 0 4px 28px color-mix(in srgb, var(--accent-ink) 60%, transparent);
}
.beat-copy .eyebrow { color: var(--accent-2); }
.beat-copy h1 .h1-line { white-space: nowrap; }   /* two lines in any font: the swap to the web font never changes the copy's height */
.beat-copy .lede { max-width: min(480px, 36vw); font-size: clamp(15px, 1.25vw, 18px); color: color-mix(in srgb, var(--holo-core) 88%, transparent); text-shadow: 0 2px 16px color-mix(in srgb, var(--accent-ink) 65%, transparent); }
.beat-copy .cta-row { margin-top: 22px; }
.beat-copy .hero-facts { margin-top: 16px; }
.beat-copy .btn-secondary, .room-ctas .btn-secondary { background: color-mix(in srgb, var(--accent-ink) 42%, transparent); color: var(--holo-core); border-color: color-mix(in srgb, var(--holo-core) 45%, transparent); }
.beat-copy .chips li { background: color-mix(in srgb, var(--accent-ink) 42%, transparent); border-color: color-mix(in srgb, var(--holo-core) 28%, transparent); color: color-mix(in srgb, var(--holo-core) 88%, transparent); }
.beat-copy .hero-facts .is-status { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--holo-core) 55%, transparent); color: var(--holo-core); }
.beat-title {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: clamp(30px, 3.8vw, 56px); line-height: 1.02; color: var(--holo-core);
  text-shadow: 0 4px 28px color-mix(in srgb, var(--accent-ink) 60%, transparent);
}
.beat-title em { font-style: normal; color: var(--accent-2); }
.beat-line {
  margin: 0; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.45; max-width: 40ch;
  color: color-mix(in srgb, var(--holo-core) 88%, transparent);
  text-shadow: 0 2px 16px color-mix(in srgb, var(--accent-ink) 65%, transparent);
}
.beat .bm-soon { vertical-align: 3px; color: var(--holo-core); border-color: color-mix(in srgb, var(--holo-core) 55%, transparent); background: color-mix(in srgb, var(--accent-ink) 45%, transparent); }
.room-ctas { display: none; }
/* the promises: three glass chips that float in around Mog as his hands meet (room.js sets where and how far in) */
.room-promises { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; visibility: hidden; }
.room-promises.is-placed { visibility: visible; }   /* hidden until room.js has placed it: a move while visible counts as layout shift, even at opacity 0 */
.promise {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 9px 15px 9px 13px; border-radius: var(--radius-pill);
  font: 600 clamp(13px, 1.05vw, 15.5px)/1.2 var(--font-ui); color: var(--holo-core);
  background: color-mix(in srgb, var(--accent-ink) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--holo-core) 30%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(var(--glass-blur)); backdrop-filter: saturate(1.2) blur(var(--glass-blur));
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--accent-ink) 80%, transparent);
  opacity: 0; will-change: opacity, transform;
}
.promise::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
html:not(.js) .room-promises, .room.is-still .room-promises { display: none; }
.room-hint {
  position: absolute; left: 50%; bottom: 2.5svh; z-index: 3; margin: 0; transform: translateX(-50%);
  font: 600 12px/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--holo-core) 80%, transparent);
}
@media (prefers-reduced-motion: no-preference) { .room-hint { animation: bm-bob 2.2s var(--ease-in-out) infinite; } }
@keyframes bm-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
/* a wide but short screen (a phone on its side): the headline and the buttons only */
@media (min-aspect-ratio: 1/1) and (max-height: 540px) {
  .beat-copy .lede, .beat-copy .hero-facts, .beat-copy .eyebrow { display: none; }
  .beat-copy h1 { font-size: 34px; margin-bottom: 8px; }
  .beat-copy .cta-row { margin-top: 10px; }
  .room-hint, .room-promises { display: none; }
}
/* portrait screens (tablets and phones): the picture sits at the bottom, fitted to the width, the copy in the band above */
@media (max-aspect-ratio: 999/1000) {
  .room-poster, .room-final { object-fit: contain; object-position: center bottom; }
  .beat::before {
    background: linear-gradient(180deg, var(--accent-ink) 0%, color-mix(in srgb, var(--accent-ink) 88%, transparent) 34%, color-mix(in srgb, var(--accent-ink) 36%, transparent) 52%, transparent 62%);
  }
  .beat-copy { position: relative; left: auto; bottom: auto; width: auto; max-width: 640px; padding: 96px max(24px, 6vw) 0; }
  .beat-copy h1 .h1-line { white-space: normal; }
  .beat-copy .lede { max-width: none; }
  .beat-copy h1 { font-size: clamp(36px, 7vw, 62px); margin-bottom: 14px; }
  .beat-copy .lede { font-size: clamp(15.5px, 2.2vw, 18px); }
  .beat-title { font-size: clamp(30px, 6vw, 50px); }
  .beat-line { font-size: clamp(15.5px, 2.2vw, 18px); }
  .room-promises { inset: auto 0 auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px; }
  .promise { position: relative; font-size: 12.5px; padding: 7px 12px 7px 10px; }
  .room-hint { display: none; }
}
/* phones held upright: a 3:4 crop instead of the whole room, and the CTAs in a bar at the bottom */
@media (max-aspect-ratio: 5/8) {
  .beat-copy { padding: 80px 16px 0; }
  .beat-copy h1 { font-size: clamp(36px, 10.4vw, 46px); margin-bottom: 12px; }
  .beat-copy .lede { font-size: 15.5px; line-height: 1.45; }
  .beat-copy .cta-row, .beat-copy .hero-facts { display: none; }
  .beat-title { font-size: clamp(30px, 8.6vw, 40px); }
  .beat-line { font-size: 15.5px; }
  .room-ctas {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center;
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 18px 16px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent-ink) 78%, transparent) 38%, color-mix(in srgb, var(--accent-ink) 92%, transparent) 100%);
  }
  .room-ctas .btn { min-height: 46px; padding: 0 10px; font-size: 14.5px; white-space: nowrap; }
  .room-status { grid-column: 1 / -1; margin: 2px 0 0; text-align: center; font-size: 12.5px; font-weight: 500; color: color-mix(in srgb, var(--holo-core) 85%, transparent); }
}
@media (max-aspect-ratio: 5/8) and (max-height: 719px) {
  .room-poster, .room-final { padding-top: 36svh; box-sizing: border-box; }   /* short phones: the picture gives the copy its band */
}
@media (prefers-reduced-motion: reduce) {
  html.js .room { height: 100svh; }
  .room-poster, .room-frames, .room-bar, .room-hint { display: none; }
  .room-final { opacity: 1; z-index: 2; }
  .beat, .beat-copy { transition: none; }
}

/* the 3D demo band keeps the old hero's layout under the room */
.hero-demo .hero-copy h2 { font-size: clamp(38px, 4.6vw, 60px); margin-bottom: 18px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 28px 0 56px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(75% 55% at 72% 18%, var(--text), transparent 72%);
  mask-image: radial-gradient(75% 55% at 72% 18%, var(--text), transparent 72%);
  opacity: 0.55;
}
.hero-grid { position: relative; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "stage" "mog"; }
.hero-copy { grid-area: copy; padding-top: 8px; }
.hero-copy h1 { margin-bottom: 20px; text-wrap: wrap; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-note { margin-top: 16px; font-size: 14.5px; color: var(--text-2); }
/* Mog is framed as a card: the artwork's cream (#fbf5dd) is a shade lighter than the page. The figure is
   scoped to workshop so the card stays cream in nightshift too. */
.hero-mog {
  grid-area: mog; justify-self: center;
  width: min(86%, 380px);
  border-radius: var(--radius-l); overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.hero-mog img { width: 100%; }
.hero-frame { grid-area: stage; position: relative; min-width: 0; }
@media (max-width: 559px) {
  .cta-row .btn { width: 100%; }
}
@media (min-width: 960px) {
  .hero { padding: 36px 0 88px; }
  .hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    grid-template-areas: "copy mog" "stage stage";
    column-gap: 48px; row-gap: 36px; align-items: center;
  }
  .hero-copy { padding-top: 0; }
  .hero-copy h1 { font-size: clamp(64px, 6.4vw, 92px); }
  .hero-mog { width: 100%; max-width: 420px; justify-self: end; }
}

/* the live 3D hero: the real player, in hero mode */
.hero-stage {
  position: relative;
  height: clamp(320px, 52vh, 560px);
  border-radius: var(--radius-l);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--stage-bg);
  background-image: var(--stage-vignette);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
/* loading: a landing ring breathes until the player is ready */
.hero-stage:not(.is-ready):not(.is-fallback)::before {
  content: ""; position: absolute; left: 50%; top: 62%;
  width: min(60%, 340px); aspect-ratio: 3.2;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--holo-ring);
  box-shadow: 0 0 0 18px var(--accent-soft), 0 0 60px var(--glow);
  opacity: 0.7;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-stage:not(.is-ready):not(.is-fallback)::before { animation: bm-breathe 1.6s var(--ease-in-out) infinite alternate; }
}
@keyframes bm-breathe { from { opacity: 0.35; transform: translate(-50%, -50%) scale(0.94); } to { opacity: 0.8; transform: translate(-50%, -50%) scale(1); } }
/* fallback: no WebGL, no network, or the player failed. Mog stands in, and the hero's own Mog steps aside. */
.hero-stage.is-fallback,
html:not(.js) .hero-stage {
  background-image: url("../brand/mascot/mog-wave-1400.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.hero.has-fallback .hero-mog,
.hero:has(.hero-stage.is-fallback) .hero-mog,
html:not(.js) .hero-mog { display: none; }
@media (min-width: 960px) {
  .hero.has-fallback .hero-grid,
  html:not(.js) .hero-grid { grid-template-areas: "copy copy" "stage stage"; }
}

/* HUD over the stage */
.hud {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12px;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.hud > * { pointer-events: auto; }
.hero-frame:not(.is-ready) .hud { opacity: 0; visibility: hidden; }
.hud-step {
  align-self: flex-start; max-width: min(100%, 440px);
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px 11px;
  border-radius: var(--radius-m);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-1);
}
.hud-count { font: 600 12px/1.2 var(--font-ui); letter-spacing: 0.04em; color: var(--text-2); }
.hud-title { font: 400 19px/1.15 var(--font-display); letter-spacing: var(--display-tracking); color: var(--text); }
.hud-bar { display: flex; align-items: center; gap: 10px; }
.hud-btn {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: var(--text); cursor: pointer;
}
.hud-btn svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hud-btn .i-play { display: none; fill: currentColor; stroke-width: 1.4; }
.hud-btn[aria-pressed="true"] .i-play { display: inline; }
.hud-btn[aria-pressed="true"] .i-pause { display: none; }
.hud-track {
  flex: 1; min-width: 0; display: flex; gap: 3px;
  height: 28px; align-items: center;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
.hud-track i { flex: 1; height: 4px; border-radius: 2px; background: var(--meter-track); overflow: hidden; }
.hud-track i b { display: block; height: 100%; background: var(--text); transform-origin: left center; transform: scaleX(0); }
.hud-track i.is-now { background: color-mix(in srgb, var(--holo) 28%, var(--meter-track)); }
.hud-track i.is-now b { background: var(--holo); }
.hud-link {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: var(--text); font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap;
}
.hud-link svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 479px) { .hide-sm { display: none; } .hud-title { font-size: 17px; } }
@media (min-width: 720px) { .hud { padding: 18px; } .hud-title { font-size: 22px; } }

/* ---------- sections ---------- */
.section { position: relative; padding: 72px 0; }
@media (min-width: 900px) { .section { padding: 112px 0; } }
.band { background: var(--bg-2); }
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .section-lede { margin-left: auto; margin-right: auto; }

/* reveal on scroll (only once the script is known to run) */
html.js .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
html.js .reveal.is-in, html.reveal-all .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- how it works ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.step-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 14px 26px;
  border-radius: var(--radius-l);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.step-card > p { padding: 0 10px; color: var(--text-2); }
.step-art {
  position: relative; aspect-ratio: 8 / 5; margin-bottom: 8px;
  border-radius: var(--radius-m); overflow: hidden;
  background-color: var(--bg);
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 1px solid var(--border);
}
.step-art .ill { width: 100%; height: 100%; }
.step-head { display: flex; align-items: baseline; gap: 12px; padding: 0 10px; }
.step-num { font: 400 46px/0.9 var(--font-display); letter-spacing: var(--display-tracking); color: var(--text-3); }
.step-head h3 { font-size: 20px; }

/* ---------- illustrations (inline SVG, tokens only) ---------- */
.ill { overflow: visible; }
.ill * { vector-effect: non-scaling-stroke; }
.ill .ink { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ill .ink-fill { fill: var(--text); }
.ill .dev { fill: var(--surface-solid); stroke: var(--text); stroke-width: 1.6; }
.ill .screen { fill: var(--bg-2); stroke: var(--border-strong); stroke-width: 1; }
.ill .screen.cam { fill: var(--wood-3); }
.ill .plank { fill: none; stroke: var(--wood-2); stroke-width: 1; opacity: 0.6; }
.ill .bp-paper { fill: var(--blueprint-paper); stroke: var(--blueprint); stroke-width: 1.4; }
.ill .bp { fill: none; stroke: var(--blueprint); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ill .bp.soft { opacity: 0.45; }
.ill .holo { fill: var(--accent-soft); stroke: var(--holo); stroke-width: 1.4; stroke-linejoin: round; }
.ill .holo-line { fill: none; stroke: var(--holo); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.ill .holo-line.thick { stroke-width: 2.4; }
.ill .holo-line.dashed { stroke-dasharray: 2 3; }
.ill .holo-glow { fill: var(--accent-soft); }
.ill .ring { fill: none; stroke: var(--holo-ring); stroke-width: 1.6; }
.ill .ring-2 { opacity: 0.45; }
.ill .f-top, .ill .f-front, .ill .f-side, .ill .f-back { stroke: var(--text); stroke-width: 1.2; stroke-linejoin: round; }
.ill .f-top { fill: var(--surface-solid); }
.ill .f-front { fill: color-mix(in srgb, var(--surface-solid) 72%, var(--wood-3)); }
.ill .f-side { fill: color-mix(in srgb, var(--surface-solid) 45%, var(--wood-3)); }
.ill .f-back { fill: var(--bg-2); stroke: var(--border-strong); }
.ill .pill { fill: var(--surface-solid); stroke: var(--border-strong); stroke-width: 1.2; }
.ill .caret { fill: var(--text); }
.ill .bubble { fill: var(--surface-solid); stroke: var(--border-strong); stroke-width: 1.2; }
.ill .ill-text { font-family: var(--font-ui); font-size: 10.5px; font-weight: 500; fill: var(--text-2); }
.ill .ill-text.strong { font-size: 12px; font-weight: 700; fill: var(--text); }
.ill .ill-text.tiny { font-size: 6.4px; font-weight: 700; letter-spacing: 0.08em; fill: var(--bg); }
.ill .ill-text.pill-text { font-size: 10px; fill: var(--text); }
.ill .live-bg { fill: var(--text); }
.ill .live-dot { fill: var(--live); }
.ill .g-lens { fill: var(--accent); stroke: var(--text); stroke-width: 1.2; stroke-linejoin: round; }
.ill .wave rect { fill: var(--text-3); transform-box: fill-box; transform-origin: center; }
.ill .shelf-solid { opacity: 0; }
.ill .ground { fill: var(--border); }
.ill .paper { fill: var(--surface-solid); stroke: var(--border-strong); stroke-width: 1.2; }
.ill .soft-line { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; opacity: 0.55; }
.ill .qr path { fill: var(--text); }
.ill .kraft { fill: var(--wood-3); stroke: var(--wood); stroke-width: 1.4; stroke-linejoin: round; }
.ill .kraft-dark { fill: var(--wood-2); stroke: var(--wood); stroke-width: 1.4; stroke-linejoin: round; }
.ill .tape { fill: none; stroke: color-mix(in srgb, var(--wood-2) 55%, var(--surface-solid)); stroke-width: 9; }
.ill .beam { fill: none; stroke: var(--holo); stroke-width: 1.6; stroke-dasharray: 3 4; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .ill .anim-scan { animation: bm-scan 2.6s var(--ease-in-out) infinite alternate; }
  .ill .caret { animation: bm-blink 1.1s steps(1) infinite; }
  .ill .shelf-holo { animation: bm-holo 5.2s var(--ease-in-out) infinite; }
  .ill .shelf-solid { animation: bm-solid 5.2s var(--ease-out) infinite; }
  .ill .wave rect { animation: bm-wave 1.1s var(--ease-in-out) infinite alternate; }
  .ill .wave rect:nth-child(2) { animation-delay: -0.3s; }
  .ill .wave rect:nth-child(3) { animation-delay: -0.6s; }
  .ill .wave rect:nth-child(4) { animation-delay: -0.15s; }
  .ill .wave rect:nth-child(5) { animation-delay: -0.75s; }
  .ill .wave rect:nth-child(6) { animation-delay: -0.45s; }
  .ill .live-dot { animation: bm-blink 1.4s steps(1) infinite; }
}
@keyframes bm-scan { from { transform: translateY(-14px); } to { transform: translateY(22px); } }
@keyframes bm-blink { 50% { opacity: 0; } }
@keyframes bm-holo {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  52% { transform: translate(22.5px, -13px); opacity: 1; }
  64%, 100% { transform: translate(22.5px, -13px); opacity: 0; }
}
@keyframes bm-solid { 0%, 46% { opacity: 0; } 58%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bm-wave { from { transform: scaleY(0.45); } to { transform: scaleY(1); } }

/* ---------- build mode / fix mode ---------- */
.modes { display: grid; gap: 16px; }
@media (min-width: 860px) { .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.mode-card {
  display: flex; flex-direction: column; gap: 18px;
  padding: 26px 22px 28px;
  border-radius: var(--radius-l);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
@media (min-width: 720px) { .mode-card { padding: 32px 32px 34px; } }
.mode-card > p { color: var(--text-2); font-size: 17px; }
.mode-top { display: flex; align-items: center; gap: 16px; }
.mode-icon {
  flex: none; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: var(--radius-s);
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text);
}
.mode-icon svg, .cat-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mode-name { font: 400 36px/1 var(--font-display); letter-spacing: var(--display-tracking); }
.mode-lede { margin-top: 4px; color: var(--text-2); font-weight: 500; }
.parts { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.parts li {
  padding: 8px 11px; border-radius: var(--radius-xs);
  background: var(--bg-2); border: 1px solid var(--border);
  font: 500 13px/1 var(--font-mono); color: var(--text);
}
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 32px; color: var(--text-2); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.18em;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--surface-solid); border: 1px solid var(--border-strong);
}
.ticks li::after {
  content: ""; position: absolute; left: 6.5px; top: calc(0.18em + 6.5px);
  width: 8px; height: 4.5px;
  border-left: 2px solid var(--text); border-bottom: 2px solid var(--text);
  transform: rotate(-45deg);
}
.ticks b { color: var(--text); font-weight: 600; }
.ticks.small li { font-size: 15.5px; }

/* ---------- categories ---------- */
.cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cats > li:last-child { grid-column: 1 / -1; } }
@media (min-width: 1080px) { .cats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .cats > li:last-child { grid-column: auto; } }
.cat {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 18px 22px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border: 1px solid var(--border);
}
.cat h3 { font-size: 19px; }
.cat-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius-xs); background: var(--surface-solid); border: 1px solid var(--border); color: var(--text);
}
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: 7px 12px; border-radius: var(--radius-pill);
  background: var(--surface-solid); border: 1px solid var(--border);
  font-size: 14px; line-height: 1.2; color: var(--text-2);
}

/* ---------- live co-pilot (a nightshift band) ---------- */
.copilot { background: var(--bg); color: var(--text); overflow: hidden; }
.copilot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 52% at 74% 56%, var(--accent-soft), transparent 72%), var(--stage-vignette);
}
.copilot-grid { position: relative; display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .copilot-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 72px; } }
.copilot-copy .ticks { margin: 28px 0 32px; }
.live-mark { width: 9px; height: 9px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 26%, transparent); }
.phone {
  position: relative; justify-self: center;
  width: min(100%, 330px); aspect-ratio: 9 / 18.6;
  padding: 10px;
  border-radius: 48px;
  background: linear-gradient(155deg, var(--surface-solid), var(--bg-elev) 45%, var(--bg));
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--border-strong);
}
.phone-screen { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: var(--wood-3); }
.cam-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.cam-scene .floor { fill: var(--wood-3); }
.cam-scene .plank { fill: none; stroke: var(--wood-2); stroke-width: 2; opacity: 0.55; }
.cam-scene .plank.faint { opacity: 0.35; }
.cam-scene .bowl { fill: var(--bg-2); stroke: var(--border-strong); stroke-width: 1.5; }
.cam-scene .bowl-rim { fill: none; stroke: var(--text-3); stroke-width: 1.2; opacity: 0.6; }
.cam-scene .screws rect, .cam-scene .screws circle { fill: var(--text-3); }
.cam-scene .lam { fill: var(--surface-solid); stroke: var(--border-strong); stroke-width: 1.5; stroke-linejoin: round; }
.cam-scene .lam-edge { fill: var(--bg-2); stroke: var(--border-strong); stroke-width: 1.2; }
.cam-scene .hole { fill: var(--bg-2); stroke: var(--text-3); stroke-width: 1.2; }
.cam-scene .raw { fill: url(#bm-particleboard); stroke: var(--wood); stroke-width: 1.2; }
.cam-scene .pb-base { fill: var(--wood-3); }
.cam-scene .pb-dot { fill: var(--wood-2); }
.cam-scene .pb-dot2 { fill: var(--wood); opacity: 0.55; }
.cam-scene .driver-shaft { fill: var(--text-3); }
.cam-scene .driver-grip { fill: var(--text); }
.cam-scene .detect-box { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: var(--holo); stroke-width: 1.6; stroke-dasharray: 5 5; }
.cam-scene .detect { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.cam-scene .detect-tag { fill: var(--accent); }
.cam-scene .detect-text { font: 700 13px var(--font-ui); fill: var(--accent-ink); }
/* Mog checks the board once (Kazoo's one-shot reveal, 2026-10-22): keyed off the .is-in the reveal script adds to
   figure.phone. Fill "both", so without .is-in or with reduced motion the finished picture simply shows. */
.cam-scene .scanline { fill: var(--holo); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .phone.is-in .cam-scene .scanline { animation: bm-scanline 900ms var(--ease-in-out) 500ms both; }
  .phone.is-in .cam-scene .detect-box, .phone.is-in .cam-scene .detect { animation: bm-appear 320ms var(--ease-out) 1100ms both; }
  .phone.is-in .cam-scene .detect-tag, .phone.is-in .cam-scene .detect-text { transform-box: fill-box; transform-origin: center; animation: bm-pop 420ms var(--ease-spring) 1350ms both; }
  .phone.is-in .cam-say { animation: bm-say-in 360ms var(--ease-out) 1750ms both; }
  .cam-dot { animation: bm-blink 1.4s steps(1) infinite; }
  .cam-line.is-swapping { animation: bm-say-in 360ms var(--ease-out) both; }
}
@keyframes bm-scanline { 0% { opacity: 0; transform: translateY(0); } 15%, 85% { opacity: 0.55; } 100% { opacity: 0; transform: translateY(600px); } }
@keyframes bm-appear { from { opacity: 0; } }
@keyframes bm-pop { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes bm-say-in { from { opacity: 0; transform: translateY(8px); } }
.cam-top { position: absolute; top: 16px; left: 14px; right: 14px; display: flex; align-items: center; gap: 8px; }
.cam-pill, .cam-eye, .cam-step, .cam-say, .cam-controls span {
  background: color-mix(in srgb, var(--surface-solid) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  color: var(--text);
}
.cam-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); font: 600 13px/1 var(--font-ui); }
.cam-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.cam-time { font-variant-numeric: tabular-nums; color: var(--text-2); }
.cam-eye { margin-left: auto; display: grid; place-items: center; width: 40px; height: 30px; border-radius: var(--radius-pill); }
.cam-eye .g-lens, .cam-avatar .g-lens { fill: var(--accent); stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
.cam-eye .g-bridge, .cam-avatar .g-bridge { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.cam-step { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 12px; border-radius: var(--radius-pill); font: 500 12px/1.2 var(--font-ui); color: var(--text-2); }
.cam-say {
  position: absolute; left: 12px; right: 12px; bottom: 72px;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px 13px;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
}
.cam-avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border-strong); }
.cam-line { font-size: 15px; line-height: 1.42; color: var(--text); }
.cam-line b { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-2); margin-bottom: 2px; }
.cam-controls { position: absolute; left: 12px; right: 12px; bottom: 14px; display: flex; gap: 8px; }
.cam-controls span { flex: 1; display: grid; place-items: center; height: 44px; border-radius: var(--radius-pill); font: 600 13.5px/1 var(--font-ui); }
.cam-controls .is-stop { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

/* ---------- pricing ---------- */
.period {
  display: inline-flex; gap: 4px; margin-top: 28px; padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-2); border: 1px solid var(--border);
}
.period button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-2);
  font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.period button[aria-pressed="true"] { background: var(--surface-solid); color: var(--text); box-shadow: var(--shadow-1); }
.save { padding: 4px 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--live) 16%, transparent); color: var(--text); font-size: 12px; font-weight: 600; }
.plans { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 14px; } }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 28px 24px;
  border-radius: var(--radius-l);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.plan .btn { margin-top: auto; width: 100%; }
.plan-name { font: 400 32px/1.05 var(--font-display); letter-spacing: var(--display-tracking); }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.plan-price .amount, .pilot-price .amount { font: 400 60px/0.95 var(--font-display); letter-spacing: var(--display-tracking); }
.plan-price .per, .pilot-price .per { color: var(--text-2); font-size: 15px; }
.plan-for { color: var(--text-2); }
.plan-alt { color: var(--text-2); font-size: 14.5px; min-height: 1.5em; }
.checks { list-style: none; margin: 0 0 8px; padding: 14px 0 0; display: grid; gap: 10px; border-top: 1px solid var(--border); }
.checks li { position: relative; padding-left: 26px; font-size: 15.5px; }
.checks li::before {
  content: ""; position: absolute; left: 3px; top: 0.36em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--text); border-bottom: 2px solid var(--text);
  transform: rotate(-45deg);
}
.plan-pro { border: 2px solid var(--accent); box-shadow: var(--shadow-glow); }
@media (min-width: 900px) { .plan-pro { margin: -14px 0; padding-top: 42px; padding-bottom: 42px; } }
.plan-badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--text); color: var(--bg);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.fine { margin-top: 28px; font: 400 12.5px/1.7 var(--font-mono); color: var(--text-2); text-align: center; }

/* ---------- for brands ---------- */
.brands-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .brands-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 72px; } }
.brands-art {
  padding: 18px; border-radius: var(--radius-l);
  background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-1);
}
.brands-art .ill { width: 100%; height: auto; }
.brands-copy .ticks { margin-top: 26px; }
.pilot {
  display: grid; gap: 10px; justify-items: start;
  margin-top: 30px; padding: 22px 22px 24px;
  border-radius: var(--radius-l);
  background: var(--surface-solid); border: 1px solid var(--border-strong);
}
.pilot-label { font: 600 12.5px/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.pilot-price { display: flex; align-items: baseline; gap: 10px; }
.pilot-note { color: var(--text-2); margin-bottom: 6px; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 28px; }
@media (min-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  .faq-grid .section-head { position: sticky; top: 104px; }
}
.qa { border-top: 1px solid var(--border-strong); }
.qa:last-child { border-bottom: 1px solid var(--border-strong); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 0;
  list-style: none; cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font-size: 18px; line-height: 1.35; }
.qa summary::after {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(var(--text), var(--text)) center / 12px 1.8px no-repeat,
    linear-gradient(var(--text), var(--text)) center / 1.8px 12px no-repeat;
  transition: transform var(--dur-med) var(--ease-out);
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 0 24px; max-width: 66ch; color: var(--text-2); font-size: 16.5px; line-height: 1.62; }

/* ---------- footer ---------- */
.footer { padding: 56px 0 28px; background: var(--bg-2); border-top: 1px solid var(--border); color: var(--text-2); font-size: 15px; }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr); gap: 48px; } }
.footer-brand { display: grid; gap: 10px; align-content: start; justify-items: start; max-width: 40ch; }
.footer-brand .wordmark { margin: 0; }
.footer-safety { padding: 12px 14px; border-radius: var(--radius-s); background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 14px; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (min-width: 600px) { .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer-h { margin-bottom: 4px; font: 600 12.5px/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links a, .footer-links .link-btn { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; }
.footer-links a:hover, .footer-links .link-btn:hover { color: var(--text); text-decoration: underline; }
.footer-base { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); }
.footer-base p { max-width: 90ch; }
.footer a.wordmark { color: var(--text); }

/* ==========================================================================
   account.html
   ========================================================================== */
.acct { display: grid; gap: 28px; padding: 28px 0 56px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "card" "more"; }
.acct-head { grid-area: head; }
.acct-card { grid-area: card; }
.acct-more { grid-area: more; }
@media (min-width: 900px) {
  .acct { grid-template-columns: minmax(0, 1.1fr) minmax(0, 460px); grid-template-areas: "head card" "more card"; column-gap: 56px; row-gap: 26px; align-items: start; padding: 48px 0 72px; }
}
.acct h1 { font-size: clamp(44px, 7vw, 72px); margin-bottom: 18px; }
.points { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.points li { position: relative; padding-left: 22px; color: var(--text-2); }
.points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.points b { color: var(--text); }
.fine-ui { font-size: 13.5px; color: var(--text-2); }
.fine-ui a, .points a { text-decoration: underline; }
.acct-card {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px 20px;
  border-radius: var(--radius-l);
  background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-1);
}
@media (min-width: 480px) { .acct-card { padding: 28px 26px; } }
.acct-card h2 { font-size: 34px; line-height: 1.1; }
.acct-card p { color: var(--text-2); }
.acct-card [data-panel] { display: flex; flex-direction: column; gap: 16px; }
.acct-card [data-panel][hidden] { display: none; }
html.bm-off .acct-card [data-panel="loading"] { display: none !important; }
html.bm-off .acct-card[data-state="loading"] [data-panel="unconfigured"] { display: flex !important; }
.acct-card.is-busy { opacity: 0.72; }
.acct-actions { display: flex; flex-direction: column; gap: 10px; }
.acct-actions .btn { width: 100%; }
.acct-actions.row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.acct-actions.row .btn { width: auto; }
.btn svg.brand-ico { width: 18px; height: 18px; fill: currentColor; flex: none; }
.or { display: flex; align-items: center; gap: 12px; color: var(--text-2); font: 600 12px/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.acct-form { display: flex; flex-direction: column; gap: 12px; }
.acct-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.acct-form input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: 500 16px var(--font-ui); color: var(--text);
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-s);
}
.acct-form input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.callout { padding: 12px 14px; border-radius: var(--radius-m); background: var(--bg-2); border: 1px solid var(--border); font-size: 14.5px; color: var(--text-2); }
.callout b { color: var(--text); }
.callout a { text-decoration: underline; }
.providers { display: flex; flex-wrap: wrap; gap: 8px; }
.prov { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--bg-2); border: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); }
.prov svg { width: 14px; height: 14px; fill: currentColor; }
.who { display: flex; flex-direction: column; gap: 2px; }
.who b { font-size: 17px; overflow-wrap: anywhere; }
.who span { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.stats { display: grid; gap: 10px; }
.stat { padding: 14px 16px; border-radius: var(--radius-m); background: var(--bg-2); border: 1px solid var(--border); }
.stat dt { font: 600 12px/1.2 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.stat dd { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.stat dd b { font: 400 28px/1.12 var(--font-display); letter-spacing: var(--display-tracking); color: var(--text); }
.stat dd span { font-size: 13.5px; color: var(--text-2); }
.notice { margin: 0; padding: 12px 14px; border-radius: var(--radius-m); border: 1px solid var(--border-strong); background: var(--bg-2); font-size: 14.5px; color: var(--text); }
.notice.ok { border-color: color-mix(in srgb, var(--live) 55%, transparent); }
.notice.err { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); }
.danger-zone { border-top: 1px solid var(--border); padding-top: 4px; }
.danger-zone summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--text-2); font-size: 14.5px; }
.danger-zone p { margin: 6px 0 14px; font-size: 14.5px; }
.plans-4 { margin-top: 8px; }
@media (min-width: 680px) { .plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.plans-4 .plan-pro { margin: 0; padding-top: 34px; padding-bottom: 28px; }
.plans-4 .plan-price .amount { font-size: 52px; }
.buy-row { display: grid; gap: 10px; margin-top: auto; }
.buy-row .btn { margin-top: 0; }
.plan.is-picked { outline: 2px solid var(--text); outline-offset: 5px; }
.plans-note { margin-top: 20px; font-size: 14.5px; color: var(--text-2); text-align: center; }

/* ==========================================================================
   privacy.html and terms.html
   ========================================================================== */
.legal { max-width: 780px; margin: 0 auto; padding: 32px 0 64px; }
@media (min-width: 900px) { .legal { padding: 52px 0 88px; } }
.legal h1 { font-size: clamp(42px, 7vw, 68px); margin-bottom: 14px; }
.legal .meta { margin: 0 0 28px; font-size: 14px; color: var(--text-2); }
.legal h2 { font-size: clamp(28px, 4vw, 36px); line-height: 1.12; margin: 44px 0 12px; scroll-margin-top: 92px; }
.legal h3 { font-size: 17.5px; margin: 24px 0 8px; scroll-margin-top: 92px; }
.legal p, .legal li { color: var(--text-2); line-height: 1.66; }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol { padding-left: 22px; margin: 0 0 14px; }
.legal li { margin-bottom: 8px; }
.legal b, .legal strong { color: var(--text); }
.legal a { color: var(--text); text-decoration: underline; }
.legal .summary { padding: 22px 22px 10px; border-radius: var(--radius-l); background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.legal .summary h2 { margin: 0 0 12px; font-size: 26px; }
.legal .safety-line { margin: 0 0 18px; padding: 16px 18px; border-radius: var(--radius-m); background: var(--surface-solid); border: 1px solid var(--border-strong); border-left: 4px solid var(--warn); color: var(--text); font-weight: 500; }
.toc { margin: 26px 0 8px; padding: 18px 20px; border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); }
.toc > p { margin: 0 0 10px; font: 600 12px/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.toc ol { margin: 0; padding-left: 22px; columns: 1; }
@media (min-width: 640px) { .toc ol { columns: 2; column-gap: 32px; } }
.toc li { margin: 0; break-inside: avoid; }
.toc a { display: inline-flex; align-items: center; min-height: 40px; }
.legal .quote { margin: 0 0 16px; padding: 14px 16px; border-left: 3px solid var(--text); background: var(--surface-solid); border-radius: 0 var(--radius-s) var(--radius-s) 0; color: var(--text); }
.table-wrap { overflow-x: auto; margin: 8px 0 18px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-solid); }
.legal table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14.5px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-top: 1px solid var(--border); }
.legal thead th { border-top: 0; font: 600 12px/1.3 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.legal td { color: var(--text-2); line-height: 1.55; }
.legal td:first-child { color: var(--text); font-weight: 600; }
/* phones: each row becomes a small card instead of a table that scrolls sideways */
@media (max-width: 639px) {
  .table-wrap { overflow: visible; }
  .legal table { min-width: 0; }
  .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal tbody, .legal tr, .legal td { display: block; }
  .legal tr { padding: 14px 16px; border-top: 1px solid var(--border); }
  .legal tbody tr:first-child { border-top: 0; }
  .legal td { padding: 2px 0; border-top: 0; }
  .legal td:first-child { margin-bottom: 4px; }
  .legal td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--text); }
}

/* ==========================================================================
   404.html
   ========================================================================== */
body[data-page="404"] { display: flex; flex-direction: column; }
.err { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 56px; padding-bottom: 80px; text-align: center; }
.err h1 { font-size: clamp(44px, 8vw, 76px); }
.err .lede { margin: 0 auto; max-width: 44ch; }
.err .cta-row { justify-content: center; margin-top: 8px; }
.err .fine-ui { margin-top: 6px; }
.err-mark { width: 132px; height: 132px; }
.err-mark .m-ring-glow { fill: none; stroke: var(--holo); stroke-width: 9; opacity: 0.14; }
.err-mark .m-ring { fill: none; stroke: var(--holo); stroke-width: 3; }
.err-mark .m-temple { fill: none; stroke: var(--text); stroke-width: 5; stroke-linecap: round; }
.err-mark .m-dot { fill: var(--text); stroke: var(--accent); stroke-width: 2.6; }
.err-mark .m-lens { fill: var(--accent); stroke: var(--text); stroke-width: 5; stroke-linejoin: round; }
.err-mark .m-brow { fill: none; stroke: var(--text); stroke-width: 6.5; stroke-linecap: round; }
.err-mark .m-bridge { fill: none; stroke: var(--text); stroke-width: 3.2; stroke-linecap: round; }
.err-mark .m-glint { fill: none; stroke: var(--holo-core); stroke-width: 3.2; stroke-linecap: round; opacity: 0.9; }
.err-mark .m-teeth { fill: var(--surface-solid); stroke: var(--text); stroke-width: 4; stroke-linejoin: round; }
.err-mark .m-lip { fill: none; stroke: var(--text); stroke-width: 4.5; stroke-linecap: round; }
.err .eyebrow { justify-content: center; margin: 0; }
.footer-base a { color: inherit; }
.footer > .footer-base:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .err-mark { animation: bm-tilt 3.4s var(--ease-in-out) infinite alternate; }
}
@keyframes bm-tilt { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }

/* ==========================================================================
   blog/, faq/ and library/, and the home page's "Read up" block
   (added 2026-10-22, docs/09 section 9). Every class below is new and
   scoped (article-*, lib-*, reads-*), so the landing, account and legal
   pages keep their look. Colors, type and radii come only from tokens.css,
   so Nightshift works with no extra rules.
   ========================================================================== */
.article { max-width: 760px; margin: 0 auto; padding: 8px 0 72px; overflow-wrap: break-word; }
@media (min-width: 900px) { .article { padding: 24px 0 96px; } }
.article-crumbs { margin: 0 0 14px; font-size: 14px; color: var(--text-2); }
.article-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.article-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.article-crumbs li + li::before { content: "/"; color: var(--text-3); }
.article-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; }
.article-crumbs a:hover { color: var(--text); text-decoration: underline; }
.article-crumbs [aria-current="page"] { padding: 4px 0; color: var(--text); }
/* phones: the h1 already names the page, so the trail stops at the section */
@media (max-width: 639px) { .article-crumbs li[aria-current="page"] { display: none; } }
.article h1 { font-size: clamp(36px, 7.6vw, 66px); line-height: 1.03; margin: 0 0 18px; }
.article-lede { font-size: clamp(18px, 2.3vw, 21px); line-height: 1.5; color: var(--text); max-width: 62ch; }
.article-meta { margin: 18px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.article-meta b { color: var(--text); font-weight: 600; }
.article-meta + .article-meta { margin-top: 2px; }
.article-figure { margin: 26px 0 0; }
.article-figure img { width: 100%; max-width: 420px; border-radius: var(--radius-l); border: 1px solid var(--border); }

.article-body { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--border); }
.article-body > :first-child { margin-top: 0; }
.article-body h2 { font-size: clamp(28px, 4.6vw, 38px); line-height: 1.1; margin: 46px 0 14px; scroll-margin-top: 92px; }
.article-body h3 { font-size: 18px; line-height: 1.35; margin: 28px 0 8px; scroll-margin-top: 92px; }
.article-body p, .article-body li { color: var(--text-2); font-size: 17px; line-height: 1.68; }
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; padding-left: 2px; }
.article-body li::marker { color: var(--text-3); }
.article-body b, .article-body strong { color: var(--text); font-weight: 600; }
.article-body a { color: var(--text); text-decoration: underline; }
.article-body .mono, .lib-table .mono { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: 0; }
.article-say {
  margin: 0 0 18px; padding: 14px 18px;
  border-left: 3px solid var(--text); border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--surface-solid); color: var(--text); font-size: 17px; line-height: 1.55;
}
.article-say cite { display: block; margin-top: 6px; font-style: normal; font-size: 14px; color: var(--text-2); }
.article-note {
  margin: 24px 0 0; padding: 16px 18px;
  border-radius: var(--radius-m); background: var(--surface-solid); border: 1px solid var(--border);
  font-size: 15.5px; line-height: 1.6; color: var(--text-2);
}
.article-note b { color: var(--text); }
.article-note a { color: var(--text); text-decoration: underline; }
.article-warn, .article-tip { margin: 10px 0 0; padding: 10px 14px; border-radius: var(--radius-s); background: var(--bg-2); font-size: 15.5px; line-height: 1.55; }
.article-warn { border-left: 4px solid var(--warn); color: var(--text); }
.article-tip { color: var(--text-2); }
.article-warn b, .article-tip b { color: var(--text); }

.article-table-wrap { margin: 8px 0 22px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-solid); overflow: hidden; }
.article-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article-table th, .article-table td { text-align: left; vertical-align: top; padding: 11px 14px; border-top: 1px solid var(--border); }
.article-table thead th { border-top: 0; font: 600 12px/1.3 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.article-table td { color: var(--text-2); line-height: 1.5; }
.article-table td:first-child { color: var(--text); font-weight: 600; }
.article-table td.num { white-space: nowrap; }
@media (min-width: 640px) { .article-table td.size, .article-table thead th { white-space: nowrap; } }
/* phones: each row becomes a small card instead of a table that scrolls sideways */
@media (max-width: 639px) {
  .article-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .article-table tbody, .article-table tr, .article-table td { display: block; }
  .article-table tr { padding: 12px 16px; border-top: 1px solid var(--border); }
  .article-table tbody tr:first-child { border-top: 0; }
  .article-table td { padding: 2px 0; border-top: 0; }
  .article-table td:first-child { margin-bottom: 4px; }
  .article-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--text); }
  .article-table td:empty { display: none; }
}

.article-cta {
  display: grid; gap: 12px; justify-items: start;
  margin: 44px 0 0; padding: 24px 22px 26px;
  border-radius: var(--radius-l); background: var(--surface-solid);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-1);
}
.article-cta h2 { font-size: clamp(28px, 4.4vw, 36px); line-height: 1.08; }
.article-cta p { color: var(--text-2); max-width: 56ch; }
.article-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; width: 100%; }
.article-cta-row .btn { width: 100%; }
@media (min-width: 560px) { .article-cta-row .btn { width: auto; } }
.article-cta-row a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.article-related { margin: 44px 0 0; }
.article-related h2 { font-size: clamp(28px, 4.4vw, 36px); line-height: 1.08; margin: 0 0 14px; }
.article-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .article-related ul { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.article-related a {
  display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 44px;
  padding: 16px 18px; border-radius: var(--radius-m);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.article-related a b { font-weight: 600; font-size: 16.5px; line-height: 1.35; }
.article-related a span { color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
@media (hover: hover) { .article-related a:hover { border-color: var(--border-strong); background: var(--surface-solid); } }
.article-fine { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.article-fine a { color: var(--text-2); text-decoration: underline; }

/* index pages: the blog, the questions and the library */
.article-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.article-list > li > a {
  display: grid; gap: 6px; padding: 20px 20px 22px;
  border-radius: var(--radius-l); background: var(--surface-solid);
  border: 1px solid var(--border); box-shadow: var(--shadow-1);
  color: var(--text); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .article-list > li > a:hover { border-color: var(--border-strong); transform: translateY(-1px); } }
.article-list h2, .article-list h3 { font: 400 clamp(26px, 4vw, 32px)/1.1 var(--font-display); letter-spacing: var(--display-tracking); }
.article-list p { color: var(--text-2); font-size: 16px; line-height: 1.55; }
.article-list .article-meta { margin: 0; font-size: 13.5px; }
.article-group { margin-top: 40px; }
.article-group > h2 { font-size: clamp(28px, 4.6vw, 38px); line-height: 1.1; }
.article-group .article-list { margin-top: 14px; gap: 10px; }
.article-group .article-list > li > a { padding: 16px 18px 18px; box-shadow: none; }
.article-group .article-list h3 { font: 600 17.5px/1.35 var(--font-ui); letter-spacing: -0.005em; }
.article-group .article-list p { font-size: 15px; }

/* library pages */
.lib-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; }
@media (min-width: 640px) { .lib-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lib-facts > div { padding: 14px 16px; border-radius: var(--radius-m); background: var(--surface-solid); border: 1px solid var(--border); }
.lib-facts dt { font: 600 12px/1.2 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.lib-facts dd { margin: 6px 0 0; font: 400 32px/1.02 var(--font-display); letter-spacing: var(--display-tracking); color: var(--text); }
.lib-facts dd small { display: block; margin-top: 4px; font: 400 13.5px/1.35 var(--font-ui); letter-spacing: 0; color: var(--text-2); }
.lib-open { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 24px 0 0; }
.lib-open .btn { width: 100%; }
@media (min-width: 560px) { .lib-open .btn { width: auto; } }
.lib-open p { font-size: 14.5px; color: var(--text-2); }
.lib-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lib-step {
  padding: 18px 18px 16px; border-radius: var(--radius-l);
  background: var(--surface-solid); border: 1px solid var(--border);
  scroll-margin-top: 92px;
}
.article-body .lib-step h3 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; font-size: 18px; }
.lib-step-n { flex: none; font: 400 34px/0.9 var(--font-display); letter-spacing: var(--display-tracking); color: var(--text-3); }
.article-body .lib-step-meta { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.article-body .lib-step p { font-size: 16px; line-height: 1.6; }
.article-body .lib-step p:last-child { margin-bottom: 0; }
.article-body .lib-step .article-warn, .article-body .lib-step .article-tip { font-size: 15px; }
.lib-cards { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 720px) { .lib-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lib-card {
  display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px;
  border-radius: var(--radius-l); background: var(--surface-solid);
  border: 1px solid var(--border); box-shadow: var(--shadow-1);
}
.lib-card h2, .lib-card h3 { font: 400 clamp(26px, 4vw, 32px)/1.08 var(--font-display); letter-spacing: var(--display-tracking); }
.lib-card h2 a, .lib-card h3 a { color: var(--text); text-decoration: none; }
.lib-card h2 a:hover, .lib-card h3 a:hover { text-decoration: underline; }
.lib-card p { color: var(--text-2); font-size: 15.5px; line-height: 1.55; }
.lib-card .article-meta { margin: 0; font-size: 13.5px; }
.lib-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }

/* home: the "Read up" block after the FAQ */
.reads { display: grid; gap: 16px; }
@media (min-width: 960px) { .reads { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.reads-col {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 22px 18px; border-radius: var(--radius-l);
  background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-1);
}
.reads-h { font: 400 32px/1.05 var(--font-display); letter-spacing: var(--display-tracking); }
.reads-list { list-style: none; margin: 0; padding: 0; }
.reads-list li { border-top: 1px solid var(--border); }
.reads-list a { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 12px 0; color: var(--text); text-decoration: none; }
.reads-list a b { font-weight: 600; font-size: 16px; line-height: 1.35; }
.reads-list a span { font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
@media (hover: hover) { .reads-list a:hover b { text-decoration: underline; text-underline-offset: 3px; } }
.reads-more { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }


/* ==========================================================================
   2026-10-22: lessons from DubMog, Octag and Kazoo (docs/08 part 4). Tokens only; every class scoped or unique.
   ========================================================================== */
/* a phone-width Pricing link in the top bar (desktop has it in the nav) */
.topbar-cta { white-space: nowrap; }
/* 320 to 479 px: the wordmark, the Pricing link, "Open app" and the menu button share one row (site-qa, 2026-10-22) */
@media (max-width: 479px) { .topbar-inner { gap: 6px; } .wordmark { font-size: 26px; } }
/* a wide table scrolls inside its box instead of the page (privacy.html at 320 px) */
main table { display: block; max-width: 100%; overflow-x: auto; }
.topbar-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.topbar-link:hover { color: var(--text); }
@media (min-width: 900px) { .topbar-link { display: none; } }
@media (max-width: 359px) { .topbar-link { display: none; } } /* after the base rule, so it wins at 320 px */
/* at-a-glance chips under the hero buttons; the status chip is dashed, never pulsing */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--surface-solid); border: 1px solid var(--border); color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.hero-facts { margin-top: 18px; }
.hero-facts .is-status { background: transparent; border: 1.5px dashed var(--border-strong); color: var(--text); }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
/* "at launch" next to a feature that is built but switched off; same words in the status band */
.bm-soon { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 3px 8px 2px; border-radius: var(--radius-pill); border: 1px dashed var(--border-strong); background: transparent; color: var(--text-2); font: 600 10.5px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.eyebrow .bm-soon { vertical-align: 1px; }
.btn.is-soon { cursor: default; }
/* the dated note in the pricing head */
.status-note { display: inline-block; max-width: 640px; margin: 18px auto 0; padding: 10px 16px; border-radius: var(--radius-m); border: 1.5px dashed var(--border-strong); color: var(--text-2); font-size: 14.5px; line-height: 1.5; text-align: left; }
.status-note a { color: var(--text); font-weight: 600; text-underline-offset: 3px; }
/* the status band: what works today, and what's next */
.status-grid { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.status-card { padding: 18px 18px 20px; border-radius: var(--radius-l); background: var(--surface-solid); border: 1px solid var(--border); }
.status-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.status-card h3 { margin: 0; font: 600 16.5px/1.3 var(--font-ui); letter-spacing: -0.005em; }
.status-card p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.status-chip { flex: none; display: inline-block; padding: 4px 9px 3px; border-radius: var(--radius-pill); border: 1px dashed var(--border-strong); color: var(--text-2); font: 600 11px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.status-chip.is-now { border-style: solid; border-color: transparent; background: var(--accent-soft); color: var(--text); }
.status-chip.is-later { opacity: 0.8; }
/* Mog's line under his card: the demo step's own warning or tip, typed (Kazoo's bubble, no live region) */
.mog-say { position: relative; display: block; margin: 4px 12px 12px; padding: 12px 14px; border-radius: var(--radius-m); background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-1); color: var(--text); font-size: 15px; line-height: 1.45; text-align: left; }
.mog-say::before { content: ""; position: absolute; left: 50%; top: -8px; width: 14px; height: 14px; margin-left: -7px; background: var(--surface-solid); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); }
.mog-say-tag { display: block; margin-bottom: 2px; color: var(--text-2); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
/* Mog's illustrated face in his bubble (brand/mascot/clips, keyed animated WebP): talks while the line types, rests after */
.mog-say { padding-left: 66px; min-height: 68px; }
.hero-mog .mog-say .mog-say-face { position: absolute; left: 12px; top: 12px; width: 44px; height: 44px; max-width: none; border-radius: 50%; background: var(--surface-solid); box-shadow: 0 0 0 1.5px var(--border); object-fit: cover; }   /* outranks the figure's img rule */
.mog-say-line { display: block; }
.mog-say-caret { display: none; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--holo); }
@media (prefers-reduced-motion: no-preference) { .mog-say.is-typing .mog-say-caret { display: inline-block; animation: bm-blink 0.9s steps(1) infinite; } }
/* Mog's card leans toward the pointer a little (hover devices, motion allowed) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-mog { transform: perspective(900px) rotateX(var(--bm-ty, 0deg)) rotateY(var(--bm-tx, 0deg)); transition: transform 260ms var(--ease-out); will-change: transform; }
}
/* the Live phone's visible caption */
.phone-note { margin: 14px auto 0; max-width: 330px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; text-align: center; }
/* the desktop hand-off: Live wants a phone (DubMog: a visible block beats a tap-gated sheet) */
.handoff { margin-top: 22px; padding: 14px 16px 16px; border-radius: var(--radius-m); background: var(--surface-solid); border: 1px solid var(--border); }
.handoff-h { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--text); }
.handoff-row { display: flex; flex-wrap: wrap; gap: 8px; }
.handoff-note { margin: 10px 0 0; font-size: 13.5px; color: var(--text-2); }
/* decorative loops pause while off screen (home.js toggles .is-off) */
.is-off, .is-off * { animation-play-state: paused !important; }
/* the family list: a name without a site yet */
.footer-soon { color: var(--text-3); }
.footer-soon small { font-size: 12px; }

/* ---------- snap it: the manual from a photo (at launch; index.html #snap, src/home.js plays it once) ----------
   An example, labelled as one: the camera frames a bookcase, then four cards land in turn: found it, manual found,
   building in 3D with a step count, ready. Reduced motion and no JS show the end state. Tokens only. */
.snap-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .snap-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 72px; } }
.snap-copy .ticks { margin: 22px 0 18px; }
.snap-today { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--text-2); max-width: 52ch; }
.snap-phone { margin: 0 auto; width: min(320px, 84vw, max(210px, calc((100svh - 150px) * 0.536))); }   /* the whole phone fits a short screen */
.snap-screen {
  position: relative; aspect-ratio: 300 / 560; overflow: hidden; isolation: isolate;
  border-radius: 38px; border: 10px solid var(--text); background: var(--bg-2); box-shadow: var(--shadow-2);
}
.snap-view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.snap-view .sv-wall { fill: var(--bg-2); }
.snap-view .sv-floor { fill: var(--wood-3); }
.snap-view .sv-plank { fill: none; stroke: var(--wood-2); stroke-width: 1; opacity: 0.5; }
.snap-view .sv-shadow { fill: var(--text); opacity: 0.12; }
.snap-view .sv-case { fill: var(--surface-solid); stroke: var(--border-strong); stroke-width: 1.4; }
.snap-view .sv-inner { fill: var(--bg); stroke: var(--border); stroke-width: 1; }
.snap-view .sv-shelf { fill: none; stroke: var(--border-strong); stroke-width: 5; }
.snap-view .sv-b1 { fill: var(--wood); }
.snap-view .sv-b2 { fill: var(--accent-soft); stroke: var(--holo); stroke-width: 0.8; }
.snap-view .sv-b3 { fill: var(--blueprint-paper); stroke: var(--blueprint); stroke-width: 0.8; }
.snap-view .sv-label rect { fill: var(--surface-solid); stroke: var(--text-3); stroke-width: 1; }
.snap-view .sv-label path { fill: none; stroke: var(--text-2); stroke-width: 1.4; stroke-linecap: round; }
.snap-frame { position: absolute; left: 18%; right: 16%; top: 12%; bottom: 25%; }
.snap-frame i { position: absolute; width: 26px; height: 26px; border: 3px solid var(--accent); }
.snap-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.snap-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.snap-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.snap-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.snap-line {
  position: absolute; left: 6px; right: 6px; top: 0; height: 2px; opacity: 0; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--accent) 60%, transparent);
}
.snap-cards { position: absolute; left: 12px; right: 12px; bottom: 14px; margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.snap-card {
  position: relative; display: grid; gap: 1px; padding: 8px 12px 8px 30px; border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--surface-solid) 90%, transparent); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-1); opacity: 0;
}
.snap-card::before { content: ""; position: absolute; left: 12px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.snap-card b { font: 700 12.5px/1.25 var(--font-ui); color: var(--text); }
.snap-card span { font: 500 12.5px/1.3 var(--font-ui); color: var(--text-2); }
.snap-card em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--text); }
.snap-card.s4 { background: var(--accent-soft); border-color: var(--holo); }   /* soft, not the warm button colour: one warm button per screen */
.snap-bar { display: block; height: 4px; margin-top: 5px; border-radius: 4px; background: var(--meter-track); overflow: hidden; }
.snap-bar > i { display: block; height: 100%; width: 100%; border-radius: 4px; background: var(--accent); }
.snap-cap { margin: 14px auto 0; max-width: 34ch; text-align: center; font-size: 13px; line-height: 1.4; color: var(--text-3); }
/* played once by home.js when half the phone is on screen; until then the cards wait unseen */
.snap-phone.is-ready .snap-card { opacity: 0; }
.snap-phone.is-ready .snap-bar > i { width: 6%; }
.snap-phone.is-playing .snap-line { animation: snap-scan 1.4s var(--ease-in-out) 0.2s 1 both; }
.snap-phone.is-playing .s1 { animation: snap-in 0.5s var(--ease-out) 1.5s both; }
.snap-phone.is-playing .s2 { animation: snap-in 0.5s var(--ease-out) 2.6s both; }
.snap-phone.is-playing .s3 { animation: snap-in 0.5s var(--ease-out) 3.6s both; }
.snap-phone.is-playing .s3 .snap-bar > i { animation: snap-fill 3.2s linear 3.9s both; }
.snap-phone.is-playing .s4 { animation: snap-in 0.5s var(--ease-spring) 7.3s both; }
html:not(.js) .snap-card, .snap-phone.is-still .snap-card { opacity: 1; }
@keyframes snap-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes snap-scan { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } }
@keyframes snap-fill { from { width: 6%; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .snap-card, .snap-phone.is-ready .snap-card { opacity: 1; animation: none; }
  .snap-line { display: none; }
  .snap-bar > i, .snap-phone.is-ready .snap-bar > i { width: 100%; animation: none; }
}