/* Hallmark · genre: modern-minimal · macrostructure: Marquee Hero · H1 marquee knobs: size=xxl, alignment=left-bias, underlay=none
 * theme: custom · vibe: "barely-off-white cream, forest green, jobsite precision" · paper: oklch(98.2% 0.006 90) · accent: oklch(42% 0.085 156)
 * display + body: DM Sans · axes: light / geometric-sans / chromatic-green ~156°
 * sections: hero · sign-off · story · how it works · CTA · footer (data-silos section parked, hidden)
 * nav: none (wordmark + demo button sit in the hero) · footer: Ft2 inline single line · enrichment: H9-style Tier-B hand-SVG floor plan, faded background
 * motion: sign-off record draws its signature once on scroll-in · hero job loop (sample cabinet job: three-stage bar you click or drag, SMS phone swapping contractor and customer, latest activity beside it; holds on hover, keyboard focus or a tap) · scroll-driven story bar · how it works plays slowly (feed scroll 48s, sift loop, channels every 12s; 1 and 3 hold on hover/focus) · studied: no · context: user-provided headline
 * Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · contrast: pass (40–41; faded activity trail is aria-hidden) · chrome: drawn phone frame kept at user request (gate 47 waived)
 */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  scroll-snap-type: y proximity;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-size: var(--text-base);
  line-height: 1.6;
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: 3px;
}

/* One screen: wordmark at the top, the statement anchored low and left. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

/* Faded floor plan behind the whole hero, strongest top-right, gone behind the headline. */
.hero__plan {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  color: var(--color-accent);
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 82% 18%, var(--color-ink) 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 85% 90% at 82% 18%, var(--color-ink) 30%, transparent 85%);
}

.hero__plan * { vector-effect: non-scaling-stroke; }

.plan-grid { fill: none; stroke: currentColor; }
.plan-grid--minor { stroke-width: 0.5; opacity: 0.35; }
.plan-grid--major { stroke-width: 0.75; opacity: 0.6; }

.plan-wall,
.plan-line,
.plan-dash { fill: none; stroke: currentColor; }

.plan-wall { stroke-width: 2; }
.plan-line { stroke-width: 1; }
.plan-dash { stroke-width: 1; stroke-dasharray: 6 5; }

.plan-window {
  fill: var(--color-paper);
  stroke: currentColor;
  stroke-width: 1;
}

.plan-text {
  fill: currentColor;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-anchor: middle;
}

.plan-text--small { font-size: 12px; letter-spacing: 0.06em; }
.plan-text--end { text-anchor: end; }

.hero__inner {
  display: grid;
  grid-template-rows: auto 1fr auto auto auto auto;
  justify-items: start;
  min-height: 100dvh;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--page-gutter) var(--space-3xl);
}

.hero__top {
  justify-self: stretch;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.hero__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-md);
  letter-spacing: -0.03em;
}

.hero__title {
  grid-row: 3;
  max-width: 17ch;
  min-width: 0;
  margin: var(--space-3xl) 0 var(--space-lg);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: normal;
  font-size: clamp(2.5rem, 4.8vw + 1rem, 5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.hero__sub {
  grid-row: 4;
  max-width: var(--measure);
  margin: 0 0 var(--space-xl);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-ink-2);
}

/* The main action, and a lighter way to see it first. */
.hero__actions {
  grid-row: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-lg);
  background: var(--color-accent);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-accent-ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--color-ink);
    border-color: var(--color-ink);
  }

  .btn--quiet:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-ink);
  }
}

/* Top-right: same action, lighter weight so the hero button stays the main one. */
.btn--quiet {
  min-height: 2.5rem;
  padding: 0 var(--space-md);
  background: transparent;
  color: var(--color-accent);
}

/* Hero placement: under the copy on narrow screens, beside it on wide ones (see the 60rem query). */
.hero .cd {
  grid-row: 6;
  justify-self: stretch;
  margin: var(--space-2xl) 0 0;
}

