/* Hallmark · draft: band rhythm + fewer words · studied: yes · DNA-source: url (usehallmark.com modern-minimal set:
 *   Cobalt, Dusk, Furrow, Dose, Coral, Blueprint, Console, Rim, Terrazzo, Ultraviolet, Wayfind)
 * carried: tinted / base / ink / accent band rhythm · one product artifact per section · paper grain on the hero · ~1 line of copy per section
 * carried from Cobalt: a background made of the product's own material (loose job updates in, schedule bars out),
 *   and a divider that repeats that motif between sections (a schedule line that fills as you scroll)
 * not carried: their palettes and faces (this site uses DM Sans + forest green); no parallax
 *   (none of the eleven use it)
 * rhythm: hero paper-2 + grain + funnel field · softly raised phone and warm frosted cards · sign-off paper + floor plan under a frosted glass card · story paper-2 · how plain paper · CTA softly lit accent + M of schedule bars · footer paper
 * motion: field is canvas, paused off screen and in hidden tabs, one still frame under reduced motion ·
 *   dividers and sign-off beats move transform/opacity only (the signature stroke draws, as on the live site)
 */

/* Draft tokens: the light frosted-glass cards. Move into tokens.css when this ships. */
:root {
  --color-glass:        oklch(99% 0.007 90 / 0.82);
  --color-glass-solid:  oklch(99% 0.007 90);
  --color-glass-edge:   oklch(21% 0.014 155 / 0.10);
  --shadow-card:        inset 0 1px 0 rgba(255,255,255,.9),
                       0 2px 4px -2px rgba(11,48,32,.08),
                       0 14px 30px -16px rgba(11,48,32,.16);
  --shadow-record:      inset 0 1px 0 rgba(255,255,255,.95),
                       0 3px 6px -3px rgba(11,48,32,.10),
                       0 22px 44px -22px rgba(11,48,32,.22);
}

/* ---------- Warm glass cards, lightly raised above the paper ---------- */
.step__card,
.shot {
  background: var(--color-glass-solid);
  border: var(--rule-hair) solid var(--color-glass-edge);
  border-radius: calc(var(--radius-card) * 3);
  box-shadow: var(--shadow-card);
}

.shot { box-shadow: var(--shadow-record); }

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .step__card,
  .shot {
    background: var(--color-glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
            backdrop-filter: blur(16px) saturate(1.1);
  }
}

/* ---------- Band rhythm: colour shifts separate the sections, so the hairlines go ---------- */

.hero { background: var(--color-paper-2); }

.signoff,
.story,
.how,
.cta { border-top: 0; }

.signoff { background: var(--color-paper); }
.story { background: var(--color-paper-2); }
.how { background: var(--color-paper); }

/* Paper grain: a few percent of alpha noise over the drawing. */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.09;
  pointer-events: none;
}

/* ---------- Closing band in the accent ---------- */

.cta {
  background:
    radial-gradient(ellipse at 22% 45%, rgba(158,202,171,.18), transparent 62%),
    linear-gradient(125deg, transparent 40%, rgba(4,34,20,.12)),
    var(--color-accent);
  color: var(--color-accent-ink);
}

.cta h2,
.cta p { color: var(--color-accent-ink); }

.cta .btn {
  --button-highlight: rgba(255,255,255,.95);
  --button-shadow-color: rgba(0,25,14,.24);
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-accent);
}

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

.cta .btn:focus-visible { outline-color: var(--color-accent-ink); }

/* A light top edge and compact shadow give actions a tactile surface. */
.btn {
  --button-highlight: rgba(255,255,255,.18);
  --button-shadow-color: rgba(11,48,32,.18);
  box-shadow:
    inset 0 1px 0 var(--button-highlight),
    0 2px 3px -1px var(--button-shadow-color),
    0 5px 12px -6px var(--button-shadow-color);
  transition:
    background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

.btn--quiet {
  --button-highlight: rgba(255,255,255,.45);
  --button-shadow-color: rgba(11,48,32,.07);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 var(--button-highlight),
      0 3px 5px -2px var(--button-shadow-color),
      0 8px 16px -7px var(--button-shadow-color);
  }
}

