/* Hallmark · shape: Narrative Workflow (/), Long Document (legal) · genre: editorial · theme: brand · redesign: full
 * paper: oklch(97.6% 0.006 283) · accent: oklch(48% 0.125 152) · display: Hepta Slab · body: Inter (the project's face) · hero: Stage (/), Banner (/about, /products, /simulation, /reviews, /faq, /contact) · nav: three-part bar (seven real destinations) · footer: mast · signature: the WhatsApp payment conversation, set as the hero's object
 * axes: indigo-tint/slab/money-green · posture: committed (two indigo bands a page) · job: try (start a payment in WhatsApp) · imagery: the product built (the conversation), no photographs · copy: tightened where 19, 54, 58, 63 named it · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, the old page stacked six equal icon cards; set them as two-column rows under one head so the conversation and the steps carry the weight */
/* Hallmark · waive 47b · one phone frame, the bot's own messages inside · the product lives inside WhatsApp on a phone, so the frame is where it is used */
/* Hallmark · dropped the FAQ accordion (.acc-item, .acc-trigger, .acc-panel) · every answer now shows: they are short, and a reader on a phone should not tap twelve times to read them */
/* Hallmark · waive 84 · the conversation is built, not captured · the product is a WhatsApp bot with no screen of its own to capture; simulation.js replays it and a test keeps it in step with the bot */
/* Hallmark · dropped the three footer social links · each pointed at "#", no account was named; restore them with real addresses */
/* Hallmark · dropped the logo pictures on About and the icon tiles on every card · the logo stood in for a photograph and the tiles were the card template (3) */
/* Hallmark · dropped the five "Pay in full · BNPL" badges on Products · 63 and 69 name them; the banner and the BNPL section say it once */
/* Hallmark · dropped every eyebrow label (54) · each heading already said what its label did */
/* Hallmark · reworded the copy 19, 58 and 63 named · dashes became commas, colons or full stops; the hero lead became one sentence; the arrow left "Read more reviews"; the list is in the pull request */
/* Hallmark · dismissed kept-links · the "missing" WhatsApp links are the same links: analytics.js appends a per-visit session id at load, so the URL differs on every render */
/* Hallmark · dismissed 44c on inner pages · they use the Banner posture stated above; the linter reads one posture per stylesheet */
/* Hallmark · dismissed 19 on the hero's second action and the footer line · "See how it works" and "All rights reserved" are the owner's words */
/* Hallmark · dismissed F4 · .btn-light is the filled action only on the indigo bands, where the green one would repeat the hero's */
/* Hallmark · open 30a and 47a, by decision · the emoji are the bot's own menu labels and the provider strip shows the customer leaving WhatsApp for their provider; simulation.js replays the bot and a test keeps them equal */
@import url("./hepta-slab.css");
@import url("./tokens.css");
@import url("./base.css");

/* ── Type and shared parts ──────────────────────────────────────── */
html { scroll-behavior: smooth; }
strong, b { font-weight: 600; }
h2 + .lead, h1 + .lead { margin-top: var(--space-md); }
.lead { color: var(--color-ink-2); }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
.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); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
.text-link { color: var(--color-ink); font-weight: 600; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: var(--color-accent); }
.text-link:hover { color: var(--color-accent-2); }
.icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Twelve columns inside the container; sections place their parts on them. */
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }

