/* Alinex — site styles
   Idea: every Alinex app ships with themes. The page borrows them.
   The hero (and the closing contact block) take on whichever theme is showing;
   each app chapter sits in the colours of that app's signature theme. */

:root {
  /* Neutral base, used between the coloured chapters */
  --paper: #eceee9;
  --paper-2: #e1e4de;
  --ink: #141a17;
  --ink-soft: #4a524d;
  --line: rgba(20, 26, 23, .16);

  /* Live theme (set by script from the hero theme picker) */
  --t-bg: #234d40;
  --t-ink: #edf5f0;
  --t-soft: #b9d0c5;
  --t-accent: #f1dfae;
  --t-on-accent: #1d3b31;

  --display: "Bricolage Grotesque", "Avenir Next Condensed", "Arial Narrow", system-ui, sans-serif;
  --text: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(16px, 4.4vw, 72px);
  --max: 1360px;
  --ease: cubic-bezier(.22, .8, .16, 1);
  --theme-time: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--text);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2.5px solid currentColor; outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: var(--paper); text-decoration: none;
}
.skip:focus { top: 16px; }

/* ---------- Type ---------- */
.wordmark {
  font: 700 26px/1 var(--display);
  font-variation-settings: "wdth" 80, "opsz" 48;
  letter-spacing: -.02em;
  text-decoration: none;
}

/* ---------- Buttons & chips ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px;
  border-radius: 999px; border: 1.5px solid currentColor;
  font: 600 15px/1 var(--text); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; background: transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.button:active { transform: scale(.98); }
.button-solid { background: var(--c-ink, var(--ink)); color: var(--c-bg, var(--paper)); border-color: var(--c-ink, var(--ink)); }
.button-solid:hover { background: var(--c-accent, var(--ink)); border-color: var(--c-accent, var(--ink)); color: var(--c-on-accent, var(--paper)); }
.button-line:hover { background: color-mix(in oklab, currentColor 10%, transparent); }

.theme-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  position: relative; overflow: hidden; flex: none;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 0 15px 0 8px;
  border-radius: 999px; border: 1px solid color-mix(in oklab, currentColor 28%, transparent);
  background: transparent; cursor: pointer;
  font: 500 14px/1 var(--text); white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover { border-color: currentColor; }
.chip .swatch {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--sw-a) 0 50%, var(--sw-b) 50% 100%);
  box-shadow: 0 0 0 1px color-mix(in oklab, currentColor 22%, transparent);
}
.chip .chip-app { opacity: .62; font-weight: 400; }
.chip[aria-pressed="true"] { background: currentColor; border-color: currentColor; }
.chip[aria-pressed="true"] > .chip-label { color: var(--chip-on, var(--paper)); }
.chip[aria-pressed="true"] > .chip-app { color: var(--chip-on, var(--paper)); }
.chip .chip-label, .chip .chip-app { position: relative; }
/* Countdown bar on the hero's auto-advancing chip */
.chip.is-timing::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--t-accent); transform-origin: left; transform: scaleX(0);
  animation: chip-timer var(--hero-interval, 4200ms) linear forwards;
}
@keyframes chip-timer { to { transform: scaleX(1); } }

/* ---------- Phone ---------- */
.phone {
  --phone-w: clamp(230px, 24vw, 330px);
  width: var(--phone-w); flex: none;
  padding: calc(var(--phone-w) * .03);
  border-radius: calc(var(--phone-w) * .15);
  background: #0c0e0d;
  box-shadow:
    inset 0 0 0 1.5px #2b2f2d,
    inset 0 0 0 4px #0c0e0d,
    0 50px 90px -40px rgba(0, 0, 0, .55),
    0 18px 30px -18px rgba(0, 0, 0, .35);
}
.phone-screen {
  position: relative; overflow: hidden;
  aspect-ratio: 9 / 20;
  border-radius: calc(var(--phone-w) * .12);
  background: #1a1d1c;
  isolation: isolate;
}
.phone-screen > img, .phone-screen > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Screen change: the new screen wipes up over the old one. */
.phone-screen > .entering { animation: screen-in 760ms var(--ease) both; z-index: 2; }
@keyframes screen-in {
  from { clip-path: inset(100% 0 0 0 round 0); transform: translateY(6%) scale(1.04); }
  to   { clip-path: inset(0 0 0 0 round 0); transform: none; }
}

