/* Hallmark · shape: Conversational FAQ · genre: atmospheric · theme: Ribbon (deal 3/3, seed light-mode-simple-elegante-9cc7·82072261·2026-11-10·r0) · job: try · draw: 90246b
 * hero: Stage (swapped from Banner: the signature is a portrait product window) · nav: edge-aligned (swapped from search-led: three destinations, nothing to search) · footer: statement · imagery: screenshots 4 (real frontend, sample data, captured in the built-in browser) · signature: the floating Whisperer window, two ideas on screen, in the hero · ribbon: dawn, no night canvas (the owner asked for light mode)
 * axes: light/grotesk-sans/chromatic-teal · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a five-euro beta meets doubt, so every section is the question a doubter asks and the table says plainly what goes to the cloud */
/* Hallmark · waive 85 · the owner asked for a waitlist sign-up at the price · until the checkout link exists the price block can only take an email, and it becomes the buy button when CHECKOUT_URL is set */
@import url("./fonts.css");
@import url("./tokens.css");
@import url("./base.css");

:root {
  --nav-height: 72px;
  --radius-window: 16px;
  --shadow-window: 0 1px 0 oklch(20% 0.01 80 / 0.12), 0 30px 60px -28px oklch(20% 0.02 80 / 0.38);
  --outline-shot: color-mix(in oklab, var(--color-ink) 9%, transparent);
  --sheen-primary: oklch(100% 0 0 / 0.22);
  --drop-widget: oklch(20% 0.02 80 / 0.22);
  --gap-split: var(--space-2xl);
}

body { color: var(--color-ink); }
p { color: var(--color-muted); }
.lead { color: var(--color-ink-2); }

/* Skip link */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-part); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Nav: wordmark and one action at opposite edges */
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-height); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); font: 500 var(--text-lg)/1 var(--font-display); letter-spacing: -0.02em; text-decoration: none; color: var(--color-ink); }
.wordmark__dot { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--color-accent); box-shadow: var(--edge-light); }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-part); }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); }
.nav__link { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.nav__link:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.nav__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-part); }

/* Machined controls (Ribbon): 52px pills lit from above */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; 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); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), filter var(--dur-short) var(--ease-out); }
.btn:hover { filter: brightness(1.03); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; filter: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 var(--sheen-primary), var(--shadow-part); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--quiet { box-shadow: var(--edge-light); }
.btn--nav { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn--wide { width: 100%; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }

.textlink { color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.22em; }
.textlink:hover { text-decoration-color: var(--color-accent); }
.textlink:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-part); }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Product captures: real screens, framed in the theme, no browser chrome */
.shot { width: 100%; border-radius: var(--radius-window); outline: 1px solid var(--outline-shot); outline-offset: -1px; }
.shot[data-kind="product"] > img { filter: none; }
.shot--window { aspect-ratio: 1800 / 1125; box-shadow: var(--shadow-window); }
.shot--widget { aspect-ratio: 600 / 760; border-radius: var(--radius-window); background: transparent; outline: 0; filter: drop-shadow(0 28px 36px var(--drop-widget)); }
.shot--panel { aspect-ratio: 1450 / 880; border-radius: var(--radius-card); }
.shot--dialog { aspect-ratio: 1520 / 1440; box-shadow: var(--shadow-window); }
figure { margin: 0; }
figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 60ch; }

/* Hero: Stage, the text on seven columns and the window on five */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-split); align-items: center; min-height: calc(100dvh - var(--nav-height) - var(--space-2xl) - var(--space-3xl)); }
.hero h1 { max-width: 13ch; font-size: clamp(2.75rem, 5.2vw + 0.75rem, 5.5rem); line-height: 1.02; }
.hero .lead { margin-top: var(--space-lg); max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.hero__terms { margin-top: var(--space-lg); font-size: var(--text-sm); }
.hero__shot { justify-self: start; width: min(100%, 420px); }
.hero__shot figcaption { text-align: center; margin-inline: auto; }

/* Head blocks */
.head-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-split); align-items: end; margin-bottom: var(--space-2xl); }
.head-split .lead { justify-self: end; max-width: 40ch; }

/* During the call: rows as a list of levels */
.during { padding-block: var(--section-gap-s) var(--section-gap); }
.during h2 { margin-bottom: var(--space-2xl); }
.rows { margin: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.rows__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-split); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows dt { font: 400 var(--text-xl)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
.rows dd { margin: 0; max-width: 56ch; font-size: var(--text-lg); line-height: 1.5; color: var(--color-muted); }
kbd { display: inline-block; min-width: 1.9em; padding: var(--space-3xs) var(--space-xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-part); background: linear-gradient(var(--metal-hi), var(--metal-lo)); box-shadow: var(--edge-light), 0 1px 0 var(--color-rule); color: var(--color-ink); font: 500 0.85em/1.3 var(--font-body); text-align: center; }

/* Where it gets its answers: showcase, then the folders beside three facts */
.source { padding-block: var(--section-gap) var(--section-gap-s); }
.source__main figcaption { margin-top: var(--space-md); }
.source__more { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-split); align-items: center; margin-top: var(--space-3xl); }
.facts { display: grid; gap: var(--space-xl); margin: 0; }
.facts dt { font: 500 var(--text-lg)/1.25 var(--font-body); color: var(--color-ink); }
.facts dd { margin: var(--space-xs) 0 0; color: var(--color-muted); max-width: 44ch; }

