/* Hallmark · shape: Narrative Workflow · genre: modern-minimal · theme: Coral (deal: manual, 1/3 of Coral, Dose, Wayfind; theme.mjs blocked in this session) · job: book (a demo) · draw: manual
 * hero: Stage · nav: edge-aligned, two links and a letterpress Start card · footer: statement, the mission over the links · imagery: the product built in seven slots, no photograph · signature: a 2:14 AM seller text answered the same minute, the walkthrough pressed Booked in amber
 * brand: AutoReplyAgent (spec 2026-10-31) · ink and board in the logo's green, accent in its amber, Archivo for General Sans
 * sections: hero Stage on the desk, 1 Switcher (text, WhatsApp, email, call), 2 Split (the lead filed by score beside its record), 3 Rows beside a head (a follow-up campaign), 4 Showcase (the pipeline, the day, the handoff), two plan sheets laid on the board (pricing), Rows beside a head (questions), the LeadConnector booking calendar on cotton, on the desk (demo), footer statement
 * samples: every name, number, address, time and message inside a data-slot is an Example placeholder
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 · weakest: P, the argument (an answer before the next investor calls) rode on the samples alone; stage 1's head now says it and every sample carries a real-world time */
/* Hallmark · answered F24 · the 0.5px ring is the cotton's edge and the cast is daylight from the left, Coral's stock on every sheet */
/* Hallmark · note 19 · "Book a demo" is the owner's own action, asked for by name and wired to their LeadConnector calendar; it is the hero's one primary, never a stock second button */
/* Hallmark · note 26a · the booking calendar's controls live in LeadConnector's frame and draw their own focus; a browser gives the frame no :focus once focus is inside it */
/* Hallmark · dismissed 58 · the pricing screen carries the owner's full plan feature list (about 144 words in one window), a set the owner gave, kept at its true count; 406 more words are sample text inside the product slots */
/* Hallmark · sweep: sloplint blocked in this session, so a Playwright sweep written for this build ran the render and static gates · Floor 0 FAIL · Reflex 0 open
 * hero-review: in-thread · fix · 1 finding · 1 resolved · finish-review: in-thread · fix · 3 findings · 3 resolved · gap: none */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 76px; --radius-sheet: 4px; --color-booked-wall: oklch(30% 0.05 55); --color-board-rule: oklch(42% 0.03 177); }

/* Chrome */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
.fx { position: absolute; width: 0; height: 0; overflow: hidden; }
.fx-wall { flood-color: var(--color-booked-wall); flood-opacity: 0.7; }
.fx-lip { flood-color: var(--color-cotton); flood-opacity: 0.9; }

.site { position: absolute; inset: 0 0 auto; z-index: var(--z-raised); }
.site__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); text-decoration: none; border-radius: var(--space-3xs); }
.brand__word { font-size: var(--text-xl); line-height: 1; letter-spacing: -0.035em; font-weight: 400; white-space: nowrap; }
.brand__word b { font-weight: 800; }
.mark { width: 36px; height: 36px; flex-shrink: 0; fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.mark__line { stroke: currentColor; }
.mark__arrow { stroke: var(--color-accent); }
.mark--xs { width: 18px; height: 18px; }
.site__nav { display: flex; align-items: center; gap: var(--space-lg); }
.site__link { font-weight: 500; white-space: nowrap; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.site__link:hover { text-decoration-color: var(--color-accent-2); }
.brand:focus-visible, .site__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--space-2xs); border-radius: var(--space-3xs); }