/* ── Buttons: all eight states ──────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-whatsapp, .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn-whatsapp:hover, .btn-primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn-ghost { border-color: var(--color-rule); }
.btn-ghost:hover { border-color: var(--color-ink-2); background: var(--color-paper-2); }
.btn-sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn-block { width: 100%; }
.btn-light { background: var(--color-field-ink); border-color: var(--color-field-ink); color: var(--color-field); }
.btn-light:hover { background: var(--color-paper-2); border-color: var(--color-paper-2); }
.btn-on-field { border-color: var(--color-field-rule); color: var(--color-field-ink); }
.btn-on-field:hover { background: var(--color-field-2); border-color: var(--color-field-muted); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } }

/* ── Nav: wordmark, the seven pages, the three actions ──────────── */
.navbar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.navbar.scrolled { border-bottom-color: var(--color-rule); }
.navbar > .container { display: flex; align-items: center; gap: var(--space-xl); min-height: var(--nav-h); }
.brand { display: inline-flex; flex-shrink: 0; }
.brand img { height: 56px; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); margin-inline: auto; }
.nav-links a, .nav-actions .nav-text { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; padding-block: var(--space-xs); border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-actions .nav-text:hover { color: var(--color-ink); }
.nav-links a.active { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.nav-actions { display: flex; align-items: center; gap: var(--space-lg); flex-shrink: 0; }
.nav-actions .btn svg { color: var(--color-accent); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); cursor: pointer; }
.nav-toggle:hover { background: var(--color-paper-2); }
.nav-toggle:active { transform: translateY(1px); }
.nav-toggle svg { width: 22px; height: 22px; }
.mobile-menu { display: none; }
@media (max-width: 75rem) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu.open { display: grid; gap: var(--space-2xs); padding: var(--space-xs) var(--gutter) var(--space-lg); border-top: 1px solid var(--color-rule); background: var(--color-paper); }
  .mobile-menu a { padding-block: var(--space-sm); font-size: var(--text-lg); color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-rule); }
  .mobile-menu a.active { color: var(--color-accent-2); }
  .mobile-menu .btn { margin-top: var(--space-md); border-bottom: 1px solid var(--color-accent); color: var(--color-accent-ink); }
}

/* ── Sections and bands ─────────────────────────────────────────── */
.section { padding-block: var(--section-gap-s); }
.section + .section { padding-top: 0; }
.section.rule-top { border-top: 1px solid var(--color-rule); padding-top: var(--section-gap-s); }
.well { background: var(--color-paper-2); }
.section.well + .section, .section + .section.well, .band + .section { padding-top: var(--section-gap-s); }
.band { background: var(--color-field); color: var(--color-field-ink); padding-block: var(--section-gap-s); }
.band h2, .band h3 { color: var(--color-field-ink); }
.band p { color: var(--color-field-muted); }
.band :focus-visible { outline-color: var(--color-focus-on-field); }
.head-block { grid-column: 1 / span 7; }
.head-block .lead { margin-top: var(--space-md); }

/* ── Home: the hero ─────────────────────────────────────────────── */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; min-height: calc(100svh - var(--nav-h) - var(--space-2xl) - var(--space-3xl)); }
.hero-copy h1 { max-width: 13ch; }
.hero-copy .lead { margin-top: var(--space-lg); max-width: 36ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero-facts { display: grid; gap: var(--space-xs); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 46ch; }
.hero-facts li { display: flex; align-items: center; gap: var(--space-xs); }
.hero-facts svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-accent); }
.hero-facts a { color: var(--color-ink); font-weight: 600; text-decoration: none; }
.hero-facts a:hover { text-decoration: underline; }
.hero-visual { display: flex; justify-content: center; margin: 0; }

