/* Motion home page: the Blueprint design (picked 8 Oct 2026).
   Cream and charcoal, very large light Space Grotesk, one orange accent, in a light theme and a
   dark one ("the drawing office at night"). Signature: a car on a two-post hoist that plots
   itself in as you scroll. Plan: docs/superpowers/2026-10-08-blueprint-alive-plan.md */

/* ---------- Tokens ----------
   The contract every module on this page uses (stack.css included):
     --paper  page ground          --paper-2  raised / warm band     --sheet  a sheet on the paper
     --ink, --ink-2, --ink-3       text, secondary, muted
     --line, --line-strong         hairlines
     --orange                      brand orange (fills, strokes)
     --accent-text                 orange for text, AA on --paper and --paper-2 in each theme
     --ease, --ease-out            the page's two curves
   The theme lives on <html data-theme="light|dark">; switching fires `motion:theme` on window. */
:root {
  color-scheme: light;

  --paper: #fbf7ec;
  --paper-2: #ede9e3;
  --sheet: #fffdf7;
  --ink: #232323;
  --ink-2: #4a463f;
  --ink-3: #6b655b;
  --line: rgba(35, 35, 35, 0.14);
  --line-strong: rgba(35, 35, 35, 0.28);
  --orange: #f97316;
  --accent-text: #b23a0b;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  --orange-d: #ea580c;
  --orange-l: #fb923c;
  --dim-word: #857e73;
  --wash: rgba(35, 35, 35, 0.04);
  --grid-line: rgba(35, 35, 35, 0.05);
  --shadow-tint: rgba(60, 45, 20, 0.55);
  /* the hero's underside drawing (ink through a mask). At rest it reads at least as clearly on the
     paper as the dark theme's does on charcoal: dark lines on cream need more ink for that, and the
     home check compares the two themes' pixels. In the lamp's pool the lit copy lies over it (the
     two make about 0.62): clearly lifted, yet the headline it passes under keeps 3:1. With no lamp
     (reduced motion) it sits higher again, level with the dark theme's still drawing. Last, the
     pool's warm light */
  --car-ambient: 0.24;
  --car-lit: 0.5;
  --car-rm: 0.38;
  --lamp-glow: rgba(249, 115, 22, 0.09);

  /* drafting glass under the logo and the nav */
  --glass: rgba(251, 247, 236, 0.78);
  --glass-line: rgba(35, 35, 35, 0.12);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 14px 34px -20px rgba(60, 45, 20, 0.45);
  /* the nav's call to action: ink in light, cream in dark */
  --cta-bg: #232323;
  --cta-bg-hover: #3a3834;
  --cta-ink: #fbf7ec;
  --cta-hook: #f97316;

  /* stacked panels step darker in light mode */
  --p1: #e5e0d6;
  --p2: #d3ccbf;
  --p3: #33312e;
  --panel-shadow: rgba(50, 40, 25, 0.28);

  /* Windows-style frame around real screenshots: the app's own surfaces for each theme */
  --win-bar: #ffffff;
  --win-ink: #404040;
  --win-ctl: #595959;
  --win-line: #d9d9d9;
  --win-cap: #f3f3f3;
  --win-cap-ink: #404040;

  /* form fields */
  --field-bg: #fffdf8;
  --field-line: #cfc8bb;
  --field-line-hover: #a79f91;

  /* the night drawings (hoist band, demo, footer) stay charcoal in both themes */
  --charcoal: #232323;
  --black: #161616;
  --on-dark: #fbf7ec;
  --on-dark-2: #b8b1a5;
  --line-dark: rgba(251, 247, 236, 0.14);

  /* older names, kept as aliases */
  --cream: var(--paper);
  --warm: var(--paper-2);
  --orange-text: var(--accent-text);

  --motion-ink: var(--ink);
  --form-error: #b91c1c;
  /* keyboard focus ring: 3:1 on the paper in each theme (the charcoal drawings use --orange) */
  --focus-ring: var(--accent-text);

  --wrap: 1680px;
  --gut: clamp(16px, 4vw, 72px);
  --sec: clamp(88px, 10vw, 192px);
  --head-h: 76px;
  /* from the content's right edge to the screen's (the switching timeline runs on to it). Product
     pictures never cross it: every shot and clip is shown whole, inside the gutters. */
  --edge-r: max(var(--gut), calc((100vw - var(--wrap)) / 2));
}
:root[data-theme='dark'] {
  color-scheme: dark;

  --paper: #171716;
  --paper-2: #1f1f1d;
  --sheet: #262624;
  --ink: #f3eee2;
  --ink-2: #cdc6b9;
  --ink-3: #a8a196;
  --line: rgba(243, 238, 226, 0.12);
  --line-strong: rgba(243, 238, 226, 0.24);
  --accent-text: #fb923c;

  --dim-word: #77716a;
  --wash: rgba(243, 238, 226, 0.06);
  --grid-line: rgba(243, 238, 226, 0.05);
  --shadow-tint: rgba(0, 0, 0, 0.72);
  --car-ambient: 0.14;
  --car-lit: 0.62;
  --car-rm: 0.26;
  --lamp-glow: rgba(251, 146, 60, 0.1);

  --glass: rgba(23, 23, 22, 0.72);
  --glass-line: rgba(243, 238, 226, 0.12);
  --glass-shadow: inset 0 1px 0 rgba(243, 238, 226, 0.06), 0 14px 34px -20px rgba(0, 0, 0, 0.75);
  --cta-bg: #f3eee2;
  --cta-bg-hover: #ffffff;
  --cta-ink: #232323;
  --cta-hook: #ea580c;

  /* and step lighter in dark mode, so they still read as sheets sliding over each other */
  --p1: #1c1c1b;
  --p2: #242422;
  --p3: #2b2a28;
  --panel-shadow: rgba(0, 0, 0, 0.6);

  --win-bar: #1e1e1e;
  --win-ink: #c9c9c9;
  --win-ctl: #d0d0d0;
  --win-line: #2a2a2a;
  --win-cap: #141414;
  --win-cap-ink: #bdbdbd;

  --field-bg: #1f1f1d;
  --field-line: rgba(243, 238, 226, 0.2);
  --field-line-hover: rgba(243, 238, 226, 0.38);

  --motion-ink: #f0f0f0;
  --form-error: #fca5a5;
}

/* The theme switch: a circle of the new theme grows from the toggle (main.js drives it). */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 2;
}
.is-theming *,
.is-theming *::before,
.is-theming *::after {
  transition: none !important;
}