/* Controls: letterpress cards, cotton stock or the green board, the label pressed in, the cast falling right */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--cast-stock-lift); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.btn--card { background-color: var(--color-cotton); background-image: linear-gradient(100deg, oklch(var(--lit) / 0.6), oklch(var(--lit) / 0) 55%), var(--tex-cotton); background-size: 100% 100%, 360px 360px; color: var(--color-print); text-shadow: 0.5px 0.75px 0 oklch(var(--lit) / 0.9); box-shadow: var(--edge-stock), var(--cast-stock); }
.btn--ink { background-color: var(--color-board); background-image: linear-gradient(100deg, oklch(var(--lit) / 0.08), oklch(var(--lit) / 0) 55%); color: var(--color-board-type); text-shadow: 0 -0.75px 0 oklch(var(--deep) / 0.9); box-shadow: inset 0 1px 0 oklch(var(--lit) / 0.14), inset 0 -1px 0 oklch(var(--deep) / 0.5), 0 0 0 0.5px oklch(var(--deep) / 0.6), 0 1px 0 oklch(var(--deep) / 0.85), var(--cast-stock); }
.btn:hover { transform: translateY(-1px); }
.btn:hover::after { opacity: 1; }
.btn--ink:hover { background-color: var(--color-board-2); }
.btn:active { transform: translateY(1px); transition-duration: var(--dur-micro); }
.btn:active::after { opacity: 0; }
.btn--card:active { box-shadow: inset 0 1px 2px oklch(var(--shade) / 0.12), 0 0 0 0.5px oklch(var(--shade) / 0.22), 2px 2px 4px -3px oklch(var(--shade) / 0.3); }
.btn--ink:active { box-shadow: inset 0 1px 3px oklch(var(--deep) / 0.6), 0 0 0 0.5px oklch(var(--deep) / 0.6), 2px 2px 4px -3px oklch(var(--shade) / 0.4); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

/* Hero: the desk. Felt under daylight from the left; the head on five columns, the still life on seven */
.desk { background-color: var(--color-desk); background-image: radial-gradient(90% 120% at 0% 30%, var(--color-daylight), transparent 62%), linear-gradient(90deg, oklch(var(--shade) / 0) 50%, oklch(var(--shade) / 0.05)), var(--tex-desk); background-size: 100% 100%, 100% 100%, 320px 320px; }
.hero { display: grid; align-items: center; min-height: 100svh; padding-block: var(--nav-h) 0; border-bottom: 1px solid oklch(var(--shade) / 0.1); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; }
.hero h1 { max-width: none; line-height: 1.02; }
.hero .lead { max-width: 30ch; color: var(--color-ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xs); }
.hero__terms { margin-top: calc(-1 * var(--space-xs)); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }

/* Stock: cotton sheets lit from the left, edges and casts falling right, sized from one unit so a scene scales whole */
.stock, .slip { color: var(--color-print); background-color: var(--color-cotton); background-image: linear-gradient(100deg, oklch(var(--lit) / 0.55), oklch(var(--lit) / 0) 45%, oklch(var(--shade) / 0.03)), var(--tex-cotton); background-size: 100% 100%, 360px 360px; border-radius: var(--radius-sheet); }
.stock { box-shadow: inset 1px 0 0 oklch(var(--lit) / 0.95), inset 0 1px 0 oklch(var(--lit) / 0.7), inset 0 -1px 0 oklch(var(--shade) / 0.06), 0 0 0 0.5px oklch(var(--shade) / 0.2), 1px 1px 0 oklch(var(--shade) / 0.08), 14px 10px 26px -12px oklch(var(--shade) / 0.24); }
.stock p, .slip p { max-width: none; }

/* The still life: one coordinate space, 100 units wide, light from the left */
.scene { margin: 0; container: scene / inline-size; }
.scene[data-slot] { background: none; overflow: visible; }
.scene__in { --u: calc(100cqi / 100); position: relative; aspect-ratio: 100 / 88; }
.scene .slip { position: absolute; display: grid; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 2.8) calc(var(--u) * 3.2) calc(var(--u) * 3.2); box-shadow: inset 1px 0 0 oklch(var(--lit) / 0.95), inset 0 1px 0 oklch(var(--lit) / 0.7), inset -1px 0 0 oklch(var(--shade) / 0.07), inset 0 -1px 0 oklch(var(--shade) / 0.06), 0 0 0 0.5px oklch(var(--shade) / 0.2), 1px 1px 0 oklch(var(--shade) / 0.08), calc(var(--u) * 0.4) calc(var(--u) * 0.25) calc(var(--u) * 0.5) calc(var(--u) * -0.1) oklch(var(--shade) / 0.1), calc(var(--u) * 4.6) calc(var(--u) * 2.4) calc(var(--u) * 4.4) calc(var(--u) * -1.2) oklch(var(--shade) / 0.19); }
.slip__head { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 2.1); font-weight: 500; color: var(--color-muted); }
.slip__head time { font-variant-numeric: tabular-nums; }
.slip__who { display: inline-flex; align-items: center; gap: calc(var(--u) * 1); color: var(--color-ink); }
.slip__who .mark { width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
.slip__from { font-size: calc(var(--u) * 2.1); color: var(--color-muted); }
.slip__body { font-size: calc(var(--u) * 2.75); line-height: 1.4; }
.slip--in { left: 0; top: 3%; width: 55%; transform: rotate(-2.2deg); z-index: 1; }
.slip--out { right: 0; top: 29%; width: 57%; transform: rotate(1.4deg); z-index: 2; }
.slip--appt { left: 7%; top: 61%; width: 60%; transform: rotate(-0.8deg); z-index: 3; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(var(--u) * 2); padding-bottom: calc(var(--u) * 3.6); }
.slip--appt > :not(.booked) { grid-column: 1; }
.slip--appt > .slip__head, .slip--appt > .appt__when { grid-column: 1 / -1; }
.appt__when { font-size: calc(var(--u) * 4.6); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.05; font-variant-numeric: tabular-nums; }
.appt__where { font-size: calc(var(--u) * 2.75); font-weight: 500; }
.appt__note { font-size: calc(var(--u) * 2.1); color: var(--color-muted); }
.tag { display: inline-flex; align-items: center; padding: 0.15em 0.6em; border: 1px solid var(--color-ink); border-radius: var(--radius-pill); color: var(--color-ink); font-size: inherit; font-weight: 500; line-height: 1.3; white-space: nowrap; }

/* Booked, debossed: the word pressed into the cotton, amber ink sitting unevenly in the impression */
.booked { display: inline-block; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--color-booked); filter: url(#press); transform: rotate(-7deg); white-space: nowrap; }
.slip--appt .booked { grid-column: 2; grid-row: 3 / span 3; align-self: end; justify-self: end; margin-bottom: calc(var(--u) * 0.6); font-size: calc(var(--u) * 6.6); }

/* The desk plays the job once: the text lands, the reply follows, the walkthrough is pressed Booked */
@media (prefers-reduced-motion: no-preference) {
  .slip--in { animation: land-in var(--dur-long) var(--ease-out) 250ms both; }
  .slip--out { animation: land-out 560ms var(--ease-out) 1300ms both; }
  .slip--appt { animation: land-appt 560ms var(--ease-out) 2500ms both; }
  .booked { animation: press 360ms var(--ease-out) 3500ms both; }
}
@keyframes land-in { from { opacity: 0; transform: translate(-2%, 6%) rotate(-4deg); } to { opacity: 1; transform: rotate(-2.2deg); } }
@keyframes land-out { from { opacity: 0; transform: translate(4%, 4%) rotate(3deg); } to { opacity: 1; transform: rotate(1.4deg); } }
@keyframes land-appt { from { opacity: 0; transform: translate(-3%, 6%) rotate(-2.5deg); } to { opacity: 1; transform: rotate(-0.8deg); } }
@keyframes press { from { opacity: 0; transform: rotate(-7deg) scale(1.18); } to { opacity: 1; transform: rotate(-7deg) scale(1); } }

/* Tall, wide screens: the still life bleeds into the right gutter so it keeps 60% of the screen */
@media (min-width: 105rem) and (min-height: 62rem) {
  .scene { margin-right: calc(-1 * var(--space-3xl)); }
}
@media (min-width: 115rem) and (min-height: 66rem) {
  .scene { margin-right: calc(-1 * var(--space-4xl)); }
  .hero { padding-top: calc(var(--nav-h) + var(--space-lg)); }
}

/* Narrow: the hero stacks, and the still life becomes a column of slips set at reading size */
@media (max-width: 72rem) {
  .hero { min-height: 0; padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--space-3xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
  .scene { max-width: 720px; width: 100%; justify-self: center; }
}
@container scene (max-width: 34rem) {
  .scene__in { aspect-ratio: auto; display: grid; gap: var(--space-md); padding-block: var(--space-xs); }
  .scene .slip { position: relative; inset: auto; width: auto; gap: var(--space-xs); padding: var(--space-md) var(--space-md) var(--space-lg); box-shadow: inset 1px 0 0 oklch(var(--lit) / 0.95), inset 0 1px 0 oklch(var(--lit) / 0.7), 0 0 0 0.5px oklch(var(--shade) / 0.2), 1px 1px 0 oklch(var(--shade) / 0.08), 10px 8px 18px -10px oklch(var(--shade) / 0.24); }
  .slip--in { margin-right: var(--space-xl); }
  .slip--out { margin-left: var(--space-xl); }
  .slip--appt { margin-right: var(--space-lg); }
  .slip__head, .slip__from, .appt__note { font-size: var(--text-sm); }
  .slip__who .mark { width: 18px; height: 18px; }
  .slip__body, .appt__where { font-size: var(--text-md); }
  .appt__when { font-size: var(--text-2xl); }
  .slip--appt .booked { font-size: var(--text-3xl); margin-bottom: 0; }
}
@media (max-width: 40rem) {
  .site__link { display: none; }
  .brand__word { font-size: var(--text-lg); }
  .brand .mark { width: 30px; height: 30px; }
}

/* Stock in the sections: the same cotton, a fixed cast falling right */
.slip { box-shadow: inset 1px 0 0 oklch(var(--lit) / 0.95), inset 0 1px 0 oklch(var(--lit) / 0.7), inset -1px 0 0 oklch(var(--shade) / 0.07), inset 0 -1px 0 oklch(var(--shade) / 0.06), 0 0 0 0.5px oklch(var(--shade) / 0.2), 1px 1px 0 oklch(var(--shade) / 0.08), 3px 2px 4px -1px oklch(var(--shade) / 0.1), 18px 10px 22px -10px oklch(var(--shade) / 0.2); }
[data-kind="product"]:not(.scene) { background-color: transparent; background-image: none; overflow: visible; }
.stock[data-kind="product"], .slip[data-kind="product"] { background-color: var(--color-cotton); background-image: linear-gradient(100deg, oklch(var(--lit) / 0.55), oklch(var(--lit) / 0) 45%, oklch(var(--shade) / 0.03)), var(--tex-cotton); }

/* Stages: one rule between them, the number inside the head */
.stage { padding-top: var(--section-gap); }
.stage + .stage::before { content: ""; display: block; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); margin: 0 auto var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.stage + .stage { padding-top: var(--space-3xl); }
.stage--follow::before { margin-bottom: var(--section-gap); }
.stage--book { padding-bottom: var(--section-gap-l); }
.lead { color: var(--color-ink-2); }
dd, li, td { text-wrap: pretty; }
.head-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; margin-bottom: var(--space-2xl); }
.head-split h2 { grid-column: 1 / span 7; }
.head-split .lead { grid-column: 8 / -1; max-width: 40ch; }

/* 1. The channels: a groove pressed into cotton, a card riding in it to the chosen stop */
.switch { display: grid; gap: var(--space-xl); }
.groove { --radius-groove: 12px; display: inline-flex; flex-wrap: wrap; justify-self: start; gap: var(--space-2xs); padding: var(--space-2xs); border: 0; border-radius: var(--radius-groove); background-color: var(--color-cotton); background-image: var(--tex-cotton); background-size: 360px 360px; box-shadow: var(--press-groove); }
.groove__key { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); background: transparent; color: var(--color-ink-2); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.groove__key:hover { color: var(--color-ink); background-color: oklch(var(--shade) / 0.05); }
.groove__key:active { transform: translateY(1px); }
.groove__key:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.groove__key:disabled { opacity: 0.55; cursor: not-allowed; }
.groove__key[aria-selected="true"] { color: var(--color-print); background-color: var(--color-cotton); background-image: linear-gradient(100deg, oklch(var(--lit) / 0.6), oklch(var(--lit) / 0) 55%), var(--tex-cotton); background-size: 100% 100%, 360px 360px; box-shadow: var(--edge-stock), var(--cast-stock); }
html:not(.js) .groove[role="tablist"] { display: none; }
.panel { display: grid; }
html:not(.js) .panel + .panel { margin-top: var(--space-2xl); }
.thread { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: 0; margin: 0; padding: 0; list-style: none; }
.msg { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--space-lg) var(--space-lg); }
.msg p { max-width: none; }
.msg > p:last-child { font-size: var(--text-lg); line-height: 1.4; }
.msg--in { grid-column: 1 / span 6; transform: rotate(-0.5deg); }
.msg--out { grid-column: 7 / -1; transform: rotate(0.4deg); }
.thread > :nth-child(1) { grid-row: 1; } .thread > :nth-child(2) { grid-row: 2; } .thread > :nth-child(3) { grid-row: 3; }
.thread > :nth-child(4) { grid-row: 4; } .thread > :nth-child(5) { grid-row: 5; }
.thread > * + * { margin-top: calc(-1 * var(--space-lg)); }
.msg__meta, .mail__head, .call__facts dt, .transcript b, .record__source, .record__filled, .record__label, .lane__name, .lcard__meta, .day__date, .handoff__from, .campaign__title, .touch__state { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.msg__meta { display: flex; justify-content: space-between; gap: var(--space-md); }
.msg__meta time, .day__slots time { font-variant-numeric: tabular-nums; }
.panel--pair { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.mail, .call { display: grid; gap: var(--space-md); padding: var(--space-lg) var(--space-xl) var(--space-xl); font-size: var(--text-lg); line-height: 1.45; }
.mail--in { grid-column: 1 / span 5; margin-top: var(--space-2xl); transform: rotate(-0.8deg); }
.mail--out { grid-column: 6 / -1; transform: rotate(0.4deg); }
.mail__head { display: grid; gap: var(--space-2xs); margin: 0; padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.mail__head div, .call__facts div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-sm); }
.mail__head dd, .call__facts dd { margin: 0; color: var(--color-ink); }
.call { grid-column: 1 / span 7; transform: rotate(-0.4deg); }
.call__title { font-size: var(--text-title); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.15; }
.call__facts { display: grid; gap: var(--space-xs); margin: 0; padding-block: var(--space-md); border-block: var(--rule-hair) solid var(--color-rule); font-size: var(--text-md); }
.call__facts dt { align-self: baseline; }
.call__summary b { font-weight: 500; }
.transcript { grid-column: 8 / -1; display: grid; gap: var(--space-md); margin: var(--space-2xl) 0 0; padding: var(--space-lg) var(--space-xl) var(--space-xl); list-style: none; transform: rotate(0.6deg); }
.transcript b { display: block; }

/* 2. The lead, filed by score beside its record */
.qualify { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.qualify__text { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); align-content: start; }
.cardfile { display: grid; margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.filecard { grid-area: 1 / 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--space-sm); row-gap: var(--space-3xs); align-content: start; min-height: 176px; padding: var(--space-md) var(--space-lg); }
.filecard--cold { margin-right: var(--space-2xl); transform: rotate(-1.2deg); }
.filecard--warm { margin: var(--space-2xl) var(--space-xl) 0 var(--space-md); transform: rotate(0.5deg); }
.filecard--hot { margin: calc(var(--space-2xl) * 2) var(--space-lg) 0 var(--space-xl); transform: rotate(-0.4deg); }
.filecard__tab { grid-row: 1 / span 2; align-self: start; display: inline-flex; align-items: center; justify-content: center; min-width: 4.5rem; min-height: 32px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-input); font-size: var(--text-sm); font-weight: 500; }
.filecard--hot .filecard__tab { background-color: var(--color-ink); color: var(--color-cotton); }
.filecard__name { font-weight: 500; font-size: var(--text-lg); line-height: 1.25; }
.filecard__meta { font-size: var(--text-sm); color: var(--color-muted); }
.record { grid-column: 7 / -1; display: grid; gap: var(--space-lg); padding: var(--space-xl) var(--space-xl) var(--space-2xl); transform: rotate(0.3deg); }
.record__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.record__name { font-size: var(--text-title); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.15; }
.record__source { margin-top: calc(-1 * var(--space-sm)); }
.record__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); margin: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.record__fields div { display: grid; gap: var(--space-3xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.record__fields dt { font-size: var(--text-sm); color: var(--color-muted); }
.record__fields dd { margin: 0; font-size: var(--text-lg); font-weight: 500; }
.record__filled { margin-top: calc(-1 * var(--space-xs)); }
.record__notes { display: grid; gap: var(--space-xs); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); }
.record__notes p:last-child { font-size: var(--text-lg); line-height: 1.5; max-width: 52ch; }

/* 3. The follow-up, as rows of touches */
.follow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.follow__text { grid-column: 1 / span 4; display: grid; gap: var(--space-lg); align-content: start; }
.campaign { grid-column: 5 / -1; }
.campaign__title { padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-ink); }
.campaign__title b { font-weight: 500; color: var(--color-ink); }
.touches { margin: 0; padding: 0; list-style: none; }
.touch { display: grid; grid-template-columns: 6rem 6.5rem minmax(0, 1fr) 7.5rem; column-gap: var(--space-lg); align-items: baseline; min-height: 96px; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.touch__day { font-size: var(--text-title); font-weight: 800; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.touch__ch { font-weight: 500; }
.touch__msg { font-size: var(--text-lg); line-height: 1.4; max-width: none; }
.touch__state { justify-self: end; text-align: right; }
.touch--reply .touch__msg { color: var(--color-ink-2); }
.touch--reply .touch__state { font-size: var(--text-title); font-weight: 800; color: var(--color-booked); filter: url(#press); transform: rotate(-4deg); white-space: nowrap; }

/* 4. The pipeline, the day and the handoff */
.pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-bottom: var(--space-md); }
.pipeline:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--space-xs); }
.lane { display: grid; align-content: start; gap: var(--space-md); padding-top: var(--space-sm); border-top: 2px solid var(--color-ink); }
.lane__name { display: flex; justify-content: space-between; color: var(--color-ink); }
.lcard { display: grid; gap: var(--space-3xs); min-height: 104px; align-content: start; padding: var(--space-md); }
.lcard:nth-child(odd) { transform: rotate(-0.6deg); }
.lcard:nth-child(even) { transform: rotate(0.5deg); }
.lcard__name { font-weight: 500; }
.lcard--booked { grid-template-columns: minmax(0, 1fr) auto; }
.lcard--booked > p { grid-column: 1; }
.booked--sm { grid-column: 2; grid-row: 1 / span 2; align-self: end; font-size: var(--text-xl); }
.pipeline__hint { display: none; }
.book-pair { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); margin-top: var(--space-2xl); align-items: center; }
.day { grid-column: 1 / span 7; display: grid; gap: var(--space-sm); padding: var(--space-lg) var(--space-xl) var(--space-xl); transform: rotate(-0.3deg); }
.day__date { color: var(--color-ink); font-size: var(--text-title); font-weight: 800; letter-spacing: var(--tracking-display); }
.day__slots { margin: 0; padding: 0; list-style: none; }
.day__slots li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-md); align-items: baseline; padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.day__slots time { font-weight: 500; }
.day__free { color: var(--color-muted); }
.day__event { font-size: var(--text-lg); line-height: 1.4; }
.day__event b { font-weight: 500; }
.handoff { grid-column: 9 / -1; display: grid; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) var(--space-xl); transform: rotate(0.8deg); }
.handoff__from { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); }
.handoff__body { font-size: var(--text-lg); line-height: 1.45; }

