/* Hallmark · shape: Feature Stack (/), Workbench (/for-venues/) · genre: atmospheric · theme: Ribbon (deal 1/3, seed concierge-app-finds-event-00ca·7e2d0038·2026-11-08·r0) · redesign: full
 * hero: Stage (/), Stage (/for-venues/) · nav: floating pill on a blur over the night, the wordmark and the job's one action · footer: index columns, a hub with a real sitemap (guides, comparisons, venues) · imagery: screenshots 3 (the web app's example mode, captured) and the venue film · signature: a venue's real reply in the product, the date and price pulled out for you · colours: Eventier's own (cream paper, ink panels, the peach pill, clay for focus and signal), Ribbon's type, parts and night kept
 * axes: dark/grotesk-sans/warm-peach · posture: committed · contrast: pass · fold: pass · job: try (/), join (/for-venues/) · v2.0.0 */
/* Hallmark · imagery · Monet-style paintings of venues set for an event (Replicate, 2026-11-08, Ryan: 'put it back'), one at random per visit, under a deep shade; replaces the drawn night */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, the night ground could read as decoration; it is the hour events happen, drawn as a far row of lit windows, and the product carries every section */
/* Hallmark · waive 44c · hero figure measured 100px to 856px of a 900px screen at 1440 · the product capture fills the first screen; the lint counts only the text column beside it */
/* Hallmark · waive 79 · same measurement, the figure ends 44px above the fold · the gap it reports sits under the centred text, beside a full-height capture, not under the hero */
/* Hallmark · waive 49b · footer sitemap columns, guide and venue titles · a two-line title in an index column reads as one list item, and nowrap would overflow at 320px */
/* Hallmark · outcome · hero review: fix → fixed (nav, poster frame, crop, haze); finish review: fix → fixed (phone steps, last step, fit table, step frames, counters, generic heads, echo, sign-off); sloplint --render 0 FAIL */
/* Hallmark · redesign: full (/for-venues/, 9 Nov 2026) · theme: brand, Eventier's own (kept) · sections: Figures under a split head, the sums as an ink Band with the answer as a Statement, a Switcher (questions as rows beside the guest's conversation), a mirrored Split (WhatsApp), a Table, a Form beside who gets in and the steps, Rows (questions) · signature: the owner's own cost, worked out live · reworded "Use the Australian wedding average, A$17,518" to "Use the wedding average, A$17,518" · 49a, it wrapped at 320px */
/* Hallmark · waive 39b · the guest's questions are rows of a list, 60px for the tap and the line, not buttons in a bar */
/* Hallmark · waive 47b · one frame at most per screen, a real capture of the web app inside · the product shown is Eventier itself, captured */
@import url("./tokens.css?v=2");
@import url("./base.css?v=1");

/* ---------- Page ---------- */
body { background: var(--color-paper); color: var(--color-ink); font-size: 1.0625rem; line-height: 1.6; }
.site { position: relative; }
h1, h2, h3 { color: var(--color-ink); }
h1 { line-height: 1.02; }
.lead { color: var(--color-muted); }
p { color: var(--color-muted); }
a { color: var(--color-ink); }
a:hover { text-decoration-color: var(--color-signal); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-tooltip); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-part); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; text-decoration: none; }
.skip:focus-visible { top: var(--space-sm); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ig { display: none; }
[data-from="instagram"] .ig { display: inline; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }

/* ---------- Controls (machined pills, Ribbon) ---------- */
.btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: linear-gradient(var(--color-paper-2), var(--color-paper-3)); box-shadow: var(--edge-light), var(--shadow-part); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn--primary { background: var(--color-accent); border: 1.5px solid var(--color-accent-edge); color: var(--color-accent-ink); font-weight: 600; box-shadow: var(--edge-lit), var(--shadow-part); }
.btn--primary:hover { background: var(--color-accent); filter: brightness(1.05); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.badge-link { display: inline-flex; border-radius: var(--radius-part); }
.badge-link img { height: 44px; width: auto; }
.badge-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.text-link { color: var(--color-signal); font-weight: 500; text-underline-offset: 0.2em; }

/* ---------- Nav: a floating pill on a blur over the night ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); padding-top: var(--space-md); }
.nav-bar.dark { background: var(--color-paper); color: var(--color-ink); }
.nav-bar { width: min(calc(100% - 2 * var(--gutter)), calc(var(--container) - 2 * var(--gutter))); margin-inline: auto; min-height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: 0 var(--space-xs) 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-card) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); text-decoration: none; font: 500 1.25rem/1 var(--font-display); letter-spacing: -0.02em; }
.wordmark img { width: 28px; height: 28px; }
/* The venue page's logo says which Eventier this is (Ryan, 2026-11-08): a small peach pill after the name. */
.wordmark-badge { margin-left: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-accent-edge); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: 0; white-space: nowrap; }
@media (max-width: 23.75rem) { .nav-bar:has(.wordmark-badge) { gap: var(--space-xs); padding-left: var(--space-md); } .nav-bar:has(.wordmark-badge) .wordmark { font-size: 1.0625rem; gap: var(--space-2xs); } .nav-bar:has(.wordmark-badge) .wordmark img { width: 24px; height: 24px; } .nav-bar:has(.wordmark-badge) .nav-apply { padding-inline: var(--space-md); } }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); }
.nav-links a { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav-links a:hover { color: var(--color-ink); }
.nav-links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-part); }
.nav-links .btn { min-height: 44px; gap: 0; font-size: var(--text-sm); color: var(--color-ink); }
.cta-more { white-space: pre; }
@media (max-width: 1079px) {
  .nav-links a:not(.pill-cta):not(.nav-venues):not(.nav-apply) { display: none; }
  .cta-more { display: none; }
}

