/* Homies Digital local site, R5 + approved identity (t_58973411). R5 mechanics remain intact.
   Direction: IBM Plex Sans 400/500, Ink / Paper and restrained Citron (brand.css application layer).
   R5 adds a layered hero product visual (parallax), a light matted 4:5 stage with per-domain tint and
   wipe transitions, a dark "peak" band (the pinned sort, signature move), a drawn route and a kinetic
   close. Page layer on top of vendor/scrollcraft.css (engine untouched). Mobile-first.
   Motion: transform / opacity / clip-path only, explicit transition properties, all gated by
   prefers-reduced-motion. Breakpoints: 40rem (frames keep a margin), 60rem (bar links inline, split
   hero, examples become copy column + sticky stage). */

/* Approved identity application t_58973411. R5 layout and motion remain intact. */
@font-face { font-family: "IBM Plex Sans"; src: url("assets/brand/IBMPlexSans-latin.woff2") format("woff2"), url("assets/brand/IBMPlexSans-normal.ttf") format("truetype"); font-weight: 100 700; font-style: normal; font-display: swap; }

:root {
  --paper: #F6F5F0;
  --paper-2: #E9ECE4;
  --sheet: #FCFCF8;
  --ink: #202827;
  --ink-soft: #52605B;
  --ink-faint: #52605B;
  --rule: #D0D8CE;
  --rule-strong: #A6B1A6;
  --accent: #202827;        /* ink emphasis on paper; citron is a fill, never light text */
  --accent-hover: #C9E86D;
  --citron: #D5F27B;
  --mark: #E2EDC8;
  --ok: #1f6a47;
  --ok-bg: #e6f2ea;
  --night: #202827;
  --night-2: #2E3834;
  --night-ink: #F6F5F0;
  --night-soft: #D0D8CE;
  --ember: #D5F27B;

  --sc-canvas: var(--paper);
  --sc-surface: var(--sheet);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--citron);
  --sc-accent-ink: var(--ink);
  --sc-font-display: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --sc-font-text: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --sc-font-mono: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --sc-shadow-color: 160 11% 14%;

  --serif: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --wrap: 78rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --bar-h: 3.5rem;
  --bar-top: .75rem;
  --section: clamp(4.5rem, 8vw, 7.5rem);
  --r-xl: 2rem; --r-lg: 1.5rem; --r-md: 1.125rem; --r-sm: .75rem;
  --mat: 0 1px 2px rgb(60 35 15 / .05), 0 30px 70px -28px rgb(60 35 15 / .30);
  --lift: 0 1px 2px rgb(60 35 15 / .06), 0 14px 34px -16px rgb(60 35 15 / .22);
  --tint: #2f5d50;
}
@media (min-width: 60rem) { :root { --bar-h: 3.75rem; --bar-top: 1rem; } }

html { scroll-behavior: auto; scroll-padding-top: calc(var(--bar-h) + var(--bar-top) + 1rem); }
body { background: var(--paper); color: var(--ink); font-size: 1.0625rem; line-height: 1.6; overflow-x: clip; }
::selection { background: var(--mark); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
img, video { max-width: 100%; display: block; }
em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -0.005em; }
h1 em, h2 em { font-size: 1.06em; line-height: 0; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: 1rem; padding: .7rem 1rem; border-radius: 999px; background: var(--ink); color: var(--sheet);
  font-weight: 500; text-decoration: none; transform: translateY(-200%); transition: transform 160ms var(--ease); }