.btn:active {
  transform: none;
  box-shadow:
    inset 0 1px 0 var(--button-highlight),
    0 1px 2px -1px var(--button-shadow-color);
}

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


/* ---------- Big projects: one giant number that counts with the scroll, beside the bar ---------- */

/* Less scroll to get through it, and the pinned stage is filled rather than padded. */
.story.is-scrolly { height: 180vh; }

.story__stage { grid-template-areas: "head" "steps" "num" "chart" "copy"; }

.story__num {
  grid-area: num;
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
}

.story__big {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(5rem, 14vw, 12.5rem);
  line-height: 0.85;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  transition: color var(--dur-long) var(--ease-out);
}

.story[data-state="ai"] .story__big { color: var(--color-accent); }

.story__unit {
  font-size: var(--text-md);
  color: var(--color-ink-2);
}

/* A taller bar so the chart holds its half of the screen. */
.story__bar { height: 5rem; }

@media (min-width: 60rem) {
  .story__stage {
    grid-template-columns: auto minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "steps head head"
      "steps num  chart"
      "steps copy chart";
    column-gap: var(--space-2xl);
    row-gap: var(--space-lg);
    align-items: end;
    padding-block: var(--space-xl);
  }

  .story__chart { align-self: center; }

  .story__bar { height: 7.5rem; }
}

/* ---------- How it works, Ultraviolet-style: verb, one line, then a short card with a header row ---------- */

.how__steps { align-items: start; }

.step { gap: var(--space-2xs); }

.step h3 { margin: 0; }

.step > p {
  margin: 0 0 var(--space-md);
  color: var(--color-ink-2);
}

/* Wide: three columns whose title, line and card rows line up across all three, whatever wraps. */
@media (min-width: 60rem) {
  .how__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
  }

  .step,
  .step:nth-child(2),
  .step:nth-child(3) {
    grid-row: span 3;
    grid-template-rows: subgrid;
    margin-top: 0;
  }
}

.step__card {
  display: grid;
  overflow: hidden;
}

.step__bar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: 0;
  padding: var(--space-md) var(--space-lg) 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.step__bar span:last-child {
  color: var(--color-ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* The card is the frame now; the visual inside drops its own and gets shorter. */
.step__card .step__visual {
  height: 19rem;
  background: none;
  border: 0;
  border-radius: 0;
}

/* Feed rows on one line: where it came from, then what it says. */
.feed li {
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: baseline;
}

.feed span { grid-column: 2; grid-row: 1; }

.feed em { display: none; }


/* ---------- Hero field: across the whole hero, behind the words and the glass panel ---------- */

.hero__field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__field canvas {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--color-accent);
}

/* ---------- Dividers: a schedule line on each section edge; it fills and its marker runs as you scroll ---------- */

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

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

/* The floor plan from the old hero, now behind the sign-off card for the glass to blur. */
.signoff__plan {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  color: var(--color-accent);
  opacity: 0.28;
  -webkit-mask-image: radial-gradient(ellipse 70% 85% at 70% 50%, var(--color-ink) 35%, transparent 90%);
          mask-image: radial-gradient(ellipse 70% 85% at 70% 50%, var(--color-ink) 35%, transparent 90%);
}

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

/* Soft colour behind the card, so the glass has something to blur, like a photo behind frosted glass. */
.signoff::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% 0 10% 30%;
  background:
    radial-gradient(closest-side at 30% 40%, var(--color-accent), transparent),
    radial-gradient(closest-side at 75% 70%, var(--color-accent-wash), transparent),
    radial-gradient(closest-side at 80% 25%, var(--color-alert-wash), transparent);
  opacity: 0.55;
}

@media (min-width: 60rem) {
  .signoff::before { inset: 8% 0 8% 42%; }
}
.signoff .plan-window { fill: var(--color-paper); }

.wire {
  --p: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-base);
  height: 0;
  pointer-events: none;
}

.wire::before,
.wire::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}

.wire::before {
  top: 0;
  height: var(--rule-hair);
  background: var(--color-rule);
}

/* Week ticks hung under the line. */
.wire::after {
  top: var(--rule-hair);
  height: var(--space-2xs);
  background: repeating-linear-gradient(to right, var(--color-rule) 0 var(--rule-hair), transparent var(--rule-hair) var(--space-2xl));
}

