/* Motion home page: the alive layer and the wide-screen compositions (plan M16).
   Loaded after style.css. Everything here is an enhancement: with JS off the page reads complete,
   under reduced motion it is still, and every loop rests while it is off screen (.live without
   .is-on, set by alive.js) or when the visitor pauses animations from the title block (.is-still).
   Vocabulary is the page's own: the band's plotter wipe and scan line, the hero's speed lines,
   drafting conventions (dashed = proposed, a title block, schematics). */

:root {
  --wipe-ease: cubic-bezier(0.45, 0, 0.15, 1);
}

/* ---------- rest: off screen, or paused by the visitor ---------- */
.live:not(.is-on) *,
.live:not(.is-on) *::before,
.live:not(.is-on) *::after,
html.is-still .live *,
html.is-still .live *::before,
html.is-still .live *::after,
html.is-still .pulse::after {
  animation-play-state: paused !important;
}
/* one-off reveals always finish, so nothing is left half drawn */
html.is-still .pw__scan {
  animation-play-state: running !important;
}

/* ---------- section headlines plot in under an orange scan line (as the band's drawing) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pw {
    position: relative;
  }
  .pw__ink {
    display: block;
    clip-path: inset(-0.25em -0.25em calc(100% + 0.25em) -0.25em);
  }
  .pw.is-drawn .pw__ink {
    clip-path: inset(-0.25em -0.25em -0.35em -0.25em);
    transition: clip-path 1.15s var(--wipe-ease);
  }
  .pw.is-done .pw__ink {
    clip-path: none;
  }
  .pw__scan {
    position: absolute;
    left: -1%;
    right: -1%;
    top: 0;
    height: 100%;
    opacity: 0;
    pointer-events: none;
  }
  .pw__scan::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(249, 115, 22, 0), var(--orange) 12%, var(--orange) 88%, rgba(249, 115, 22, 0));
    box-shadow: 0 0 12px 1px rgba(249, 115, 22, 0.55);
  }
  .pw.is-drawn .pw__scan {
    animation:
      pw-run 1.15s var(--wipe-ease) both,
      pw-fade 1.15s linear both;
  }
}
@keyframes pw-run {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: none;
  }
}
@keyframes pw-fade {
  0%,
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ---------- product windows lean toward the pointer; primary buttons are magnetic ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tilt {
    transform: perspective(1800px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
    transition: transform 1.2s var(--ease);
  }
  .tilt.is-near {
    transition-duration: 0.45s;
    transition-timing-function: var(--ease-out);
  }
  .mag {
    translate: var(--mx, 0px) var(--my, 0px);
    transition:
      translate 0.55s var(--ease),
      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);
  }
  .mag .btn__hook {
    translate: calc(var(--mx, 0px) * 0.6) calc(var(--my, 0px) * 0.6);
    transition:
      translate 0.55s var(--ease),
      transform 0.5s var(--ease);
  }
}

/* ---------- statement: the word "click" clicks as the reading light reaches it ---------- */
.statement__text .w--click {
  position: relative;
  display: inline-block;
}
.statement__text .w--click::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 56%;
  width: 1.5em;
  height: 1.5em;
  margin: -0.75em 0 0 -0.75em;
  border: 2px solid var(--orange);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  /* it clicks as the reading light reaches it, then again every few seconds while on screen */
  .statement__text .w--click.is-lit::after {
    animation: word-click 6.4s var(--ease-out) 0.12s infinite;
  }
}
@keyframes word-click {
  0% {
    opacity: 0.9;
    transform: scale(0.15);
  }
  15%,
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

/* ---------- play / pause buttons: the story's (story.js) and the title block's ---------- */
.viewer__auto {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s var(--ease-out);
}
.viewer__auto:hover {
  color: var(--ink);
}
.viewer__auto svg,
.tb__still svg {
  flex: none;
  width: 14px;
  height: 14px;
}
.i-pause {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.i-play {
  fill: currentColor;
  display: none;
}
.viewer__auto.is-paused .i-pause,
html.is-still .tb__still .i-pause {
  display: none;
}
.viewer__auto.is-paused .i-play,
html.is-still .tb__still .i-play {
  display: inline;
}
/* the phone menu's pause switch sits under the theme switch, as a pair */
.menu__still[hidden] {
  display: none;
}
.menu__theme + .menu__still {
  margin-top: -18px;
}
.menu__ico {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 2px;
}
/* a screen plots in (the story's window, story.css) */
@keyframes shot-wipe {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}

/* ---------- customers: on wide screens the customer record joins the campaign clip ----------
   Both windows stay whole inside the section's right-hand column (page columns 7 to 12): the
   record on the first four of them, the clip below it across all six, sharing the left line. */
.crm__card {
  display: none;
}
@media (min-width: 1300px) {
  .crm__clip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
  }
  .crm__card {
    display: block;
    grid-column: 1 / 5;
  }
  .crm__clip > .frame {
    grid-column: 1 / -1;
  }
}

/* ---------- customers: a message dot runs the reminders timeline and lights each text ---------- */
.texts li::before {
  transition:
    background-color 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out),
    box-shadow 0.6s var(--ease-out);
}
.texts li.is-sent::before {
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.18);
}
.texts__dot {
  position: absolute;
  left: -1px;
  top: -6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow:
    0 0 0 3px rgba(249, 115, 22, 0.2),
    0 0 16px rgba(249, 115, 22, 0.6);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.85s var(--ease),
    opacity 0.4s var(--ease-out);
}
.texts__dot.is-shown {
  opacity: 1;
}
.texts__dot.is-jump {
  transition: opacity 0.4s var(--ease-out);
}