/* ---------- Masthead ---------- */
.masthead {
  position: absolute; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px var(--gutter);
  color: var(--t-ink);
  transition: color var(--theme-time) var(--ease);
}
.nav { display: flex; gap: clamp(16px, 2.6vw, 36px); }
.nav a { text-decoration: none; font: 500 15px/1 var(--text); padding: 8px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s var(--ease); }
.nav a:hover { background-size: 100% 1.5px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: max(720px, 100svh);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy device" "rail rail";
  align-items: center;
  gap: 28px clamp(32px, 6vw, 110px);
  padding: 104px var(--gutter) 32px;
  background: var(--t-bg);
  color: var(--t-ink);
  transition: background-color var(--theme-time) var(--ease), color var(--theme-time) var(--ease);
}
.hero-copy { grid-area: copy; max-width: 760px; }
.hero-title {
  font: 640 clamp(52px, 7.4vw, 124px)/.9 var(--display);
  font-variation-settings: "wdth" 82, "opsz" 96;
  letter-spacing: -.03em;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.hero-title .line { display: block; }
.hero-lede { max-width: 46ch; color: var(--t-soft); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; transition: color var(--theme-time) var(--ease); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero .button-solid { --c-ink: var(--t-ink); --c-bg: var(--t-bg); --c-accent: var(--t-accent); --c-on-accent: var(--t-on-accent); transition: background-color var(--theme-time) var(--ease), color var(--theme-time) var(--ease), border-color var(--theme-time) var(--ease); }
.hero-device { grid-area: device; display: grid; justify-items: center; gap: 18px; }
.hero-device .phone { --phone-w: clamp(220px, min(24vw, calc((100svh - 330px) * .44)), 340px); }
.hero-caption { font-size: 14px; color: var(--t-soft); text-align: center; min-height: 1.6em; transition: color var(--theme-time) var(--ease); }
.hero-caption b { color: var(--t-ink); font-weight: 600; }
.theme-rail { grid-area: rail; display: flex; align-items: center; gap: 18px; padding-top: 22px; border-top: 1px solid color-mix(in oklab, var(--t-ink) 22%, transparent); }
.theme-rail > .theme-chips { min-width: 0; }
.theme-rail-label { flex: none; font: 600 15px/1 var(--text); }
.hero .chip { --chip-on: var(--t-bg); }
.hero .theme-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.hero .theme-chips::-webkit-scrollbar { display: none; }

/* Page-load: the headline lines rise in once. */
.js .hero-title .line, .js .hero-lede, .js .hero-actions, .js .hero-device, .js .theme-rail { animation: rise 1s var(--ease) both; }
.js .hero-title .line:nth-child(2) { animation-delay: 80ms; }
.js .hero-title .line:nth-child(3) { animation-delay: 160ms; }
.js .hero-lede { animation-delay: 260ms; }
.js .hero-actions { animation-delay: 340ms; }
.js .hero-device { animation: device-in 1.2s var(--ease) 120ms both; }
.js .theme-rail { animation-delay: 480ms; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes device-in { from { opacity: 0; transform: translateY(60px) rotate(4deg); } to { opacity: 1; transform: none; } }

/* ---------- App chapters ---------- */
.chapter {
  --c-bg: var(--paper); --c-ink: var(--ink); --c-soft: var(--ink-soft); --c-accent: var(--ink); --c-on-accent: var(--paper);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 6vw, 100px);
  padding: clamp(80px, 11vw, 150px) var(--gutter);
  background: var(--c-bg);
  color: var(--c-ink);
}
.chapter[data-app="roadreel"]  { --c-bg: #d4e2d8; --c-ink: #0f2e28; --c-soft: #3f5a52; --c-accent: #c4521f; --c-on-accent: #fff6ee; }
.chapter[data-app="nucleus"]   { --c-bg: #dcdbf6; --c-ink: #1a1c4b; --c-soft: #4a4c7c; --c-accent: #3540c2; --c-on-accent: #f3f3ff; }
.chapter[data-app="docnest"]   { --c-bg: #1f4a3d; --c-ink: #ecf5ef; --c-soft: #b3cbbf; --c-accent: #f1dfae; --c-on-accent: #1d3b31; }
.chapter[data-app="tally"]     { --c-bg: #cfdae1; --c-ink: #10232c; --c-soft: #435964; --c-accent: #b33d1d; --c-on-accent: #fff4ef; }
.chapter[data-app="tankdrive"] { --c-bg: #150f0b; --c-ink: #f4e6d7; --c-soft: #bca792; --c-accent: #f07a2a; --c-on-accent: #1b0f06; }

.chapter-copy { align-self: center; max-width: 640px; }
.chapter:nth-child(even) .chapter-copy { order: 2; }
.chapter-kind { font: 500 16px/1.2 var(--text); color: var(--c-soft); margin-bottom: 10px; }
.chapter-name {
  font: 720 clamp(68px, 11.5vw, 184px)/.84 var(--display);
  font-variation-settings: "wdth" 75, "opsz" 96;
  letter-spacing: -.035em;
  margin: 0 0 28px -.04em;
  text-wrap: balance;
}
.chapter-lede { font: 500 clamp(21px, 2vw, 28px)/1.3 var(--display); font-variation-settings: "wdth" 92, "opsz" 28; letter-spacing: -.01em; max-width: 26ch; margin-bottom: 34px; }
.chapter-points { display: grid; gap: 0; max-width: 54ch; margin-bottom: 36px; border-top: 1px solid color-mix(in oklab, var(--c-ink) 18%, transparent); }
.chapter-points li { padding: 14px 0; border-bottom: 1px solid color-mix(in oklab, var(--c-ink) 18%, transparent); color: var(--c-soft); }
.chapter-points b { color: var(--c-ink); font-weight: 600; }
.chapter-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.chapter-note { margin-top: 4px; padding: 14px 18px; border-radius: 14px; background: color-mix(in oklab, var(--c-accent) 16%, transparent); color: var(--c-ink); max-width: 46ch; }

.chapter-stage {
  position: sticky; top: 48px; align-self: start;
  display: grid; justify-items: center; gap: 22px;
}
.chapter .chip { --chip-on: var(--c-bg); }
.chapter-stage > .phone { --phone-w: clamp(220px, min(24vw, calc((100svh - 230px) * .44)), 320px); }
.stage-chips { justify-content: center; max-width: 420px; }
.stage-chips .chip .live-dot { width: 8px; height: 8px; margin: 0 8px 0 8px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-accent) 25%, transparent); }

/* TankDrive: dusk banner behind the phone */
.chapter-tank { overflow: hidden; }
.chapter-tank::before {
  content: ""; position: absolute; inset: 0;
  background: url("assets/tankdrive-feature.png") 70% 50% / cover no-repeat;
  opacity: .5; filter: blur(22px) saturate(1.2);
  transform: scale(1.15);
  mask-image: linear-gradient(90deg, transparent 5%, #000 65%);
}
.chapter-tank > * { position: relative; }
.chapter-tank .chapter-stage { position: relative; top: 0; align-self: center; }

/* ---------- Theme library ---------- */
.library { padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 110px); background: var(--paper); }
.library-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; padding: 0 var(--gutter); margin-bottom: 44px; }
.library-head h2, .data-head h2 {
  font: 680 clamp(44px, 6vw, 92px)/.92 var(--display);
  font-variation-settings: "wdth" 80, "opsz" 96; letter-spacing: -.03em;
}
.library-head p, .data-head p { color: var(--ink-soft); max-width: 46ch; }
.library-filter { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; font: 500 14px/1 var(--text); }
.filter-chip:hover { border-color: var(--ink); }
.filter-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.library-rail {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px var(--gutter) 26px; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--ink-soft) transparent;
}
.library-rail:focus-visible { outline-offset: -4px; }
.shot {
  flex: none; width: clamp(170px, 15vw, 220px); scroll-snap-align: start;
  display: grid; gap: 12px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
}
.shot[hidden] { display: none; }
.shot-frame { position: relative; aspect-ratio: 9/20; border-radius: 22px; overflow: hidden; background: var(--sw-a); box-shadow: 0 0 0 1px var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.shot-frame img { width: 100%; height: 100%; object-fit: cover; }
.shot:hover .shot-frame { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--line), 0 24px 40px -24px rgba(0,0,0,.45); }
.shot-text { display: grid; gap: 2px; font-size: 15px; line-height: 1.3; }
.shot-text b { font-weight: 600; }
.shot-text span { color: var(--ink-soft); font-size: 14px; }
.library-controls { display: flex; gap: 10px; padding: 0 var(--gutter); }
.rail-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; display: grid; place-items: center; }
.rail-btn:hover { border-color: var(--ink); }

/* ---------- Data ---------- */
.data { padding: clamp(80px, 10vw, 140px) var(--gutter); background: var(--paper-2); }
.data-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; margin-bottom: 56px; }
.data-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 60px; }
.data-list > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.data-list dt { font: 650 24px/1.15 var(--display); font-variation-settings: "wdth" 85, "opsz" 24; letter-spacing: -.01em; }
.data-list dd { color: var(--ink-soft); max-width: 48ch; }