.wire__done {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--rule-hair) * -0.5);
  height: var(--rule-thick);
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(var(--p));
}

.wire__mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateX(calc(var(--p) * (100% - var(--space-sm))));
}

.wire__mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-sm) * -0.5);
  width: var(--space-sm);
  height: var(--space-sm);
  background: var(--color-accent);
  border: var(--rule-thick) solid var(--color-paper);
  transform: rotate(45deg);
}

/* ---------- Sign-off: Photo. Signed. Invoiced. One card that builds in three beats ---------- */

.signoff__inner { grid-template-areas: "copy" "record"; }

.signoff h2 {
  max-width: none;
  font-size: calc(var(--text-2xl) * 1.3);
  line-height: 0.98;
  text-wrap: wrap;
}

.signoff h2 [data-at] { transition: opacity var(--dur-long) var(--ease-out); }

.signoff[data-beat="0"] [data-at],
.signoff[data-beat="1"] [data-at="2"],
.signoff[data-beat="1"] [data-at="3"],
.signoff[data-beat="2"] [data-at="3"] { opacity: 0.18; }

.shot {
  grid-area: record;
  display: grid;
  gap: var(--space-lg);
  min-width: 0;
  margin: 0;
  padding: var(--space-lg);
}

.shot p { margin: 0; }

/* Beat 1: the completion photo, small. */
.shot__photo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  transition:
    opacity var(--dur-long) var(--ease-out),
    transform var(--dur-long) var(--ease-out);
}

.shot__img {
  flex: none;
  display: block;
  width: clamp(9rem, 42%, 15rem);
  height: auto;
  color: var(--color-ink-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}

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

.shot__photo p {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.35;
}

.shot__photo span {
  font-weight: 400;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.shot__bg { fill: url(#shot-light); }

.shot__glass,
.shot__solid {
  fill: var(--color-paper);
  stroke: currentColor;
  stroke-width: 1;
}

.shot__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
}

.shot__faint {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.3;
}

/* Beat 2: the signature, large, on its line. */
.shot__sign {
  display: grid;
  gap: var(--space-xs);
}

.shot__sig {
  display: block;
  width: min(100%, 26rem);
  height: auto;
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-ink);
  color: var(--color-ink);
  box-sizing: content-box;
}

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

.shot__who {
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--dur-long) var(--ease-out) 0.9s;
}

/* Beat 3: the invoice, as big as the signature. */
.shot__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  transition:
    opacity var(--dur-long) var(--ease-out),
    transform var(--dur-long) var(--ease-out);
}

.shot__amt {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.shot__stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: var(--radius-pill);
  font-weight: 500;
  white-space: nowrap;
}

.shot__stamp svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* The beats. Markup ships at beat 3 (everything shown); the script rewinds to 0 and plays forward. */
.signoff[data-beat="0"] .shot__photo {
  opacity: 0;
  transform: translateY(var(--space-xs));
}

.signoff[data-beat="0"] .shot__sig path,
.signoff[data-beat="1"] .shot__sig path { stroke-dashoffset: 340; }

.signoff[data-beat="0"] .shot__who,
.signoff[data-beat="1"] .shot__who { opacity: 0; }

.signoff[data-beat="0"] .shot__pay,
.signoff[data-beat="1"] .shot__pay,
.signoff[data-beat="2"] .shot__pay {
  opacity: 0;
  transform: translateY(var(--space-xs));
}

@media (min-width: 40rem) {
  .shot {
    gap: var(--space-xl);
    padding: var(--space-xl);
  }
}

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

  .signoff h2 [data-at] { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .signoff h2 [data-at],
  .shot__photo,
  .shot__sig path,
  .shot__who,
  .shot__pay { transition: none; }
}


/* ---------- Closing band: an M for Material, built from schedule bars ---------- */

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

.cta__field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.cta__field canvas {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--color-accent-ink);
}

/* Room under the button for the M on phones; a taller band beside it on wide screens. */
.cta__inner { padding-bottom: calc(var(--space-3xl) + 13rem); }

@media (min-width: 48rem) {
  .cta__inner {
    padding-block: var(--space-4xl);
    min-height: 30rem;
    align-content: center;
  }
}