/* ---------- Base ---------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-size: clamp(1.0625rem, 0.95rem + 0.15vw, 1.125rem);
  line-height: 1.6;
  overflow-x: clip;
}
::selection {
  background: var(--orange);
  color: var(--charcoal);
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}
a {
  color: inherit;
}
[tabindex='-1']:focus {
  outline: none;
}
/* the charcoal drawings take the light orange ring in both themes; the demo's card is paper */
.band,
.panel--dark,
.switching,
.clip__bar,
.demo,
.foot {
  --focus-ring: var(--orange-l);
}
.demo__card {
  --focus-ring: var(--accent-text);
}
/* keyboard focus inside a block that has not faded in yet shows it straight away */
.js [data-reveal]:focus-within {
  opacity: 1;
  transform: none;
  transition-duration: 0.2s;
  transition-delay: 0s;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gut) * 2);
  margin-inline: auto;
  padding-inline: var(--gut);
}
/* the type scale keeps growing until 1920 wide */
.display {
  font-weight: 300;
  font-size: clamp(2.6rem, 1rem + 4.8vw, 6.75rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.display--m {
  font-size: clamp(2.2rem, 1rem + 3.3vw, 4.95rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-text);
}
.eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--orange);
}
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 0.82em;
  line-height: 1.4;
  text-align: center;
  opacity: 0.92;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.5s var(--ease),
    background-color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out);
}
.btn:active {
  transform: scale(0.98);
}
.btn--accent {
  background: var(--orange);
  color: #1a1a1a;
}
.btn--accent:hover {
  background: var(--orange-l);
}
.btn--line {
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--line:hover {
  border-color: var(--ink);
  background: var(--wash);
}
/* the nav's call to action: ink with cream text in light, cream with ink text in dark */
.btn--ink {
  background: var(--cta-bg);
  color: var(--cta-ink);
}
.btn--ink:hover {
  background: var(--cta-bg-hover);
}
.btn--ink .btn__hook {
  color: var(--cta-hook);
}
.btn--lg {
  min-height: 54px;
  padding: 16px 22px;
  font-size: 1rem;
}
.btn--sm {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
}
.btn__hook {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s var(--ease);
}
.btn:hover .btn__hook {
  transform: translate(2px, 1px);
}

/* ---------- Header: the logo and the nav on drafting glass ---------- */
.head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  pointer-events: none;
}
.head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: calc(var(--wrap) + var(--gut) * 2);
  margin-inline: auto;
  padding: 14px max(8px, calc(var(--gut) - 16px)) 0;
}
.head__brand,
.navbox {
  pointer-events: auto;
  height: 56px;
  border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    0 0 0 1px var(--glass-line),
    var(--glass-shadow);
  transition:
    transform 0.55s var(--ease),
    background-color 0.4s var(--ease-out);
}
/* main.js measures how far each may travel (--brand-dx, --nav-dx) and eases --nav-p from 0 to 1
   over the first ~160px of scroll: the logo glides to 20px from the left edge of the screen and
   the nav to 20px from the right, and back again on the way up. Transform only. */
.head__brand {
  display: flex;
  align-items: center;
  padding: 0 16px;
  transform: translate3d(calc(var(--brand-dx, 0px) * var(--nav-p, 0)), 0, 0);
}
.navbox {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  transform: translate3d(calc(var(--nav-dx, 0px) * var(--nav-p, 0)), 0, 0);
}
.head .motion-logo {
  font-size: 1.4rem;
}
.navbox__links {
  display: flex;
  gap: 2px;
  padding: 0 4px;
}
.navbox__links a {
  position: relative;
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
}
.navbox__links a:hover,
.navbox__links a.is-active {
  color: var(--ink);
}
/* a 2px orange rule that draws in from the left on hover and stays under the current section */
.navbox__links a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--ease);
}
.navbox__links a:hover::after,
.navbox__links a:focus-visible::after,
.navbox__links a.is-active::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.navbox .btn--sm {
  margin-left: 4px;
}
@media (max-width: 400px) {
  /* keep the header inside a 360px phone: tighten the button and drop "your" (the full label is 3px over at 360) */
  .navbox .btn--sm {
    padding-inline: 12px;
  }
  .navbox .btn--sm .btn__your {
    display: none;
  }
}

/* light / dark switch: a line sun in light mode that turns into a moon in dark mode */
.themebtn {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
  cursor: pointer;
  transition:
    color 0.25s var(--ease-out),
    background-color 0.25s var(--ease-out);
}
.themebtn:hover {
  color: var(--ink);
  background: var(--wash);
}
html:not(.js) .themebtn,
html:not(.js) .menu__theme {
  display: none;
}
.themeico {
  flex: none;
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.themeico__sun,
.themeico__moon {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition:
    transform 0.6s var(--ease),
    opacity 0.35s var(--ease-out);
}
.themeico__moon {
  opacity: 0;
  transform: rotate(-80deg) scale(0.4);
}
[data-theme='dark'] .themeico__sun {
  opacity: 0;
  transform: rotate(80deg) scale(0.4);
}
[data-theme='dark'] .themeico__moon {
  opacity: 1;
  transform: none;
}

.navbox__toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.navbox__toggle:hover {
  background: var(--wash);
}
.navbox__bars {
  position: relative;
  display: block;
  width: 20px;
  height: 12px;
}
.navbox__bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.5s var(--ease), top 0.5s var(--ease);
}
.navbox__bars i:first-child {
  top: 2px;
}
.navbox__bars i:last-child {
  top: 9px;
}
.navbox__toggle[aria-expanded='true'] .navbox__bars i:first-child {
  top: 5.5px;
  transform: rotate(45deg);
}
.navbox__toggle[aria-expanded='true'] .navbox__bars i:last-child {
  top: 5.5px;
  transform: rotate(-45deg);
}

/* Phone menu: a sheet of the drawing paper */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.menu.is-open {
  opacity: 1;
}
.menu__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 100%;
  padding: 104px var(--gut) 36px;
}
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-decoration: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease), color 0.25s;
  transition-delay: calc(var(--i, 0) * 60ms + 80ms);
}
.menu.is-open .menu__list a {
  opacity: 1;
  transform: none;
}
.menu__list a:hover {
  color: var(--accent-text);
}
.menu__list li:nth-child(1) a { --i: 0; }
.menu__list li:nth-child(2) a { --i: 1; }
.menu__list li:nth-child(3) a { --i: 2; }
.menu__list li:nth-child(4) a { --i: 3; }
.menu__list li:nth-child(5) a { --i: 4; }
.menu__n {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-text);
  letter-spacing: 0;
}
.menu .btn {
  align-self: flex-start;
}
.menu__theme {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--glass);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.menu__theme .themeico {
  width: 22px;
  height: 22px;
}
.menu__theme-label {
  flex: 1;
}
.menu__switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--line-strong);
  transition: background-color 0.3s var(--ease-out);
}
.menu__switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.45s var(--ease);
}
.menu__theme[aria-pressed='true'] .menu__switch {
  background: var(--orange);
}
.menu__theme[aria-pressed='true'] .menu__switch i {
  transform: translateX(18px);
}
.menu__mail {
  margin-top: auto;
  color: var(--ink-3);
  font-size: 0.95rem;
}
.menu__mail a {
  color: var(--ink);
}

/* ---------- Hero ---------- */
.hero {
  --hero-pt: clamp(124px, 15vw, 232px);
  /* the underside drawing's box; main.js sets --car-h so its foot sits 20 px above the lede */
  --car-top: calc(var(--head-h) + 10px);
  --car-h: clamp(240px, 17vw, 400px);
  --car-push: clamp(0px, 4vw, 120px);
  --car-wmax: clamp(560px, 30vw + 300px, 1180px);
  --lamp-d: 560px;
  position: relative;
  padding-top: var(--hero-pt);
  padding-bottom: clamp(56px, 7vw, 128px);
  isolation: isolate;
  /* the lamp's pool runs past the edges; clip keeps it out of the page width */
  overflow-x: clip;
}
/* Under the hoist: a faint engineering drawing of the car seen from underneath, and the workshop
   inspection lamp, a pool of light carrying a brighter copy of the drawing. main.js moves the lamp
   with transforms and its copy the opposite way, so the two drawings always line up. Wide screens:
   the drawing fills the pocket top right (headline, nav and lede around it); narrower, it sits
   behind the headline's first lines. One mask file serves both themes: the colour is --ink. */