/* ---------- the schematics: looping drawings (static drawing = first frame, except Offline's:
   its static frame is the offline moment and its loop opens online) ---------- */
.s-anim {
  transition: opacity 0.6s var(--ease-out) 0.9s;
}
.js .schem:not(.is-drawn) .s-anim {
  opacity: 0;
}
/* until a schematic is drawn its lines hide at once: main.js sets their dash offsets after measuring
   them, and with the transition on they would first slide from drawn to hidden for up to 2 s */
.js .schem:not(.is-drawn) .s-line {
  transition: none;
}
.s-arc {
  fill: none;
  stroke: var(--orange);
  stroke-width: 7;
  stroke-opacity: 0.24;
  stroke-dasharray: 45 100;
}
.s-hub,
.s-pkt,
.s-recs rect {
  fill: var(--orange-d);
}
.s-hand {
  transform-box: view-box;
  transform-origin: 80px 92px;
  transform: rotate(162deg);
}
.s-crown,
.s-ptr,
.s-pkt,
.s-recs rect {
  transform-box: view-box;
}
/* Offline: the static frame is the drawing as marked up (the cloud faint, the cut on, the bridge
   hidden, three changes waiting); the cloud keeps the lines' draw-in */
.s-cloud {
  stroke-opacity: 0.35;
  transition: stroke-dashoffset 1.3s var(--ease-out), stroke-opacity 0.4s var(--ease-out);
}
.s-bridge {
  fill: none;
  stroke: var(--orange-d);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.s-press {
  fill: var(--orange);
  opacity: 0;
}
.s-ring {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 58px 40px;
}
.s-pop {
  transform-box: view-box;
  transform-origin: 72px 60px;
}
.s-spin {
  fill: none;
  stroke: var(--orange-d);
  stroke-width: 1.4;
  stroke-dasharray: 1.6 1.4;
  opacity: 0.75;
  transform-box: view-box;
  transform-origin: 80px 80px;
}
.s-recs rect {
  opacity: 0;
}
.s-recs rect:nth-child(1) {
  --y1: 6px;
  --y2: -1px;
}
.s-recs rect:nth-child(2) {
  --y1: -2px;
  --y2: -2px;
}
.s-recs rect:nth-child(3) {
  --y1: -10px;
  --y2: -3px;
}
:root[data-theme='dark'] .s-hub,
:root[data-theme='dark'] .s-pkt,
:root[data-theme='dark'] .s-recs rect,
.panel--dark .s-hub,
.panel--dark .s-pkt,
.panel--dark .s-recs rect,
.switching .s-hub,
.switching .s-pkt,
.switching .s-recs rect {
  fill: var(--orange-l);
}
:root[data-theme='dark'] .s-bridge,
:root[data-theme='dark'] .s-spin,
.panel--dark .s-bridge,
.panel--dark .s-spin,
.switching .s-bridge,
.switching .s-spin {
  stroke: var(--orange-l);
}
@media (prefers-reduced-motion: no-preference) {
  /* Speed: the crown starts the watch, the hand sweeps under half a turn, then resets */
  .schem.is-drawn .s-hand {
    animation: sw-hand 5.6s 2.4s infinite;
  }
  .schem.is-drawn .s-crown {
    animation: sw-crown 5.6s 2.4s infinite;
  }
  .schem.is-drawn .s-arc {
    animation: sw-arc 5.6s 2.4s infinite;
  }
  /* Offline: online, a change comes down from the cloud; the line is cut, the two computers keep
     swapping changes while the ones for the cloud queue under the cut; the line closes and the
     queue runs up into the cloud; calm. The wait before the first loop holds its first frame. */
  .schem.is-drawn :is(.s-cloud, .s-cut, .s-bridge, .s-bus, .s-new, .s-q) {
    animation: 7.6s 2.4s infinite backwards;
  }
  .schem.is-drawn .s-cloud {
    animation-name: of-cloud;
  }
  .schem.is-drawn .s-cut {
    animation-name: of-cut;
  }
  .schem.is-drawn .s-bridge {
    animation-name: of-bridge;
  }
  .schem.is-drawn .s-bus {
    animation-name: of-bus;
  }
  .schem.is-drawn .s-new--l {
    animation-name: of-new-l;
  }
  .schem.is-drawn .s-new--r {
    animation-name: of-new-r;
  }
  .schem.is-drawn .s-q1 {
    animation-name: of-q1;
  }
  .schem.is-drawn .s-q2 {
    animation-name: of-q2;
  }
  .schem.is-drawn .s-q3 {
    animation-name: of-q3;
  }
  /* Clarity: the pointer right-clicks the button and the explanation pops up */
  .schem.is-drawn .s-pop {
    animation: cl-pop 6.2s 2.4s infinite;
  }
  .schem.is-drawn .s-ptr {
    animation: cl-ptr 6.2s 2.4s infinite;
  }
  .schem.is-drawn .s-ring {
    animation: cl-ring 6.2s 2.4s infinite;
  }
  .schem.is-drawn .s-press {
    animation: cl-press 6.2s 2.4s infinite;
  }
  /* Switching: records slide out of the old system, through the move, into Motion */
  .schem.is-drawn .s-recs rect {
    animation: sw-rec 6.4s 2.4s infinite;
  }
  .schem.is-drawn .s-recs rect:nth-child(2) {
    animation-delay: 2.62s;
  }
  .schem.is-drawn .s-recs rect:nth-child(3) {
    animation-delay: 2.84s;
  }
  .schem.is-drawn .s-tick {
    animation: sw-tick 6.4s 2.4s infinite;
  }
  .schem.is-drawn .s-spin {
    animation: spin 9s linear infinite;
  }
}
@keyframes sw-hand {
  0%,
  30% {
    transform: rotate(162deg);
    animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  }
  40%,
  56% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.15, 0.7, 0.2, 1);
  }
  80%,
  100% {
    transform: rotate(162deg);
  }
}
@keyframes sw-crown {
  0%,
  29%,
  35%,
  54%,
  61%,
  100% {
    transform: none;
  }
  31.5%,
  57.5% {
    transform: translateY(3px);
  }
}
@keyframes sw-arc {
  0%,
  31% {
    stroke-dasharray: 45 100;
    stroke-opacity: 0.24;
  }
  40% {
    stroke-dasharray: 0 100;
    stroke-opacity: 0;
  }
  56% {
    stroke-dasharray: 0 100;
    stroke-opacity: 0.24;
    animation-timing-function: cubic-bezier(0.15, 0.7, 0.2, 1);
  }
  80%,
  100% {
    stroke-dasharray: 45 100;
    stroke-opacity: 0.24;
  }
}
/* Offline, 7.6 s (percentages of it): online 0 to 1.4 s, the cut at 1.4 s, offline to 5.3 s, the
   line back at 5.3 s, the queue up into the cloud 5.5 to 6.9 s, calm to 7.6 s. Curves: --ease
   (0.32, 0.72, 0, 1) on the workshop line, --ease-out (0.2, 0.7, 0.2, 1) for arrivals */