/* Review refinement: one shared mark, open demo and compact content bands. */
.hero__wordmark { display: inline-flex; align-items: center; gap: 0.65rem; }
.hero__wordmark img { display: block; width: 2rem; height: auto; }
.cd {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.story__stage {
  grid-template-areas: "steps" "head" "num" "chart" "copy";
  padding-block: 3rem;
  row-gap: 1.25rem;
}
.steps {
  flex-direction: row;
  align-items: center;
  align-self: start;
  justify-self: start;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.steps__label {
  border: 0;
  background: none;
  padding: 0.4rem 0;
  font: inherit;
  cursor: pointer;
}
.steps__label[aria-pressed="true"] { font-weight: 600; }
.steps__track { flex: none; width: 3rem; height: 2px; }
.steps__fill { width: 100%; transform: scaleX(var(--t, 0)); transform-origin: left; }
.story__big { font-size: clamp(5rem, 10vw, 9rem); }
.story__bar { height: 6rem; }
.how__inner { padding-block: 4rem; }
.step__bar:has(> span:only-child) { min-height: 3.25rem; align-items: center; padding-block: 0.75rem 0; }
.step__bar > span:only-child { color: var(--color-muted); font-weight: 400; }

.cta__inner {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  align-items: center;
  justify-items: center;
  min-height: 0;
  padding: 14rem var(--page-gutter) 2.5rem;
  gap: 1.25rem;
}
.cta__copy { justify-items: center; text-align: center; }
.cta p {
  max-width: 27ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.cta .btn { justify-self: center; }

@media (min-width: 48rem) {
  .cta__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 3rem;
    min-height: 23rem;
    padding-block: 3rem;
  }
  .cta__copy, .cta .btn { grid-column: 2; }
}
@media (min-width: 60rem) {
  .story__stage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "steps chart" "head chart" "num chart" "copy chart";
    column-gap: 3rem;
    row-gap: 1rem;
    align-items: start;
    padding-block: 3rem;
  }
  .story__chart { align-self: center; }
  .story h2 { max-width: 19ch; }
  .how__inner { padding-block: 4.5rem; }
}


/* Let the schedule flow pass through the open activity area. */
.cd-log, .cd-log__group { background: transparent; }
.cd-log__group {
  position: relative;
  inset: auto;
  padding-block: 1rem;
  justify-content: center;
  width: 100%;
}

/* Center the activity group in the open column beside the phone. */
.cd-log { display: flex; align-items: center; }

/* Keep the heading anchored while four activity rows change height and slide below it. */
.cd-log__group {
  height: 14rem;
  flex: none;
  padding-block: 0;
  justify-content: flex-start;
}
.cd-log__head { flex: none; }

/* Pin the compact comparison at the viewport center during its endpoint holds and transition. */
.story.is-pinned { height: var(--story-height); }
.story.is-pinned .story__stage {
  position: sticky;
  top: var(--story-top);
}

/* One continuous wordmark, with the custom M taking the first letter. */
.hero__wordmark img, .site-footer__mark img { display: block; width: 9.25rem; height: auto; }

/* Bring the activity closer to the phone while keeping its text left aligned. */
@media (min-width: 40rem) {
  .cd-log__group {
    --activity-shift: clamp(0.75rem, 2.65vw, 2rem);
    margin-inline-start: var(--activity-shift);
    width: calc(100% - var(--activity-shift) + 0.75rem);
    text-align: left;
  }
}

/* Autoplay phone: compact contact row and an inline drafting composer. */
.cd__body { grid-template-areas: "phone" "log"; }
.hero .cd-phone {
  height: clamp(34rem, calc(100dvh - 15rem), 39rem);
  grid-template-rows: auto minmax(0, 1fr);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.65),
    0 3px 6px -2px rgba(11,48,32,.12),
    0 22px 44px -18px rgba(11,48,32,.24),
    0 44px 72px -36px rgba(11,48,32,.16);
}
.cd-phone__face { min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
.hero .cd-phone__screen { height: auto; min-height: 0; }
.cd-phone__head { align-items: center; padding-block: .35rem .55rem; }
.cd-phone__back, .cd-phone__video { margin-top: 0; }
.cd-phone__contact { display: flex; justify-content: center; align-items: center; gap: .4rem; }
.cd-phone__avatar { width: 1.85rem; height: 1.85rem; font-size: .75rem; flex: none; }
.cd-phone__name { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; justify-items: start; font-size: .8rem; }
.cd-phone__name span { font-size: .65rem; }
.cd-composer { display: flex; align-items: flex-end; gap: .4rem; padding: .45rem .65rem .75rem; background: var(--color-paper); }
.cd-composer__plus { display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; margin-bottom: .15rem; border-radius: 50%; background: var(--color-paper-3); color: var(--color-muted); font-size: 1.6rem; line-height: 1; }
.cd-composer__field { position: relative; display: flex; align-items: flex-end; flex: 1; min-width: 0; min-height: 2.1rem; padding: .4rem .4rem .4rem .65rem; border: 1px solid var(--color-rule); border-radius: 1.15rem; }
.cd-composer__text { font-size: .8rem; line-height: 1.4; overflow-y: auto; max-height: 5.6em; overflow-wrap: anywhere; scrollbar-width: none; flex: 1; }
.cd-composer__placeholder { color: var(--color-muted); font-size: .8rem; flex: 1; }
.cd-composer__audio { width: 1.15rem; height: 1.15rem; color: var(--color-muted); flex: none; }
.cd-composer__send { display: none; background: var(--color-accent); color: var(--color-paper); border-radius: 50%; width: 1.4rem; height: 1.4rem; margin: -.1rem 0 -.1rem .25rem; flex: none; }
.cd-composer__send svg { width: 100%; height: 100%; }
.cd-composer:not(.is-drafting) .cd-composer__text { display: none; }
.cd-composer.is-drafting .cd-composer__placeholder, .cd-composer.is-drafting .cd-composer__audio { display: none; }
.cd-composer.is-drafting .cd-composer__send { display: block; }
.cd-composer.is-drafting .cd-composer__text::after { content: ""; display: inline-block; height: .9em; width: 1px; margin-left: 1px; background: var(--color-accent); }
.story__source { text-align: right; font-size: .6875rem; margin-top: 1.25rem; }
.site-footer__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; padding-block: var(--space-lg); }
.site-footer__inner .site-footer__mark { grid-column: 1; justify-self: start; margin: 0; }
.site-footer__inner > p:last-child { grid-column: 2; justify-self: end; }
@media (min-width: 40rem) {
  .cd__body { grid-template-areas: "log phone"; grid-template-rows: minmax(0, 1fr); }
}
@media (max-width: 39.99rem) {
  .site-footer__inner { grid-template-columns: 1fr; justify-items: start; }
  .site-footer__inner .site-footer__mark, .site-footer__inner > p:last-child { grid-column: 1; justify-self: start; }
}