@keyframes typing {
  0%, 60%, 100% { opacity: 0.3; }
  30%           { opacity: 1; }
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Hero sample: one cabinet job driven to closure. A three-stage bar you can click or drag, an SMS phone that swaps
   between contractor and customer, and Material's activity beside it. Everything is scoped under .cd; nothing is sent. */

.cd {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
  margin: 0;
  padding: var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}

/* Frosted: the floor plan behind the hero shows through, blurred, where the browser can blur it. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cd {
    background: color-mix(in oklch, var(--color-paper-2) 45%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
            backdrop-filter: blur(14px) saturate(1.2);
  }
}

/* The bar: the whole job in three stages, across the top beside the phone (above it on phones). Click or drag to jump. */
.cd-scrub {
  grid-area: bar;
  min-width: 0;
}

.cd-bar {
  position: relative;
  height: 3.5rem;
  cursor: pointer;
  touch-action: pan-y;
}

.cd-bar__track,
.cd-bar__ticks,
.cd-bar__rail,
.cd-bar__labels {
  position: absolute;
  right: 0;
  left: 0;
  pointer-events: none;
}

.cd-bar__track {
  top: 1rem;
  height: 0.375rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  transition: transform var(--dur-short) var(--ease-out);
}

.cd-bar__fill {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: translateX(calc((var(--p, 0) - 1) * 100%));
}

/* Where each stage begins: a hairline gap in the track. */
.cd-bar__ticks { inset-block: 0; }

.cd-bar__ticks span {
  position: absolute;
  top: 0.9375rem;
  left: calc(var(--at, 0) * 100%);
  width: 2px;
  height: 0.5rem;
  margin-left: -1px;
  background: var(--color-paper-2);
}

/* The thumb rides at the right edge of a full-width rail that slides with the fill. */
.cd-bar__rail {
  inset-block: 0;
  transform: translateX(calc((var(--p, 0) - 1) * 100%));
}

.cd-bar__thumb {
  position: absolute;
  top: 0.6875rem;
  right: -0.5rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  transition: transform var(--dur-short) var(--ease-out);
}

/* Stage names, one under the middle of each equal share; the current one grows, finished ones turn green. */
.cd-bar__labels { inset-block: 0; }

.cd-bar__labels span {
  position: absolute;
  bottom: 0.25rem;
  left: calc(var(--at, 0) * 100%);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-muted);
  white-space: nowrap;
  transform: translateX(-50%);
  transition:
    transform var(--dur-long) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

.cd-bar__labels .is-done { color: var(--color-accent); }

.cd-bar__labels .is-current {
  font-weight: 500;
  color: var(--color-ink);
  transform: translateX(-50%) scale(1.2);
}

.cd__body {
  display: grid;
  grid-template-areas: "bar" "phone" "log";
  gap: var(--space-md);
}

/* ---------- The phone: just the texts, iPhone style. Time top left, contact centred ---------- */

.cd-phone {
  grid-area: phone;
  display: grid;
  width: 100%;
  max-width: 17.5rem;
  margin-inline: auto;
  overflow: hidden;
  background: var(--color-paper);
  border: var(--space-xs) solid var(--color-ink);
  border-radius: 2.75rem;
}

.cd-phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md) var(--space-2xs) var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.cd-phone__time { min-height: 1.5em; }

.cd-phone__icons {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.cd-phone__icons svg {
  height: 0.6875rem;
  width: auto;
}

.cd-phone__face {
  display: grid;
  min-width: 0;
  transition:
    transform var(--dur-short) var(--ease-out),
    opacity var(--dur-short) var(--ease-out);
}

/* Contact swap: the conversation slides off left and the next one comes in from the right. */
.cd-phone__face.is-leaving {
  opacity: 0;
  transform: translateX(-12%);
}

.cd-phone__face.is-arriving {
  opacity: 0;
  transform: translateX(12%);
  transition: none;
}

.cd-phone__head {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) 1.75rem;
  align-items: start;
  padding: var(--space-2xs) var(--space-sm) var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}

.cd-phone__back,
.cd-phone__video {
  margin-top: var(--space-sm);
  color: var(--color-accent);
}

.cd-phone__back {
  width: 0.625rem;
  height: 1.125rem;
}

.cd-phone__video {
  justify-self: end;
  width: 1.375rem;
  height: 1rem;
}

.cd-phone__contact {
  display: grid;
  justify-items: center;
  min-width: 0;
}

.cd-phone__avatar {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-wash);
  color: var(--color-accent);
  font-weight: 500;
}

.cd-phone[data-contact="jamie"] .cd-phone__avatar {
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.cd-phone__name {
  display: grid;
  justify-items: center;
  margin-top: calc(var(--space-2xs) * -1);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: calc(var(--radius-card) * 2.5);
  font-size: var(--text-sm);
  line-height: 1.3;
  white-space: nowrap;
}

.cd-phone__name b { font-weight: 500; }

.cd-phone__name span {
  font-size: calc(var(--text-sm) * 0.86);
  color: var(--color-muted);
}

.cd-phone__screen {
  position: relative;
  height: 34rem;
  overflow: hidden;
}

.cd-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  height: 100%;
  margin: 0;
  padding: var(--space-sm);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  list-style: none;
}