.skip-link:focus { transform: none; }
main:focus { outline: none; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------------ pills -- */
.pill { display: inline-flex; align-items: center; gap: .7rem; min-height: 3rem; padding: .35rem .4rem .35rem 1.25rem; border-radius: 999px;
  font-weight: 500; font-size: 1rem; letter-spacing: -0.01em; text-decoration: none; border: 1px solid transparent;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms var(--ease), box-shadow 180ms ease, border-color 180ms ease; }
.pill__chip { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-size: 1rem; transition: transform 220ms var(--ease); }
.pill:hover .pill__chip { transform: translateX(3px); }
.pill:active { transform: translateY(1px); }
.pill--accent { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -10px rgb(181 64 28 / .65); }
.pill--accent .pill__chip { background: rgb(0 0 0 / .18); }
.pill--accent:hover { background: var(--accent-hover); }
.bar__cta { min-height: 2.75rem; font-size: .9375rem; padding-left: 1.05rem; box-shadow: none; }
.bar__cta .pill__chip { width: 2rem; height: 2rem; }
.pill--ghost { background: var(--sheet); color: var(--ink); border-color: var(--rule-strong); padding-right: 1.25rem; padding-left: .45rem; }
.pill--ghost:hover { border-color: var(--ink); }
.pill--paper { background: var(--sheet); color: var(--ink); }
.pill--paper .pill__chip { background: var(--accent); color: #fff; }
.pill--paper:hover { background: #fff; box-shadow: 0 12px 28px -12px rgb(0 0 0 / .45); }
.pill__down { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ink); position: relative; flex: none; }
.pill__down::after { content: ""; position: absolute; left: 50%; top: 46%; width: .5rem; height: .5rem; border: solid var(--sheet); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }

/* -------------------------------------------------------------------- bar -- */
.bar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; padding: var(--bar-top) var(--gutter) .6rem; pointer-events: none; }
.bar__inner { pointer-events: auto; max-width: var(--wrap); margin-inline: auto; height: var(--bar-h); display: flex; align-items: center; gap: 1rem;
  padding: 0 .4rem 0 1.15rem; border-radius: 999px; background: rgb(255 253 249 / .92); border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgb(60 35 15 / .05), 0 14px 34px -18px rgb(60 35 15 / .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bar__mark { font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; margin-right: auto; }
.bar__toggle { min-height: 2.75rem; min-width: 2.75rem; padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--paper);
  font: inherit; font-weight: 500; font-size: .9375rem; color: var(--ink); cursor: pointer; }
.bar__nav { display: none; }
.bar__note { margin: 0; font-size: .875rem; color: var(--ink-soft); }
.bar.is-open .bar__nav { display: grid; gap: .75rem; position: absolute; top: calc(var(--bar-h) + .5rem); left: var(--gutter); right: var(--gutter);
  padding: .75rem; border-radius: var(--r-md); background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--mat); }
.bar__nav ul { list-style: none; margin: 0; padding: 0; display: grid; }
.bar__nav li a { display: flex; align-items: center; min-height: 2.875rem; padding: 0 .75rem; border-radius: .6rem; text-decoration: none; font-weight: 500; }
.bar__nav li a:hover { background: var(--paper); }
.bar__nav li a[aria-current="true"] { background: var(--paper-2); }
.bar.is-open .bar__cta { justify-self: start; }
.bar.is-open::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgb(32 40 39 / .38); pointer-events: auto; }
@media (min-width: 60rem) {
  .bar.is-open::before { display: none; }
  .bar__toggle { display: none; }
  .bar__nav, .bar.is-open .bar__nav { display: flex; position: static; align-items: center; gap: .5rem; padding: 0; border: 0; background: none; box-shadow: none; }
  .bar__nav ul { display: flex; gap: .15rem; margin-right: .5rem; }
  .bar__nav li a { min-height: 2.5rem; padding: 0 .85rem; border-radius: 999px; font-size: .9375rem; font-weight: 500; color: var(--ink-soft); }
  .bar__nav li a:hover { color: var(--ink); background: var(--paper); }
  .bar__nav li a[aria-current="true"] { color: var(--ink); background: var(--paper-2); }
  .bar__note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* over the dark peak band the bar stays legible: it is an opaque pill already */

/* ------------------------------------------------------------------- type -- */
.h2 { margin: 0; font-size: clamp(2.1rem, 4.6vw, 3.75rem); line-height: 1.02; font-weight: 500; letter-spacing: -0.045em; text-wrap: balance; }
.head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* ------------------------------------------------------------------- hero -- */
.hero { position: relative; padding: calc(var(--bar-top) + var(--bar-h) + clamp(2rem, 5vw, 4rem)) 0 clamp(2rem, 5vw, 4rem); overflow: clip; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(44rem 30rem at 92% 18%, rgb(243 154 110 / .22), transparent 70%),
    radial-gradient(36rem 24rem at 4% 0%, rgb(255 223 196 / .55), transparent 70%); }
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.hero__title { margin: 0 0 1.25rem; font-size: clamp(2.5rem, 6vw, 5.25rem); line-height: .98; font-weight: 500; letter-spacing: -0.055em; }
.hero__title .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .ln > span { display: block; }
.hero__title em { font-size: 1.1em; letter-spacing: -0.025em; color: var(--accent); line-height: .9; }
.hero__lede { margin: 0 0 1.75rem; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--ink-soft); max-width: 31rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__note { margin: .9rem 0 0; font-size: .875rem; color: var(--ink-soft); }
/* R7 group 3 (comment 4): the headline is authored as two voices. The machine's half ("Routine admin,
   drafted for you.") is set quieter in Plex 400 + supporting ink; the human half gets a breath of space,
   full Ink 500 and the page's one citron highlighter stroke under "signs off." (the same citron that marks
   the sign-off station in the figure). Citron is a fill behind ink text, never text colour. Settled state
   is the default: no-JS and reduced motion show the finished stroke. */
.hero__title .ln:nth-child(-n+2) > span { font-weight: 400; color: var(--ink-soft); letter-spacing: -.02em; }
.hero__title .ln { padding-bottom: .12em; margin-bottom: -.12em; }  /* room for g/y/comma descenders in the mask */
.hero__title .ln:nth-child(3) { margin-top: .24em; }
.hero__title .ln:nth-child(3) > span { color: var(--ink); }
.hero__title em { position: relative; z-index: 0; white-space: nowrap; }
/* band sits on the baseline and covers the lower x-height, measured from the em's content-area top so it
   stays inside the line's overflow mask (descenders of "g" remain above it in z, never clipped) */
.hero__title em::before { content: ""; position: absolute; z-index: -1; left: -.05em; right: -.05em; top: .71em; height: .37em;
  background: var(--citron); border-radius: .05em .12em .08em .04em; transform-origin: 0 50%; }
@media (min-width: 60rem) {
  .hero { min-height: min(100svh, 62rem); display: grid; align-content: center; }
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .hero__title { font-size: clamp(2.5rem, 5.2vw, 4.75rem); }
}

/* R7 group 2: the hero is now a "provenance ledger". One paper sheet, one ink margin rail, three stations
   read top to bottom: the email (quiet, flat, bordered), the draft quote sheet (the single focal surface:
   white and the only shadow) and an empty sign-off line (the only citron, on the rail). Every phrase
   used from the email carries a numbered ref; each draft row cites the same number, so the transformation
   is legible without arrows or a fake button. Grid flow, not absolute stacking: nothing overlaps content
   at any width. Type is clamped rem so it stays readable on phones. */
/* --lane is rem, not cqi: .hv is its own query container, so cqi in its own grid template would resolve
   against an ancestor while the rail/stations (descendants) resolve against .hv, and they'd drift apart. */
.hv { --lane: 2.75rem; --pad: clamp(1rem, 4.4cqi, 2rem); --dot: .75rem;
  position: relative; margin: 0; container-type: inline-size; display: grid;
  grid-template-columns: var(--lane) minmax(0, 1fr); row-gap: 1.125rem; }
@media (min-width: 40rem) { .hv { --lane: 3.75rem; row-gap: 1.375rem; } }
.hv__plate { grid-column: 1 / -1; grid-row: 1 / 4; position: relative; border-radius: clamp(1rem, 4cqi, 1.75rem); background: var(--paper); border: 1px solid rgb(32 40 39 / .1); box-shadow: var(--mat); }
/* the margin rail: starts at the first station's centre; a paper mask under the last (citron) station ends it
   there whatever the sign-off text's height. Parallax is vertical only, so stations always stay on it. */
.hv__plate::before { content: ""; position: absolute; left: calc(var(--lane) / 2 - 1.5px); top: calc(var(--pad) + 1.425rem - 1px); bottom: var(--pad); width: 1px; background: var(--ink); opacity: .7; transform-origin: 50% 0; }
.hv__layer--decide::after { content: ""; position: absolute; left: calc(var(--lane) / -2 - 4px); width: 8px; top: .86rem; bottom: -.75rem; background: var(--paper); }
.hv__layer { grid-column: 2; position: relative; margin-right: var(--pad); }
.hv__layer--mail { grid-row: 1; margin-top: var(--pad); }
.hv__layer--sheet { grid-row: 2; z-index: 1; }
.hv__layer--decide { grid-row: 3; margin-bottom: var(--pad); }
/* station markers sit on the rail: hollow (in), ink (drafted), citron with ink ring (a person) */
.hv-st { position: absolute; top: 1.05rem; left: calc(var(--lane) / -2 - var(--dot) / 2); width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.hv__layer--sheet .hv-st { background: var(--ink); top: 1.35rem; }
.hv-st--you { --dot: 1.125rem; top: .0625rem; background: var(--citron); z-index: 1; }
.hv__in { border-radius: clamp(.75rem, 2.6cqi, 1.125rem); }
.hv-k { margin: 0 0 .55rem; display: flex; align-items: center; gap: .5rem; font-size: .6875rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.hv-mail { padding: clamp(.85rem, 3cqi, 1.15rem) clamp(.9rem, 3.4cqi, 1.35rem); border: 1px solid var(--rule); background: rgb(255 255 255 / .45); }
.hv-mail__from, .hv-mail__body { margin: 0; font-size: clamp(.8125rem, 2.5cqi, .9375rem); line-height: 1.75; color: var(--ink-soft); }
.hv-mail__subj { margin: .1rem 0 .3rem; font-size: clamp(.9375rem, 3cqi, 1.125rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.hv mark { background: var(--mark); color: var(--ink); border-radius: .25rem; padding: .05em .2em; font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hv mark.m-flag { background: #ffd2bd; }
/* numbered refs: the same small ink ring in the email (superscript) and in the sheet's margin column */
.hv-ref { display: inline-grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid var(--ink); background: var(--sheet); color: var(--ink); font-size: .6875rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
sup.hv-ref { width: 1.15rem; height: 1.15rem; margin: 0 0 0 .3em; font-size: .6875rem; vertical-align: .12em; }
/* the focal surface: white, raised, the only shadow in the figure */
.hv-sheet { padding: clamp(.95rem, 3.4cqi, 1.4rem) clamp(1rem, 3.8cqi, 1.6rem) clamp(.6rem, 2cqi, .9rem); background: #fff; border: 1px solid rgb(32 40 39 / .1); box-shadow: 0 2px 4px rgb(32 40 39 / .05), 0 28px 56px -24px rgb(32 40 39 / .38); }
.hv-tag { margin-left: auto; padding: .1rem .6rem; border-radius: 99px; border: 1px solid var(--ink); color: var(--ink); letter-spacing: .08em; }
.hv-sheet dl { margin: 0; }
.hv-sheet dl > div { display: grid; grid-template-columns: minmax(7.25em, 33%) minmax(0, 1fr); align-items: baseline; column-gap: .9rem; padding: .62rem 0; border-top: 1px solid var(--rule); font-size: clamp(.875rem, 2.75cqi, 1.0625rem); line-height: 1.35; }
.hv-sheet dt { display: flex; align-items: center; gap: .6rem; color: var(--ink-soft); font-weight: 400; }
.hv-sheet dd { margin: 0; font-weight: 500; }
.hv-flag { background: rgb(255 210 189 / .55); margin: 0 calc(clamp(1rem, 3.8cqi, 1.6rem) * -.5); padding-left: calc(clamp(1rem, 3.8cqi, 1.6rem) * .5) !important; padding-right: calc(clamp(1rem, 3.8cqi, 1.6rem) * .5) !important; border-radius: .5rem; }
.hv-chip { display: inline-block; margin: .25rem 0 0 .2rem; padding: .05rem .55rem; border-radius: 99px; border: 1.5px solid var(--ink); color: var(--ink); font-size: .75rem; font-weight: 500; white-space: nowrap; vertical-align: .08em; }
/* sign-off: a label, an empty ruled line (nobody has signed; the site never shows a fake approval) and the rule */
.hv-decide { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .9rem; row-gap: .45rem; }
.hv-decide .hv-k { margin: 0; line-height: 1.25rem; }
.hv-decide__line { align-self: end; margin-bottom: .3rem; border-bottom: 1.5px dashed var(--ink); transform-origin: 0 50%; }
.hv-decide__note { grid-column: 1 / -1; font-size: clamp(.8125rem, 2.4cqi, .9375rem); font-weight: 500; color: var(--ink-soft); text-wrap: pretty; }
.hv-mail__body { text-wrap: pretty; }
.hv__cap { grid-column: 1 / -1; grid-row: 4; margin-top: -.25rem; text-align: center; font-size: .8125rem; line-height: 1.45; color: var(--ink-soft); }

/* R8 change 2 (t_f0e8d3fb): the ledger is the object on your desk. The plate is a flat Desk field (paper-2,
   no shadow; a transparent 1px border keeps the rail geometry), the email slip is recessed (Paper + hairline,
   no lift), the quote sheet is the one lifted object (--z-sheet) and the citron station is the single topmost
   mark (--z-sign). From 60rem the Desk bleeds from the figure column to the right edge of the viewport;
   .hero's overflow:clip keeps it from causing horizontal scroll. Parallax rates are untouched. */
.hv__plate { background: var(--paper-2); border-color: transparent; box-shadow: var(--z-desk); }
.hv__layer--decide::after { background: var(--paper-2); }
.hv-mail { background: var(--paper); border-color: rgb(32 40 39 / .1); box-shadow: var(--z-desk); }
.hv-sheet { box-shadow: var(--z-sheet); }
.hv-st--you { box-shadow: var(--z-sign); }
@media (min-width: 60rem) {
  /* the bleed is a pseudo-element, so the figure's own boxes keep their geometry (check_hero overflow) */
  .hv__plate::after { content: ""; position: absolute; top: -1px; bottom: -1px; left: 50%; pointer-events: none;
    right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--wrap) - 2 * var(--gutter)) / 2)) - 1px); background: var(--paper-2); }
  /* the slip sits back (narrower), the sheet comes forward (full width, a touch more air): ~12% larger */
  .hv__layer--mail { margin-right: calc(var(--pad) * 2.5); }
  .hv-sheet { padding: clamp(1.1rem, 3.8cqi, 1.6rem) clamp(1.15rem, 4.2cqi, 1.8rem) clamp(.7rem, 2.2cqi, 1rem); }
}
/* phones: tighten the stack so the draft sheet's label reaches the first screen (wording unchanged) */
@media (max-width: 39.99rem) {
  .hero { padding-top: calc(var(--bar-top) + var(--bar-h) + 1.25rem); }
  .hero__grid { gap: 1.25rem; }
  .hero__lede { margin-bottom: 1.25rem; }
  .hero__actions { gap: .5rem; }
  .hero__note { margin-top: .6rem; line-height: 1.45; }
  .hv { row-gap: .875rem; }
  .hv-mail__from, .hv-mail__body { line-height: 1.6; }
}

/* load choreography (once): title lines rise from their masks, then the three layers land in order,
   then the flag chip and the decision. Content is visible without it. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title .ln > span { animation: lineUp 900ms var(--ease) both; }
  .js .hero__title .ln:nth-child(2) > span { animation-delay: 90ms; }
  .js .hero__title .ln:nth-child(3) > span { animation-delay: 300ms; }
  /* group 3: once the human line has landed, the citron stroke is drawn under "signs off." (once, ~0.6s) */
  .js .hero__title em::before { animation: lineDraw 620ms cubic-bezier(.65, 0, .35, 1) both; animation-delay: 820ms; }
  .js .hero__lede, .js .hero__actions, .js .hero__note { animation: fadeUp 700ms var(--ease) both; animation-delay: 380ms; }
  /* R7 group 2 ledger, once on load (~2.6s): email lands, its four phrases get numbered in reading order,
     the rail draws down, the sheet rises and each row fills citing the same number, the flagged row's
     "A person checks" lands, then the empty sign-off line draws and the citron station appears. */
  .js .hv__plate { animation: plateIn 900ms var(--ease) both; animation-delay: 100ms; }
  .js .hv__layer--mail .hv__in, .js .hv__layer--mail .hv-st { animation: fadeUp 700ms var(--ease) both; animation-delay: 300ms; }
  .js .hv-mail sup.hv-ref { animation: pop 450ms var(--ease) both; }
  .js .hv-mail__from sup.hv-ref { animation-delay: 650ms; }
  .js .hv-mail__body mark:nth-of-type(1) sup.hv-ref { animation-delay: 760ms; }
  .js .hv-mail__body mark:nth-of-type(2) sup.hv-ref { animation-delay: 870ms; }
  .js .hv-mail__body mark:nth-of-type(3) sup.hv-ref { animation-delay: 980ms; }
  .js .hv__plate::before { animation: railDraw 1500ms cubic-bezier(.65, 0, .35, 1) both; animation-delay: 700ms; }
  .js .hv__layer--sheet .hv__in { animation: cardIn 850ms var(--ease) both; animation-delay: 1050ms; }
  .js .hv__layer--sheet .hv-st { animation: pop 450ms var(--ease) both; animation-delay: 1150ms; }
  .js .hv-sheet dl > div { animation: fadeUp 450ms var(--ease) both; }
  .js .hv-sheet dl > div > .hv-ref { animation: pop 450ms var(--ease) both; }
  .js .hv-sheet dl > div:nth-child(1), .js .hv-sheet dl > div:nth-child(1) > .hv-ref { animation-delay: 1300ms; }
  .js .hv-sheet dl > div:nth-child(2), .js .hv-sheet dl > div:nth-child(2) > .hv-ref { animation-delay: 1420ms; }
  .js .hv-sheet dl > div:nth-child(3), .js .hv-sheet dl > div:nth-child(3) > .hv-ref { animation-delay: 1540ms; }
  .js .hv-sheet dl > div:nth-child(4), .js .hv-sheet dl > div:nth-child(4) > .hv-ref { animation-delay: 1660ms; }
  .js .hv-chip { animation: pop 550ms var(--ease) both; animation-delay: 1950ms; }
  /* R9: after the load choreography the ledger keeps working, quietly: a 2s-per-field scan rings each
     phrase in the email and the row it filled (1 -> 4), four rounds (~32s), then it rests. It pauses on
     hover/focus, and reduced motion never gets it. Decorative (the figure is aria-hidden-plate + static text). */
  .hv-sheet dl > div { position: relative; }
  .hv-sheet dl > div::after { content: ""; position: absolute; inset: 0 -.35rem; border-radius: .5rem; pointer-events: none; }
  .js .hv-mail mark, .js .hv-sheet dl > div::after { animation: hvScan 8s ease-in-out 4 both; }
  .js .hv-mail__from mark, .js .hv-sheet dl > div:nth-child(1)::after { animation-delay: 3s; }
  .js .hv-mail__body mark:nth-of-type(1), .js .hv-sheet dl > div:nth-child(2)::after { animation-delay: 5s; }
  .js .hv-mail__body mark:nth-of-type(2), .js .hv-sheet dl > div:nth-child(3)::after { animation-delay: 7s; }
  .js .hv-mail__body mark:nth-of-type(3), .js .hv-sheet dl > div:nth-child(4)::after { animation-delay: 9s; }
  .hv:hover mark, .hv:hover .hv-sheet dl > div::after, .hv:focus-within mark, .hv:focus-within .hv-sheet dl > div::after { animation-play-state: paused; }
  @keyframes hvScan { 0%, 28%, 100% { box-shadow: 0 0 0 1.5px transparent; } 6%, 22% { box-shadow: 0 0 0 1.5px var(--ink); } }
  .js .hv__layer--decide .hv-k, .js .hv-decide__note { animation: fadeUp 600ms var(--ease) both; animation-delay: 2100ms; }
  .js .hv-decide__line { animation: lineDraw 700ms var(--ease) both; animation-delay: 2200ms; }
  .js .hv-st--you { animation: pop 600ms var(--ease) both; animation-delay: 2450ms; }
}
@keyframes railDraw { from { transform: scaleY(0); } to { transform: none; } }
@keyframes lineDraw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes plateIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- services -- */
.services { padding-top: clamp(3rem, 6vw, 5.5rem); }
.services__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
/* R7 group 1: the pattern as one composed strip, not a pill row. Three drawn objects on a single track:
   a message, a draft sheet with one flagged row, and the person's check (the only citron on the strip).
   Labels are always visible; under JS + motion the track draws once on entry and each object lands in
   turn (scrollcraft adds .sc-in). Static / reduced / no-JS show the finished strip. */
.wf { --wf-c: 2.125rem; list-style: none; margin: .5rem 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1rem; max-width: 36rem; }
.wf[data-sc-in] { opacity: 1; transform: none; }
/* the track runs from the first object's centre to the last one's, behind the (opaque) objects */
.wf::before, .wf::after { content: ""; position: absolute; left: var(--wf-c); right: calc((100% - 2rem) / 3 - 1.75rem); top: calc(1.75rem - 1px); height: 2px; border-radius: 2px; background: var(--rule); }
.wf::after { background: var(--ink); transform-origin: left center; }
.wf__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.wf__art { display: grid; place-items: center; width: 4.25rem; height: 3.5rem; border-radius: .9rem; background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 1px 2px rgb(32 40 39 / .06), 0 10px 22px -14px rgb(32 40 39 / .35); }
.wf__label { max-width: 9.5rem; font-size: .875rem; font-weight: 500; line-height: 1.3; color: var(--ink-soft); text-wrap: balance; }
.wf__step--you .wf__label { color: var(--ink); }
.wf-msg { position: relative; display: grid; align-content: center; gap: .22rem; width: 2.6rem; height: 1.85rem; padding: 0 .4rem; border-radius: .35rem; border: 1.5px solid var(--ink-soft); background: #fff; }
.wf-msg::before { content: ""; position: absolute; top: -.3rem; right: -.3rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--sheet); }
.wf-msg i { display: block; height: 2px; border-radius: 2px; background: var(--rule-strong); }
.wf-msg i:nth-child(2) { width: 78%; } .wf-msg i:nth-child(3) { width: 52%; }
.wf-sheet { display: grid; align-content: start; gap: .28rem; width: 2.2rem; height: 2.55rem; padding: .4rem .32rem; border-radius: .3rem; border: 1.5px solid var(--ink-soft); background: #fff; }
.wf-sheet i { display: block; height: 3px; border-radius: 2px; background: var(--rule-strong); transform-origin: left center; }
.wf-sheet i:nth-child(2) { width: 70%; }
.wf-sheet .wf-flag { height: .5rem; background: var(--citron); box-shadow: inset 0 0 0 1px var(--ink); }
.wf__step--you .wf__art { width: 3.5rem; border-radius: 999px; background: var(--citron); border: 1.5px solid var(--ink); }
.wf-check svg { display: block; width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wf-check path { stroke-dasharray: 16; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .wf::after { transition: transform 1100ms var(--ease-io) 150ms; }
  .js .wf:not(.sc-in)::after { transform: scaleX(0); }
  .js .wf .wf__art { transition: opacity 420ms ease, transform 620ms var(--ease); }
  .js .wf .wf__step--draft .wf__art { transition-delay: 520ms; }
  .js .wf .wf__step--you .wf__art { transition-delay: 1080ms; }
  .js .wf:not(.sc-in) .wf__art { opacity: 0; transform: translateY(.5rem) scale(.9); }
  .js .wf .wf-sheet i { transition: transform 320ms var(--ease); }
  .js .wf .wf-sheet i:nth-child(1) { transition-delay: 700ms; } .js .wf .wf-sheet i:nth-child(2) { transition-delay: 780ms; }
  .js .wf .wf-sheet i:nth-child(3) { transition-delay: 900ms; }
  .js .wf:not(.sc-in) .wf-sheet i { transform: scaleX(0); }
  .js .wf .wf-check path { transition: stroke-dashoffset 420ms var(--ease) 1380ms; }
  .js .wf:not(.sc-in) .wf-check path { stroke-dashoffset: 16; }
}
@media (max-width: 29.99rem) {
  .wf { --wf-c: 1.875rem; column-gap: .75rem; }
  .wf__art { width: 3.75rem; height: 3.25rem; }
  .wf::before, .wf::after { top: calc(1.625rem - 1px); right: calc((100% - 1.5rem) / 3 - 1.625rem); }
  .wf__step--you .wf__art { width: 3.25rem; }
  .wf__label { font-size: .8125rem; }
}
.disclose { max-width: 40rem; }
.disclose__line { margin: 0; font-size: .9375rem; color: var(--ink-soft); }
.disclose__more { margin-top: .35rem; font-size: .9375rem; color: var(--ink-soft); }
.disclose__more summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; cursor: pointer; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
.disclose__more summary::-webkit-details-marker { display: none; }
.disclose__more summary::after { content: "+"; font-weight: 500; color: var(--accent); }
.disclose__more[open] summary::after { content: "–"; }
.disclose__more ul { margin: .25rem 0 0; padding: 0 0 0 1.1rem; display: grid; gap: .35rem; }
.index { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.index a { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: 0 1rem 0 .8rem; border-radius: 999px;
  background: var(--sheet); border: 1px solid var(--rule); text-decoration: none; font-weight: 500; font-size: .9375rem;
  transition: border-color 180ms ease, background-color 180ms ease; }
.index a span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--rule-strong); transition: transform 220ms var(--ease), background-color 220ms ease; }
.index li:nth-child(1) a { --tint: #2f5d50; } .index li:nth-child(2) a { --tint: #2d4f7a; } .index li:nth-child(3) a { --tint: #6b3d64; }
.index li:nth-child(4) a { --tint: #8a4b1d; } .index li:nth-child(5) a { --tint: #7a5418; }
.index a:hover { border-color: var(--ink); }
.index a:hover span, .index a[aria-current="true"] span { background: var(--tint); transform: scale(1.35); }
.index a[aria-current="true"] { border-color: var(--ink); }
@media (min-width: 60rem) {
  .services__head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(3rem, 5vw, 5rem); row-gap: 1.25rem; align-items: end; }
  .services__head .h2 { grid-column: 1; }
  .wf { grid-column: 1; }
  .disclose { grid-column: 2; grid-row: 1 / 3; align-self: end; }
  .index { grid-column: 1 / -1; padding-top: 1.25rem; margin-top: .5rem; border-top: 1px solid var(--rule); }
}

/* domain tints (also used in the clips' own UI) */
.feature[data-demo="leads"] { --tint: #2f5d50; } .feature[data-demo="support"] { --tint: #2d4f7a; } .feature[data-demo="voice"] { --tint: #6b3d64; }
.feature[data-demo="documents"] { --tint: #8a4b1d; } .feature[data-demo="onboarding"] { --tint: #7a5418; }

.features { display: grid; gap: clamp(3.5rem, 10vw, 5rem); }
.feature { display: flex; flex-direction: column; gap: 1rem; }
/* phones: title, then the loop, then one line and the flow */
.feature__copy { display: contents; }
.feature__in { display: contents; }  /* R8: a box only on the desktop stage (sticky chapter block) */
.feature__k { order: 1; } .feature__title { order: 2; } .demo { order: 3; } .feature__lede { order: 4; } .flow { order: 5; }
.feature__k { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
/* R7 group 1: the jump-link targets (#leads … #onboarding) live on this kicker, because .feature__copy is
   display:contents on narrow screens and has no box to scroll to. html scroll-padding-top clears the bar. */
.feature__n { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--tint); color: #fff; font-size: .8125rem; letter-spacing: 0; }
.feature__title { margin: -.4rem 0 0; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.05; font-weight: 500; letter-spacing: -0.04em; text-wrap: balance; transition: color 300ms ease; }
.feature__lede { margin: 0; color: var(--ink-soft); max-width: 32rem; }
.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.flow li { position: relative; display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .85rem; border-radius: 999px; background: var(--sheet); border: 1px solid var(--rule);
  font-size: .875rem; font-weight: 500; color: var(--ink-soft); transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease; }
.flow li + li { margin-left: .9rem; }
.flow li + li::before { content: ""; position: absolute; left: -1.05rem; top: 50%; width: .75rem; height: 1px; background: var(--rule-strong); }
.flow .flow__you { border-color: var(--accent); color: var(--accent); }
/* the chip for the beat the loop is showing right now (set by site.js from the clip's own timing) */
.flow li.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.flow li.flow__you.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* the stage: a white mat holding the 4:5 recording, nested radii, no caption strip. The figure keeps its
   accessible name (the visually hidden figcaption); the footage itself carries the 'Sample replay' label.
   The one control is a round Pause/Play button pinned to the frame's bottom-right corner, the corner all
   five recordings keep clear of text and decisions (evidence/r7-comments/group-4/check_demo_control.py). */
.demo { margin: 0; --e: 1; }
.demo__mat { position: relative; padding: .6rem; border-radius: var(--r-xl); background: #fff; border: 1px solid rgb(27 22 17 / .07); box-shadow: var(--mat);
  background-image: radial-gradient(120% 60% at 50% 0%, color-mix(in oklab, var(--tint) 10%, transparent), transparent 70%); }
.demo__screen { position: relative; overflow: hidden; border-radius: calc(var(--r-xl) - .6rem); background: var(--paper); aspect-ratio: 3 / 4; }
.demo__video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--paper); }
.demo__cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.demo__toggle { position: absolute; right: .9rem; bottom: .9rem; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
  border-radius: 50%; cursor: pointer; border: 2px solid #fff; background: var(--ink); color: #fff; font: inherit;
  box-shadow: 0 1px 2px rgb(32 40 39 / .18), 0 4px 12px rgb(32 40 39 / .16); transition: background-color 180ms ease, transform 180ms ease; }
.demo__toggle:hover { background: #34403e; }
.demo__toggle:active { transform: scale(.96); }
.demo__toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px #fff, 0 4px 12px rgb(32 40 39 / .16); }
.demo__tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.demo__icon { position: relative; width: 1.25rem; height: 1.25rem; }
.demo__icon::before, .demo__icon::after { content: ""; position: absolute; top: 50%; width: .2rem; height: .7rem; border-radius: 1px; background: #fff; transform: translateY(-50%); }
.demo__icon::before { left: calc(50% - .3rem); } .demo__icon::after { left: calc(50% + .1rem); }
.demo[data-state="paused"] .demo__icon::before, .demo[data-state="blocked"] .demo__icon::before, .demo[data-state="idle"] .demo__icon::before, .demo[data-state="reduced"] .demo__icon::before { display: none; }
.demo[data-state="paused"] .demo__icon::after, .demo[data-state="blocked"] .demo__icon::after, .demo[data-state="idle"] .demo__icon::after, .demo[data-state="reduced"] .demo__icon::after {
  left: 54%; width: 0; height: 0; border-radius: 0; background: none; transform: translate(-50%, -50%);
  border-style: solid; border-width: .4rem 0 .4rem .62rem; border-color: transparent transparent transparent #fff; }
html:not(.js) .demo__toggle { display: none; }
@media (max-width: 39.99rem) {
  .demo__mat { padding: .45rem; border-radius: var(--r-lg); }
  .demo__screen { border-radius: calc(var(--r-lg) - .45rem); }
  .demo__toggle { right: .5rem; bottom: .5rem; width: 2.75rem; height: 2.75rem; }
}
/* scroll-linked arrival (site.js writes --e, 0..1, as the frame rises into view): the mat lifts and the
   recording opens from a rounded inset. Phones and desktop alike; off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .demo__mat { transform: translate3d(0, calc((1 - var(--e)) * 3rem), 0) scale(calc(.94 + var(--e) * .06)); transform-origin: 50% 100%; }
  .js .demo__screen { clip-path: inset(calc((1 - var(--e)) * 7%) calc((1 - var(--e)) * 7%) calc((1 - var(--e)) * 7%) calc((1 - var(--e)) * 7%) round calc(var(--r-xl) - .6rem)); }
}

@media (min-width: 60rem) {
  /* no JS: a plain two-column row per example */
  .feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; align-items: center; }
  .feature__copy { display: flex; flex-direction: column; gap: 1.1rem; }
  .feature__title { margin: 0; }
  .demo { max-width: 30rem; justify-self: end; width: 100%; }
  /* JS: one sticky stage */
  html.js .features { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 5vw, 5rem); row-gap: 0; align-items: start; }
  html.js .feature { display: contents; }
  html.js .feature__copy { grid-column: 1; min-height: max(24rem, 80vh); justify-content: center; padding: 2rem 0; }
  /* the first copy block is as tall as the others, so the stage is already sticky (fully in view) when
     its loop starts; its text sits at the top so the gap under the index stays small */
  html.js .feature:nth-child(1) .feature__copy { justify-content: flex-start; padding-top: 1rem; }
  /* last block top-aligned too, so a jump to #onboarding lands inside the sticky range */
  html.js .feature:nth-child(5) .feature__copy { justify-content: flex-start; }
  html.js .feature:nth-child(5) .feature__copy { min-height: max(24rem, calc(100vh - var(--bar-h) - var(--bar-top) - 2rem)); }
  html.js .feature:nth-child(1) .feature__copy { grid-row: 1; } html.js .feature:nth-child(2) .feature__copy { grid-row: 2; }
  html.js .feature:nth-child(3) .feature__copy { grid-row: 3; } html.js .feature:nth-child(4) .feature__copy { grid-row: 4; }
  html.js .feature:nth-child(5) .feature__copy { grid-row: 5; }
  html.js .demo { grid-column: 2; grid-row: 1 / 6; align-self: start; position: sticky; top: calc(var(--bar-h) + var(--bar-top) + 1.25rem);
    width: min(100%, calc((100vh - var(--bar-h) - var(--bar-top) - 7rem) * .75)); max-width: none; justify-self: center; }
  /* a change of example is a wipe: the incoming loop opens upward over the outgoing one, which then fades */
  /* the outgoing loop stays fully visible underneath until the wipe has covered it, then fades and resets */
  html.js .demo:not(.is-active) { opacity: 0; clip-path: inset(100% 0 0 0 round var(--r-xl)); pointer-events: none; z-index: 0;
    transition: opacity 220ms ease 760ms, clip-path 0s linear 980ms; }
  html.js .demo.is-active, html.js .demo:focus-within { opacity: 1; clip-path: inset(0 0 -60px 0 round var(--r-xl)); z-index: 1;
    transition: clip-path 760ms var(--ease-io), opacity 0s; }
  html.js .demo:focus-within { z-index: 2; }
  /* the copy that owns the stage is marked; the others recede (still AA) */
  html.js .feature__copy:not(.is-active) .feature__title { color: var(--ink-faint); }
  html.js .feature__copy:not(.is-active) .feature__n { background: var(--rule-strong); color: var(--ink); }
  html.js .feature__copy:not(.is-active) .flow li { opacity: .7; }
}
@media (min-width: 60rem) and (max-height: 40rem) { html.js .demo { width: min(100%, 22rem); } }

/* R8 change 3 (t_f0e8d3fb): no half-empty frames. Each chapter's copy is a fixed-height block, sticky and
   vertically centred against the sticky film, in its own grid row (row = block + --travel). It holds beside
   its film for --travel, then the next chapter pushes up directly beneath it (no blank band). Because every
   block only sticks inside its own row, its box (and the #id kicker inside it) always sits at a distinct
   scroll position: anchor jumps, the existing active-example logic and centring keep working unchanged.
   A small 1-5 rail (decorative; the index above stays the accessible nav) marks the active chapter from
   --i, which site.js writes on the existing .is-active change. Phones/600 are untouched (inline films). */
@media (min-width: 60rem) {
  html.js .features { --cop-h: 23rem; --top0: calc(var(--bar-h) + var(--bar-top) + 1.25rem);
    --stick: max(var(--top0), calc(50vh - var(--cop-h) / 2)); --lead: calc(var(--stick) - var(--top0)); --travel: max(14rem, 34vh);
    grid-template-rows: calc(var(--lead) + var(--cop-h) + var(--travel)) repeat(3, calc(var(--cop-h) + var(--travel))) calc(var(--cop-h) + var(--travel) + var(--lead)); }
  /* the copy cell fills its row (the sticky block's containing box); .feature__in is the block that sticks */
  html.js .feature:nth-child(n) .feature__copy { align-self: stretch; min-height: 0; padding: 0; justify-content: flex-start; }
  html.js .feature__in { position: sticky; top: var(--stick); height: var(--cop-h); display: flex; flex-direction: column; justify-content: center;
    gap: 1.75rem; padding-left: 3.25rem; }
  html.js .feature__in .feature__k { margin-bottom: .25rem; }
  html.js .feature__in .feature__lede { font-size: 1.1875rem; line-height: 1.55; max-width: 30rem; }
  html.js .feature__in .flow { margin-top: .75rem; }
  html.js .feature:nth-child(1) .feature__in { margin-top: var(--lead); }
  /* the outgoing / incoming chapter recedes while the active one owns the film (state swap, ~200ms) */
  html.js .feature__in > * { transition: opacity 220ms ease, transform 220ms var(--ease); }
  /* inactive chapters recede by the existing colour shift only (title -> ink-soft, grey number, chips .7):
     no opacity dimming, so neighbouring copy stays AA (smoke_check reduced-motion visibility check) */
  html.js .feature__copy:not(.is-active) .feature__in > .feature__title { transform: translateY(.75rem); }
  /* rail: five numbers on a hairline, an Ink tick beside the active one */
  html.js .features::before { content: "1\A 2\A 3\A 4\A 5" / ""; white-space: pre; grid-column: 1; grid-row: 1 / 6; justify-self: start; align-self: start;
    position: sticky; z-index: 1; pointer-events: none; top: calc(var(--stick) + (var(--cop-h) - 10rem) / 2);
    margin: calc(var(--lead) + (var(--cop-h) - 10rem) / 2) 0 calc(var(--lead) + (var(--cop-h) - 10rem) / 2);
    width: 1.75rem; padding-left: .7rem; font-size: .8125rem; line-height: 2rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-soft);
    background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 calc(var(--i, 0) * 2rem + .45rem) / 3px 1.1rem,
      linear-gradient(var(--rule-strong), var(--rule-strong)) no-repeat 1px 0 / 1px 100%;
    transition: background-position 220ms var(--ease); }
}

/* R8: the mat is Desk (paper-2, a 1px Ink-10% hairline, no lift); the film sits on it as the drafted
   object, so the contact shadow belongs to the screen. A plate behind the screen carries it, because the
   screen's own clip-path (arrival motion) would clip a shadow drawn on the screen itself. */
.demo__mat { background: var(--paper-2); background-image: none; border-color: rgb(32 40 39 / .1); box-shadow: var(--z-desk); }
.demo__mat::before { content: ""; position: absolute; inset: .6rem; border-radius: calc(var(--r-xl) - .6rem); box-shadow: var(--z-sheet); pointer-events: none; }
@media (max-width: 39.99rem) { .demo__mat::before { inset: .45rem; border-radius: calc(var(--r-lg) - .45rem); } }
.demo__toggle { box-shadow: var(--z-sign); }
/* the pattern strip uses the same three levels: in = desk, drafted = sheet, a person = sign */
.wf__art { box-shadow: var(--z-desk); background: var(--paper); border-color: rgb(32 40 39 / .12); }
.wf__step--draft .wf__art { background: var(--sheet); box-shadow: var(--z-sheet); }
.wf__step--you .wf__art { box-shadow: var(--z-sign); }
.services__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.services__status.is-visible { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  margin: 1.5rem 0 0; padding: .75rem 1rem; border-radius: var(--r-sm); background: var(--sheet); border: 1px solid var(--rule); font-size: .9375rem; color: var(--ink-soft); max-width: 44rem; }

/* ---------------------------------------------------------- the peak (dark) -- */
/* the band opens out of the page as it arrives (site.js writes --b 0..1): an inset rounded panel that
   widens to full bleed, then folds back in as it leaves. A different entry from the wipe and the rise. */
.peak { --b: 1; --bo: 1; margin-top: var(--section); background: var(--night); color: var(--night-ink); position: relative;
  clip-path: inset(0 calc((1 - var(--b)) * 4vw) 0 calc((1 - var(--b)) * 4vw) round calc((1 - var(--b) * var(--bo)) * 3rem + 1.5rem)); }
.peak::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60rem 30rem at 85% 0%, rgb(232 87 47 / .16), transparent 70%), radial-gradient(40rem 30rem at 0% 100%, rgb(243 154 110 / .08), transparent 70%); }
.peak__head { position: relative; padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: 1rem; }
.peak .h2 em { color: var(--ember); }
.peak__lede { margin: .9rem 0 0; color: var(--night-soft); max-width: 34rem; }
.peak__act { position: relative; }
.peak__stage { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto;
  padding: calc(var(--bar-h) + var(--bar-top) + 1rem) var(--gutter) 2rem; }
.peak__steps { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; counter-reset: step; font-size: .875rem; font-weight: 500; color: var(--night-soft); }
.peak__steps li { counter-increment: step; flex: 1 1 0; min-width: 0; padding-top: .6rem; border-top: 3px solid rgb(246 240 231 / .26); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color 300ms var(--ease), color 300ms var(--ease); }
.peak__steps li::before { content: counter(step) "  "; color: var(--night-soft); }
.peak__steps li.is-done { border-top-color: rgb(243 154 110 / .55); color: var(--night-ink); }
.peak__steps li.is-done::before { content: "✓  "; color: var(--ember); }
.peak__steps li.is-active { border-top-color: var(--ember); color: var(--night-ink); }
.peak__label { margin: 0; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--night-soft); }
.peak__desk { display: grid; gap: 1rem; }
.mail, .sheet { color: var(--ink); background: var(--sheet); border-radius: var(--r-md); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7); }
.mail { padding: 1.25rem 1.4rem; font-size: .9rem; line-height: 1.55; background: #f3eee6; }
.mail__from { margin: 0; font-size: .8125rem; font-weight: 500; color: var(--ink-soft); }
.mail__subject { margin: .2rem 0 .6rem; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; }
.mail__body p { margin: 0 0 .5rem; color: #3d352c; }
.mail [data-src] { border-radius: 3px; transition: background-color 240ms ease, color 240ms ease, box-shadow 240ms ease; }
.mail [data-src].is-lit { background: var(--mark); color: var(--ink); box-shadow: 0 0 0 2px var(--mark); }
.mail [data-src].is-taken { background: rgb(31 106 71 / .08); color: #3d352c; box-shadow: inset 0 -2px 0 rgb(31 106 71 / .45); }
.sheet { padding: 1.25rem 1.4rem; font-size: .9rem; line-height: 1.4; }
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ink); }
.sheet__title { margin: 0; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; }
.sheet__status { margin: 0; font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.sheet__status.is-checked { color: var(--ok); }
.sheet__rows { margin: 0; }
.sheet__rows .row { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: .6rem .5rem; margin: 0 -.5rem; border-bottom: 1px solid var(--rule); align-items: start; border-radius: 6px; }
.sheet__rows dt { font-weight: 500; color: var(--ink-soft); }
.sheet__rows dd { margin: 0; position: relative; min-height: 1.4em; }
.sheet__rows dd > span[data-dst] { display: inline-block; font-weight: 500; will-change: transform, opacity; border-radius: 4px; }
/* a value in flight is lifted: ink chip, accent ring, deeper shadow; its empty row shows a dashed slot */
.sheet__rows dd > span[data-dst].is-flying { background: var(--ink); color: #fff; box-shadow: 0 16px 30px -10px rgb(0 0 0 / .6), 0 0 0 2px var(--ember); padding: .1rem .5rem; margin: -.1rem -.5rem; border-radius: 999px; position: relative; z-index: 5; }
.peak.is-live .sheet__rows dd { background: repeating-linear-gradient(90deg, var(--rule-strong) 0 6px, transparent 6px 11px) left bottom / 70% 1.5px no-repeat; }
.peak.is-live .sheet__rows dd.is-filled { background: none; }
.flag { display: inline-block; margin-left: .5rem; padding: .05rem .6rem; border-radius: 999px; border: 1.5px solid var(--accent); color: var(--accent); background: var(--sheet); font-size: .75rem; font-weight: 500; white-space: nowrap; vertical-align: .1em; }
.peak.is-live .flag { opacity: 0; transform: scale(.7); transition: opacity 260ms var(--ease), transform 420ms var(--ease); }
.peak.is-live .row--flag.is-flagged .flag { opacity: 1; transform: none; }
.row--flag.is-flagged, .peak.is-static .row--flag { background: linear-gradient(90deg, rgb(255 210 189 / .6), transparent 85%); }
.signoff { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; padding: .25rem 1rem; border-radius: var(--r-sm); border: 1.5px dashed var(--rule-strong);
  transition: border-color 260ms ease, background-color 260ms ease, opacity 260ms ease; }
.signoff input { width: 1.5rem; height: 1.5rem; flex: none; accent-color: var(--ok); cursor: pointer; margin: 0; }
.signoff label { cursor: pointer; font-weight: 500; min-height: 2.75rem; display: flex; align-items: center; }
.signoff input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.peak.is-live .signoff { opacity: .55; }
.peak.is-live .signoff.is-awaiting { opacity: 1; border: 2px solid var(--accent); background: #fff1e8; box-shadow: 0 0 0 4px rgb(181 64 28 / .14); }
.signoff.is-done { opacity: 1 !important; border-style: solid; border-color: var(--ok) !important; background: var(--ok-bg) !important; }
.peak.is-live .is-pending { opacity: 0; }
.peak.is-static .peak__stage { padding-top: 1.5rem; padding-bottom: clamp(3rem, 6vw, 5rem); }
.peak.is-static .peak__steps li { border-top-color: rgb(246 240 231 / .5); }
.peak.is-static .peak__steps li:last-child { border-top-color: var(--ember); color: var(--night-ink); }
@media (max-width: 47.99rem) {
  .peak__stage { justify-content: flex-start; padding: calc(var(--bar-h) + var(--bar-top) + .5rem) var(--gutter) .75rem; gap: .6rem; }
  .peak__steps li { flex: 0 0 1.75rem; font-size: 0; }
  .peak__steps li::before { font-size: .8125rem; }
  .peak__steps li.is-active { flex: 1 1 auto; font-size: .8125rem; }
  .peak__desk { gap: .5rem; }
  .mail { padding: .75rem .9rem; font-size: .78rem; line-height: 1.45; }
  .mail__subject { font-size: .95rem; margin-bottom: .3rem; }
  .mail__body p { margin-bottom: .3rem; }
  .sheet { padding: .75rem .9rem; font-size: .8rem; }
  .sheet__title { font-size: .95rem; }
  .sheet__rows .row { padding: .32rem .5rem; grid-template-columns: 4.6rem 1fr; gap: .6rem; }
  .signoff { margin-top: .5rem; padding: 0 .75rem; }
  .signoff label { font-size: .875rem; }
  .flag { font-size: .6875rem; }
}
@media (min-width: 48rem) { .peak__desk { grid-template-columns: 1fr 1.08fr; gap: 2rem; align-items: start; } }

/* ------------------------------------------------------------------ pilot -- */
.pilot { padding-top: var(--section); }
.route { position: relative; }
.route__line { position: absolute; left: 0; right: 0; top: .6rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), #e8572f 60%, rgb(232 87 47 / .15)); }
.stops { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.stop { position: relative; display: flex; flex-direction: column; padding: 2.4rem 1.5rem 1.5rem; }
.stop__dot { position: absolute; left: 1.5rem; top: 0; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); }
.stop:last-child .stop__dot { background: var(--accent); }
.stop h3 { margin: 0 0 .5rem; font-size: 1.5rem; letter-spacing: -0.03em; }
.stop > p { margin: 0 0 .9rem; color: var(--ink-soft); max-width: 22rem; }
.stop__you { margin-top: auto !important; padding-top: .9rem; border-top: 1px solid var(--rule); color: var(--ink) !important; font-weight: 500; }
.stop__you b { color: var(--accent); }
.pilot__note { margin: 1.5rem 0 0; font-size: .9375rem; color: var(--ink-soft); max-width: 44rem; }
@media (max-width: 59.99rem) {
  .route__line { display: none; }
  .stops { border-left: 2px solid var(--accent); margin-left: .6rem; }
  .stop { padding: 0 0 1.25rem 1.75rem; }
  .stop__dot { left: -.7rem; top: .35rem; }
}
@media (min-width: 60rem) { .stops { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .stop { padding-left: 0; padding-right: 2rem; } .stop__dot { left: 0; } }

/* -------------------------------------------------------------- questions -- */
.questions { padding-top: var(--section); }
.questions__grid { display: grid; gap: 1.5rem; }
.head--side { margin-bottom: 0; }
/* R8: hairline rows on the page, not floating cards (no shadow when open either) */
.faq { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details[open] { box-shadow: none; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.6rem; padding: .7rem 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--paper-2); color: var(--accent); font-size: 1.3rem; font-weight: 500; transition: transform 200ms ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 0 1.25rem; color: var(--ink-soft); max-width: 44rem; }
@media (min-width: 60rem) { .questions__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 4rem; } .head--side { position: sticky; top: calc(var(--bar-h) + var(--bar-top) + 2rem); } }

/* ------------------------------------------------------------------ close -- */
.close { padding: var(--section) 0 2.5rem; }
.close__card { position: relative; overflow: clip; display: grid; gap: 2rem; padding: clamp(1.75rem, 5vw, 4rem); border-radius: var(--r-xl); color: #fff;
  background-color: #a13817;
  background-image: radial-gradient(60% 80% at 100% 0%, rgb(255 190 150 / .35), transparent 70%), linear-gradient(150deg, #b5401c, #8f2f12); box-shadow: var(--mat); }
.close__card :focus-visible { outline-color: #fff; }
.close__title { margin: 0 0 1.25rem; font-size: clamp(2.2rem, 5vw, 4.25rem); line-height: 1; font-weight: 500; letter-spacing: -0.05em; }
.close__title em { color: #ffd9c4; }
.close__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.close__list li { display: flex; gap: .7rem; font-weight: 500; }
.close__list li::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-top: .3rem; border-radius: 50%; background: rgb(255 255 255 / .22); box-shadow: inset 0 0 0 4px rgb(255 255 255 / .9); }
.close__note { margin: 1rem 0 .75rem; font-size: .9375rem; color: #fff; }
.close__addr { margin: 0 0 .5rem; font-size: .9375rem; color: #fff; }
.close__addr a { color: #fff; text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.colophon a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.close__alt { color: #fff; font-weight: 500; display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (min-width: 60rem) { .close__card { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 4rem; } }
/* the close card rises out of the page as it arrives (site.js writes --c 0..1 from its position) */
@media (prefers-reduced-motion: no-preference) {
  .js .close__card { --c: 1; transform: translate3d(0, calc((1 - var(--c)) * 4rem), 0) scale(calc(.96 + var(--c) * .04)); transform-origin: 50% 100%; }
  .js .close__title .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
  .js .close__title .ln > span { display: block; transform: translate3d(0, calc((1 - var(--c)) * 110%), 0); }
  .js .close__title .ln:nth-child(2) > span { transform: translate3d(0, calc((1 - var(--c)) * 160%), 0); }
}
.colophon { display: grid; gap: .5rem; padding: 2rem 0 0; font-size: .875rem; color: var(--ink-soft); max-width: 52rem; }
.colophon p { margin: 0; }

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .pill, .pill__chip, .index a, .index a span, .demo__toggle, .skip-link, .faq summary::after, .feature__title, .flow li, .peak__steps li, .mail [data-src], .signoff { transition: none; }
  html.js .demo, html.js .demo:not(.is-active), html.js .demo.is-active { transition: none !important; }
  /* R8: chapters swap instantly, with no rise */
  html.js .feature__in > *, html.js .features::before { transition: none !important; }
  html.js .feature__copy:not(.is-active) .feature__in > .feature__title { transform: none !important; }
}