/* Leave a reliable gap above the phone and anchor attribution to the section edge. */
.hero__top { margin-bottom: 2rem; }
.story > .story__source {
  position: absolute;
  right: max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter)));
  bottom: 1rem;
  margin: 0;
  max-width: calc(100% - 2 * var(--page-gutter));
}

/* Identify Material as the author, with familiar message receipts and tails. */
.cd-message { flex: none; display: grid; gap: .25rem; max-width: 85%; }
.cd-message--out { align-self: flex-end; }
.cd-message > .cd-sms { max-width: 100%; }
.cd-message__receipt { justify-self: end; padding-right: .15rem; font-size: .625rem; line-height: 1.3; color: var(--color-muted); }
.cd-sms { position: relative; }
.cd-sms::after { content: ""; position: absolute; bottom: 0; width: 11px; height: 14px; background: inherit; }
.cd-sms--out::after { right: -5px; clip-path: path("M0 0 C2 5 3 10 11 14 C6 14 2 13 0 10 Z"); }
.cd-sms--in::after { left: -5px; clip-path: path("M11 0 C9 5 8 10 0 14 C5 14 9 13 11 10 Z"); }
.cd-sms--drafting { display: flex; align-items: center; gap: .4rem; max-width: 100%; padding: .55rem .65rem; background: var(--color-accent-wash); color: var(--color-accent); }
.cd-drafting__label { font-size: .6875rem; line-height: 1.4; white-space: nowrap; }
.cd-drafting__dots { display: flex; align-items: center; gap: 3px; }
.cd-drafting__dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: typing 1s var(--ease-in-out) infinite; }
.cd-drafting__dots i:nth-child(2) { animation-delay: 150ms; }
.cd-drafting__dots i:nth-child(3) { animation-delay: 300ms; }