/* After the call: split, text on five, the summary on seven */
.after { padding-block: var(--section-gap-l) var(--section-gap); background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule-2); }
.after__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-split); align-items: center; }
.after .lead { margin-top: var(--space-lg); }
.after__note { margin-top: var(--space-lg); max-width: 44ch; }

/* What leaves the computer: a plain table */
.local { padding-block: var(--section-gap) var(--section-gap-s); }
.where { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.where thead th { padding: 0 0 var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-ink-2); font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); text-align: left; white-space: nowrap; }
.where tbody th, .where td { padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: baseline; }
.where tbody th { width: 34%; padding-right: var(--gap-split); font: 400 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--color-ink); }
.where td { color: var(--color-ink-2); line-height: 1.55; max-width: 60ch; }

/* The price and the action */
.offer { padding-block: var(--section-gap-l); }
.offer__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-split); align-items: center; }
.price { margin-top: var(--space-md); }
.price__figure { display: block; font: 400 clamp(6rem, 13vw, 10rem)/0.9 var(--font-display); letter-spacing: -0.05em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.offer__terms { margin-top: var(--space-xl); max-width: 40ch; font-size: var(--text-lg); color: var(--color-ink-2); }
.offer__beta { margin-top: var(--space-md); max-width: 44ch; }
.offer__beta a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.offer__action { 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); }
.offer__small { margin-top: var(--space-sm); font-size: var(--text-sm); text-align: center; }

.signup { display: grid; gap: var(--space-sm); }
.signup__title { font-size: var(--text-title); }
.signup__title { margin-bottom: var(--space-sm); }
.signup__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.signup__input { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
.signup__input:focus-visible { outline-color: var(--color-focus); }
.signup__input[aria-invalid="true"] { border-color: var(--color-error); }
.signup__input:disabled { opacity: 0.55; cursor: not-allowed; }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; margin-block: var(--space-xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: var(--space-3xs) 0 0; accent-color: var(--color-accent); cursor: pointer; }
.consent input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.consent a { color: var(--color-ink); text-decoration-color: var(--color-accent); white-space: nowrap; }
.signup__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.signup__help[data-tone="error"] { color: var(--color-error); }
.signup__help[data-tone="ok"] { color: var(--color-success); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Footer: one closing sentence, the links beneath */
.footer { padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.footer__statement { max-width: 24ch; font: 400 var(--text-section)/1.08 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-wrap: balance; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.footer__links a { color: var(--color-ink-2); white-space: nowrap; }
.footer__links a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.footer__legal { margin-top: var(--space-lg); font-size: var(--text-sm); }

/* Inner pages: install guide and privacy, a headline screen then one short section per question */
.doc { padding-bottom: var(--section-gap); }
.doc__hero { display: grid; align-items: center; min-height: calc(100svh - var(--nav-height) - var(--space-xl)); padding-block: var(--space-2xl); }
.doc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-split); align-items: center; }
.doc__head h1 { max-width: 12ch; font-size: clamp(2.75rem, 5.2vw + 0.75rem, 5.5rem); line-height: 1.02; }
.doc__head .lead { margin-top: var(--space-lg); max-width: 36ch; }
.doc__panel { 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); }
.doc__panel-title { margin: 0; max-width: none; font: 400 var(--text-title)/1.2 var(--font-display); color: var(--color-ink); }
.doc__facts { margin: var(--space-lg) 0 0; font-size: var(--text-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.doc__facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.doc__facts dt { font-weight: 500; color: var(--color-ink); }
.doc__facts dd { margin: 0; color: var(--color-ink-2); }
.doc__section { padding-top: var(--section-gap-l); }
.doc__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-split); align-items: start; padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.doc__inner h2 { max-width: 12ch; }
.doc__text { display: grid; gap: var(--space-lg); max-width: 46ch; margin: 0; font-size: var(--text-xl); line-height: 1.5; color: var(--color-ink-2); }
.doc__text p { color: var(--color-ink-2); }
.doc__text a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.steps { padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-sm); }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-top: 0.1em; 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), 0 1px 0 var(--color-rule); font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.ui { color: var(--color-ink); font-weight: 500; }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: var(--radius-part); color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.doc__cta { margin-top: var(--space-xl); }

/* Narrow screens */
@media (max-width: 60rem) {
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); min-height: 0; }
  .hero__shot { justify-self: start; width: min(100%, 340px); }
  .hero__shot figcaption { text-align: left; margin-inline: 0; }
  .head-split, .source__more, .after__grid, .offer__grid, .doc__grid, .doc__inner { grid-template-columns: minmax(0, 1fr); }
  .head-split { gap: var(--space-md); }
  .head-split .lead { justify-self: start; }
  .rows__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-lg); }
  .source__more { gap: var(--space-xl); margin-top: var(--space-2xl); }
  .after__grid, .offer__grid { gap: var(--space-2xl); }
  .nav__link { font-size: var(--text-md); }
  .doc__hero { min-height: 0; padding-block: var(--space-2xl) var(--space-xl); }
  .doc__inner { gap: var(--space-lg); }
  .doc__text { font-size: var(--text-lg); }
}
@media (max-width: 40rem) {
  :root { --gap-split: var(--space-lg); }
  .nav__link { display: none; }
  .btn--nav { padding: 0 var(--space-sm); }
  .where thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .where tr { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .where tbody th, .where td { display: block; width: auto; padding: 0; border: 0; }
  .offer__action { padding: var(--space-lg); }
  .doc__panel { padding: var(--space-lg); }
  .doc__facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); padding-block: var(--space-md); }
  .rows dd { font-size: var(--text-md); }
}