/* ── The conversation: a phone holding the bot's own messages ───── */
.phone { position: relative; width: min(340px, 100%); height: min(680px, calc(100svh - var(--nav-h) - var(--space-2xl))); min-height: 560px; padding: var(--space-sm); border-radius: var(--radius-phone); background: var(--color-ink); box-shadow: var(--shadow-object); }
.phone::before { content: ""; position: absolute; top: var(--space-sm); left: 50%; transform: translateX(-50%); width: 112px; height: 22px; border-radius: 0 0 14px 14px; background: var(--color-ink); z-index: 5; }
.phone-screen { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius-screen); background: var(--wa-panel); position: relative; }
.wa-header { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xl) var(--space-md) var(--space-sm); background: var(--wa-header); color: var(--wa-bubble-in); flex-shrink: 0; }
.wa-header .avatar { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--wa-bubble-in); flex-shrink: 0; }
.wa-header .avatar img { width: 26px; }
.wa-header .who { flex-grow: 1; line-height: 1.3; }
.wa-header .who strong { display: block; font-size: var(--text-md); }
.wa-header .who span { font-size: var(--text-xs); color: var(--wa-panel); }
.wa-header .icons { display: flex; gap: var(--space-md); }
.wa-header svg { width: 20px; height: 20px; }
.wa-body { flex-grow: 1; display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md) var(--space-sm); overflow-y: auto; }
.wa-row { display: flex; }
.wa-row.out { justify-content: flex-end; }
.bubble { position: relative; max-width: 82%; padding: var(--space-xs) var(--space-sm) var(--space-2xs); border-radius: 10px; font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink); box-shadow: 0 1px 1px var(--wa-shade); animation: bubble-in var(--dur-short) var(--ease-out); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.bubble.in { background: var(--wa-bubble-in); border-top-left-radius: 2px; }
.bubble.out { background: var(--wa-bubble-out); border-top-right-radius: 2px; }
.bubble .meta { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3xs); margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--wa-meta); }
.bubble .meta svg { width: 14px; height: 14px; color: var(--wa-tick); }
.bubble-buttons { display: flex; flex-direction: column; margin-top: var(--space-xs); }
.bubble-buttons button, .bubble-buttons .choice { display: block; padding: var(--space-xs) var(--space-2xs) var(--space-3xs); border: 0; border-top: 1px solid var(--wa-shade); background: none; color: var(--wa-link); font: 600 var(--text-sm)/1.4 var(--font-body); text-align: center; }
.bubble-link { display: block; margin-top: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: 8px; background: var(--wa-link-soft); color: var(--wa-link); font-weight: 600; font-size: var(--text-sm); text-decoration: none; }
.bubble-link.invoice-link { cursor: pointer; }
/* The cart demo taps it itself before opening the invoice (simulation.js). */
.bubble-link.invoice-link.is-tapped { background: var(--wa-panel); transform: scale(0.98); }
.bubble-link.invoice-link:hover { background: var(--wa-panel); }
.typing { display: flex; gap: var(--space-2xs); width: fit-content; padding: var(--space-sm) var(--space-md); border-radius: 10px; border-top-left-radius: 2px; background: var(--wa-bubble-in); box-shadow: 0 1px 1px var(--wa-shade); }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--wa-meta); animation: typing-blink 1.2s infinite var(--ease-in-out); }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
.wa-inputbar { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: var(--wa-panel); flex-shrink: 0; }
.wa-inputbar .field { flex-grow: 1; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--wa-bubble-in); font-size: var(--text-sm); color: var(--wa-meta); }
.wa-inputbar .mic { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--wa-header); color: var(--wa-bubble-in); flex-shrink: 0; }
.wa-inputbar .mic svg { width: 18px; height: 18px; }
.wa-divider-row { display: flex; justify-content: center; margin-block: var(--space-2xs); }
.wa-divider { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--wa-shade); color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 600; text-align: center; }
.bubble.other-device.in { background: var(--wa-other-in); }
.bubble.other-device.out { background: var(--wa-other-out); }