/* Messages slide behind a frosted, compact contact header. */
.cd-phone__face { position: relative; grid-template-rows: minmax(0, 1fr) auto; }
.cd-phone__head {
  position: absolute; inset: 0 0 auto; z-index: 2;
  min-height: 4rem; grid-template-columns: 2rem minmax(0, 1fr) 2rem; gap: .3rem;
  padding: .45rem .6rem .55rem; border-bottom: 1px solid rgba(255,255,255,.4);
  background: rgba(250,249,246,.68);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
.cd-phone__contact { justify-self: center; padding: .3rem .55rem .3rem .3rem; border: 1px solid rgba(255,255,255,.65); border-radius: 2rem; background: rgba(255,255,255,.55); box-shadow: 0 1px 4px rgba(11,48,32,.06); }
.cd-phone__back, .cd-phone__video { width: 2rem; height: 2rem; box-sizing: border-box; border-radius: 50%; background: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 1px 4px rgba(11,48,32,.06); }
.cd-phone__back { padding: .5rem .65rem; }
.cd-phone__video { padding: .5rem .35rem; }
.cd-thread { padding-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) {
  .cd-drafting__dots i { animation: none; }
}

/* Let the growing judgement share feel like time opening up for the project manager. */
.story__stage { position: relative; isolation: isolate; }
.story__stage::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 0; opacity: var(--gain, 0);
  background: radial-gradient(ellipse at 72% 53%, rgba(139,184,153,.28), rgba(139,184,153,.09) 43%, transparent 73%);
}
#story-title { display: grid; }
#story-title > span { grid-area: 1 / 1; transition: opacity .5s ease, transform .5s ease; }
#story-title > [aria-hidden="true"] { opacity: 0; transform: translateY(.25rem); pointer-events: none; }
#story-title > [aria-hidden="false"], #story-title > span:not([aria-hidden]) { opacity: 1; transform: none; }
.story .seg-judge {
  position: relative; z-index: 1;
  transform: scaleY(calc(1 + .15 * var(--gain, 0)));
  box-shadow: 0 calc(8px * var(--gain, 0)) calc(22px * var(--gain, 0)) rgba(29,90,62,.18);
  background: linear-gradient(120deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 85%, #69a87e));
}
.story .seg-judge b { transform: scale(calc(1 + .2 * var(--gain, 0))); }
@media (prefers-reduced-motion: reduce) {
  #story-title > span { transition: none; transform: none; }
  .story .seg-judge, .story .seg-judge b { transform: none; }
}

/* Narrow chart segments keep their readable percentages in the legend. */
.seg.is-compact b { visibility: hidden; }
.story__legend [data-share] { font-variant-numeric: tabular-nums; }

/* Keep the camera glyph independent of its circular control. */
.cd-phone__video { display: grid; place-items: center; padding: 0; }
.cd-phone__video svg { display: block; width: 1.25rem; height: 1.25rem; }
/* Reveal the whole sign-off card before its photo/signature/invoice sequence. */
.shot.is-reveal-ready { opacity: 0; transform: translateY(18px); transition: opacity 650ms ease-out, transform 650ms ease-out; }
.shot.is-reveal-ready.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .shot.is-reveal-ready { opacity: 1; transform: none; transition: none; }
}

/* Name the core ideas where their practical behavior is already demonstrated. */
.step > p > strong { font-weight: 600; color: var(--color-accent); }

/* Let longer illustrative conversations fit without clipping on narrow screens. */
.step__card .step__visual--talk { height: auto; min-height: 19rem; }

/* Keep the hero header in view briefly, then let the product take over. */
.hero__top {
  position: sticky;
  top: var(--space-md);
  align-self: start;
  z-index: 5;
  opacity: var(--hero-nav-opacity, 1);
}
.hero__top.is-past-hero { visibility: hidden; pointer-events: none; }
.hero__top:focus-within { opacity: 1; visibility: visible; }
.how__note { margin: 1.25rem 0 0; text-align: right; font-size: .6875rem; color: var(--color-muted); }