/* Short threads sit at the bottom, like any messages app; long ones scroll. */
.cd-thread > :first-child { margin-top: auto; }

.cd-sms {
  flex: none;
  display: grid;
  gap: var(--space-2xs);
  max-width: 85%;
  padding: var(--space-xs) var(--space-sm);
  border-radius: calc(var(--radius-card) * 2.5);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.cd-sms p { margin: 0; }

.cd-sms--out {
  align-self: flex-end;
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.cd-sms--in {
  align-self: flex-start;
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.cd-sms__link {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cd-sms--typing {
  display: flex;
  gap: var(--space-2xs);
  padding-block: var(--space-sm);
}

.cd-sms--typing span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-muted);
  animation: typing 1s var(--ease-in-out) infinite;
}

.cd-sms--typing span:nth-child(2) { animation-delay: 150ms; }
.cd-sms--typing span:nth-child(3) { animation-delay: 300ms; }

/* iMessage-style time stamp between bursts of texts. */
.cd-stamp {
  flex: none;
  align-self: center;
  padding-top: var(--space-xs);
  font-size: calc(var(--text-sm) * 0.86);
  font-weight: 500;
  color: var(--color-muted);
}

.cd-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}

.cd-tile {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 2.25rem;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: calc(var(--radius-card) * 0.66);
  color: var(--color-ink-2);
}

.cd-tile svg {
  width: 82%;
  height: auto;
}

.cd-tiles--small .cd-tile {
  width: 2rem;
  height: 1.5rem;
}

.cd-voice {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.cd-voice > svg {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
}

.cd-voice__wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 1.25rem;
}

.cd-voice__wave span {
  width: 2px;
  height: calc(var(--h) * 1.6px);
  border-radius: 1px;
  background: currentColor;
  opacity: 0.7;
}

.cd-voice__time { font-variant-numeric: tabular-nums; }

.cd-voice__text { color: var(--color-ink-2); }

/* ---------- Activity: what Material checked and did, one line each, hung off a thin rule ---------- */

.cd-log {
  grid-area: log;
  position: relative;
  min-width: 0;
  min-height: 16rem;
  font-size: var(--text-sm);
}

/* The label and the lines move as one group, the label just above the oldest line. */
.cd-log__group {
  position: absolute;
  inset: 0 0 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.cd-log__head {
  margin: 0;
  font-weight: 500;
  color: var(--color-muted);
}

/* Just the latest four lines, the newest a touch above the middle; open space above and below.
   Older lines slide up and fade as new ones arrive. */
.cd-log__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0 0 0 var(--space-md);
  list-style: none;
}

.cd-act {
  position: relative;
  flex: none;
  transition: opacity var(--dur-long) var(--ease-out);
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  color: var(--color-ink-2);
  line-height: 1.4;
}

.cd-act::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: calc(var(--space-md) * -1 + 0.0625rem);
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--radius-pill);
  background: var(--color-rule);
}

.cd-act svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--color-muted);
}

.cd-act__words {
  display: grid;
  min-width: 0;
}

.cd-act__detail { color: var(--color-muted); }

/* Fewer words: only the newest line keeps its detail. The newest two lines stay readable (≥ 4.5:1); the
   two older ones are a faint trail, hidden from screen readers by the script. */
.cd-act:not(:last-child) .cd-act__detail { display: none; }

.cd-act:nth-last-child(2) { opacity: 0.75; }
.cd-act:nth-last-child(3) { opacity: 0.35; }
.cd-act:nth-last-child(n + 4) { opacity: 0.18; }

.cd-act.is-busy .cd-act__text { animation: cd-busy 1.2s var(--ease-in-out) infinite; }

.cd-act[data-kind="sent"] svg,
.cd-act[data-kind="photo"] svg,
.cd-act[data-kind="done"] svg { color: var(--color-accent); }

.cd-act[data-kind="sent"]::before,
.cd-act[data-kind="photo"]::before,
.cd-act[data-kind="done"]::before { background: var(--color-accent); }

/* The task summary that opens each stage. */
.cd-act[data-kind="task"] {
  padding-top: var(--space-xs);
  color: var(--color-ink);
  font-weight: 500;
}

.cd-act[data-kind="task"] svg { color: var(--color-ink); }

.cd-act[data-kind="task"]::before {
  top: calc(var(--space-xs) + 0.4rem);
  background: var(--color-ink);
}

.cd-act[data-kind="done"] {
  color: var(--color-ink);
  font-weight: 500;
}

.cd-act[data-kind="flag"],
.cd-act[data-kind="flag"] svg { color: var(--color-alert); }