/* Leaving WhatsApp for the customer's own provider, and the invoice (simulation.html). */
.bnpl-overlay, .invoice-overlay { position: absolute; inset: var(--space-sm); z-index: 20; display: none; flex-direction: column; overflow: hidden; border-radius: var(--radius-screen); background: var(--color-paper); }
.bnpl-overlay.show { display: flex; animation: overlay-in var(--dur-short) var(--ease-out); }
.invoice-overlay { display: flex; z-index: 25; background: var(--color-paper-2); animation: overlay-in var(--dur-short) var(--ease-out); }
.invoice-overlay[hidden] { display: none !important; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.bnpl-browser-bar { padding: var(--space-xl) var(--space-md) var(--space-sm); border-bottom: 1px solid var(--color-rule); background: var(--color-paper-2); font-size: var(--text-xs); color: var(--color-ink-2); text-align: center; flex-shrink: 0; }
.bnpl-overlay-body { flex-grow: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg); text-align: center; }
.bnpl-overlay-body h4 { margin: var(--space-2xs) 0 0; font-size: var(--text-md); }
.bnpl-overlay-body p.sub { margin-bottom: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
.bnpl-logo { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--color-field); color: var(--color-field-ink); font-size: var(--text-xl); }
.bnpl-field-mock { width: 100%; text-align: left; }
.bnpl-field-mock label { display: block; margin-bottom: var(--space-2xs); font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); }
.bnpl-field-mock .input-mock { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink); }
.bnpl-otp-row { display: flex; justify-content: center; gap: var(--space-xs); }
.bnpl-otp-row .digit { display: flex; align-items: center; justify-content: center; width: 34px; height: 40px; border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper-2); font-weight: 600; }
.bnpl-btn-mock { width: 100%; margin-top: var(--space-2xs); padding: var(--space-sm); border-radius: var(--radius-pill); background: var(--color-field); color: var(--color-field-ink); font-weight: 600; font-size: var(--text-sm); }
.bnpl-status { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
.bnpl-status .check { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-2); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.bnpl-amount { font: 600 var(--text-2xl)/1.1 var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.bnpl-breakdown { display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; margin-block: var(--space-2xs); }
.bnpl-breakdown .row { display: flex; justify-content: space-between; padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.bnpl-breakdown .row.total { padding-top: var(--space-3xs); border-bottom: 0; color: var(--color-ink); font-weight: 600; }
.invoice-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xl) var(--space-md) var(--space-xs); border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); flex-shrink: 0; }
.invoice-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-rule); border-radius: 50%; background: var(--color-paper); color: var(--color-ink-2); cursor: pointer; }
.invoice-close:hover { background: var(--color-paper-3); }
.invoice-sheet { margin: var(--space-sm); padding: var(--space-md) var(--space-sm); overflow-y: auto; border-radius: 10px; background: var(--color-paper); font-size: var(--text-xs); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.invoice-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.invoice-head img { width: 88px; height: auto; }
.invoice-title { font: 600 var(--text-lg)/1 var(--font-display); color: var(--color-field); }
.invoice-meta, .invoice-totals { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-xs); margin: 0; }
.invoice-meta dt, .invoice-totals dt { font-weight: 600; }
.invoice-meta dd, .invoice-totals dd { margin: 0; color: var(--color-ink-2); }
.invoice-meta { padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-rule); }
.invoice-lines { width: 100%; margin-block: var(--space-xs); border-collapse: collapse; }
.invoice-lines th { padding: var(--space-2xs); background: var(--color-paper-2); font-weight: 600; text-align: left; }
.invoice-lines td { padding: var(--space-2xs); border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.invoice-lines .num { text-align: right; white-space: nowrap; }
.invoice-totals { grid-template-columns: 1fr auto; justify-items: end; }
.invoice-totals dt { justify-self: start; }
.invoice-totals .grand { padding-top: var(--space-2xs); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.invoice-note { margin: var(--space-sm) 0 0; font-size: var(--text-xs); line-height: 1.45; color: var(--color-muted); }

/* ── Home: scan the code (the first band) ───────────────────────── */
.scan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2xl); align-items: center; }
.scan-qr { width: 168px; height: 168px; padding: var(--space-sm); border-radius: var(--radius-card); background: var(--color-tile); }
.scan h2 { font-size: var(--text-section); max-width: 16ch; }
.scan p { margin-top: var(--space-sm); max-width: 46ch; }
.scan .scan-number { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-field-ink); }
.scan .scan-number svg { width: 18px; height: 18px; color: var(--color-focus-on-field); flex-shrink: 0; }