.hero__sheet {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero__car {
  position: absolute;
  top: var(--car-top);
  right: max(16px, calc(var(--edge-r) - var(--car-push)));
  width: min(calc(var(--car-h) * 1584 / 665), var(--car-wmax));
  aspect-ratio: 1584 / 665;
  background: var(--ink);
  -webkit-mask: url(/home/img/underside-1584.webp) right center / contain no-repeat;
  mask: url(/home/img/underside-1584.webp) right center / contain no-repeat;
  /* no lamp (no JS, reduced motion): the brighter still level */
  opacity: var(--car-rm);
}
@media (prefers-reduced-motion: no-preference) {
  /* fades up as the headline rises: main.js adds .is-in at 200 ms (shown at 3 s if it never runs) */
  .js .hero__car {
    opacity: var(--car-ambient);
    transition: opacity 1.2s var(--ease-out);
  }
  .js .hero:not(.is-in) .hero__car {
    --o: var(--car-ambient);
    opacity: 0;
    animation: hero-show 0s 3s forwards;
  }
}
.hero__lamp {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--lamp-d);
  height: var(--lamp-d);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(closest-side, var(--lamp-glow), transparent);
  -webkit-mask: radial-gradient(closest-side, #000, rgba(0, 0, 0, 0.6) 45%, transparent) center / 70% 70% no-repeat;
  mask: radial-gradient(closest-side, #000, rgba(0, 0, 0, 0.6) 45%, transparent) center / 70% 70% no-repeat;
  opacity: 0;
  will-change: transform;
  transition:
    opacity 0.7s var(--ease-out),
    -webkit-mask-size 0.7s var(--ease-out),
    mask-size 0.7s var(--ease-out);
}
/* the bloom (main.js lights it at 1.1 s): the pool grows from 0.7 to its full size through its
   mask, so the lit drawing inside never leaves register */
.hero.is-lit .hero__lamp {
  opacity: 1;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.hero__copy {
  position: absolute;
  left: 0;
  top: 0;
}
.js .hero__car--lit {
  opacity: var(--car-lit);
  transition: opacity 0.35s var(--ease-out);
}
/* the lamp defers to the copy: no bright lines under the lede, the buttons or the note */
.hero.is-over-copy .hero__car--lit {
  opacity: var(--car-ambient);
}
/* the outline button is never see-through over the drawing */
.hero .btn--line {
  background: var(--paper);
}
.hero .btn--line:hover {
  background: linear-gradient(var(--wash), var(--wash)) var(--paper);
}
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: end;
  padding-bottom: clamp(36px, 4.5vw, 84px);
}
.hero__title {
  grid-column: 1 / 9;
  font-weight: 300;
  font-size: clamp(3.3rem, 0.6rem + 9.4vw, 11.9rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
/* each word rises out of its own mask; main.js staggers them line by line once the font is in */
.hero__title .ln {
  display: inline-block;
  clip-path: inset(-0.12em -0.2em -0.17em -0.2em);
}
.hero__title .ln > span {
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title:not(.is-set) .ln > span {
    transform: translate3d(0, 118%, 0);
    animation: hero-show 0s 1.8s forwards;
  }
  .js .hero__title:not(.is-set) .speed i {
    opacity: 0;
    animation: hero-show 0s 1.8s forwards;
  }
}
.hero__title.is-rising .ln > span {
  animation: hero-rise 1.05s var(--ease) both;
  animation-delay: calc(var(--line, 0) * 0.12s);
}
@keyframes hero-rise {
  from {
    transform: translate3d(0, 118%, 0);
  }
  to {
    transform: none;
  }
}
@keyframes hero-show {
  to {
    transform: none;
    opacity: var(--o, 1);
  }
}
/* three orange speed lines run into "Motion.": the logo's run-up, drawn fresh at headline weight */
.hero__go {
  position: relative;
  display: inline-block;
  margin-left: 0.48em;
}
.speed {
  position: absolute;
  top: 0;
  right: calc(100% + 0.08em);
  width: 0.5em;
  height: 100%;
  pointer-events: none;
}
/* tapered streaks, thin as the headline's own strokes, so they read as motion and not a glyph */
.speed i {
  position: absolute;
  right: 0;
  height: 0.036em;
  border-radius: 1em;
  background: linear-gradient(90deg, rgba(249, 115, 22, 0), var(--orange) 70%);
  opacity: var(--o);
  transform-origin: 100% 50%;
}
.speed i:nth-child(1) {
  --o: 0.55;
  top: 0.27em;
  right: 0.1em;
  width: 0.36em;
}
.speed i:nth-child(2) {
  --o: 1;
  top: 0.445em;
  width: 0.5em;
}
.speed i:nth-child(3) {
  --o: 0.55;
  top: 0.62em;
  right: 0.13em;
  width: 0.3em;
}
.hero__side {
  grid-column: 9 / 13;
  display: grid;
  gap: 26px;
  padding-bottom: 0.6vw;
}
.hero__lede {
  max-width: 40ch;
  color: var(--ink-2);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero__note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.pulse {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}
.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70%,
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}
/* the real scheduler in its window: it peeks above the fold tilted back, then straightens and
   grows as you scroll (main.js) until it fills the content, from the content edge to the right
   gutter (as the sections below it on wide screens): the whole picture is always on screen */
.hero__stage {
  position: relative;
  z-index: 1;
  padding-left: max(var(--gut), calc((100% - var(--wrap)) / 2));
  padding-right: var(--gut);
}
.win--hero {
  transform-origin: 50% 0;
}
/* the start pose, painted before main.js takes over (same functions, so nothing jumps) */
@media (prefers-reduced-motion: no-preference) {
  .js .win--hero {
    transform: translate3d(0, 0, 0) perspective(1800px) rotateX(12deg) scale(0.93);
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
  .js .win--hero {
    transform: translate3d(-9%, 0, 0) perspective(1800px) rotateX(18deg) scale(0.82);
  }
}

/* ---------- Blueprint band (charcoal in both themes: it is already a night drawing) ---------- */
.band {
  position: relative;
  background: var(--charcoal);
  color: var(--on-dark);
}
/* the grid paper rides on the pinned sheet, so nothing moves behind it but the plotter wipe;
   the tally after it is on the same paper */
.band__pin,
.tally {
  background-color: var(--charcoal);
  background-image:
    linear-gradient(rgba(251, 247, 236, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 247, 236, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(251, 247, 236, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 247, 236, 0.028) 1px, transparent 1px);
  background-size:
    120px 120px,
    120px 120px,
    24px 24px,
    24px 24px;
}
.band__pin {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--head-h) + 32px) 0 40px;
  /* the squares end on the sheet's foot, so the tally's (from its top) run on with no seam */
  background-position: 0 100%;
}
/* in dark the band's edges are drawn: the top on the sheet, the foot on the tally */
:root[data-theme='dark'] .band__pin {
  box-shadow: inset 0 1px 0 rgba(243, 238, 226, 0.07);
}
:root[data-theme='dark'] .tally {
  box-shadow: inset 0 -1px 0 rgba(243, 238, 226, 0.07);
}
/* pinned only as long as the reveal takes: main.js finishes the wipe as the pin lets go */
.js .band.is-pinned .band__pin {
  position: sticky;
  top: 0;
}
.band__run {
  display: none;
}
.js .band.is-pinned .band__run {
  display: block;
  height: 60vh;
}
.band__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 28px;
  align-items: center;
}
.band__copy {
  grid-column: 1 / 5;
}
.band__art {
  grid-column: 5 / 13;
}
.band__title {
  font-weight: 300;
  font-size: clamp(2.2rem, 1rem + 2.8vw, 4.35rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.band__lede {
  margin-top: 16px;
  color: var(--on-dark-2);
  font-size: 1rem;
  max-width: 38ch;
}
.legend {
  display: grid;
  gap: 2px;
  margin-top: 28px;
  border-top: 1px solid var(--line-dark);
}
.legend li {
  position: relative;
  display: grid;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--line-dark);
  transition: opacity 0.6s var(--ease-out);
}
/* each stat lights as the wipe passes its fifth of the drawing (20 %, 40 % ...) */
.legend li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 21px;
  width: 7px;
  height: 7px;
  background: var(--orange);
  transition: transform 0.55s var(--ease);
}
.band.is-live .legend li:not(.is-lit) {
  opacity: 0.4;
}
.band.is-live .legend li:not(.is-lit)::before {
  transform: scale(0);
}
.legend__v {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 0.4vw, 1.55rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.legend__t {
  color: var(--on-dark-2);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* the tally: more jobs, counted the same way, as a ruled schedule after the pinned sheet */
.tally {
  --tv: clamp(1.3rem, 1rem + 0.4vw, 1.55rem);
  --tpad: 14px;
  /* the first rule lands on a square of the paper, one square under the seam */
  padding: 24px 0 clamp(72px, 7vw, 128px);
}
.tally__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 20px;
  align-items: start;
}
.tally__title {
  grid-column: 1 / 5;
  font-weight: 300;
  font-size: clamp(1.6rem, 1rem + 1.4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.tally__list {
  grid-column: 5 / 13;
  border-top: 1px solid var(--line-dark);
}
.tally__list li {
  position: relative;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: baseline;
  padding: var(--tpad) 0 var(--tpad) 22px;
  border-bottom: 1px solid var(--line-dark);
  transition: opacity 0.6s var(--ease-out);
}
/* the legend's square, centred on the value's line */
.tally__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--tpad) + (var(--tv) * 1.2 - 7px) / 2);
  width: 7px;
  height: 7px;
  background: var(--orange);
  transition: transform 0.55s var(--ease);
}
.tally.is-live .tally__list li:not(.is-lit) {
  opacity: 0.4;
}
.tally.is-live .tally__list li:not(.is-lit)::before {
  transform: scale(0);
}
.tally__v {
  font-family: var(--font-display);
  font-size: var(--tv);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tally__t {
  color: var(--on-dark-2);
  font-size: 1rem;
  line-height: 1.45;
}

/* the drawing: a plotted image */
.bp-wrap {
  position: relative;
}
.bp-img {
  display: block;
  width: 100%;
  height: auto;
}
.js .bp-wrap:not(.is-ready) .bp-img {
  opacity: 0;
  animation: bp-fallback 0s linear 2.5s forwards;
}
@keyframes bp-fallback {
  to {
    opacity: 1;
  }
}
/* the plotter head: a thin orange line that rides the reveal edge */
.bp-scan {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange) 12%, var(--orange) 88%, transparent);
  box-shadow: 0 0 12px 1px rgba(249, 115, 22, 0.55);
  opacity: 0;
  pointer-events: none;
}
/* ---------- Statement ---------- */
.statement {
  padding: var(--sec) 0 calc(var(--sec) * 0.9);
  background: var(--paper-2);
}
.statement__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: end;
}
.statement__text {
  grid-column: 1 / 11;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 0.9rem + 3vw, 4.5rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.statement__text .w {
  transition: color 0.45s var(--ease-out);
}
.statement__text.is-split .w {
  color: var(--dim-word);
}
.statement__text.is-split .w.is-lit {
  color: var(--ink);
}
.statement__by {
  grid-column: 11 / 13;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* Windows-style frame for real screenshots, in the app's own light or dark surfaces */
.win {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--win-cap);
  box-shadow:
    0 0 0 1px var(--line),
    0 50px 90px -50px var(--shadow-tint);
}
.win__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding-left: 16px;
  background: var(--win-bar);
  border-bottom: 1px solid var(--win-line);
  color: var(--win-ink);
  font-size: 0.78rem;
  font-weight: 500;
}
.win__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.win__ctl {
  display: flex;
  align-self: stretch;
}
.win__ctl i {
  position: relative;
  display: block;
  width: 44px;
}
.win__ctl i::before,
.win__ctl i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
}
.c-min::before {
  width: 10px;
  height: 1px;
  margin: 0 0 0 -5px;
  background: var(--win-ctl);
}
.c-max::before {
  width: 9px;
  height: 9px;
  margin: -5px 0 0 -5px;
  border: 1px solid var(--win-ctl);
}
.c-x::before,
.c-x::after {
  width: 12px;
  height: 1px;
  margin: 0 0 0 -6px;
  background: var(--win-ctl);
  transform: rotate(45deg);
}
.c-x::after {
  transform: rotate(-45deg);
}
.win img {
  width: 100%;
}
.win__cap {
  padding: 12px 16px;
  border-top: 1px solid var(--win-line);
  background: var(--win-cap);
  color: var(--win-cap-ink);
  font-size: 0.85rem;
}