.cd-act[data-kind="flag"]::before { background: var(--color-alert); }

@keyframes cd-busy {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

@media (hover: hover) and (pointer: fine) {
  .cd-bar:hover .cd-bar__track { transform: scaleY(1.5); }

  .cd-bar:hover .cd-bar__thumb { transform: scale(1.25); }
}

.cd .is-new { animation: msg-in var(--dur-long) var(--ease-out) backwards; }

/* Held (hover, keyboard focus or a tap): the typing dots and "working" lines stop with everything else. */
.cd.is-held .cd-sms--typing span,
.cd.is-held .cd-act.is-busy .cd-act__text { animation-play-state: paused; }

.cd-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Wider than a phone: activity and progress on the left, phone on the right. */
@media (min-width: 40rem) {
  .cd__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 17.5rem);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "bar phone"
      "log phone";
    column-gap: var(--space-lg);
    row-gap: 0;
    align-items: stretch;
  }
}

/* Phones: the bar across the top, and the activity gets a fixed height under the phone. */
@media (max-width: 39.99rem) {
  .cd { padding: var(--space-sm); }

  .cd-log { min-height: 13rem; }

  .cd-log__group { bottom: var(--space-md); }

  .cd-phone__screen { height: 30rem; }

  .cd-bar__labels span { font-size: calc(var(--text-sm) * 0.86); }

  .cd-bar__labels .is-current { transform: translateX(-50%) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .cd .is-new,
  .cd-act.is-busy .cd-act__text,
  .cd-sms--typing span { animation: none; }

  .cd-act { transition: none; }

  .cd-bar__track,
  .cd-bar__thumb,
  .cd-bar__labels span,
  .cd-phone__face { transition: none; }
}

/* Sign-off: one signed record beside one line of copy. Record on the left, words on the right, the mirror of the
   hero above it. Motion: once, when it scrolls in, the signature draws and the payment row settles in. */

.signoff {
  border-top: var(--rule-hair) solid var(--color-rule);
}

.signoff__inner {
  display: grid;
  grid-template-areas: "copy" "record";
  gap: var(--space-xl);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-3xl) var(--page-gutter);
}

.signoff__copy {
  grid-area: copy;
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.signoff h2 {
  max-width: 14ch;
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: normal;
  font-size: var(--text-2xl);
  line-height: 1.04;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.signoff__copy p {
  max-width: 46ch;
  margin: 0;
  color: var(--color-ink-2);
}

/* The record: one card, rows hung off a thin rule like the job's own history. */
.rec {
  grid-area: record;
  display: grid;
  gap: var(--space-md);
  min-width: 0;
  max-width: 34rem;
  margin: 0;
  padding: var(--space-lg);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  font-size: var(--text-sm);
}

.rec__head {
  display: grid;
  gap: var(--space-3xs);
}

.rec__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-md);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.rec__meta { color: var(--color-muted); }

.rec__rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rec__row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  min-height: 3.5rem;
  padding-block: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule-2);
}

.rec__label { color: var(--color-muted); }

.rec__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  min-width: 0;
}

.rec__body b { font-weight: 500; }

.rec__time {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rec__sig {
  width: 9rem;
  height: 2.25rem;
  color: var(--color-ink);
}

.rec__sig path {
  stroke-dasharray: 340;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.3s var(--ease-in-out);
}

.rec__paid {
  padding: 0 var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 500;
  line-height: 1.6;
}

.rec__foot {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule-2);
  color: var(--color-accent);
  font-weight: 500;
}

.rec__foot svg {
  width: 0.75rem;
  height: 0.875rem;
}

/* Armed by the script (motion allowed, not yet seen): the signature is undrawn and the payment waits. */
.signoff.is-armed .rec__sig path { stroke-dashoffset: 340; }

.signoff.is-armed .rec__row--pay,
.signoff.is-armed .rec__foot {
  opacity: 0;
  transform: translateY(6px);
}

.rec__row--pay,
.rec__foot {
  transition:
    opacity var(--dur-long) var(--ease-out),
    transform var(--dur-long) var(--ease-out);
}

.signoff.is-in .rec__sig path { stroke-dashoffset: 0; }

.signoff.is-in .rec__row--pay {
  opacity: 1;
  transform: none;
  transition-delay: 1.2s;
}

.signoff.is-in .rec__foot {
  opacity: 1;
  transform: none;
  transition-delay: 1.6s;
}