/* ── Home: the services, set as a statement ─────────────────────── */
.services h2 { grid-column: 1 / span 4; font-size: var(--text-title); line-height: 1.3; max-width: 22ch; color: var(--color-ink-2); }
.services ul { grid-column: 5 / span 8; display: flex; flex-wrap: wrap; column-gap: var(--space-sm); row-gap: var(--space-xs); }
.services li { font: var(--display-weight) var(--text-display-s)/1.1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.services li:not(:last-child)::after { content: ","; color: var(--color-muted); }

/* ── Home: the four taps, a real ordered list ───────────────────── */
.steps-head { grid-column: 1 / span 8; }
.steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); counter-reset: tap; }
.step { counter-increment: tap; padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.step::before { content: counter(tap); display: block; margin-bottom: var(--space-lg); font: var(--display-weight) var(--text-display)/1 var(--font-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--text-title); }
.step p { margin-top: var(--space-sm); color: var(--color-ink-2); }

/* ── Home and About: facts as rows under one head ───────────────── */
.rows-head { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
.rows { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); margin: 0; }
.rows > div { padding-block: var(--space-lg) var(--space-xl); border-top: 1px solid var(--color-rule); }
.rows dt { font: var(--display-weight) var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.rows dd { margin: var(--space-sm) 0 0; color: var(--color-ink-2); max-width: 40ch; }

/* ── Home: the figures the business stands behind ───────────────── */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { padding-inline: var(--space-lg); border-left: 1px solid var(--color-rule); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat .num { font: var(--display-weight) var(--text-display)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .label { margin-top: var(--space-sm); color: var(--color-ink-2); }

/* ── Home: our adverts (adverts.js; videos from scripts/adverts.py) ─
 * The newest advert plays silently on a screen at the left. Behind it, its own
 * poster, blurred, fades out to the right into the heading and thumbnails. */
.adverts[hidden] { display: none; }
.adverts-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: center; }
.advert-stage { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(30rem, 72svh, 44rem); padding: var(--space-2xl) var(--space-2xl) var(--space-2xl) clamp(var(--space-lg), 5vw, var(--space-3xl)); }
.advert-backdrop { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); background: var(--color-field); filter: blur(28px) saturate(1.15) brightness(0.85); transform: scale(1.08); opacity: 0; transition: opacity var(--dur-long) var(--ease-out); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 100%); }
.advert-stage.is-ready .advert-backdrop { opacity: 1; }
.advert-feature { display: grid; justify-items: center; gap: var(--space-sm); }
.advert-screen { position: relative; display: block; height: clamp(24rem, 62svh, 38rem); aspect-ratio: 9 / 16; padding: 0; overflow: hidden; border: 8px solid var(--color-ink); border-radius: var(--radius-phone); background: var(--color-ink); box-shadow: var(--shadow-object); cursor: pointer; }
.advert-screen img, .advert-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-phone) - 8px); }
.advert-play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); box-shadow: var(--shadow-object); transform: translate(-50%, -50%); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.advert-play svg { width: 30px; height: 30px; margin-left: 4px; }
.advert-screen:hover .advert-play { background: var(--color-accent-2); transform: translate(-50%, -50%) scale(1.06); }
.advert-screen:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.advert-caption { display: flex; gap: var(--space-xs); align-items: baseline; max-width: 100%; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: oklch(18% 0.05 283 / 0.78); font-size: var(--text-sm); color: var(--color-field-ink); }
.advert-caption span { color: var(--color-field-muted); font-variant-numeric: tabular-nums; }
.adverts-copy h2 { font-size: var(--text-section); }
.adverts-copy .lead { max-width: 38ch; }
.advert-thumbs { display: flex; gap: var(--space-md); margin-top: var(--space-xl); padding: var(--space-2xs) var(--space-2xs) var(--space-sm); overflow-x: auto; scroll-snap-type: x proximity; }
/* The strip fades out on the right when there are more adverts than fit. */
.advert-thumbs.is-overflowing { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.advert-thumb { display: grid; gap: var(--space-2xs); width: 128px; padding: 0; border: 0; background: none; color: var(--color-ink); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
.advert-thumb .frame { position: relative; display: block; aspect-ratio: 9 / 14; overflow: hidden; border-radius: var(--radius-card); background: var(--color-ink); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color var(--dur-short) var(--ease-out); }
.advert-thumb .frame::after { content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 6.5v11l8.5-5.5z'/%3E%3C/svg%3E") center / 18px no-repeat; transform: translate(-50%, -50%); }
.advert-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-short) var(--ease-out); }
.advert-thumb:hover img { transform: scale(1.05); }
.advert-thumb.is-current .frame { outline-color: var(--color-accent); }
.advert-thumb:focus-visible { outline: none; }
.advert-thumb:focus-visible .frame { outline-color: var(--color-focus); }
.advert-thumb .t-title { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.advert-thumb .t-time { font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
/* The player: the advert with sound, over a dimmed page. */
.advert-player { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-field-ink); }
.advert-player::backdrop { background: oklch(14% 0.04 283 / 0.9); }
.advert-player-inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); height: 100%; padding: var(--space-3xl) var(--gutter) var(--space-xl); }
.advert-player video { max-width: 100%; max-height: calc(100svh - 9rem); border-radius: 12px; background: #000; }
.advert-player-title { font-weight: 600; text-align: center; }
.advert-close { position: absolute; top: var(--space-md); right: var(--space-md); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-field-rule); border-radius: 50%; background: var(--color-field); color: var(--color-field-ink); cursor: pointer; }
.advert-close:hover { background: var(--color-field-2); }
.advert-close:focus-visible { outline: 3px solid var(--color-focus-on-field); outline-offset: 2px; }
.advert-close svg { width: 20px; height: 20px; }
html.advert-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .advert-backdrop, .advert-play, .advert-thumb img { transition: none; }
  .advert-screen:hover .advert-play { transform: translate(-50%, -50%); }
  .advert-thumb:hover img { transform: none; }
}