@keyframes of-cloud {
  0%,
  18.42% {
    stroke-opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  23.68%,
  69.74% {
    stroke-opacity: 0.35;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  75%,
  100% {
    stroke-opacity: 1;
  }
}
@keyframes of-cut {
  0%,
  18.42% {
    opacity: 0;
  }
  21.05%,
  69.74% {
    opacity: 1;
  }
  72.37%,
  100% {
    opacity: 0;
  }
}
/* the bridge lets go of the cloud first and closes from the workshop end up toward the cloud:
   offset 0 joined, -1 cut */
@keyframes of-bridge {
  0%,
  18.42% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  22.37%,
  69.74% {
    stroke-dashoffset: -1;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  75%,
  100% {
    stroke-dashoffset: 0;
  }
}
/* the workshop line's packet: from its place to the right screen, four runs screen to screen
   (0.9 s each, 0.1 s rests) while the line is cut, then home; calm at its drawn place */
@keyframes of-bus {
  0%,
  1.32% {
    transform: none;
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }
  7.89%,
  18.42% {
    transform: translate(64px, 0);
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }
  30.26%,
  31.58% {
    transform: translate(-24px, 0);
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }
  43.42%,
  44.74% {
    transform: translate(64px, 0);
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }
  56.58%,
  57.89% {
    transform: translate(-24px, 0);
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }
  69.74% {
    transform: translate(64px, 0);
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  }
  77.63%,
  100% {
    transform: none;
  }
}
/* the change made offline: on the left screen at 2.2 s, on the right at 2.9 s once the packet has
   crossed; both clear at the end of the calm for the next loop (dashes of 1 in 2.2, so a hidden
   line leaves no round cap at its end) */
@keyframes of-new-l {
  0%,
  28.95% {
    stroke-dasharray: 1 1.2;
    stroke-dashoffset: 1.1;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  34.21%,
  93.42% {
    stroke-dasharray: 1 1.2;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  98.68%,
  100% {
    stroke-dasharray: 1 1.2;
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes of-new-r {
  0%,
  38.16% {
    stroke-dasharray: 1 1.2;
    stroke-dashoffset: 1.1;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  43.42%,
  93.42% {
    stroke-dasharray: 1 1.2;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  98.68%,
  100% {
    stroke-dasharray: 1 1.2;
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
/* the queue: online the first packet comes down the trunk from the cloud and along the line to the
   left screen; offline each change rises from the junction to its slot under the cut (q1 at
   2.3 s, q2 3.4 s, q3 4.5 s); back online they run up into the cloud, q3 first, 0.35 s apart */
@keyframes of-q1 {
  0% {
    transform: translate(0, -30px);
    opacity: 0;
  }
  1.97% {
    transform: translate(0, -30px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  9.87% {
    transform: translate(0, 7px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  16.45% {
    transform: translate(-44px, 7px);
    opacity: 1;
  }
  18.42% {
    transform: translate(-44px, 7px);
    opacity: 0;
  }
  30.26% {
    transform: translate(0, 9px);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  32.24% {
    opacity: 1;
  }
  36.18% {
    transform: none;
  }
  81.58% {
    transform: none;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  86.18% {
    opacity: 1;
  }
  88.16% {
    transform: translate(0, -35px);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 0;
  }
}
@keyframes of-q2 {
  0%,
  44.74% {
    transform: translate(0, 9px);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  46.71% {
    opacity: 1;
  }
  50.66% {
    transform: none;
  }
  76.97% {
    transform: none;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  81.58% {
    opacity: 1;
  }
  83.55% {
    transform: translate(0, -29.5px);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 0;
  }
}
@keyframes of-q3 {
  0%,
  59.21% {
    transform: translate(0, 9px);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  61.18% {
    opacity: 1;
  }
  65.13% {
    transform: none;
  }
  72.37% {
    transform: none;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  76.97% {
    opacity: 1;
  }
  78.95% {
    transform: translate(0, -24px);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 0;
  }
}
@keyframes cl-pop {
  0%,
  16% {
    opacity: 1;
    transform: none;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  26%,
  62% {
    opacity: 0;
    transform: scale(0.82);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1.25);
  }
  72%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes cl-ptr {
  0%,
  16% {
    transform: none;
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  }
  28%,
  44% {
    transform: translate(-16px, 46px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  }
  56%,
  100% {
    transform: none;
  }
}
@keyframes cl-ring {
  0%,
  57% {
    opacity: 0;
    transform: scale(0.2);
  }
  58% {
    opacity: 0.95;
    transform: scale(0.25);
  }
  68%,
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}
@keyframes cl-press {
  0%,
  57% {
    opacity: 0;
  }
  60% {
    opacity: 0.3;
  }
  70%,
  100% {
    opacity: 0;
  }
}
@keyframes sw-rec {
  0%,
  10% {
    opacity: 0;
    transform: none;
  }
  14% {
    opacity: 1;
    transform: none;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  28% {
    transform: translate(24px, var(--y1));
    animation-timing-function: linear;
  }
  44% {
    transform: translate(78px, var(--y1));
    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
  }
  56%,
  82% {
    opacity: 1;
    transform: translate(102px, var(--y2));
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(102px, var(--y2));
  }
}
@keyframes sw-tick {
  0%,
  9% {
    opacity: 1;
  }
  14%,
  84% {
    opacity: 0;
  }
  92%,
  100% {
    opacity: 1;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Y, D and T: try them in a date box ---------- */
.notes .key {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
.notes .key kbd {
  transition:
    background-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out),
    transform 0.15s var(--ease-out);
}
.notes .key:hover kbd,
.notes .key.is-down kbd {
  background: var(--orange);
  border-color: var(--orange-d);
  color: #1a1a1a;
  opacity: 1;
}
.notes .key:active kbd,
.notes .key.is-down kbd {
  transform: translateY(1px);
}
.datebox {
  display: block;
  width: 11.5em;
  min-height: 0;
  margin-top: 10px;
  padding: 7px 11px;
  border: 1px solid var(--field-line);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  cursor: text;
}
.datebox::placeholder {
  color: var(--ink-3);
  opacity: 1;
}
.datebox:focus {
  outline: none;
  border-color: var(--orange-d);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22);
}
.datebox.is-set {
  animation: date-set 0.7s var(--ease-out);
}
@keyframes date-set {
  from {
    border-color: var(--orange);
    background-color: rgba(249, 115, 22, 0.12);
  }
}

/* ---------- coming: proposed work is drawn dashed, and the dashes march ---------- */
.coming__list {
  position: relative;
  border-bottom-color: transparent;
}
.coming__list li {
  position: relative;
  border-top-color: transparent;
}
.coming__list li::before,
.coming__list::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 14px);
  animation: dash-march 1.9s linear infinite;
}
.coming__list li::before {
  top: -1px;
}
.coming__list::after {
  bottom: -1px;
}
@keyframes dash-march {
  to {
    background-position: 14px 0;
  }
}

/* ---------- pricing: a reading crosshair (row and column light up together) ---------- */
@media (hover: hover) and (min-width: 701px) {
  .price tbody th,
  .price td,
  .price thead th {
    transition:
      background-color 0.25s var(--ease-out),
      color 0.25s var(--ease-out);
  }
  .price tbody tr:hover > *,
  .price:has(td[data-label^='Small']:hover) :is(td[data-label^='Small'], td[data-label='Price']),
  .price:has(td[data-label^='Medium']:hover) :is(td[data-label^='Medium'], td[data-label='Price']),
  .price:has(td[data-label^='Large']:hover) td[data-label^='Large'],
  .price:has(td[data-label='What it is']:hover) td[data-label='What it is'] {
    background-color: var(--wash);
  }
  .price tbody td:hover {
    background-color: rgba(249, 115, 22, 0.1);
  }
  .price tbody tr:hover .price__plan,
  .price:has(td[data-label^='Small']:hover) thead th:nth-child(2),
  .price:has(td[data-label^='Medium']:hover) thead th:nth-child(3),
  .price:has(td[data-label^='Large']:hover) thead th:nth-child(4),
  .price:has(td[data-label='What it is']:hover) thead th:nth-child(5) {
    color: var(--accent-text);
  }
}

/* ---------- demo: the night drawing's grid paper, and the form shell lights while you type ---------- */
.demo {
  background-image:
    linear-gradient(rgba(251, 247, 236, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 247, 236, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(251, 247, 236, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 247, 236, 0.024) 1px, transparent 1px);
  background-size:
    120px 120px,
    120px 120px,
    24px 24px,
    24px 24px;
}
.demo__shell {
  transition:
    box-shadow 0.5s var(--ease-out),
    background-color 0.5s var(--ease-out);
}
.demo__shell:focus-within {
  background-color: rgba(249, 115, 22, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(249, 115, 22, 0.6),
    0 0 0 6px rgba(249, 115, 22, 0.07);
}

/* ---------- footer: the page signs off with the tagline and the run-up ---------- */
.foot__sign {
  grid-column: 1 / -1;
  margin-bottom: clamp(16px, 2.4vw, 48px);
  padding-bottom: clamp(28px, 3.4vw, 64px);
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 0.6rem + 5.2vw, 9.4rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--on-dark);
  text-wrap: balance;
}
.foot__go {
  position: relative;
  display: inline-block;
  margin-left: 0.48em;
}
@media (prefers-reduced-motion: no-preference) {
  .foot.is-on .foot__go .speed i {
    animation: sign-run 7s var(--ease-out) 0.3s infinite both;
  }
  .foot .foot__go .speed i:nth-child(2) {
    animation-delay: 0.37s;
  }
  .foot .foot__go .speed i:nth-child(3) {
    animation-delay: 0.44s;
  }
}
@keyframes sign-run {
  0% {
    transform: translate3d(-1.5em, 0, 0) scaleX(0.1);
    opacity: 0;
  }
  9% {
    transform: translate3d(0.05em, 0, 0) scaleX(1.12);
    opacity: var(--o);
  }
  14%,
  86% {
    transform: none;
    opacity: var(--o);
  }
  93% {
    transform: translate3d(0.32em, 0, 0) scaleX(0.15);
    opacity: 0;
  }
  100% {
    transform: translate3d(-1.5em, 0, 0) scaleX(0.1);
    opacity: 0;
  }
}

/* ---------- the title block: bottom right on wide screens; sheet, name, back to top ---------- */
.tb {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  display: flex;
  align-items: stretch;
  height: 56px;
  border-radius: 14px;
  /* denser than the nav's glass: its small mono labels stay AA over the charcoal sections too */
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -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);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.6s var(--ease),
    visibility 0s linear 0.6s;
}
.tb.is-up {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.6s var(--ease),
    visibility 0s;
}
/* stepping aside while content passes underneath; it stays in the tab order and comes back
   whenever it holds keyboard focus */
.tb.is-up.is-shy:not(:focus-within) {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.45s var(--ease);
}
/* keyboard focus scrolled into view stops clear of the title block */
@media (min-width: 900px) {
  html {
    scroll-padding-bottom: 96px;
  }
}
.tb button {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out);
}
.tb[hidden],
.tb [hidden],
.viewer__auto[hidden] {
  display: none;
}
.tb__l1 i {
  font-style: normal;
}
.tb .tb__still {
  justify-content: center;
  width: 48px;
  border-radius: 14px 0 0 14px;
  box-shadow: 1px 0 0 var(--glass-line);
  color: var(--ink-2);
}
.tb .tb__top {
  display: grid;
  grid-template-columns: auto 16px;
  align-content: center;
  column-gap: 18px;
  row-gap: 4px;
  padding: 0 16px;
  border-radius: 0 14px 14px 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.tb .tb__still[hidden] + .tb__top {
  border-radius: 14px;
}
.tb button:hover {
  background-color: var(--wash);
  color: var(--ink);
}
.tb__l1 {
  color: var(--ink-3);
}
.tb__l1 b {
  color: var(--accent-text);
  font-weight: 500;
}
.tb__l2 {
  min-width: 18ch;
  color: var(--ink);
}
.tb__up {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s var(--ease);
}
.tb__top:hover .tb__up {
  transform: translateY(-3px);
}
@media (max-width: 899px) {
  .tb {
    display: none;
  }
}

/* ---------- wide screens: asymmetric compositions that use both sides ---------- */
@media (min-width: 1100px) {
  /* features head: the headline left, its line on the right */
  .features .section-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: end;
    max-width: none;
  }
  .features .section-head > * {
    grid-column: 1 / 9;
  }
  .features .section-head > .eyebrow {
    justify-self: start;
  }
  .features .section-head__sub {
    grid-column: 9 / 13;
    grid-row: 2;
    margin: 0 0 0.6em;
  }
  /* the schematics: bigger */
  .schem {
    width: clamp(132px, 11.5vw, 248px);
  }
  /* switching: the guides sit beside the copy; the timeline runs on off the edge (you carry on) */
  .switching__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    /* the head; then the copy beside the guides' lead (Call N) over the guides, the lead's row taking
       the slack so it sits on the guides and they end level with the copy; then the timeline */
    grid-template-rows: auto 1fr auto auto;
    column-gap: 24px;
  }
  .switching .panel__head,
  .switching .timeline {
    grid-column: 1 / -1;
  }
  .switching .panel__grid {
    grid-column: 1 / 8;
    grid-row: 2 / span 2;
    grid-template-columns: minmax(0, 1fr);
  }
  .switching .panel__grid--wide .panel__copy {
    grid-column: 1 / -1;
  }
  .switching .guides__lead {
    grid-column: 8 / 13;
    grid-row: 2;
    align-self: end;
    margin-top: 0;
  }
  .switching .guides {
    grid-column: 8 / 13;
    grid-row: 3;
    display: grid;
    gap: 12px;
  }
  .switching .guide {
    justify-content: space-between;
    min-height: 68px;
    padding: 18px 22px;
    font-size: 1.08rem;
  }
  .switching .timeline::before,
  .switching .timeline::after {
    right: calc(-1 * var(--edge-r));
  }
}
@media (min-width: 1300px) {
  /* coming: the banner holds the left, the list of what's on the way takes the right */
  .coming > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 5vw, 128px);
    align-items: start;
  }
  .coming__kicker {
    grid-column: 1;
    grid-row: 1;
  }
  .coming__banner {
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(2.6rem, 0.6rem + 4.4vw, 6.6rem);
  }
  .coming__list {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0;
  }
}
@media (min-width: 1800px) {
  /* past 1800 these sections keep the content edge on the left and run to the gutter on the
     right, so a wide screen reads as one sheet, not a column with empty sides */
  .statement,
  .features,
  .crm,
  .stack,
  .notes,
  .switching,
  .coming,
  .pricing,
  .demo,
  .foot {
    --edge-r: var(--gut);
  }
  .statement__grid,
  .features > .wrap,
  .crm__grid,
  .panel__inner,
  .notes > .wrap,
  .switching__inner,
  .coming > .wrap,
  .pricing > .wrap,
  .demo__grid,
  .foot__grid {
    max-width: none;
    padding-left: max(var(--gut), calc((100% - var(--wrap)) / 2));
    padding-right: var(--gut);
  }
  /* the module stack grows with the screen's height (stack.js caps the plates) */
  .js .feat__art {
    max-height: none;
  }
}
@media (min-width: 2100px) {
  /* the hoist band keeps the content edge too and runs to the right gutter; the drawing grows
     with it, but never taller than the pinned sheet can show (the tally after it keeps the same columns) */
  .band__grid,
  .tally__grid {
    max-width: none;
    padding-left: max(var(--gut), calc((100% - var(--wrap)) / 2));
    padding-right: var(--gut);
  }
  .band__art .bp-wrap {
    width: min(100%, calc((100svh - var(--head-h) - 180px) * 964 / 720));
    margin-left: auto;
  }
  /* small things: the head becomes the sheet's first column */
  .notes > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    column-gap: clamp(48px, 3vw, 96px);
    align-items: start;
  }
  .notes__head {
    display: block;
    position: sticky;
    top: calc(var(--head-h) + 40px);
  }
  .notes__sub {
    margin-top: 24px;
  }
  .notes__sheet {
    margin-top: 0;
  }
}
/* phones: the timeline's stops light in turn without the travelling dot; no type under 12 px */
@media (max-width: 700px) {
  .texts__dot {
    display: none;
  }
  .viewer__auto {
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .texts__dot {
    display: none;
  }
}