/* Phones: the label sits over its content, the time beside it. */
@media (max-width: 39.99rem) {
  .rec { padding: var(--space-md); }

  .rec__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label time" "body body";
  }

  .rec__label { grid-area: label; }
  .rec__body { grid-area: body; }
  .rec__time { grid-area: time; }
}

/* Wide: the record on the left, the words on the right. */
@media (min-width: 60rem) {
  .signoff__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "record copy";
    align-items: center;
    column-gap: var(--space-2xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rec__sig path,
  .rec__row--pay,
  .rec__foot { transition: none; }
}

/* Story: scrolling through the section moves the week from today to with AI. */

.story {
  position: relative;
  border-top: var(--rule-hair) solid var(--color-rule);
}

/* Snap points: placed by JS where the stage pins and where it lets go. */
.story__snap { display: none; }

.story.is-scrolly .story__snap {
  display: block;
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  scroll-snap-align: start;
  pointer-events: none;
}

.story__stage {
  display: grid;
  grid-template-areas: "head" "steps" "chart" "copy";
  row-gap: var(--space-lg);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-3xl) var(--page-gutter);
}

/* With JS, the section gets scroll room and the stage pins while you move through it. */
.story.is-scrolly { height: 220vh; }

.story.is-scrolly .story__stage {
  position: sticky;
  top: 0;
  align-content: center;
  min-height: 100dvh;
  padding-block: var(--space-xl);
}

.story h2 {
  grid-area: head;
  max-width: 18ch;
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: normal;
  font-size: var(--text-2xl);
  line-height: 1.04;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Progress: Today to With AI, filled by scroll position. A row on phones, a rail on the left on desktop. */

.steps {
  grid-area: steps;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 500;
  white-space: nowrap;
}

.steps__label {
  color: var(--color-muted);
  transition: color var(--dur-short) var(--ease-out);
}

.story[data-state="today"] [data-step="today"],
.story[data-state="ai"] [data-step="ai"] { color: var(--color-ink); }

.steps__track {
  width: var(--space-3xl);
  height: var(--rule-thick);
  background: var(--color-rule);
  overflow: hidden;
}

.steps__fill {
  display: block;
  height: 100%;
  background: var(--color-accent);
  transform: scaleX(var(--t, 0));
  transform-origin: left;
}

/* Chart: one bar that re-divides itself. */

.story__chart {
  grid-area: chart;
  display: grid;
  gap: var(--space-md);
  align-content: start;
  margin: 0;
}

.story__chart-title {
  margin: 0;
  font-weight: 500;
}

.story__bar {
  display: flex;
  gap: var(--space-3xs);
  height: 4rem;
}

.seg {
  flex: var(--v) 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seg b {
  font-weight: 500;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* Smallest phones: a 10% share is under 30px wide, so its label steps down a size to keep clear of the edges. */
@media (max-width: 22.5rem) {
  .seg b { font-size: calc(var(--text-sm) * 0.86); }
}

.seg-search,
.key-search::before {
  background: repeating-linear-gradient(135deg, var(--color-rule) 0 4px, var(--color-paper-2) 4px 8px);
  color: var(--color-ink);
}

.seg-report,
.key-report::before {
  background: var(--color-paper-3);
  color: var(--color-ink);
}

.seg-coord,
.key-coord::before {
  background: var(--color-muted);
  color: var(--color-paper);
}

.seg-judge,
.key-judge::before {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.story__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.story__legend li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.story__legend li::before {
  content: "";
  width: var(--space-sm);
  height: var(--space-sm);
  flex: none;
}

.story__source {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Copy: both panels share one cell and cross-fade, so nothing jumps. */

.story__copy {
  grid-area: copy;
  display: grid;
}

.panel {
  grid-area: 1 / 1;
  display: grid;
  gap: var(--space-md);
  align-content: start;
  transition: opacity var(--dur-long) var(--ease-out);
}

.panel p { margin: 0; }

/* Keep both messages in one cell; hidden text fades before visibility changes. */
.story .panel {
  grid-area: 1 / 1;
  transition: opacity var(--dur-long) var(--ease-out), visibility 0s;
}
.story .panel[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-long) var(--ease-out), visibility 0s var(--dur-long);
}

.panel__lede {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.panel > p:not(.panel__lede) {
  max-width: var(--measure);
  color: var(--color-ink-2);
}

/* How it works: three steps, learn, sift, meet you where you work. Each card loops on its own. */

.how {
  border-top: var(--rule-hair) solid var(--color-rule);
}

.how__inner {
  display: grid;
  gap: var(--space-xl);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-3xl) var(--page-gutter);
}

.how__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-lg);
}

.how h2 {
  max-width: 20ch;
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: normal;
  font-size: var(--text-2xl);
  line-height: 1.04;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.how__pause {
  flex: none;
  min-height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-accent);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}

.how__steps {
  display: grid;
  gap: var(--space-2xl) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.step h3 {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.step > p {
  max-width: var(--measure);
  margin: 0;
  color: var(--color-ink-2);
}

.step__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  height: 26rem;
  padding: var(--space-md);
  overflow: hidden;
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  transition: border-color var(--dur-short) var(--ease-out);
}

/* 1. Feed: a constant stream of updates, each tied to the work it touches. */
.step__visual--feed {
  padding: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--color-ink) var(--space-xl), var(--color-ink) calc(100% - var(--space-xl)), transparent);
          mask-image: linear-gradient(to bottom, transparent, var(--color-ink) var(--space-xl), var(--color-ink) calc(100% - var(--space-xl)), transparent);
}

.feed {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-md);
  list-style: none;
}