/* ── Reviews (home, filled by main.js; reviews page, by reviews.js) ─ */
.grid { display: grid; gap: var(--gap-columns); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.testimonial { display: flex; flex-direction: column; gap: var(--space-md); padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.testimonial .stars { color: var(--color-accent); font-size: var(--text-lg); }
.testimonial .quote { font: 500 var(--text-lg)/1.45 var(--font-display); color: var(--color-ink); max-width: 40ch; }
.testimonial .who { display: flex; align-items: center; gap: var(--space-sm); margin-top: auto; }
.testimonial .avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-paper-3); color: var(--color-ink); font-weight: 600; }
.more-link { margin-top: var(--space-xl); }

/* ── The closing band ───────────────────────────────────────────── */
.close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }
.close h2 { max-width: 18ch; }
.close p { margin-top: var(--space-md); font-size: var(--text-lead); max-width: 48ch; }
.close .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: flex-end; }

/* ── Inner pages: the banner ────────────────────────────────────── */
.page-header { padding-block: var(--space-3xl) var(--space-2xl); border-bottom: 1px solid var(--color-rule); }
.page-header h1 { max-width: 18ch; }
.page-header p { margin-top: var(--space-lg); font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); max-width: 52ch; }
.page-header p a { color: var(--color-ink); font-weight: 600; }
.page-header.compact { padding-block: var(--space-2xl) var(--space-xl); }
.page-header + .section { padding-top: var(--space-xl); }