/* ---------- Contact (borrows the live theme again) ---------- */
.contact {
  padding: clamp(90px, 12vw, 170px) var(--gutter);
  background: var(--t-bg); color: var(--t-ink);
  transition: background-color var(--theme-time) var(--ease), color var(--theme-time) var(--ease);
}
.contact h2 { font: 640 clamp(40px, 5.6vw, 84px)/.95 var(--display); font-variation-settings: "wdth" 82, "opsz" 96; letter-spacing: -.03em; max-width: 16ch; margin-bottom: 22px; }
.contact p { color: var(--t-soft); margin-bottom: 40px; }
.contact-mail {
  display: inline-block; max-width: 100%;
  font: 600 clamp(24px, 4.6vw, 68px)/1.05 var(--display); font-variation-settings: "wdth" 78, "opsz" 72; letter-spacing: -.02em;
  text-decoration: none; overflow-wrap: anywhere;
  background: linear-gradient(var(--t-accent), var(--t-accent)) 0 100% / 100% .09em no-repeat;
  padding-bottom: .08em;
  transition: background-size .45s var(--ease);
}
.contact-mail:hover { background-size: 100% 100%; color: var(--t-on-accent); }

/* ---------- Footer ---------- */
.footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px 40px; padding: 40px var(--gutter) 48px; background: var(--ink); color: var(--paper); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.footer-links a { text-decoration: none; color: #c5ccc8; }
.footer-links a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
.motion-toggle { justify-self: start; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(236, 238, 233, .3); background: none; cursor: pointer; font-size: 14px; }
.motion-toggle:hover { border-color: var(--paper); }
.footer-legal { grid-column: 1 / -1; color: #8f9893; font-size: 14px; }

/* ---------- Tour dialog ---------- */
.tour {
  --c-bg: var(--paper); --c-ink: var(--ink); --c-soft: var(--ink-soft); --c-accent: var(--ink); --c-on-accent: var(--paper);
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--c-bg); color: var(--c-ink);
  overflow-y: auto; overscroll-behavior: contain;
}
.tour[data-app="roadreel"] { --c-bg: #d4e2d8; --c-ink: #0f2e28; --c-soft: #3f5a52; --c-accent: #c4521f; --c-on-accent: #fff6ee; }
.tour[data-app="nucleus"]  { --c-bg: #dcdbf6; --c-ink: #1a1c4b; --c-soft: #4a4c7c; --c-accent: #3540c2; --c-on-accent: #f3f3ff; }
.tour[data-app="docnest"]  { --c-bg: #1f4a3d; --c-ink: #ecf5ef; --c-soft: #b3cbbf; --c-accent: #f1dfae; --c-on-accent: #1d3b31; }
.tour[data-app="tally"]    { --c-bg: #cfdae1; --c-ink: #10232c; --c-soft: #435964; --c-accent: #b33d1d; --c-on-accent: #fff4ef; }
.tour::backdrop { background: rgba(10, 12, 11, .6); }
.tour[open] { animation: tour-in .5s var(--ease) both; }
@keyframes tour-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.tour .chip { --chip-on: var(--c-bg); }
.tour-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--gutter);
  background: color-mix(in oklab, var(--c-bg) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.tour-close { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid currentColor; background: none; cursor: pointer; font-weight: 600; font-size: 15px; }
.tour-close:hover { background: var(--c-ink); color: var(--c-bg); }
.tour-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 100px); align-items: center; padding: 20px var(--gutter) 80px; }
.tour-name { font: 720 clamp(60px, 9vw, 150px)/.86 var(--display); font-variation-settings: "wdth" 75, "opsz" 96; letter-spacing: -.035em; margin-bottom: 24px; }
.tour-lede { color: var(--c-soft); max-width: 46ch; font-size: 18px; margin-bottom: 30px; }
.tour-note { margin-top: 26px; font-size: 14px; color: var(--c-soft); max-width: 52ch; }
.tour-viewer { display: grid; justify-items: center; gap: 18px; }
.tour-stage { display: flex; align-items: center; gap: clamp(10px, 2vw, 28px); touch-action: pan-y; }
.phone-tour { --phone-w: clamp(220px, 24vw, 320px); }
.tour-arrow { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid currentColor; background: none; cursor: pointer; display: grid; place-items: center; flex: none; }
.tour-arrow:hover { background: var(--c-ink); color: var(--c-bg); }
.tour-caption { font-size: 15px; color: var(--c-soft); text-align: center; }
.tour-caption b { color: var(--c-ink); font-weight: 600; }
.tour-chips { justify-content: center; max-width: 560px; }
.tour-story { padding: clamp(60px, 8vw, 110px) var(--gutter) 120px; border-top: 1px solid color-mix(in oklab, var(--c-ink) 18%, transparent); }
.tour-story h3 { font: 660 clamp(34px, 4.4vw, 64px)/.98 var(--display); font-variation-settings: "wdth" 82, "opsz" 72; letter-spacing: -.025em; max-width: 20ch; margin-bottom: 22px; }
.tour-story-intro { max-width: 60ch; color: var(--c-soft); font-size: 18px; margin-bottom: 56px; }
.tour-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px; }
.tour-sections article { padding: 24px 0 34px; border-top: 1px solid color-mix(in oklab, var(--c-ink) 22%, transparent); }
.tour-sections h4 { font: 640 23px/1.2 var(--display); font-variation-settings: "wdth" 88, "opsz" 24; letter-spacing: -.01em; margin-bottom: 10px; }
.tour-sections p { color: var(--c-soft); font-size: 16px; }
.tour-ending { margin-top: 48px; font: 500 clamp(22px, 2.4vw, 32px)/1.25 var(--display); font-variation-settings: "wdth" 90, "opsz" 32; max-width: 34ch; }
body.tour-open { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .tour-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-list { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .masthead { padding-top: 20px; }
  .nav a:not([href="#apps"]):not([href="#contact"]) { display: none; }
  .hero {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "device" "rail";
    padding-top: 104px; gap: 40px; min-height: 0;
  }
  .hero-device .phone { --phone-w: min(68vw, 290px); }
  .theme-rail { flex-direction: column; align-items: stretch; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .hero .theme-chips { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .chapter:nth-child(even) .chapter-copy { order: 0; }
  .chapter-stage { position: relative; top: 0; }
  .chapter-stage > .phone { --phone-w: min(66vw, 280px); }
  .chapter-tank::before { mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); background-position: 30% 50%; }
  .library-head, .data-head { grid-template-columns: 1fr; }
  .data-list > div { grid-template-columns: 1fr; gap: 6px; }
  .footer { grid-template-columns: 1fr; }
  .tour-top { grid-template-columns: 1fr; }
  .tour-viewer { order: -1; }
  .tour-arrow { width: 44px; height: 44px; }
  .phone-tour { --phone-w: min(58vw, 260px); }
  .tour-sections { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .button { width: 100%; }
  .chapter-actions, .hero-actions { flex-direction: column; }
}

/* ---------- Living contour field (hero + contact) ----------
   A WebGL topographic map drawn in the live theme's colours. The cursor raises a
   hill the contour lines bend around; a click sends a ripple across the terrain. */
.hero, .contact { position: relative; isolation: isolate; overflow: hidden; }
.field {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.field.is-live { opacity: 1; }
/* Film grain over the field so the flat colour reads as a surface. */
.hero::after, .contact::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .16; mix-blend-mode: overlay;
}
.hero-device .phone {
  box-shadow:
    inset 0 0 0 1.5px #2b2f2d, inset 0 0 0 4px #0c0e0d,
    0 50px 90px -40px rgba(0, 0, 0, .55), 0 18px 30px -18px rgba(0, 0, 0, .35),
    0 0 140px -30px color-mix(in oklab, var(--t-accent) 70%, transparent);
  transition: box-shadow var(--theme-time) var(--ease), transform .7s var(--ease);
}

/* ---------- Phone tilt: phones lean toward the cursor ---------- */
.phone { position: relative; transform: perspective(1500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--ease); will-change: transform; }
.phone::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) calc(42% + var(--gx, 0%)), transparent calc(56% + var(--gx, 0%)));
  opacity: var(--glare, 0); transition: opacity .7s var(--ease);
  mix-blend-mode: soft-light;
}

/* ---------- Chapter spotlight: a dot grid lit around the cursor ---------- */
.chapter::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--c-accent) 20%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in oklab, var(--c-ink) 34%, transparent) 1.1px, transparent 1.7px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), #000, transparent 78%);
  mask-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), #000, transparent 78%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.chapter.is-lit::after { opacity: 1; }
.chapter > .chapter-copy { position: relative; z-index: 1; }
.chapter > .chapter-stage { z-index: 1; }

/* ---------- Contact ---------- */
.contact-inner { position: relative; }
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.contact-copy { --c-ink: var(--t-ink); transition: background-color var(--theme-time) var(--ease), color .25s var(--ease); }
.contact-copy:hover { background: var(--t-ink); color: var(--t-bg); }
.contact-copy.is-done { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-accent); }

/* ---------- Motion off ---------- */
.motion-paused .phone { transform: none; }
.motion-paused .chapter::after { display: none; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
.motion-paused .chip.is-timing::after { display: none; }