/* Slow on purpose: about four seconds per update, readable as it passes. JS sets --feed-loop to one copy's height. */
.how.is-playing .feed { animation: feed-scroll 48s linear infinite; }

.how.is-playing .step__visual--feed:hover .feed { animation-play-state: paused; }

@keyframes feed-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-1 * var(--feed-loop, 50%))); }
}

.feed li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3xs) var(--space-sm);
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-card);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.feed small {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.feed em {
  justify-self: end;
  padding: 0 var(--space-xs);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  font-size: 0.75rem;
  font-style: normal;
  white-space: nowrap;
}

.feed span {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2. Sift: a field of updates. Most fade out, a few light up and become decisions. */
.field {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  justify-items: center;
  row-gap: var(--space-md);
  padding: var(--space-sm) 0;
}

.dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--radius-pill);
  background: var(--color-muted);
  opacity: 0.15;
}

.dot--key {
  background: var(--color-accent);
  opacity: 1;
  transform: scale(1.6);
}

.how.is-playing .is-sifted .dot {
  transition:
    opacity 300ms var(--ease-out),
    transform 300ms var(--ease-out),
    background-color 300ms var(--ease-out);
  transition-delay: calc(var(--c) * 150ms);
}

.how.is-playing .step__visual--sift:not(.is-sifted) .dot {
  background: var(--color-muted);
  opacity: 0.55;
  transform: none;
}

.field { position: relative; }

/* The scan: a green bar sweeps across, timed to the dots resolving column by column (150ms each).
   The scanner box spans the field and the bar is its left edge, so translateX(100%) carries the bar to the far side. */
.scanner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.scanner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--rule-thick);
  background: var(--color-accent);
}

.how.is-playing .is-scanning .scanner { animation: scan 2100ms linear both; }