/* ── About ──────────────────────────────────────────────────────── */
.story h2 { grid-column: 1 / span 10; max-width: 22ch; font-size: var(--text-display-s); }
.story .story-body { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.story .story-body p { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); max-width: 46ch; }
.story .story-body p:first-child { color: var(--color-ink); }
.trio { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.trio > div { padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.trio h3 { font-size: var(--text-title); }
.trio p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.checklist { grid-column: 7 / span 6; display: grid; }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-sm); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-lg); color: var(--color-ink); }
.checklist li:last-child { border-bottom: 1px solid var(--color-rule); }
.checklist svg { width: 24px; height: 24px; margin-top: var(--space-3xs); color: var(--color-accent); flex-shrink: 0; }
.checklist-head { grid-column: 1 / span 5; }

/* ── Products: an index of what can be paid ─────────────────────── */
.product-list { display: grid; }
.product-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.product-row:last-child { border-bottom: 1px solid var(--color-rule); }
.product-row h2 { grid-column: 1 / span 4; font-size: clamp(1.75rem, 2vw + 0.75rem, 2.5rem); line-height: 1.1; }
.product-row > p { grid-column: 5 / span 4; color: var(--color-ink-2); }
.product-row dl { grid-column: 9 / span 4; display: grid; gap: var(--space-sm); margin: 0; }
.product-row dl div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-sm); }
.product-row dt { font-weight: 600; color: var(--color-ink); }
.product-row dd { margin: 0; color: var(--color-ink-2); }
.choice-note { margin-bottom: var(--space-xl); color: var(--color-ink-2); }