/* The price on the board: the green band, the figures in paper, the action on cotton cards laid on it */
.board { --color-focus: var(--color-accent); background-color: var(--color-board); color: var(--color-board-type); }
.pricing { padding-block: var(--section-gap-s); }
.pricing__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-lg) var(--space-2xl); margin-bottom: var(--space-2xl); }
.pricing__intro { display: grid; gap: var(--space-md); }
.pricing__intro h2 { max-width: 18ch; }
.pricing .lead { color: var(--color-board-muted); }

/* Two plans, cotton sheets laid on the board */
.plans { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.plan { display: grid; gap: var(--space-xl); align-content: start; padding: var(--space-xl); }
.plan--core { grid-column: 1 / span 8; }
.plan--annual { grid-column: 9 / -1; }
.plan__head { display: grid; gap: var(--space-2xs); padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.plan h3 { font-size: var(--text-title); }
.plan__price { font-size: var(--text-lg); font-weight: 500; }
.plan__price .num { margin-right: var(--space-2xs); font-size: var(--text-section); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.plan__then { color: var(--color-muted); }
.plan__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.plan__group { display: grid; gap: var(--space-sm); align-content: start; }
.plan h4 { margin: 0; font-size: var(--text-md); font-weight: 800; }
.plan ul { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.plan li { padding-top: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.plan__go { width: 100%; }
.fill { padding: 0 0.25em; border: 1px dashed var(--color-muted); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pipeline__note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.demo__sub { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); margin-bottom: calc(-1 * var(--space-md)); }
.facts--steps { counter-reset: step; }
.facts--steps li { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); }
.facts--steps li::before { content: counter(step); font-weight: 800; }
.foot__legal { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.foot__legal a { color: var(--color-ink); text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
.foot__legal a:hover { text-decoration-color: var(--color-accent-2); }

/* Legal pages: a long document on plain paper */
.legal { padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--section-gap-s); }
.legal .container > * { max-width: 68ch; }
.legal h1 { font-size: var(--text-display-s); max-width: 20ch; }
.legal__meta { margin-top: var(--space-md); color: var(--color-muted); }
.legal h2 { margin-top: var(--space-2xl); font-size: var(--text-title); }
.legal p, .legal li { line-height: 1.7; }
.legal p { margin-top: var(--space-md); }
.legal ul { margin: var(--space-md) 0 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); }
.legal a { text-decoration-color: var(--color-accent-2); }
.site--solid { position: static; border-bottom: var(--rule-hair) solid var(--color-rule); }
.site--solid + main .legal { padding-top: var(--space-2xl); }
@media (max-width: 60rem) {
  .plan--core, .plan--annual { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .plan { padding: var(--space-lg); }
  .plan__groups { grid-template-columns: minmax(0, 1fr); }
}

/* Questions, as rows beside their head */
.faq { padding-block: var(--section-gap-l); }
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.faq h2 { grid-column: 1 / span 4; max-width: 12ch; }
.qa { grid-column: 5 / -1; margin: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.qa__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap-columns); row-gap: var(--space-xs); min-height: 104px; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.qa dt { font-size: var(--text-title); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.2; }
.qa dd { margin: 0; font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-2); max-width: 46ch; }

/* The close, back on the desk: the facts beside the booking calendar, laid on cotton */
.demo { padding-block: var(--section-gap-s); border-bottom: var(--rule-hair) solid oklch(var(--shade) / 0.12); background-image: none; background-color: var(--color-paper-2); }
.demo__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.demo__text { grid-column: 1 / span 4; display: grid; gap: var(--space-xl); }
.facts { display: grid; margin: 0; padding: 0; list-style: none; }
.facts li { padding-block: var(--space-md); border-top: var(--rule-hair) solid oklch(var(--shade) / 0.18); font-size: var(--text-lg); font-weight: 500; }
.facts li:last-child { border-bottom: var(--rule-hair) solid oklch(var(--shade) / 0.18); }
.booking { grid-column: 5 / -1; display: grid; gap: var(--space-sm); min-width: 0; padding: 0; background: none; box-shadow: none; border: 0; }
.booking iframe { display: block; width: 100%; min-height: 640px; }
.booking__open { display: none; }
.booking iframe:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.booking__alt { font-size: var(--text-sm); color: var(--color-muted); }
.booking__alt a { color: var(--color-ink); text-decoration-color: var(--color-accent-2); text-underline-offset: 0.2em; }
.booking__alt a:hover { text-decoration-thickness: 2px; }

/* Footer: the mission, then the wordmark and the links */
.foot { padding-block: var(--space-3xl) var(--space-xl); }
.foot__statement { max-width: 22ch; font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.04; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.foot__nav a { white-space: nowrap; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.foot__nav a:hover { text-decoration-color: var(--color-accent-2); }
.foot__nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--space-2xs); border-radius: var(--space-3xs); }
.foot__legal { font-size: var(--text-sm); color: var(--color-muted); }

/* Tablet and phone: every composition stacks in reading order */
@media (max-width: 60rem) {
  .head-split h2, .head-split .lead, .qualify__text, .record, .follow__text, .campaign, .faq h2, .qa, .demo__text, .booking, .day, .handoff { grid-column: 1 / -1; }
  .head-split { margin-bottom: var(--space-xl); }
  .msg--in { grid-column: 1 / span 10; }
  .msg--out { grid-column: 3 / -1; }
  .mail--in, .mail--out, .call, .transcript { grid-column: 1 / -1; margin-top: 0; }
  .panel--pair { row-gap: var(--space-lg); }
  .pipeline-wrap { margin-inline: calc(-1 * var(--gutter)); }
  .pipeline { grid-template-columns: repeat(5, minmax(14rem, 1fr)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: var(--space-2xs) var(--gutter) var(--space-lg); scroll-padding-inline: var(--gutter); }
  .lane { scroll-snap-align: start; }
  .pipeline__hint { display: block; margin-top: var(--space-xs); padding-inline: var(--gutter); font-size: var(--text-sm); color: var(--color-muted); }
                .qa__row { grid-template-columns: minmax(0, 1fr); }
  .faq h2 { max-width: none; }
}
@media (max-width: 40rem) {
  .msg--in, .msg--out { grid-column: 1 / -1; }
  .thread { row-gap: var(--space-md); }
  .thread > * + * { margin-top: 0; }
  .msg--in { margin-right: var(--space-xl); }
  .msg--out { margin-left: var(--space-xl); }
  .msg > p:last-child, .mail, .call, .touch__msg, .record__fields dd, .record__notes p:last-child, .day__event, .handoff__body, .qa dd, .facts li { font-size: var(--text-md); }
  .mail, .call, .transcript, .record, .day { padding: var(--space-lg); }
  .record__fields { grid-template-columns: minmax(0, 1fr); }
  .touch { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2xs); }
  .touch__day { grid-column: 1; }
  .touch__ch { grid-column: 2; justify-self: end; }
  .touch__msg { grid-column: 1 / -1; }
  .touch__state { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .groove { justify-self: stretch; }
  .filecard--cold { margin-right: var(--space-lg); }
  .filecard--warm { margin: var(--space-2xl) var(--space-sm) 0 var(--space-xs); }
  .filecard--hot { margin: calc(var(--space-2xl) * 2) 0 0 var(--space-md); }
  .filecard { min-height: 152px; padding-inline: var(--space-md); }
  .groove[role="tablist"] .groove__key { flex: 1 1 auto; padding: 0 var(--space-sm); }
    .foot__row { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 24rem) {
  .site__in { gap: var(--space-sm); }
  .brand__word { font-size: var(--text-md); }
  .brand .mark { width: 26px; height: 26px; }
  .site__nav .btn--sm { padding: 0 var(--space-sm); }
}
@media (max-width: 40rem) {
  .booking__open { display: inline-flex; width: 100%; }
  .booking iframe { min-height: 760px; }
}
.plan li b { display: block; font-weight: 500; color: var(--color-ink); }
.plan__groups .plan__group li { color: var(--color-muted); }