/* ---------- The night: the hour events happen, drawn as a far row of lit windows ---------- */
.night { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(var(--color-sky-hi), var(--color-sky-lo) 50%, var(--color-haze) 98.4%, var(--color-land) 98.6%); }
.night img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; opacity: 0; filter: blur(var(--painting-blur)); transform: scale(1.1); transition: opacity var(--duration-very-slow) var(--ease-out); }
/* The painting blurred to a wash of its colours (Ryan, 9 Nov 2026: "blur all the photos"); scaled up so the blur never shows a soft edge. */
.night { --painting-blur: 20px; }
.night img.shown { opacity: 1; }
/* A deep shade over the painting, so the cream words read on any of the six (darkest where the words sit). */
.night::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 30% 50%, var(--shade-a), var(--shade-0) 75%), linear-gradient(var(--shade-b), var(--shade-c) 40%, var(--shade-d)); }
@media (prefers-reduced-motion: reduce) { .night img { transition: none; } }

/* ---------- Hero: Stage (the text on five columns, the product on seven) ---------- */
.hero { position: relative; isolation: isolate; margin-top: calc(-1 * (var(--nav-h) + var(--space-md))); padding-top: calc(var(--nav-h) + var(--space-md)); min-height: 100svh; display: flex; align-items: center; }
.hero > .container { position: relative; z-index: 1; width: 100%; padding-block: var(--space-md) var(--space-xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.hero-grid--film { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (min-width: 60.01rem) { /* the film bleeds into the right gutter: wider without squeezing the headline */
  .hero-grid--film { column-gap: var(--space-xl); }
  .hero-grid--film .film { width: calc(100% + var(--gutter)); max-width: none; margin-right: calc(-1 * var(--gutter)); }
}
.hero-text { display: flex; flex-direction: column; gap: var(--space-lg); }
.hero h1 { font-size: clamp(2.75rem, 5.2vw, 5rem); max-width: none; }
.hero .lead { color: var(--color-ink-2); max-width: 34ch; }
.hero-terms { font-size: var(--text-sm); color: var(--color-muted); }
.hero-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }

/* The box: the event typed here starts in the web app */
.ask { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: linear-gradient(var(--color-paper-2), var(--color-paper-3)); box-shadow: var(--edge-light); }
.ask:focus-within { border-color: var(--color-muted); }
.ask-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.ask textarea { width: 100%; min-height: 3.4em; resize: none; padding: var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-part); outline: none; background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-lead)/1.4 var(--font-body); caret-color: var(--color-accent); }
.ask textarea::placeholder { color: var(--color-muted); }
.ask:has(textarea:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ask-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.ask-hint { font-size: var(--text-sm); color: var(--color-muted); }
.ask-go { min-height: 48px; }

/* A product capture, in a slot (data-kind="product") */
.shot { margin: 0; position: relative; border-radius: var(--radius-card); overflow: hidden; outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; box-shadow: var(--shadow-panel); background: var(--color-slot); }
.shot[data-slot] > img { filter: none; }
.hero .shot--card { aspect-ratio: 1032 / 1540; width: 100%; height: min(calc(100svh - var(--nav-h) - var(--space-xl) - var(--space-xl)), 880px); width: auto; max-width: 100%; justify-self: end; }
.hero .shot--card > img { object-position: top center; }
.film { aspect-ratio: 16 / 9; width: 100%; height: auto; justify-self: stretch; } /* the whole 16:9 frame: the venue photo and the rooms and prices beside the chat stay in view (Ryan, 9 Nov 2026) */
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-toggle { position: absolute; right: var(--space-md); top: var(--space-md); z-index: 2; min-height: 44px; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-gap); }
.section--s { padding-block: var(--section-gap-s); }
.section--l { padding-block: var(--section-gap-l); }
.section--well { background: var(--color-paper-2); color: var(--color-ink); }
.head { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head h2 { max-width: 18ch; }
.head .lead { max-width: 46ch; }

/* Pinned: one capture held while three short panels pass */
.pinned { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.pinned-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.pinned-steps li { counter-increment: step; min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-sm); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.pinned-steps li:first-child { border-top: 0; }
.pinned-steps li:last-child { min-height: 40vh; }
.step-shot { display: none; }
.pinned-steps h3 { font-size: var(--text-section); max-width: 14ch; }
.pinned-steps p { max-width: 46ch; font-size: var(--text-lead); }
.story-side { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
.story-stack { position: relative; aspect-ratio: 2352 / 1800; }
.story-stack .scr { position: absolute; inset: 0; opacity: 0; transition: opacity var(--duration-slow) var(--ease-in-out); }
.story[data-active="0"] .scr[data-i="0"], .story[data-active="1"] .scr[data-i="1"], .story[data-active="2"] .scr[data-i="2"] { opacity: 1; }
.story-stack .scr > img { width: 100%; height: 100%; object-fit: cover; }

/* Statement */
.statement p { max-width: 22ch; font: 400 var(--text-display-s)/1.08 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-wrap: balance; }
.statement .then { display: block; margin-top: var(--space-md); color: var(--color-muted); }

/* Switcher: the tone, two real samples */
.switcher { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.seg { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); }
.seg button { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-muted); font: 500 var(--text-md)/1 var(--font-body); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-smooth-out), color var(--duration-fast) var(--ease-smooth-out); }
.seg button[aria-pressed="true"] { color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg button:active { transform: translateY(1px); }
.letter { padding: var(--space-xl); border-radius: var(--radius-card); background: linear-gradient(var(--color-paper-2), var(--color-paper-3)); box-shadow: var(--edge-light), var(--shadow-panel); }
.letter-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); margin: 0 0 var(--space-lg); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.letter-meta dt { color: var(--color-muted); }
.letter-meta dd { margin: 0; color: var(--color-ink); }
.letter .body { font: 400 var(--text-lead)/1.55 var(--font-body); color: var(--color-ink); }

/* Rows: privacy as a list, head on the left */
.rows-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.rows-wrap .head { margin-bottom: 0; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li, .rows .row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.rows li:last-child, .rows .row:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows h3 { font-size: var(--text-title); }

/* Questions */
.faq-list { border-top: var(--rule-hair) solid var(--color-rule); }
.faq-item { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq-q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; padding-block: var(--space-md); cursor: pointer; font: 400 var(--text-title)/1.25 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q svg { flex-shrink: 0; color: var(--color-muted); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.faq-item[open] .faq-q svg { transform: rotate(45deg); }
.faq-q:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-part); }
.faq-a { max-width: 62ch; padding-bottom: var(--space-lg); }
.faq-a a { color: var(--color-signal); }
.guides { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.guides a { color: var(--color-signal); }
.side-note { margin-top: var(--space-lg); font-size: var(--text-md); }
.guides-title { margin-top: var(--space-lg); font-size: var(--text-title); }

/* Close: the price under the horizon, the download beside the last screen */
.close { position: relative; isolation: isolate; overflow: hidden; }
.close > .container { position: relative; z-index: 1; }
.close-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--space-xl) 0; }
.figures div { padding-right: var(--space-lg); }
.figures div + div { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.amt { font: 400 clamp(2.5rem, 4vw, 4.25rem)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.per { margin-top: var(--space-xs); font-size: var(--text-md); }
.close-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); }
.close .shot { aspect-ratio: 2352 / 1800; }

/* ---------- Footer (index columns, shared markup from scripts/markdown.ts) ---------- */
.site-foot { border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.site-foot-in { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.site-foot-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); padding-block: var(--space-3xl) var(--space-2xl); }
.site-foot .brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.site-foot .word { font: 500 1.5rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
.site-foot .brand p:not(.word) { max-width: 32ch; font-size: var(--text-sm); }
.site-foot .start-link { min-height: 48px; display: inline-flex; align-items: center; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-ink); font-weight: 500; text-decoration: none; }
.site-foot .start-link:hover { background: var(--color-paper-2); }
.site-foot .foot-badge img { height: 40px; width: auto; }
.site-foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.site-foot-cols h2 { font: 500 var(--text-sm)/1.3 var(--font-body); letter-spacing: 0; color: var(--color-ink); margin: 0 0 var(--space-sm); max-width: none; }
.site-foot-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.site-foot-cols a { color: var(--color-muted); font-size: var(--text-sm); text-decoration: none; }
.site-foot-cols a:hover { color: var(--color-ink); }
.site-foot-cols a.all { color: var(--color-ink); }
.site-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-xl); padding-block: var(--space-lg) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.site-foot-base p, .site-foot-base a { font-size: var(--text-sm); color: var(--color-muted); }
.site-foot-base ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }

@media (max-width: 85rem) { .site-foot-top { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); } }

/* Instagram's in-app browser bar (site.js) */
.iab { position: fixed; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); z-index: var(--z-toast); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.iab-t { flex: 1 1 220px; color: var(--color-ink); font-size: var(--text-sm); }
.iab button { min-height: 44px; }

/* ---------- /for-venues/: the calculator (a machined instrument) ---------- */
.calc { display: flex; flex-direction: column; gap: var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-card); background: linear-gradient(var(--color-card), var(--color-paper-2)); box-shadow: var(--edge-light), var(--shadow-panel); }
.calc-q { display: flex; flex-direction: column; gap: var(--space-sm); }
.calc-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.stepper { display: flex; align-items: center; gap: var(--space-md); }
.round { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: linear-gradient(var(--metal-hi), var(--metal-lo)); box-shadow: var(--edge-light), var(--shadow-part); color: var(--color-ink); font: 400 1.5rem/1 var(--font-body); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.round:active { transform: translateY(1px); }
.round:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.count { min-width: 3ch; text-align: center; font: 400 2.5rem/1 var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.seg--wrap { flex-wrap: wrap; border-radius: var(--radius-card); }
.calc-out { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.calc-out .amt { font-size: clamp(2.75rem, 4.5vw, 4rem); }
.calc-out strong { color: var(--color-ink); font-weight: 600; }

/* Steps: three stages across, each with what the venue sees */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); counter-reset: vstep; }
.steps .step { counter-increment: vstep; display: flex; flex-direction: column; gap: var(--space-sm); }
.steps-shot { order: 0; aspect-ratio: 4 / 3; margin-bottom: var(--space-md); padding: var(--space-md); background: var(--color-paper-3); box-shadow: var(--shadow-part); }
.steps-shot > img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-part); }
.steps h3 { order: 2; }
.steps p { order: 3; }

/* Who gets in: a table, founding venues against not yet */
.fit-table { width: 100%; border-collapse: collapse; }
.fit-table th { padding: 0 var(--space-md) var(--space-md) 0; text-align: left; font: 400 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); vertical-align: bottom; }
.fit-table td { width: 50%; padding: var(--space-md) var(--space-lg) var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); vertical-align: top; color: var(--color-ink); }
.fit-table td + td { color: var(--color-ink-2); }
.fit-table td span { display: flex; gap: var(--space-sm); }
.fit-table svg { flex-shrink: 0; margin-top: var(--space-3xs); color: var(--color-muted); }
.fit-table .fv-tick { color: var(--color-success); }
@media (max-width: 40rem) {
  .fit-table { display: flex; flex-direction: column; }
  .fit-table tbody { display: contents; }
  .fit-table thead, .fit-table tr, .fit-table thead tr { display: contents; }
  .fit-table th, .fit-table td { width: 100%; }
  .fit-table th:first-child { order: 0; } .fit-table td:first-child { order: 1; }
  .fit-table th:last-child { order: 2; padding-top: var(--space-xl); } .fit-table td:last-child { order: 3; }
}
/* Who gets in (lists) */
.fit-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.fit-lists h3 { margin-bottom: var(--space-md); }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { display: flex; gap: var(--space-sm); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); }
.ticks svg { flex-shrink: 0; margin-top: var(--space-3xs); color: var(--color-muted); }
.ticks .fv-tick { color: var(--color-success); }
.ticks--quiet li { color: var(--color-ink-2); }
.rows--numbered { counter-reset: row; }
.rows--numbered .row { counter-increment: row; }
.rows--numbered h3::before { content: counter(row) "  "; color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: pre; }