/* ── Simulation ─────────────────────────────────────────────────── */
.sim-wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.sim-panel { display: grid; gap: var(--space-lg); }
.sim-label { font-size: var(--text-sm); color: var(--color-muted); }
.sim-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.sim-tab { min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink-2); font: 600 var(--text-sm)/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); }
.sim-tab:hover { background: var(--color-paper-2); color: var(--color-ink); }
.sim-tab:active { transform: translateY(1px); }
.sim-tab.active { background: var(--color-field); border-color: var(--color-field); color: var(--color-field-ink); }
.sim-tab.coming-soon { border-style: dashed; color: var(--color-muted); }
.sim-tab.coming-soon.active { background: var(--color-ink-2); border-color: var(--color-ink-2); border-style: solid; color: var(--color-paper); }
.sim-panel h2 { font-size: var(--text-section); }
.sim-steps-list { display: grid; }
.sim-steps-list li { display: flex; align-items: flex-start; gap: var(--space-sm); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); }
.sim-steps-list svg { width: 18px; height: 18px; margin-top: var(--space-2xs); color: var(--color-accent); flex-shrink: 0; }
/* Under the phone, so Play sits next to the conversation it plays. */
.sim-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }
.sim-note { font-size: var(--text-sm); color: var(--color-muted); max-width: 52ch; }
.sim-visual { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
/* The phone is pinned while the page scrolls; leave room under it for the controls. */
.sim-visual .phone { height: min(680px, calc(100svh - var(--nav-h) - var(--space-2xl) - 4.5rem)); min-height: 500px; }

/* ── FAQ: each group's head beside its questions ────────────────── */
.faq-group { padding-block: var(--space-2xl); }
.faq-group:first-child { padding-top: 0; }
.faq-group h2 { grid-column: 1 / span 4; font-size: var(--text-section); }
.qa-list { grid-column: 5 / span 8; display: grid; }
.qa { padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.qa:last-child { border-bottom: 1px solid var(--color-rule); }
.qa h3 { font: 600 var(--text-lg)/1.35 var(--font-body); letter-spacing: 0; max-width: 48ch; }
.qa p { margin-top: var(--space-xs); color: var(--color-ink-2); max-width: 62ch; }
.qa a { color: var(--color-ink); font-weight: 600; }

/* ── Contact and reviews: the forms ─────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: start; }
.contact-facts { display: grid; margin-top: var(--space-xl); }
.contact-facts div { padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.contact-facts div:last-child { border-bottom: 1px solid var(--color-rule); }
.contact-facts h3 { font-size: var(--text-title); }
.contact-facts p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.form-panel { padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.form-panel h3 { font-size: var(--text-title); }
.form-panel .form-note { margin-top: var(--space-xs); margin-bottom: var(--space-lg); color: var(--color-ink-2); }
.form-field { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.form-field label, .form-field .field-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.form-field input, .form-field textarea, .form-field select { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus-visible, .form-field textarea:focus-visible, .form-field select:focus-visible { outline-color: var(--color-focus); }
.form-field input:disabled, .form-field textarea:disabled, .form-field select:disabled { opacity: 0.55; cursor: not-allowed; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--color-muted); }
.form-msg { min-height: 1lh; margin-top: var(--space-sm); font-size: var(--text-sm); font-weight: 600; }
.form-msg.ok { color: var(--color-success); }
.form-msg.err { color: var(--color-error); }
#star-picker { display: flex; gap: var(--space-2xs); font-size: var(--text-2xl); line-height: 1; cursor: pointer; color: var(--color-rule); }
.reviews-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.reviews-layout h2 { font-size: var(--text-section); margin-bottom: var(--space-xl); }
.reviews-layout .grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.reviews-status { color: var(--color-muted); }

/* ── Legal pages and the 404 ────────────────────────────────────── */
.legal > * { max-width: 70ch; }
.legal h2 { margin-top: var(--space-2xl); margin-bottom: var(--space-sm); font-size: var(--text-xl); max-width: none; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { margin-bottom: var(--space-sm); line-height: 1.7; color: var(--color-ink-2); }
.legal ul { padding-left: var(--space-lg); list-style: disc; }
.legal a { color: var(--color-ink); font-weight: 600; }
.legal-updated { margin-bottom: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.not-found { padding-block: var(--space-4xl) var(--section-gap); }
.not-found .code { font: var(--display-weight) clamp(6rem, 16vw, 12rem)/0.9 var(--font-display); color: var(--color-field); font-variant-numeric: tabular-nums; }
.not-found h1 { margin-top: var(--space-lg); font-size: var(--text-section); }
.not-found p { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 48ch; }
.not-found .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

/* ── Footer: the mast ───────────────────────────────────────────── */
.footer { padding-block: var(--space-3xl) var(--space-xl); background: var(--color-paper-2); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 6fr) repeat(3, minmax(0, 2fr)); gap: var(--gap-columns); }
.footer-brand img { height: 80px; width: auto; }
.footer .tag { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 40ch; }
.footer-head { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.footer ul { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.footer ul a { color: var(--color-ink); text-decoration: none; }
.footer ul a:hover { text-decoration: underline; }
.footer-bottom { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.footer-bottom address { font-style: normal; margin-top: var(--space-xs); }

/* ── Narrow screens ─────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .cols { row-gap: var(--space-xl); }
  .cols > * { grid-column: 1 / -1 !important; }
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .hero-grid, .close, .contact-grid, .sim-wrap, .reviews-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; }
  .scan { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .steps, .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .rows-head, .sim-visual { position: static; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .close .actions { justify-content: flex-start; }
  .product-row > * { grid-column: 1 / -1 !important; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  /* Adverts: the screen above, the backdrop fading down into the heading below. */
  .adverts-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .advert-stage { justify-content: center; min-height: 0; padding: var(--space-xl) var(--space-md) var(--space-2xl); }
  .advert-backdrop { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); }
  .advert-screen { height: min(70svh, 34rem); }
}
@media (max-width: 40rem) {
  .steps, .trio, .rows, .story .story-body { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { padding: var(--space-md) 0; border-left: 0; border-top: 1px solid var(--color-rule); }
  .stat:first-child { border-top: 0; }
  .hero-actions .btn, .close .actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-panel { padding: var(--space-lg); }
  .phone { min-height: 520px; }
}