/* ---------- Features ---------- */
/* no padding below: the story's sheet (story.css) ends the section, on the customers' edge */
.features {
  padding-top: var(--sec);
}
.section-head {
  max-width: 1180px;
}
.section-head__sub {
  margin-top: 22px;
  max-width: 46ch;
  color: var(--ink-2);
  font-size: clamp(1.125rem, 1rem + 0.2vw, 1.3rem);
}
.feat {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  margin-top: clamp(48px, 6vw, 88px);
}
.feat__art {
  display: none;
}
.js .feat__art {
  grid-column: 1 / 6;
  position: sticky;
  top: calc(var(--head-h) + 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100svh - var(--head-h) - 48px);
  max-height: 860px;
}
/* the 3D module stack in .feat__art: /home/stack.css */

.mods {
  grid-column: 7 / 13;
  border-bottom: 1px solid var(--line);
}
html:not(.js) .mods {
  grid-column: 1 / -1;
}
.mods li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 8px;
  padding: 24px 0 26px;
  border-top: 1px solid var(--line);
}
.mods__n {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
  transition:
    background-color 0.45s var(--ease),
    border-color 0.45s var(--ease),
    color 0.45s var(--ease);
}
.mods li.is-active .mods__n {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--charcoal);
}
.mods h3 {
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.55rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.mods p {
  margin-top: 6px;
  max-width: 48ch;
  color: var(--ink-2);
  font-size: 1rem;
}
/* the story of one job closes the section: /home/story.css */

/* ---------- Customers and campaigns ---------- */
.crm {
  padding: var(--sec) 0;
  background: var(--warm);
}
.crm__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 48px;
  align-items: center;
}
.crm__copy {
  grid-column: 1 / 6;
}
.crm__copy > p {
  margin-top: 24px;
  color: var(--ink-2);
  max-width: 48ch;
}
.crm__clip {
  grid-column: 7 / 13;
}
/* the automatic texts in the order a customer gets them; each stop's time shares the first row and
   its name the second, so the names line up however the times wrap */