@keyframes scan {
  0%   { transform: translateX(0); opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* A dot that has dropped into the list leaves a ring behind. It empties the moment it lifts:
   no column delay, which the field's light-up transition would otherwise carry over. */
.dot--key.is-sent {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.how.is-playing .is-sifted .dot--key.is-sent { transition: none; }

.flier {
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Decisions: newest at the bottom, older ones scroll up and out. */
.decisions {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
        }

.decisions li {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-card);
  font-size: var(--text-sm);
  font-weight: 500;
}

.decisions i {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.decisions li.is-hidden { display: none; }

/* 3. Channels: Material as a teammate inside the places the team already talks. */
.chans {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.chans__btn {
  min-height: 2rem;
  padding: 0 var(--space-sm);
  background: transparent;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

.chans__btn[aria-pressed="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

@media (hover: hover) and (pointer: fine) {
  .chans__btn[aria-pressed="false"]:hover { color: var(--color-ink); border-color: var(--color-ink-2); }
}

.chan {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-height: 0;
  padding-top: var(--space-xs);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.chan__where {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Thread rows, the way team chat lays out messages. */
.row {
  display: grid;
  gap: var(--space-3xs);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.row b {
  font-weight: 500;
  font-size: 0.8125rem;
}

.row p { margin: 0; color: var(--color-ink-2); }

.row--ai {
  padding-left: var(--space-sm);
  border-left: var(--rule-thick) solid var(--color-accent);
}

.row--ai b { color: var(--color-accent); }

.row--ai p { color: var(--color-ink); }

/* Text thread: bubbles. */
.bubble {
  max-width: 88%;
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-card);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.bubble--in {
  align-self: flex-start;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
}

.bubble--out {
  align-self: flex-end;
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

/* Messages arrive in order each time a channel comes up. */
.how.is-playing .chan > :not(.chan__where) { animation: msg-in var(--dur-long) var(--ease-out) both; }

.how.is-playing .chan > :nth-child(2) { animation-delay: 0.2s; }
.how.is-playing .chan > :nth-child(3) { animation-delay: 1.4s; }
.how.is-playing .chan > :nth-child(4) { animation-delay: 2.6s; }
.how.is-playing .chan > :nth-child(5) { animation-delay: 3.6s; }

.how__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.how.is-playing:not(.is-running) .feed,
.how.is-playing:not(.is-running) .scanner,
.how.is-playing:not(.is-running) .chan > * { animation-play-state: paused; }

/* Book a demo: one line and the button. */

.cta {
  border-top: var(--rule-hair) solid var(--color-rule);
}

.cta__inner {
  display: grid;
  gap: var(--space-lg);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-3xl) var(--page-gutter);
}

.cta__copy {
  display: grid;
  gap: var(--space-sm);
}

.cta h2 {
  max-width: 20ch;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-2xl);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.cta p {
  max-width: var(--measure);
  margin: 0;
  color: var(--color-ink-2);
}

/* Footer. */

.site-footer {
  border-top: var(--rule-hair) solid var(--color-rule);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-lg);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-lg) var(--page-gutter) var(--space-xl);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.site-footer__inner p { margin: 0; }

.site-footer__inner .site-footer__mark {
  margin-right: auto;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-md);
  letter-spacing: -0.03em;
  color: var(--color-ink);
}

.site-footer a {
  color: var(--color-ink-2);
  text-underline-offset: 3px;
}

/* Loop: data in silos, connected by one integration layer that writes back. */

.loop {
  border-top: var(--rule-hair) solid var(--color-rule);
}

.loop__inner {
  display: grid;
  gap: var(--space-2xl);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-3xl) var(--page-gutter);
}

.loop__copy {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.loop__copy > p {
  max-width: var(--measure);
  margin: 0;
  color: var(--color-ink-2);
}

.loop h2 {
  max-width: 18ch;
  margin: 0 0 var(--space-sm);
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: normal;
  font-size: var(--text-2xl);
  line-height: 1.04;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.loop__copy > .loop__lede {
  margin-top: var(--space-md);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.loop__quote {
  display: grid;
  gap: var(--space-xs);
  max-width: var(--measure);
  margin: var(--space-md) 0 0;
  padding-left: var(--space-md);
  border-left: var(--rule-thick) solid var(--color-accent);
}

.loop__quote p { margin: 0; }

.loop__quote footer {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Flow diagram: sources down the left, each feeding one layer on the right. */

.flow {
  display: grid;
  gap: var(--space-lg);
  align-content: start;
  margin: 0;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}

.flow__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  min-height: 2.75rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.flow__pause {
  flex: none;
  min-height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-accent);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}

.flow__map {
  --row: 2.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-xl) auto;
  align-items: center;
}

/* Sources: each one runs a line right to a shared spine, which feeds the layer. */
.sources {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sources::after {
  content: "";
  position: absolute;
  top: calc(var(--row) / 2);
  bottom: calc(var(--row) / 2);
  right: 0;
  width: var(--rule-thick);
  background: var(--color-rule);
  transition: background-color var(--dur-short) var(--ease-out);
}

.sys {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: var(--row);
  font-size: var(--text-base);
  color: var(--color-ink-2);
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}

.sys__line {
  position: relative;
  flex: 1;
  min-width: var(--space-lg);
  height: var(--rule-thick);
  background: var(--color-rule);
  transition: background-color var(--dur-short) var(--ease-out);
}

.sys__tag {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-accent);
  visibility: hidden;
}

/* Pulse: a dot on the line, toward the layer on read, back to the source on write.
   The pseudo spans the line and draws the dot at its left end, so translateX moves it the line's length. */
.sys__line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.375rem;
  margin-top: -0.1875rem;
  background: radial-gradient(circle closest-side, var(--color-accent) 96%, transparent) 0 0 / 0.375rem 100% no-repeat;
  opacity: 0;
}

@keyframes pulse-along {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(calc(100% - 0.375rem)); opacity: 1; }
}

.sys.is-in,
.sys.is-out { color: var(--color-ink); }

.sys.is-in .sys__name,
.sys.is-out .sys__name { font-weight: 500; }

.sys.is-in .sys__line,
.sys.is-out .sys__line { background: var(--color-accent); }

.sys.is-out .sys__tag { visibility: visible; }

.sys.is-in .sys__line::before { animation: pulse-along 900ms var(--ease-in-out) infinite; }
.sys.is-out .sys__line::before { animation: pulse-along 900ms var(--ease-in-out) infinite reverse; }

.flow.is-paused .sys__line::before { animation-play-state: paused; }

/* Connector from the spine into the layer, with an arrowhead. */
.bus {
  position: relative;
  height: var(--rule-thick);
  background: var(--color-rule);
  transition: background-color var(--dur-short) var(--ease-out);
}

.bus::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  margin-top: -0.3125rem;
  border-left: 0.5rem solid var(--color-rule);
  border-block: 0.3125rem solid transparent;
  transition: border-color var(--dur-short) var(--ease-out);
}

.flow__map:has(.is-in, .is-out) .sources::after,
.flow__map:has(.is-in, .is-out) .bus { background: var(--color-accent); }

.flow__map:has(.is-in, .is-out) .bus::after { border-left-color: var(--color-accent); }

/* Writing back: the arrow turns around and points at the sources. */
.flow__map:has(.is-out) .bus::after {
  right: auto;
  left: -1px;
  border-left: 0;
  border-right: 0.5rem solid var(--color-accent);
}

.layer {
  display: grid;
  gap: var(--space-3xs);
  margin: 0 0 0 var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-accent);
  border-radius: var(--radius-card);
  color: var(--color-accent-ink);
  font-size: var(--text-sm);
  line-height: 1.2;
}

.layer b {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}

/* Trace: the steps of the example, lit in turn while it plays. */
.trace {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0 0 0 var(--space-lg);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-2);
}

.trace b { font-weight: 500; color: var(--color-ink); }

.trace li::marker { color: var(--color-muted); font-variant-numeric: tabular-nums; }

.flow.is-playing .trace li {
  color: var(--color-muted);
  transition: color var(--dur-short) var(--ease-out);
}

.flow.is-playing .trace li b { color: var(--color-muted); }

.flow.is-playing .trace li.is-done,
.flow.is-playing .trace li.is-done b { color: var(--color-ink-2); }

.flow.is-playing .trace li.is-active,
.flow.is-playing .trace li.is-active b { color: var(--color-ink); }

.flow.is-playing .trace li.is-active::marker { color: var(--color-accent); }

@media (min-width: 60rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-2xl);
    padding-block: var(--space-2xl) calc(var(--space-3xl) + var(--space-xl));
  }

  .hero__top { grid-column: 1 / -1; }

  .hero__title,
  .hero__sub,
  .hero__actions { grid-column: 1; }

  .hero__title { font-size: clamp(2.75rem, 2.6vw + 1.15rem, 4.25rem); }

  .hero .cd {
    grid-column: 2;
    grid-row: 2 / 6;
    align-self: end;
    margin: 0;
  }

  /* Beside the copy the whole panel should fit the first screen: the phone gives up height on short windows. */
  .hero .cd-phone__screen { height: clamp(22rem, calc(100dvh - 25rem), 30rem); }

  .how__inner { padding-block: var(--space-4xl); }

  .cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding-block: var(--space-4xl);
  }

  /* Not three equal tiles: the steps step down left to right, updates in at the top, decisions out at the
     bottom, and the last one is wider because it carries the conversation. */
  .how__steps {
    grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr);
    align-items: start;
  }

  .step:nth-child(2) { margin-top: var(--space-2xl); }
  .step:nth-child(3) { margin-top: calc(var(--space-2xl) * 2); }

  .story__stage {
    grid-template-columns: auto minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas:
      "steps head  head"
      "steps chart copy";
    column-gap: var(--space-3xl);
    row-gap: var(--space-2xl);
    align-items: start;
    padding-block: var(--space-4xl);
  }

  .steps {
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-md);
  }

  .steps__track {
    flex: 1;
    width: var(--rule-thick);
    height: auto;
  }

  .steps__fill {
    width: 100%;
    transform: scaleY(var(--t, 0));
    transform-origin: top;
  }

  .loop__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-3xl);
    align-items: center;
    padding-block: var(--space-4xl);
  }
}

/* Narrow phones: a smaller box and no tags, so every line still meets the spine. */
@media (max-width: 30rem) {
  .flow { padding-inline: var(--space-md); }

  .flow__map { grid-template-columns: minmax(0, 1fr) var(--space-md) auto; }

  .layer { padding: var(--space-sm) var(--space-md); }

  .layer b { font-size: var(--text-md); }

  .layer span,
  .sys__tag { display: none; }

  .sys { font-size: var(--text-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }

  .steps__label,
  .panel,
  .step__visual,
  .chans__btn,
  .sys,
  .sys__line,
  .sources::after,
  .bus,
  .bus::after,
  .flow.is-playing .trace li { transition: none; }
}