/* The application */
.apply-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.apply-panel { padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-card); color: var(--color-ink); box-shadow: var(--edge-light), var(--shadow-panel); }
.fv-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.fv-progress { display: flex; flex-direction: column; gap: var(--space-sm); }
.fv-progress-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.fv-progress-t { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.fv-saved { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-success); }
.fv-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); }
.fv-bars span { height: 4px; border-radius: var(--radius-pill); background: var(--color-rule); transition: background-color var(--duration-fast) var(--ease-smooth-out); }
.fv-bars span.on { background: var(--color-ink); }
.fv-stepbox { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-lg); }
.fv-legend { padding: 0; margin-bottom: var(--space-md); font: 400 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); outline: none; text-wrap: balance; }
.fv-sub { margin-top: calc(-1 * var(--space-sm)); }
.cr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.cr-f { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.cr-f label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.cr-in { width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-part); background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md)/1.4 var(--font-body); }
.cr-in::placeholder { color: var(--color-muted); }
.cr-in:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
.cr-in[aria-invalid="true"] { outline: 2px solid var(--color-error); outline-offset: -1px; }
textarea.cr-in { resize: vertical; }
.fv-keep { padding: var(--space-md); border-radius: var(--radius-part); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); }
.fv-keep a { color: var(--color-signal); font-weight: 500; }
.fv-q { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.fv-q legend { padding: 0; margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.fv-q[aria-invalid="true"] legend { color: var(--color-error); }
.fv-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.fv-chip { position: relative; cursor: pointer; }
.fv-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fv-chip span { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; transition: background-color var(--dur-short) var(--ease-out); }
.fv-chip input:checked + span { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.fv-chip input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fv-chip input:disabled + span { opacity: 0.55; cursor: not-allowed; }
.fv-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.fv-back { min-height: 44px; padding: 0 var(--space-2xs); border: 0; background: none; color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.fv-back[hidden] { display: inline-flex !important; visibility: hidden; }
.fv-back:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fv-next { margin-left: auto; }
.fv-next:disabled { opacity: 0.55; cursor: not-allowed; }
.fv-form .error { color: var(--color-error); font-size: var(--text-sm); }
.fv-small { font-size: var(--text-sm); }
.fv-outcome { display: flex; flex-direction: column; gap: var(--space-md); }
.fv-status { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-success); }
.fv-status--quiet { color: var(--color-muted); }
.fv-out-h { font: 400 var(--text-section)/1.05 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); outline: none; }
.fv-out-h em { font-style: normal; }
.fv-label { margin: var(--space-sm) 0 0; font: 500 var(--text-md)/1.3 var(--font-body); color: var(--color-ink); }
.fv-ready, .fv-list { margin: 0; padding-left: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); color: var(--color-ink-2); }
@media (max-width: 60rem) {
  .apply-grid, .fit-lists { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
  .hero .shot--card { justify-self: start; max-height: none; }
  .apply-panel { padding: var(--space-lg); }
  .calc { padding: var(--space-lg); }
}
@media (max-width: 40rem) { .cr-row { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .round, .fv-chip span, .fv-bars span { transition: none; } .round:active { transform: none; } }

/* ---------- /for-venues/ (9 Nov 2026): the cost in numbers, the owner's own sums, a guest's view, the owner's WhatsApp ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--rule-hair) solid var(--color-ink); }
.fact { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) 0 0; min-width: 0; }
.fact + .fact { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.fact .amt { overflow-wrap: break-word; }
.fact p:not(.amt) { max-width: 26ch; color: var(--color-ink-2); }
.src { color: var(--color-signal); text-decoration: none; font-weight: 600; }
.src:hover { text-decoration: underline; }
.src:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-part); }
.calc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.calc-wide { grid-column: 1 / -1; }
.chip-btn { align-self: flex-start; white-space: nowrap; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-sm)/1.2 var(--font-body); text-align: left; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.chip-btn:hover { background: var(--color-paper-3); }
.chip-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip-btn .src { margin-left: var(--space-3xs); }
.calc-out p { color: var(--color-ink-2); }
.calc-out { min-height: 6.5em; }
.calc-big { font: 400 var(--text-title)/1.3 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
.calc-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.calc-n { font-weight: 500; color: var(--color-signal); }
.calc-strong { font-weight: 600; color: var(--color-ink); }
.calc-tail { display: flex; flex-direction: column; gap: var(--space-xs); }
.calc-tail p { color: var(--color-ink-2); }
.calc-tail strong { color: var(--color-ink); font-weight: 600; }
.calc-note { font-size: var(--text-sm); }
.guest { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--edge-light), var(--shadow-panel); }
.guest-top, .guest-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.guest-top span:first-child { color: var(--color-ink); font-weight: 600; }
.guest-ask { align-self: flex-end; max-width: 80%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); }
.guest-answer { max-width: 88%; padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); }
.guest-answer p:first-child { color: var(--color-ink); font-size: var(--text-lead); line-height: 1.45; }
.guest-answer .t-text-swap { display: block; }
.guest-src { margin-top: var(--space-xs); font-size: var(--text-sm); }
.guest-action { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; }
.channels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.channels li { min-height: 36px; display: inline-flex; align-items: center; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-part); background: var(--color-card); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; }
.wa { margin: 0; justify-self: center; width: min(100%, 420px); display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-band); box-shadow: var(--shadow-panel); }
.wa-top { display: flex; align-items: center; gap: var(--space-xs); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-ink-2); color: var(--color-band-ink); font-size: var(--text-sm); }
.wa-top strong { font-weight: 600; }
.wa-in, .wa-out { margin: 0; max-width: 85%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); font-size: var(--text-md); line-height: 1.45; }
.wa-in { align-self: flex-start; background: var(--color-ink-2); color: var(--color-band-ink); }
.wa-in p { color: var(--color-band-ink); }
.wa-out { align-self: flex-end; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; }
.wa-card { display: flex; flex-direction: column; gap: var(--space-xs); }
.wa-card strong { font-weight: 600; }
.wa-reply { padding: var(--space-xs) 0; border-top: var(--rule-hair) solid var(--color-muted); text-align: center; font-weight: 600; }
.vs-wrap { overflow-x: auto; }
.vs-table { width: 100%; min-width: 34rem; border-collapse: collapse; }
.vs-table th, .vs-table td { padding: var(--space-md) var(--space-lg) var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: top; }
.vs-table thead th { border-top: 0; font: 400 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
.vs-table tbody th { width: 26%; font-weight: 500; color: var(--color-muted); }
.vs-table td { color: var(--color-ink-2); }
.vs-table td:last-child { color: var(--color-ink); font-weight: 600; }
.fit-body { display: flex; flex-direction: column; gap: var(--space-2xl); min-width: 0; }
.sources { margin-top: var(--space-3xl); }
.sources-h { font-size: var(--text-title); }
.sources-list { margin: var(--space-md) 0 0; padding-left: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); max-width: 90ch; font-size: var(--text-sm); color: var(--color-muted); }
.sources-list a { color: var(--color-signal); font-weight: 500; }
.sources-list li:target { color: var(--color-ink); }
@media (max-width: 60rem) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .fact:nth-child(odd) { padding-left: 0; border-left: 0; }
  .guest { padding: var(--space-lg); }
}
@media (max-width: 40rem) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact + .fact { padding-left: 0; border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .calc-fields { grid-template-columns: minmax(0, 1fr); }
  .guest-ask, .guest-answer, .wa-in, .wa-out { max-width: 100%; }
  .vs-table { min-width: 0; }
  .vs-table thead { display: none; }
  .vs-table tr { display: block; padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
  .vs-table th, .vs-table td { display: block; width: auto; padding: var(--space-2xs) 0; border-top: 0; }
  .vs-table tbody th { width: auto; color: var(--color-ink); font-weight: 600; }
  .vs-table td::before { content: attr(data-label) ": "; color: var(--color-muted); font-weight: 400; }
}
@media (prefers-reduced-motion: reduce) { .chip-btn { transition: none; } }

/* /for-venues/ compositions (Hallmark redesign, 9 Nov 2026): a split head over the figures, the sums as an ink band, the
   guest's questions as rows beside the conversation, a mirrored split for WhatsApp, the form beside who gets in. */
.head--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--gap-columns); align-items: end; }
.head--split h2 { max-width: 14ch; min-width: 0; overflow-wrap: break-word; }
.head--split .lead { grid-column: 2; max-width: 44ch; }
.facts--big .amt { font-size: var(--text-display-s); }
.calc-band .head { max-width: 60ch; }
.calc--band { gap: var(--space-xl); padding: var(--space-xl) var(--space-xl) var(--space-2xl); }
.calc--band .calc-fields { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; }
.calc--band .calc-wide { grid-column: auto; }
.calc--band .calc-out { min-height: 0; padding-top: var(--space-xl); }
.calc-statement { max-width: 24ch; font-size: var(--text-section); line-height: 1.08; letter-spacing: var(--tracking-display); min-width: 0; overflow-wrap: break-word; }
.calc-statement .calc-n { font-weight: 400; }
.calc--band .calc-tail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap-columns); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.calc--band .calc-tail p:first-child { font: 400 var(--text-title)/1.3 var(--font-display); color: var(--color-ink); }
.try-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: stretch; }
.try-list { display: flex; flex-direction: column; border-top: var(--rule-hair) solid var(--color-rule); }
.try-list button { min-height: 52px; padding: var(--space-md) var(--space-sm); border: 0; border-bottom: var(--rule-hair) solid var(--color-rule); background: transparent; color: var(--color-muted); font: 400 var(--text-lead)/1.3 var(--font-body); text-align: left; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.try-list button:hover { color: var(--color-ink); background: var(--color-paper-2); }
.try-list button:active { background: var(--color-paper-3); }
.try-list button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.try-list button[aria-pressed="true"] { color: var(--color-ink); font-weight: 600; background: var(--color-paper-2); box-shadow: inset 3px 0 0 var(--color-ink); }
#try .guest { min-height: 420px; justify-content: space-between; }
.split-mirror { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.split-mirror .wa { order: -1; justify-self: start; width: min(100%, 460px); }
.split-mirror .head { margin-bottom: 0; }
.apply-side { display: flex; flex-direction: column; gap: var(--space-2xl); min-width: 0; }
.apply-side .head { margin-bottom: 0; }
.apply-fit { display: flex; flex-direction: column; gap: var(--space-md); }
.apply-fit h3 { font-size: var(--text-title); }
.apply-fit .fit-table th { font-size: var(--text-md); font-family: var(--font-body); font-weight: 600; }
.apply-fit .fit-table td { font-size: var(--text-sm); padding-right: var(--space-md); }
.apply-steps { counter-reset: astep; border-top: var(--rule-hair) solid var(--color-rule); }
.apply-step { counter-increment: astep; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.apply-steps h4 { margin: 0; font: 500 var(--text-md)/1.4 var(--font-body); color: var(--color-ink); }
.apply-steps h4::before { content: counter(astep) "  "; white-space: pre; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.apply-steps p { font-size: var(--text-sm); }
#apply .apply-grid { align-items: start; }
@media (max-width: 85rem) { .calc--band .calc-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 60rem) {
  .head--split { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .head--split .lead { grid-column: auto; }
  .calc--band { padding: var(--space-lg); }
  .calc--band .calc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc--band .calc-tail { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-sm); }
  .try-body, .split-mirror { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .split-mirror .wa { order: 0; justify-self: center; }
  #try .guest { min-height: 0; }
  #apply .apply-side { display: contents; }
  #apply .apply-side .head { order: 0; } #apply .apply-panel { order: 1; } #apply .apply-fit { order: 2; } #apply .apply-steps { order: 3; }
}
@media (max-width: 40rem) { .try-list button { font-size: var(--text-md); } .calc--band .calc-fields { grid-template-columns: minmax(0, 1fr); } .apply-step { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); } }
@media (prefers-reduced-motion: reduce) { .try-list button { transition: none; } }

/* /for-venues/ calculator, made visual (canvas "The cost calculator", design A, 9 Nov 2026): the owner's month as bars.
   Every bar starts at zero; widths come from the visitor's own numbers through --w (never animated). One orange: the bookings at stake. */
.cc { --bar-quiet: color-mix(in oklab, var(--color-muted) 40%, var(--color-paper)); --bar-neutral: var(--color-muted); --bar-light: var(--color-ink); --bar-signal: var(--color-signal);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.cc-form { display: flex; flex-direction: column; gap: var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--edge-light), var(--shadow-panel); }
.cc-q { display: flex; flex-direction: column; gap: var(--space-sm); border: 0; margin: 0; padding: 0; min-width: 0; }
.cc-q legend { padding: 0; margin-bottom: var(--space-sm); }
.cc-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.cc-count { display: flex; align-items: center; gap: var(--space-md); }
.cc-big { min-width: 2.2ch; text-align: center; font: 400 clamp(2.75rem, 4vw, 3.5rem)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.cc-step { width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: linear-gradient(var(--metal-hi), var(--metal-lo)); box-shadow: var(--edge-light), var(--shadow-part); color: var(--color-ink); font: 400 1.5rem/1 var(--font-body); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.cc-step:hover { border-color: var(--color-muted); }
.cc-step:active { transform: scale(0.94); }
.cc-step:disabled { opacity: 0.45; cursor: not-allowed; }
.cc-step:focus-visible, .cc-chip:focus-visible, .cc-link:focus-visible, .cc-range:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.cc-range { width: 100%; height: 44px; margin: 0; accent-color: var(--color-ink); cursor: pointer; }
.cc-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.cc-chip { min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.cc-chip:hover { border-color: var(--color-muted); }
.cc-chip:active { transform: scale(0.97); }
.cc-chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.cc-own { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 16rem; }
.cc-own[hidden], .cc-adv[hidden] { display: none; }
.cc-study { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.cc-small { font-size: var(--text-sm); color: var(--color-muted); }
.cc-study .cc-small { color: var(--color-ink-2); }
.cc-adv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-xs); }
.cc-link { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.cc-link:hover { color: var(--color-signal); }
.cc .src { color: var(--color-ink-2); display: inline-block; padding: var(--space-xs) var(--space-2xs); margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-3xs)); text-decoration: underline; text-underline-offset: 2px; }
.cc-out { display: flex; flex-direction: column; gap: var(--space-xl); min-width: 0; }
.cc-chart { display: flex; flex-direction: column; gap: var(--space-sm); }
.cc-chart h3 { font-size: var(--text-title); }
.cc-bar { display: flex; gap: 3px; height: 24px; }
.cc-seg { display: block; width: var(--w); min-width: 3px; height: 24px; border-radius: 2px; }
.cc-seg--quiet { background: var(--bar-quiet); }
.cc-seg--neutral { background: var(--bar-neutral); }
.cc-seg--signal { background: var(--bar-signal); }
.cc-seg--light { background: var(--bar-light); }
.cc-seg--empty { background: transparent; box-shadow: inset 0 0 0 1px var(--bar-neutral); }
.cc-keys { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
.cc-key { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.cc-sw { width: 12px; height: 12px; flex-shrink: 0; border-radius: 2px; }
.cc [data-calc-month], .cc [data-calc-fast], .cc [data-calc-late-n], .cc [data-calc-late-n2], .cc [data-calc-booked], .cc [data-calc-extra], .cc [data-calc-extra2], .cc-amt, .cc-worth .cc-strong { font-variant-numeric: tabular-nums; }
.cc-answer { display: flex; flex-direction: column; gap: var(--space-xs); padding-block: var(--space-lg); border-block: var(--rule-hair) solid var(--color-rule); }
.cc-statement { font: 400 clamp(2rem, 3.4vw, 3rem)/1.05 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); min-width: 0; overflow-wrap: break-word; }
.cc-worth { font-size: var(--text-lead); color: var(--color-ink-2); }
.cc-worth .cc-strong { color: var(--color-ink); font-weight: 600; }
.cc-answer .btn { margin-top: var(--space-sm); }
.cc-pair { display: flex; flex-direction: column; gap: var(--space-sm); }
.cc-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 6rem; grid-template-areas: "key track amt"; column-gap: var(--space-md); align-items: center; }
.cc-row .cc-key { grid-area: key; } .cc-row .cc-track { grid-area: track; } .cc-row .cc-amt { grid-area: amt; }
.cc-track { display: block; min-width: 0; }
/* the cost bars glide to their new length on the numbers' own curve: transform only, never width */
.cc-track .cc-seg { width: 100%; transform: scaleX(var(--s, 1)); transform-origin: left center; transition: transform var(--roll-dur) var(--roll-ease); will-change: transform; }
/* Rolling numbers: each digit is a column of 0 to 9 that slides to its new digit, clipped and faded at the edges (the mask
   keeps the baseline, which overflow: hidden would move). JS builds the columns; without it the number is plain text. */
.t-roll { white-space: nowrap; font-variant-numeric: tabular-nums; }
.t-roll-col { position: relative; display: inline-block; height: var(--roll-h); line-height: var(--roll-h); -webkit-mask-image: linear-gradient(transparent, var(--color-ink) 16%, var(--color-ink) 84%, transparent); mask-image: linear-gradient(transparent, var(--color-ink) 16%, var(--color-ink) 84%, transparent); }
.t-roll-sizer { visibility: hidden; }
.t-roll-strip { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; text-align: center; transform: translateY(calc(var(--d, 0) * -10%)); transition: transform var(--roll-dur) var(--roll-ease); transition-delay: var(--delay, 0ms); will-change: transform; }
.t-roll-strip > span { display: block; height: var(--roll-h); line-height: var(--roll-h); }
.cc-amt { text-align: right; font-weight: 600; color: var(--color-ink); }
@media (max-width: 60rem) {
  .cc { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .cc-form { padding: var(--space-lg); }
  .cc-out { display: contents; }
  .cc-answer { order: 1; } .cc-out > .cc-chart, .cc-out > .cc-small { order: 2; }
}
@media (max-width: 40rem) { .cc-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "key amt" "track track"; row-gap: var(--space-2xs); } .cc-adv { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cc-step, .cc-chip, .cc-track .cc-seg, .t-roll-strip { transition: none; } .cc-step:active, .cc-chip:active { transform: none; } }

/* ---------- Narrow ---------- */
@media (max-width: 60rem) {
  .hero { min-height: 0; }
  .hero-grid, .pinned, .switcher, .rows-wrap, .close-grid, .site-foot-top { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .story-side { display: none; }
  .step-shot { display: block; aspect-ratio: 2352 / 1800; margin-top: var(--space-md); }
  .pinned-steps li { min-height: 0; }
  .rows li, .rows .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .site-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
}
@media (max-width: 40rem) {
  .site-foot-cols { grid-template-columns: minmax(0, 1fr); }
  .nav-bar { padding-left: var(--space-md); gap: var(--space-sm); }
  .nav-links { gap: var(--space-sm); }
  .figures { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .figures div + div { padding-left: 0; border-left: 0; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
  .ask-foot { flex-direction: column; align-items: stretch; }
  .letter { padding: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .film video { transform: none; }
  .btn, .nav-links a, .seg button, .faq-q svg, .story-stack .scr { transition: none; }
  .btn:active, .seg button:active { transform: none; }
}

/* ---------- Motion (transitions.dev, 2026-11-08) ---------- */
/* The motion-token scale (the site's own --ease-out / --ease-in-out stay theirs) and each transition's own variables. */
:root {
  --duration-stagger: 40ms; --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms;
  --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-linear: linear;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  /* Rolling numbers (the venue calculator): fast start, soft landing; the blur is only while a digit travels. */
  --roll-dur: 650ms; --roll-ease: cubic-bezier(0.16, 1, 0.3, 1); --roll-stagger: 30ms; --roll-h: 1.15em;
  --stagger-dur: 500ms; --stagger-distance: 12px; --stagger-stagger: 40ms; --stagger-blur: 3px; --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --text-swap-dur: 150ms; --text-swap-translate-y: 4px; --text-swap-blur: 2px; --text-swap-ease: ease-in-out;
  --subtle-dur: 455ms; --subtle-distance: 0.14em; --subtle-blur: 0.042em; --subtle-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-dur: 250ms; --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-slide-dur: 250ms; --page-fade-dur: 250ms; --page-slide-distance: 8px; --page-blur: 3px; --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1); --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --text-morph-dur: 180ms; --text-morph-resize-dur: 240ms; --text-morph-blur: 2px; --text-morph-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shake-distance: 6px; --shake-overshoot: 4px; --shake-dur-a: 80ms; --shake-dur-b: 60ms; --shake-ease: cubic-bezier(0.22, 1, 0.36, 1); --revert-dur: 280ms;
  --check-opacity-dur: 500ms; --check-rotate-dur: 500ms; --check-rotate-from: 80deg; --check-bob-dur: 500ms; --check-y-amount: 40px;
  --check-blur-dur: 500ms; --check-blur-from: 10px; --check-path-dur: 500ms; --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1); --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1); --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  --acc-expand: 250ms; --acc-collapse: 250ms; --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Texts reveal: the hero's lines rise out of a blur, 40ms apart. Run by CSS on load (no flash before the script), so
   the snippet's .is-shown transition is an animation here; same values. */
.t-stagger-line { animation: t-stagger-in var(--stagger-dur) var(--stagger-ease) both; will-change: transform, opacity, filter; }
.t-stagger-line:nth-child(2) { animation-delay: calc(1 * var(--stagger-stagger)); }
.t-stagger-line:nth-child(3) { animation-delay: calc(2 * var(--stagger-stagger)); }
.t-stagger-line:nth-child(4) { animation-delay: calc(3 * var(--stagger-stagger)); }
@keyframes t-stagger-in { from { opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur)); } }

/* Text states swap (the film's Pause / Play, Continue / Saving…). */
.t-text-swap { display: inline-block; transform: translateY(0); filter: blur(0); opacity: 1;
  transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity; }
.t-text-swap.is-exit { transform: translateY(calc(var(--text-swap-translate-y) * -1)); filter: blur(var(--text-swap-blur)); opacity: 0; }
.t-text-swap.is-enter-start { transform: translateY(var(--text-swap-translate-y)); filter: blur(var(--text-swap-blur)); opacity: 0; transition: none; }

/* Number subtle change (the calculator). */
.t-subtle-number { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.t-subtle-slot { position: relative; display: inline-block; }
.t-subtle-new { display: inline-block; }
.t-subtle-old { position: absolute; inset: 0; text-align: center; pointer-events: none; }
.t-subtle-number.is-animating .t-subtle-new { animation: t-subtle-in var(--subtle-dur) var(--subtle-ease) both; }
.t-subtle-number.is-animating .t-subtle-old { animation: t-subtle-out var(--subtle-dur) var(--subtle-ease) both; }
@keyframes t-subtle-in { from { transform: translateY(calc(var(--subtle-distance) * var(--subtle-dir, 1))); opacity: 0; filter: blur(var(--subtle-blur)); } }
@keyframes t-subtle-out { to { transform: translateY(calc(var(--subtle-distance) * var(--subtle-dir, 1) * -1)); opacity: 0; filter: blur(var(--subtle-blur)); } }

/* Tabs sliding: the ink ring slides between the booking values (it wraps to two rows on a phone, so it moves in y too). */
.seg.t-tabs { position: relative; }
.seg.t-tabs button { position: relative; z-index: 1; transition: color var(--tabs-dur) var(--tabs-ease); }
.seg.t-tabs.is-ready button[aria-pressed="true"] { box-shadow: none; }
.t-tabs-pill { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--color-ink);
  transform: translate(0, 0); transition: transform var(--tabs-dur) var(--tabs-ease);
  will-change: transform; z-index: 0; pointer-events: none; }
/* Hallmark 10a: only the position glides; the ring takes the new value's size at once (the values differ by a few px).
   With no script it has no size, and the pressed value draws its own ring. */

/* Page side-by-side (the application's steps): the step coming in slides from the side it's on, out of a blur.
   The steps differ in height, so they stay in the flow (hidden) and only the entrance animates. */
.fv-stepbox.is-entering { animation: t-page-in var(--page-slide-dur) var(--page-slide-ease) both; }
@keyframes t-page-in { from { opacity: 0; transform: translateX(calc(var(--page-slide-distance) * var(--page-dir, 1))); filter: blur(var(--page-blur)); } }

/* Text morph (the step's label: "Step 1 of 4: You" to "Step 2 of 4: Your venue"). */
.t-morph { white-space: nowrap; }
.t-morph-swap { display: inline-grid; vertical-align: bottom; justify-items: start; } /* Hallmark 10a: no width tween; the changing words cross-blur in place */
.t-morph-swap > span { grid-area: 1 / 1; white-space: pre; transition: opacity var(--text-morph-dur) var(--text-morph-ease), filter var(--text-morph-dur) var(--text-morph-ease); }
.t-morph-new { opacity: 0; filter: blur(var(--text-morph-blur)); }
.t-morph-swap.is-morphing .t-morph-old { opacity: 0; filter: blur(var(--text-morph-blur)); }
.t-morph-swap.is-morphing .t-morph-new { opacity: 1; filter: blur(0); }

/* Error state shake: the field that's missing shakes once; the message fades in under it. */
.t-input { will-change: transform; }
.t-input.is-shaking { animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear; }
@keyframes t-input-shake {
  0%      { transform: translateX(0);                                 animation-timing-function: var(--shake-ease); }
  28.57%  { transform: translateX(var(--shake-distance));             animation-timing-function: var(--shake-ease); }
  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57%  { transform: translateX(var(--shake-overshoot));            animation-timing-function: var(--shake-ease); }
  100%    { transform: translateX(0); }
}
.fv-form .error:not([hidden]) { animation: t-error-in var(--revert-dur) ease-out both; }
@keyframes t-error-in { from { opacity: 0; } }

/* Success check (Application in), then the outcome's lines reveal as the hero's do. */
.t-success-check { display: inline-block; transform-origin: center; opacity: 0; will-change: transform, opacity, filter; }
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path { stroke-dasharray: 19; stroke-dashoffset: 19; } /* the tick's getTotalLength() is 17.7, rounded up by 1 */
.t-success-check[data-state="in"] { animation: t-check-fade var(--check-opacity-dur) var(--check-ease-opacity) forwards, t-check-rotate var(--check-rotate-dur) var(--check-ease-rotate) forwards, t-check-blur var(--check-blur-dur) var(--check-ease-out) forwards, t-check-bob var(--check-bob-dur) var(--check-ease-bob) forwards; }
.t-success-check[data-state="in"] svg path { animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards; }
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }
.fv-outcome.is-shown > * { animation: t-stagger-in var(--stagger-dur) var(--stagger-ease) both; }
.fv-outcome.is-shown > :nth-child(2) { animation-delay: calc(1 * var(--stagger-stagger)); }
.fv-outcome.is-shown > :nth-child(3) { animation-delay: calc(2 * var(--stagger-stagger)); }
.fv-outcome.is-shown > :nth-child(n + 4) { animation-delay: calc(3 * var(--stagger-stagger)); }

/* Accordion expand (the questions): the answer grows from 0fr to 1fr out of a blur; the plus turns to a cross. */
.t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel { grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }
.t-acc-panel-inner { overflow: hidden; opacity: 0; filter: blur(2px); transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel-inner { opacity: 1; filter: blur(0); transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease); }
.t-acc .faq-q svg { transition: transform var(--acc-expand) var(--acc-ease); }
.faq-item.t-acc[open] .faq-q svg { transform: rotate(0deg); }
.faq-item.t-acc[open][data-open="true"] .faq-q svg { transform: rotate(45deg); }

/* Text swap soft (the home page's tone example): the email that comes in blurs into focus in place, no movement. */
:root { --text-soft-dur: 200ms; --text-soft-blur: 2px; --text-soft-ease: ease-in-out; }
.letter .body.is-entering { animation: t-soft-in var(--text-soft-dur) var(--text-soft-ease) both; }
@keyframes t-soft-in { from { opacity: 0; filter: blur(var(--text-soft-blur)); } }

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line, .fv-outcome.is-shown > *, .fv-stepbox.is-entering, .fv-form .error, .letter .body.is-entering { animation: none !important; }
  .t-text-swap, .t-morph-swap, .t-morph-swap > span, .t-tabs-pill, .seg.t-tabs button, .t-acc-panel, .t-acc-panel-inner, .t-acc .faq-q svg { transition: none !important; }
  .t-subtle-number .t-subtle-new { animation: none !important; }
  .t-subtle-number .t-subtle-old { display: none; }
  .t-input { animation: none !important; transform: none !important; }
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}