.texts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 2px 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}
.texts li {
  position: relative;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}
.texts li::before {
  content: '';
  position: absolute;
  top: -25px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--warm);
  border: 1.5px solid var(--orange-d);
}
.texts__when {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--orange-text);
}
.texts__what {
  font-size: 0.92rem;
  font-weight: 500;
}
.crm__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 36px;
}
.crm__pair h3 {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.crm__pair p {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 0.97rem;
}

/* charcoal frame around click-through clips (outer shell + inner core) */
.frame {
  padding: 8px;
  border-radius: 22px;
  background: var(--charcoal);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px var(--line),
    0 46px 80px -46px var(--shadow-tint);
}
.frame .clip {
  --clip-radius: 14px;
  --clip-bar-bg: #1a1a1a;
  --clip-bar-ink: #f0f0f0;
  --clip-bar-muted: #9a9a9a;
  --clip-accent: var(--orange);
}
.frame [data-clip]:not(.clip) {
  aspect-ratio: 16 / 10.2;
  border-radius: 14px;
  background: #141414;
}
.frame .clip__bar {
  border-top: 1px solid #2a2a2a;
  flex-wrap: wrap;
  container-type: inline-size;
}
/* M21.4: a bar too narrow for its caption beside the controls (2 lines need about 180 px beside the
   step dots, 160 on phones without them) gives the caption its own row above them */
@media (min-width: 561px) {
  @container (width < 570px) {
    .frame .clip__caption {
      order: -1;
      flex-basis: 100%;
    }
    .frame .clip__count {
      margin-left: auto;
    }
  }
  /* the Speed clip's ten step dots (M23 item 5): at 22 px a dot its controls need 459 px, so beside the
     copy (981 to about 1080, a 423 px bar at 981) they took two rows, and at 1366 and 1440 its caption
     beside them had 129 px; at 16 px a dot they fit, and the caption keeps about 159 px or more. Only a
     bar with nine or more dots; shorter clips keep 22 px */
  @container (width < 700px) {
    .frame .clip__steps:has(> :nth-child(9)) .clip__step {
      width: 16px;
    }
  }
}
@media (max-width: 560px) {
  @container (width < 340px) {
    .frame .clip__caption {
      order: -1;
      flex-basis: 100%;
    }
    .frame .clip__count {
      margin-left: auto;
    }
  }
}
.panel--dark .frame {
  background: #1a1a1a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(251, 247, 236, 0.08);
}

/* ---------- Stacked panels ---------- */
.stack {
  position: relative;
  background: var(--warm);
}
.anchor {
  height: 0;
}
.panel {
  --pbg: var(--p1);
  position: relative;
  padding: clamp(104px, 10vw, 140px) 0 clamp(72px, 8vw, 120px);
  border-radius: 28px 28px 0 0;
  background: var(--pbg);
  box-shadow: 0 -30px 60px -30px var(--panel-shadow);
}
.panel--1 {
  --pbg: var(--p1);
  border-radius: 0;
  box-shadow: none;
}
.panel--2 {
  --pbg: var(--p2);
}
.panel--3 {
  --pbg: var(--p3);
}
.panel--dark {
  color: var(--on-dark);
  box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.45);
}
.stack.is-stacking .panel {
  position: sticky;
  top: 0;
}
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: #141414;
  opacity: calc(var(--cover, 0) * 0.3);
  pointer-events: none;
}
.panel__inner {
  transform-origin: 50% 100%;
}
.panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.panel__title {
  font-weight: 300;
  font-size: clamp(3.6rem, 0.8rem + 8.6vw, 11.1rem);
  line-height: 0.86;
  letter-spacing: -0.055em;
}
.schem {
  flex: none;
  width: clamp(88px, 11vw, 168px);
  aspect-ratio: 1;
  border: 1px solid rgba(35, 35, 35, 0.2);
  border-radius: 6px;
  background-image:
    linear-gradient(rgba(35, 35, 35, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 35, 35, 0.1) 1px, transparent 1px);
  background-size: 10% 10%;
}
:root[data-theme='dark'] .schem,
.panel--dark .schem,
.switching .schem {
  border-color: rgba(251, 247, 236, 0.2);
  background-image:
    linear-gradient(rgba(251, 247, 236, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 247, 236, 0.08) 1px, transparent 1px);
}
.schem svg {
  width: 100%;
  height: 100%;
}
.s-line {
  fill: none;
  stroke: var(--orange-d);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 1.3s var(--ease-out);
}
:root[data-theme='dark'] .s-line,
.panel--dark .s-line,
.switching .s-line {
  stroke: var(--orange-l);
}
.s-cut {
  stroke-width: 2.4;
}
.s-hot {
  fill: rgba(249, 115, 22, 0.16);
}
.s-nodes circle {
  fill: var(--orange-d);
  transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease);
  transform-box: fill-box;
  transform-origin: center;
}
:root[data-theme='dark'] .s-nodes circle {
  fill: var(--orange-l);
}
.js .schem:not(.is-drawn) .s-nodes circle {
  opacity: 0;
  transform: scale(0.2);
}
.s-nodes circle:nth-child(2) { transition-delay: 0.12s; }
.s-nodes circle:nth-child(3) { transition-delay: 0.24s; }
.s-nodes circle:nth-child(4) { transition-delay: 0.36s; }
.s-nodes circle:nth-child(5) { transition-delay: 0.48s; }
.s-nodes circle:nth-child(6) { transition-delay: 0.6s; }
.s-nodes circle:nth-child(7) { transition-delay: 0.72s; }
.s-nodes circle:nth-child(8) { transition-delay: 0.84s; }
.s-nodes circle:nth-child(9) { transition-delay: 0.96s; }

.panel__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 40px;
  margin-top: clamp(36px, 5vw, 64px);
  align-items: start;
}
.panel__copy {
  grid-column: 1 / 6;
}
.panel__grid--wide .panel__copy {
  grid-column: 1 / 9;
}
/* Clarity's second row (Call J): the explain clip below the wizard's, with a row's gap between */
.panel__grid--next {
  margin-top: clamp(40px, 5vw, 72px);
}
.panel__visual {
  grid-column: 7 / 13;
}
/* wide screens: the switching timeline runs on to the screen edge (alive.css); clip keeps it out
   of the page width. The clips stay whole in their column. */