/* Keep the sticky header legible while the phone passes underneath. */
.hero__top { isolation: isolate; }
.hero__top::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--space-md)) calc(-1 * var(--page-gutter)) -.75rem;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--color-paper-2) 75%, transparent);
}

.hero__top::before { opacity: var(--hero-nav-backdrop, 0); }

/* Reduced motion keeps the hero at its completed, still state. */
.cd.is-held *, .cd.is-held *::before, .cd.is-held *::after { animation-play-state: paused !important; }

/* Updates from Reads fold into the context field. */
.how__steps { position: relative; }
.step__card .step__visual--sift { height: 19rem; gap: 1rem; }
.step__visual--sift .field { flex: 1; align-content: space-between; padding: .5rem 0; row-gap: 0; }
.read-to-dot {
  position: absolute; z-index: 3; pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-rule); background: var(--color-paper);
  color: var(--color-ink); font-size: .8125rem; white-space: nowrap;
  transition: background-color .2s, border-color .2s, left .1s linear, top .1s linear, width .1s linear, height .1s linear, border-radius .1s linear;
}
.read-to-dot span { padding: 0 .75rem; }
.read-to-dot.is-dot { background: var(--color-muted); border-color: var(--color-muted); }
.feed li.is-being-read { border-color: var(--color-accent); }
.step__visual--sift .dot--received { opacity: .85; background: var(--color-accent); transform: scale(1.35); }

/* The scan combines related updates, leaving a small set of recommendations. */
.how.is-playing .is-sifted .dot {
  transition: transform .1s linear, opacity .1s linear, background-color .2s;
  transition-delay: 0s;
}
.sift__scan {
  position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background: var(--color-accent); opacity: 0; pointer-events: none;
  transition: left .1s linear, opacity .25s;
}


/* Recommendations land in the existing team pills. */
.decision-flight { position: absolute; z-index: 4; pointer-events: none; border-radius: 20px; background: var(--color-accent); }
.chans__btn.is-receiving { box-shadow: 0 0 0 3px rgba(25, 89, 57, .12); }
.read-to-dot { transition: background-color .12s, border-color .12s; }
.how.is-playing .is-sifted .dot { transition: opacity .12s, background-color .15s; }
.sift__scan { transition: opacity .2s; }

/* The actual gathered dot leaves its grid slot and stretches in transit. */
.dot.decision-flight { opacity: 1; transform: none; transition: none; }

/* Acts responds to arriving recommendations rather than an independent timer. */
.how.has-causal-messages .chan > :not(.chan__where) {
  animation: none; opacity: 1; transform: none;
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out);
}
.how.has-causal-messages .chan > .is-awaiting {
  opacity: 0; transform: translateY(5px); visibility: hidden; pointer-events: none;
}

/* The arriving bar expands into the message it produces. */
.how.has-causal-messages .row--ai {
  padding: .5rem .65rem; border: 1px solid rgba(25,89,57,.12);
  border-radius: 8px; background: #edf2ec;
}
.how.has-causal-messages .bubble--in { background: #edf2ec; border-color: rgba(25,89,57,.12); border-radius: 8px; }
.how.has-causal-messages .chan > .is-awaiting { transform: none; }

/* A compact completion summary between the hero and the time-allocation story. */
.signoff__inner { padding-block: clamp(2.5rem, 4.5vw, 3.5rem); gap: 2rem; }
.signoff__copy { gap: .875rem; }
.signoff h2 { font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1.02; }
.shot { gap: 1.25rem; padding: 1.5rem; width: 100%; max-width: 35rem; justify-self: end; }
.shot__img { width: clamp(7rem, 32%, 11rem); }
.shot__sig { width: min(100%, 19rem); }
.shot__pay { padding-top: 1rem; }
.shot__amt { font-size: clamp(2rem, 3vw, 2.5rem); }
.shot__stamp { padding: .5rem .875rem; font-size: .875rem; }
@media (max-width: 59.99rem) {
  .shot { justify-self: start; }
}
@media (max-width: 24rem) {
  .shot { padding: 1.125rem; }
  .shot__photo { gap: .75rem; }
  .shot__photo p, .shot__who { font-size: .8125rem; }
}