@media (min-width: 1100px) {
  .panel,
  .switching {
    overflow-x: clip;
  }
}
.panel__punch {
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 1.8vw, 3.15rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.panel__copy > p:not(.panel__punch):not(.stat) {
  max-width: 52ch;
  color: var(--ink-2);
}
.panel__copy > p + p:not(.stat) {
  margin-top: 14px;
}
.panel--dark .panel__copy > p:not(.panel__punch):not(.stat) {
  color: var(--on-dark-2);
}
.panel--dark strong,
.switching strong {
  color: var(--on-dark);
  font-weight: 600;
}
.stat {
  display: grid;
  gap: 6px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}
.panel--dark .stat {
  border-top-color: var(--line-dark);
}
.stat__v {
  font-family: var(--font-display);
  font-size: clamp(3rem, 1rem + 4.4vw, 6.3rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.panel--dark .stat__v {
  color: var(--orange-l);
}
.stat__t {
  max-width: 44ch;
  color: var(--ink-2);
  font-size: 0.95rem;
}
.panel--dark .stat__t {
  color: var(--on-dark-2);
}

/* offline lists */
.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 32px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
}
.split__col {
  grid-column: span 3;
}
.split__col--wait {
  grid-column: span 5;
}
.split__col h3 {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.split__col ul {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.split__col li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  font-size: 0.98rem;
}
.split__col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  background: var(--orange-d);
}
.split__col--wait li::before {
  background: transparent;
  border: 1.5px solid var(--ink-2);
}
.stat--side {
  grid-column: span 4;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* switching timeline: a process, drawn as one line with three stops */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 6fr 4fr;
  column-gap: 32px;
  margin-top: clamp(48px, 6vw, 80px);
}
.timeline::before,
.timeline::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(251, 247, 236, 0.2);
}
.timeline::after {
  height: 2px;
  top: 15.5px;
  background: var(--orange);
  transform-origin: 0 50%;
  transform: scaleX(var(--tl, 1));
}
.timeline li {
  position: relative;
  z-index: 1;
  padding-top: 52px;
}
.timeline__n {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border: 1.5px solid var(--orange-l);
  border-radius: 50%;
  color: var(--orange-l);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
}
.timeline h3 {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.95rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.timeline p {
  margin-top: 10px;
  color: var(--on-dark-2);
  font-size: 0.97rem;
}
/* the guides' lead: Motion helps any workshop switch; imports today for Mechanic Desk and Workshop Software, Auxo Workshop's and Workshop Mate's coming (Call N, M21 item 7 v2) */
.guides__lead {
  margin-top: clamp(40px, 5vw, 64px);
  max-width: 60ch;
  color: var(--on-dark-2);
  font-size: 0.97rem;
}
.guides__lead a {
  color: var(--orange-l);
  font-weight: 500;
  text-underline-offset: 3px;
}
.guides {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.guide {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 14px 18px;
  border: 1px solid rgba(251, 247, 236, 0.25);
  border-radius: 12px;
  color: var(--on-dark);
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.guide:hover {
  border-color: var(--orange-l);
  background: rgba(251, 247, 236, 0.04);
}
.guide svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--orange-l);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s var(--ease);
}
.guide:hover svg {
  transform: translate(2px, 1px);
}

/* ---------- Thinking about switching? A charcoal sheet of its own after Small things, in the
   family of the night drawings (band, demo, footer); flat top and bottom ---------- */
.switching {
  position: relative;
  padding: var(--sec) 0 calc(var(--sec) * 0.9);
  background: var(--charcoal);
  color: var(--on-dark);
}
.switching__title {
  max-width: 12ch;
  color: var(--on-dark);
}
.switching .panel__copy > p:not(.panel__punch) {
  color: var(--on-dark-2);
}
.switching .timeline__n {
  background: var(--charcoal);
}

/* ---------- Small things: a drawing's general notes ---------- */
.notes {
  padding: var(--sec) 0 calc(var(--sec) * 0.9);
}
.notes__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 22px;
  align-items: end;
}
.notes__head h2 {
  grid-column: 1 / 8;
}
.notes__sub {
  grid-column: 9 / 13;
  max-width: 34ch;
  color: var(--ink-2);
  font-size: clamp(1.125rem, 1rem + 0.2vw, 1.3rem);
}
.notes__sheet {
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.notes__group {
  padding: 0 clamp(18px, 2vw, 28px) 8px;
}
.notes__group:first-child {
  padding-left: 0;
}
.notes__group:last-child {
  padding-right: 0;
}
.notes__group + .notes__group {
  border-left: 1px solid var(--line);
}
.notes__label {
  padding: 22px 0 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-3);
}
.notes__list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 6px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--line);
}
.notes__n {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--orange-text);
}
.notes__list p {
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.55;
}
.notes__list strong {
  color: var(--ink);
  font-weight: 600;
}
/* a note's small print, under its sentence (owner round 8, M24: the rego lookup's cost); 12 px, so the
   phone floor holds */
.notes__fine {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: var(--ink-3);
}

/* ---------- Coming ---------- */
.coming {
  position: relative;
  padding: var(--sec) 0;
  background: var(--paper-2);
}
.coming__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.coming__banner {
  margin-top: 22px;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 0.8rem + 5.6vw, 7.5rem);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.045em;
}
.coming__banner .tag {
  position: relative;
  top: -0.9em;
  margin-right: 14px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  vertical-align: middle;
}
.coming__list {
  margin-top: clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--line);
}
.coming__list li {
  display: grid;
  /* the tag column is fixed (fits "At launch") so every row's words line up with the others' */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) 96px 6rem;
  align-items: baseline;
  column-gap: 24px;
  row-gap: 6px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.coming__list h3 {
  grid-column: 1;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.coming__list p {
  grid-column: 2;
  color: var(--ink-2);
  font-size: 0.98rem;
}
.coming__list .plan {
  grid-column: 3;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
}
.coming__list .tag {
  grid-column: 4;
  justify-self: end;
}
.tag {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2);
}
.tag--launch {
  border-color: color-mix(in srgb, var(--accent-text) 45%, transparent);
  background: rgba(249, 115, 22, 0.08);
  color: var(--accent-text);
}
.tag--live {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Pricing ---------- */
.pricing {
  padding: var(--sec) 0 calc(var(--sec) * 0.8);
}
.pricing__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 24px;
  align-items: end;
}
.pricing__head h2 {
  grid-column: 1 / 9;
}
.pricing__sub {
  grid-column: 9 / 13;
  color: var(--ink-2);
  max-width: 38ch;
}
/* the launch date, said once for every plan */
.pricing__launch {
  grid-column: 9 / 13;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 0.95rem;
}
.price {
  width: 100%;
  margin-top: clamp(48px, 6vw, 80px);
  border-collapse: collapse;
}
.price th,
.price td {
  padding: 22px 18px 22px 0;
  border-top: 1px solid var(--line-strong);
  text-align: left;
  vertical-align: baseline;
}
.price thead th {
  padding-top: 0;
  padding-bottom: 14px;
  border-top: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.price thead th span {
  display: block;
  margin-top: 3px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-3);
}
.price thead th:nth-child(1) {
  width: 22%;
}
.price thead th:nth-child(2),
.price thead th:nth-child(3),
.price thead th:nth-child(4) {
  width: 14%;
}
.price tbody th {
  font-weight: 400;
}
.price__plan {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.price__amt {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 0.7vw, 1.85rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.price__per {
  color: var(--ink-3);
  font-size: 0.9rem;
}
.price td {
  color: var(--ink-2);
  font-size: 0.97rem;
}
.price td .price__amt {
  color: var(--ink);
}
.price tbody tr:last-child th,
.price tbody tr:last-child td {
  border-bottom: 1px solid var(--line-strong);
}
.pricing__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
}
.pricing__note {
  color: var(--ink-2);
  font-size: 0.92rem;
}

/* ---------- Demo ---------- */
.demo {
  padding: var(--sec) 0;
  background: var(--charcoal);
  color: var(--on-dark);
  --motion-ink: #f0f0f0;
}
.demo__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 40px;
  align-items: start;
}
.demo__copy {
  grid-column: 1 / 6;
  position: sticky;
  top: calc(var(--head-h) + 40px);
}
.demo__copy > p {
  margin-top: 24px;
  max-width: 44ch;
  color: var(--on-dark-2);
}
.demo__copy .demo__aside {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
  color: var(--on-dark-2);
  font-size: 0.95rem;
}
.demo__aside a {
  color: var(--orange-l);
  font-weight: 500;
  text-underline-offset: 3px;
}
.demo__shell {
  grid-column: 7 / 13;
  padding: 8px;
  border-radius: 26px;
  background: rgba(251, 247, 236, 0.05);
  box-shadow: inset 0 0 0 1px rgba(251, 247, 236, 0.1);
}
.demo__card {
  padding: clamp(22px, 3vw, 38px);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
:root[data-theme='dark'] .demo__card {
  box-shadow: inset 0 1px 0 rgba(243, 238, 226, 0.06);
}
.demo-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
.demo-form .field {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}
.demo-form .field--wide,
.demo-form > button,
.demo-form > [data-form-status],
.demo-form > [data-turnstile],
.demo-form > noscript {
  grid-column: 1 / -1;
}
/* beside the copy (981 to 1499) a half row is narrower than "Nothing yet (new workshop)" (1440 has
   1.1 px to spare; Mac fonts differ), so "What do you use now?" takes the whole row there; Technicians
   keeps its half */
@media (min-width: 981px) and (max-width: 1499px) {
  .demo-form .field--system {
    grid-column: 1 / -1;
  }
}
.demo-form [data-turnstile]:empty {
  display: none;
}
.demo-form label {
  font-size: 0.86rem;
  font-weight: 600;
}
.demo-form label span {
  color: var(--ink-3);
  font-weight: 400;
}
.demo-form input,
.demo-form select,
.demo-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.demo-form textarea {
  min-height: 96px;
  resize: vertical;
}
.demo-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23232323' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
:root[data-theme='dark'] .demo-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23F3EEE2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.demo-form input:hover,
.demo-form select:hover,
.demo-form textarea:hover {
  border-color: var(--field-line-hover);
}
.demo-form input:focus,
.demo-form select:focus,
.demo-form textarea:focus {
  border-color: var(--orange-d);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22);
  outline: none;
}
.demo-form input:focus-visible,
.demo-form select:focus-visible,
.demo-form textarea:focus-visible {
  outline: 2px solid var(--orange-d);
  outline-offset: 1px;
}
.demo-form > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  margin-top: 6px;
  border: 0;
  border-radius: 12px;
  background: var(--orange);
  color: #1a1a1a;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), transform 0.5s var(--ease);
}
.demo-form > button:hover {
  background: var(--orange-l);
}
.demo-form > button:active {
  transform: scale(0.98);
}
.demo-form > button:focus-visible {
  outline-color: var(--ink);
}
.demo-form [data-form-status] {
  padding: 12px 14px;
  border-left: 3px solid var(--orange-d);
  border-radius: 8px;
  background: rgba(249, 115, 22, 0.1);
  font-size: 0.93rem;
}
.form-done {
  display: grid;
  gap: 12px;
  padding: 12px 4px;
}
.form-done__title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.form-done__body {
  color: var(--ink-2);
}
.form-done__note {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.92rem;
}

/* ---------- Footer ---------- */
.foot {
  padding: 64px 0 40px;
  background: #1a1a1a;
  color: var(--on-dark-2);
  --motion-ink: #f0f0f0;
  font-size: 0.95rem;
}
.foot__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 36px;
}
.foot__brand {
  grid-column: 1 / 5;
}
.foot__links a {
  white-space: nowrap;
}
.foot__brand p {
  margin-top: 16px;
  max-width: 32ch;
}
.foot .motion-logo {
  font-size: 1.6rem;
}
/* filled down each column, so the two guides sit together */
.foot__links {
  grid-column: 5 / 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 10px 24px;
  align-content: start;
}
.foot__mail {
  grid-column: 10 / 13;
  display: grid;
  gap: 10px;
  align-content: start;
}
.foot a:not(.motion-logo) {
  color: var(--on-dark);
  text-decoration: none;
  transition: color 0.25s;
}
.foot a:not(.motion-logo):hover {
  color: var(--orange-l);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.foot__copy {
  grid-column: 1 / -1;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero__title {
    grid-column: 1 / -1;
  }
  .hero__side {
    grid-column: 1 / 9;
    margin-top: 40px;
  }
  /* no pocket: the drawing sits behind the headline's first lines, on the content's right edge,
     its foot still clear of the lede (--car-h, from main.js) */
  .hero {
    --car-top: var(--hero-pt);
  }
  .hero__car {
    right: var(--edge-r);
    width: min(calc(100% - 2 * var(--edge-r)), 640px, calc(var(--car-h) * 1584 / 665));
  }
  /* here the lamp's lit lines pass under the headline (by touch it sweeps them on its own), so in
     the dark theme they light to a level the headline keeps 3:1 over, as the light theme's do.
     Wider, the drawing sits clear of the text and keeps the brighter --car-lit. */
  :root[data-theme='dark'] .hero {
    --car-lit: 0.4;
  }
}

@media (max-width: 980px) {
  .navbox__links {
    display: none;
  }
  .navbox__toggle {
    display: grid;
  }
  .navbox .btn--sm {
    margin-left: 0;
  }
  /* title and lede first, then the drawing, then the numbers */
  .band__copy {
    display: contents;
  }
  .band__title,
  .band__lede,
  .band__art,
  .legend {
    grid-column: 1 / -1;
  }
  .band__title {
    order: 1;
  }
  .band__lede {
    order: 2;
    margin-top: -12px;
  }
  .band__art {
    order: 3;
  }
  .legend {
    order: 4;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    margin-top: 0;
  }
  /* the tally: its title above, each row's value over its words, like the legend */
  .tally__title,
  .tally__list {
    grid-column: 1 / -1;
  }
  .tally__list li {
    grid-template-columns: minmax(0, 1fr);
  }
  .statement__text {
    grid-column: 1 / -1;
  }
  .statement__by {
    grid-column: 1 / -1;
    margin-top: 28px;
  }
  .js .feat__art {
    grid-column: 1 / 5;
  }
  .mods {
    grid-column: 6 / 13;
  }
  .crm__copy,
  .crm__clip,
  .notes__head h2,
  .notes__sub {
    grid-column: 1 / -1;
  }
  .notes__sheet {
    grid-template-columns: minmax(0, 1fr);
  }
  .notes__group,
  .notes__group:first-child,
  .notes__group:last-child {
    padding: 0 0 8px;
  }
  .notes__group + .notes__group {
    border-left: 0;
    border-top: 1px solid var(--line-strong);
  }
  .panel__copy,
  .panel__visual,
  .panel__grid--wide .panel__copy {
    grid-column: 1 / -1;
  }
  .split__col,
  .stat--side {
    grid-column: span 6;
  }
  .pricing__head h2,
  .pricing__sub,
  .pricing__launch {
    grid-column: 1 / -1;
  }
  .demo__copy,
  .demo__shell {
    grid-column: 1 / -1;
  }
  .demo__copy {
    position: static;
  }
  .foot__brand,
  .foot__links,
  .foot__mail {
    grid-column: 1 / -1;
  }
}

/* phones: the switch moves into the menu and the pill drops its hook, so the header still fits a 360px screen */
@media (max-width: 560px) {
  .navbox .themebtn {
    display: none;
  }
  .navbox .btn--sm .btn__hook {
    display: none;
  }
}
/* under the site's 360px floor the pill no longer fits; the menu's orange CTA carries it */
@media (max-width: 330px) {
  .navbox .btn--sm {
    display: none;
  }
}

@media (max-width: 700px) {
  :root {
    --head-h: 68px;
  }
  body {
    font-size: 1rem;
  }
  .head__row {
    padding: 10px 10px 0;
  }
  .head__brand,
  .navbox {
    height: 54px;
  }
  .head__brand {
    padding: 0 13px;
  }
  .head .motion-logo {
    font-size: 1.25rem;
  }
  .navbox {
    padding: 5px;
    gap: 2px;
  }
  .hero {
    --hero-pt: 124px;
    --lamp-d: 360px;
  }
  .hero__car {
    width: min(calc(100% - 2 * var(--edge-r)), calc(var(--car-h) * 1584 / 665));
    -webkit-mask-image: url(/home/img/underside-800.webp);
    mask-image: url(/home/img/underside-800.webp);
  }
  .hero__title {
    font-size: min(17.5vw, 5.4rem);
  }
  .hero__side {
    grid-column: 1 / -1;
    margin-top: 32px;
    gap: 22px;
  }
  .hero__actions .btn {
    flex: 1 1 auto;
  }
  .band__pin {
    padding-top: calc(var(--head-h) + 12px);
    padding-bottom: 28px;
  }
  .band__grid {
    row-gap: 16px;
  }
  .band__title {
    font-size: 2rem;
  }
  .band__lede {
    margin-top: -8px;
    font-size: 0.9rem;
  }
  .legend {
    grid-template-columns: 1fr;
  }
  .legend li {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: baseline;
    padding: 7px 0 7px 18px;
  }
  .legend li::before {
    top: 13px;
    width: 6px;
    height: 6px;
  }
  .legend__v {
    font-size: 1rem;
  }
  .legend__t {
    font-size: 0.8rem;
    line-height: 1.35;
  }
  .tally {
    --tv: 1.15rem;
    --tpad: 10px;
    /* the sheet above already ends on its own slack */
    padding-top: 0;
    padding-bottom: 64px;
  }
  .tally__grid {
    row-gap: 16px;
  }
  .tally__list li {
    padding-left: 18px;
  }
  .tally__list li::before {
    top: calc(var(--tpad) + (var(--tv) * 1.2 - 6px) / 2);
    width: 6px;
    height: 6px;
  }
  .tally__t {
    font-size: 0.875rem;
    line-height: 1.4;
  }
  /* nothing on a phone is set under 12 px */
  .statement__by,
  .texts__when,
  .notes__label,
  .notes__n,
  .tag,
  .price td::before {
    font-size: 0.75rem;
  }
  .statement__text {
    font-size: 1.72rem;
  }
  .feat {
    display: block;
  }
  .js .feat__art {
    position: relative;
    top: 0;
    height: 400px;
    margin-bottom: 24px;
  }
  .mods li {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 16px 0 18px;
  }
  .mods p {
    font-size: 0.95rem;
  }
  .notes__list li {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px 0 14px;
  }
  .win,
  .frame {
    box-shadow: 0 0 0 1px var(--line), 0 18px 30px -22px var(--shadow-tint);
  }
  .win {
    border-radius: 10px;
  }
  .win__bar {
    height: 32px;
    padding-left: 12px;
  }
  .win__ctl i {
    width: 32px;
  }
  .win__cap {
    min-height: 3.6em;
    font-size: 0.82rem;
  }
  .texts {
    grid-template-columns: 1fr 1fr;
    padding-top: 0;
    border-top: 0;
  }
  .texts li {
    padding-top: 14px;
    border-top: 1px solid var(--line-strong);
  }
  .texts li:nth-child(n + 3) {
    margin-top: 20px;
  }
  .texts li::before {
    top: -5px;
  }
  .crm__pair {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .frame {
    padding: 5px;
    border-radius: 16px;
  }
  .frame .clip {
    --clip-radius: 11px;
  }
  .panel {
    border-radius: 20px 20px 0 0;
    padding-top: 92px;
  }
  .panel--1 {
    border-radius: 0;
  }
  .schem {
    width: 84px;
  }
  .split__col,
  .stat--side {
    grid-column: 1 / -1;
  }
  .timeline {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .timeline::before,
  .timeline::after {
    top: 0;
    bottom: 0;
    left: 16px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .timeline::after {
    width: 2px;
    left: 15.5px;
    transform-origin: 50% 0;
    transform: scaleY(var(--tl, 1));
  }
  .timeline li {
    padding: 4px 0 0 56px;
  }
  .guide {
    width: 100%;
    justify-content: space-between;
  }
  .coming__banner .tag {
    top: -0.5em;
  }
  .coming__list li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .coming__list h3 {
    grid-column: 1;
  }
  .coming__list .tag {
    grid-column: 2;
    grid-row: 1;
  }
  .coming__list p {
    grid-column: 1 / -1;
  }
  .coming__list .plan {
    grid-column: 1 / -1;
  }
  .coming__list .plan:empty {
    display: none;
  }
  .price,
  .price tbody,
  .price tr,
  .price th,
  .price td {
    display: block;
  }
  .price thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .price tr {
    padding: 18px 0;
    border-top: 1px solid var(--line-strong);
  }
  .price tbody tr:last-child {
    border-bottom: 1px solid var(--line-strong);
  }
  .price th,
  .price td {
    padding: 0;
    border: 0;
  }
  /* borders only: these outrank .price td below, so a padding here would reach just some plans */
  .price tbody tr:last-child th,
  .price tbody tr:last-child td {
    border: 0;
  }
  .price tbody th {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .price td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 0;
  }
  /* the label takes the free space, so an amount and its note sit together at the right */
  .price td::before {
    content: attr(data-label);
    margin-right: auto;
    padding-right: 10px;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .price td:last-child {
    display: block;
    padding-top: 10px;
  }
  .price td:last-child::before {
    content: none;
  }
  .pricing__foot .btn {
    width: 100%;
  }
  .demo-form {
    grid-template-columns: 1fr;
  }
  .demo__shell {
    padding: 5px;
    border-radius: 20px;
  }
  .demo__card {
    padding: 20px 16px;
    border-radius: 16px;
  }
  .foot__links {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

/* ---------- Reduced motion: everything static and readable ---------- */
@media (prefers-reduced-motion: reduce) {
  .pulse::after {
    display: none;
  }
  .win--hero {
    transform: none !important;
  }
  .hero__lamp {
    display: none;
  }
  .hero__car {
    transition: none;
  }
}

/* 320-400px phones: each panel word and its schematic share one row without widening the page */
@media (max-width: 400px) {
  .panel__title {
    font-size: min(3.6rem, 13vw);
  }
  .schem {
    width: 72px;
  }
}