/* Hallmark · shape: Manifesto (draw c035f9) · genre: atmospheric · theme: Ribbon (by project: the /welcome landing's tokens, inlined at build) · job: sign up
 * hero: Banner, set left (the landing's is centred) · nav: edge-aligned · footer: mast · imagery: the landing's two chat captures, on /features only; the rest is type, rules and tables · signature: the visitor's own sentences set large, each with what comes back · ribbon: dawn in light, two-in-the-morning in dark
 * axes: light/rounded-sans/chromatic-teal · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, seven intent pages share one skeleton on purpose (a site of pages, one per thing people search for); each page's sentences, answers and plan lines are its own */
/* Hallmark · dismissed 77 · /sitemap is a utility index by design: the banner, one list of every page by purpose, the footer */
/* Hallmark · swapped the draw's code sample for the sentences people type (there is no code to show) and its period-switch pricing for a two-row table (there is no yearly plan) */
/* ---- the landing's tokens (src/pages/welcome/tokens.css), inlined at build ---- */
/* Landing tokens: Hallmark's Ribbon material in the audioworker brand (teal from AW_docs/brand, Nunito from
   AW_docs/brand/fonts, self-hosted for the CSP's font-src 'self'). The app shell's tokens (--bg, --txt, --accent…)
   share no name with these, so both live at :root. Dawn under data-theme="light", the night under "dark". */
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-latin-var.woff2") format("woff2-variations"), url("/fonts/nunito-latin-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-body: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.875rem, 5.4vw + 1rem, 6rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --text-price: clamp(5rem, 9vw + 1rem, 9rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-sticky-nav: 300;

  /* dawn (light) */
  --color-paper: oklch(98.2% 0.008 82); --color-paper-2: oklch(95.8% 0.011 82); --color-paper-3: oklch(92.3% 0.014 82);
  --color-ink: oklch(18% 0.006 80); --color-ink-2: oklch(30% 0.008 80); --color-muted: oklch(45% 0.012 80);
  --color-rule: oklch(88% 0.011 82); --color-rule-2: oklch(93.5% 0.009 82);
  --color-accent: oklch(53.1% 0.092 183); --color-accent-text: oklch(43.1% 0.074 183); --color-accent-ink: oklch(98.5% 0.006 85);
  --color-accent-soft: oklch(92% 0.03 183); --color-focus: oklch(48% 0.1 183);
  --color-error: oklch(52% 0.19 27); --color-error-soft: oklch(95% 0.03 27);
  --color-sky: oklch(95.4% 0.014 190); --color-land: oklch(95.8% 0.011 82);
  --metal-hi: oklch(97% 0.006 85); --metal-lo: oklch(86% 0.01 85);
  --edge-light: inset 0 1px 0 oklch(100% 0 0 / 0.55); --edge-lit: inset 0 1px 0 oklch(100% 0 0 / 0.25);
  --shadow-sunk: inset 0 1px 2px oklch(20% 0.01 80 / 0.25);
  --shadow-part: 0 1px 0 oklch(20% 0.01 80 / 0.18), 0 8px 16px -8px oklch(20% 0.01 80 / 0.28);
  --shadow-panel: 0 1px 0 oklch(20% 0.01 80 / 0.14), 0 24px 48px -20px oklch(20% 0.02 80 / 0.3);
  --grain-opacity: 0.35;
  --font-display: "Nunito", ui-rounded, system-ui, sans-serif; --font-body: "Nunito", ui-rounded, system-ui, sans-serif;
  --display-weight: 400; --tracking-display: -0.03em;
  --radius-card: 20px; --radius-part: 6px; --radius-pill: 999px; --rule-hair: 1px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* two in the morning, with the brand's lit teal where Ribbon keeps an amber window */
[data-theme="dark"] {
  --color-paper: oklch(13.2% 0.022 258); --color-paper-2: oklch(16.4% 0.022 258); --color-paper-3: oklch(19.6% 0.022 258);
  --color-ink: oklch(93.5% 0.012 85); --color-ink-2: oklch(85% 0.014 85); --color-muted: oklch(74% 0.02 255);
  --color-rule: oklch(29% 0.022 258); --color-rule-2: oklch(22% 0.022 258);
  --color-accent: oklch(85.5% 0.125 181); --color-accent-text: oklch(85.5% 0.125 181); --color-accent-ink: oklch(23.5% 0.038 181);
  --color-accent-soft: oklch(32% 0.06 181); --color-focus: oklch(85.5% 0.125 181);
  --color-error: oklch(74% 0.15 22); --color-error-soft: oklch(24% 0.05 22);
  --color-sky: oklch(11.4% 0.024 258); --color-land: oklch(17.5% 0.03 220);
  --metal-hi: oklch(27% 0.016 255); --metal-lo: oklch(21% 0.016 255);
  --edge-light: inset 0 1px 0 oklch(100% 0 0 / 0.08); --edge-lit: inset 0 1px 0 oklch(100% 0 0 / 0.3);
  --shadow-sunk: inset 0 1px 2px oklch(5% 0.01 258 / 0.7);
  --shadow-part: 0 1px 0 oklch(5% 0.01 258 / 0.6), 0 8px 16px -8px oklch(5% 0.01 258 / 0.7);
  --shadow-panel: 0 1px 0 oklch(5% 0.01 258 / 0.5), 0 24px 48px -20px oklch(5% 0.01 258 / 0.8);
  --grain-opacity: 0.5;
}
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }


/* ---------- base: standalone documents, no app bundle ---------- */
html, body { overflow-x: clip; }
html { scroll-padding-top: var(--space-lg); scrollbar-color: var(--color-rule) var(--color-paper); }
body { margin: 0; min-height: 100dvh; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; font-synthesis: none; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 24%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-color: var(--color-accent); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.04; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 16ch; font-size: var(--text-display); }
h2 { max-width: 24ch; font-size: var(--text-section); }
h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.015em; }
p, dd, ul, ol, dl, figure { margin: 0; }
p, dd { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
.lead { max-width: 44ch; font-size: var(--text-lead); line-height: 1.45; color: var(--color-muted); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-sticky-nav); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-part); background: var(--color-ink); color: var(--color-paper); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

/* ---------- controls: the landing's machined pills ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; 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); text-decoration: none; white-space: nowrap; transition: transform var(--dur-micro) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.btn:hover { border-color: var(--color-muted); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); box-shadow: var(--edge-lit), var(--shadow-part); }
.btn--primary:hover { border-color: var(--color-ink); }
.btn--quiet { min-height: 44px; background: transparent; box-shadow: none; }
.btn--quiet:hover { background: var(--color-paper-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- nav: edge-aligned, the wordmark and the one way in ---------- */
.nav { position: relative; z-index: var(--z-raised); }
.nav__row { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; text-decoration: none; border-radius: var(--radius-part); }
.wordmark .wm-icon { flex-shrink: 0; }
.wordmark .wm-badge { fill: var(--color-accent); }
.wordmark .wm-bars { color: var(--color-accent-ink); }
.wordmark .wm-i { opacity: 0.62; }
.wm-text b { color: var(--color-accent-text); font-weight: 800; }

/* ---------- hero: a banner over the hour, sky to land, set left ---------- */
.hero { position: relative; display: grid; align-items: center; min-height: min(56dvh, 560px); padding-block: var(--space-2xl); background: linear-gradient(to bottom, var(--color-paper) 0%, var(--color-sky) 55%, var(--color-land) 100%); border-bottom: var(--rule-hair) solid var(--color-rule); overflow: clip; }
.hero__grain { position: absolute; inset: 0; background-image: var(--grain); background-size: 160px; mix-blend-mode: soft-light; opacity: var(--grain-opacity); pointer-events: none; }
.hero__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: center; }
.hero__col { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.hero--say .hero__col { grid-column: 1 / span 7; }
/* the first sentence, held up on a machined panel: a quote of what a person types, not a drawing of the app */
.hero__say { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--space-md); 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); }
.hero__line { margin: 0; padding-left: var(--space-md); box-shadow: inset 2px 0 0 var(--color-accent); }
.hero__line p { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; letter-spacing: -0.02em; color: var(--color-ink); quotes: "\201C" "\201D"; }
.hero__line p::before { content: open-quote; }
.hero__line p::after { content: close-quote; }
.hero__back { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-md); }
.hero .actions { margin-top: var(--space-xs); }
.terms { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- the signature: what you would type, set large ---------- */
.say { padding-block: var(--section-gap-s) var(--section-gap); }
.say__grid { display: grid; gap: var(--space-2xl); }
.say__list { border-top: var(--rule-hair) solid var(--color-rule); }
.say__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.say__line { grid-column: 1 / span 8; max-width: 34ch; font-family: var(--font-display); font-size: clamp(1.375rem, 1.1vw + 1rem, 2rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--color-ink); }
.say__back { grid-column: 9 / span 4; color: var(--color-muted); }

/* ---------- what comes back: a band of paper, four parts ---------- */
.get { padding-block: var(--section-gap-s); background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.get .container { display: grid; gap: var(--space-2xl); }
.get__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.get__item { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-md); border-top: 2px solid var(--color-rule); }
.get__item:first-child { border-top-color: var(--color-accent); }
.get__item dt { font-family: var(--font-display); font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.015em; }
.get__item dd { color: var(--color-muted); }

/* ---------- questions as rows across the width, the answers under them ---------- */
.faq { padding-block: var(--section-gap-s) var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.faq__grid > h2 { grid-column: 1 / span 6; font-size: var(--text-section); }
.faq__list { grid-column: 1 / -1; border-top: var(--rule-hair) solid var(--color-rule); }
.faq__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq__row h3 { grid-column: 1 / span 5; font-size: var(--text-title); }
.faq__row p { grid-column: 7 / span 6; max-width: 60ch; color: var(--color-muted); }

/* ---------- the other pages ---------- */
.more { padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.more .container { display: grid; gap: var(--space-2xl); }
.more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.more__link { display: flex; flex-direction: column; gap: var(--space-xs); height: 100%; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); text-decoration: none; transition: border-color var(--dur-short) var(--ease-out); }
.more__name { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.015em; transition: color var(--dur-short) var(--ease-out); }
.more__link:hover { border-top-color: var(--color-accent); }
.more__link:hover .more__name { color: var(--color-accent-text); }
.more__link:active .more__name { color: var(--color-ink); }

/* ---------- the price under the horizon, the plans beside it ---------- */
.close { padding-block: var(--section-gap-s); background: linear-gradient(to bottom, var(--color-paper-2), var(--color-land)); border-top: var(--rule-hair) solid var(--color-rule); }
.close__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: end; }
.close__offer { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--space-md); }
.close__figure { font-family: var(--font-display); font-size: var(--text-price); font-weight: var(--display-weight); line-height: 0.9; letter-spacing: -0.045em; color: var(--color-ink); }
.close__cur { margin-right: 0.04em; font-size: 0.42em; vertical-align: 0.95em; letter-spacing: 0; }
.close__per { font-size: var(--text-lead); color: var(--color-muted); }
.close__offer .actions { margin-top: var(--space-md); }
.close__table { grid-column: 7 / span 6; width: 100%; border-collapse: collapse; }
.close__table th, .close__table td { padding: var(--space-md) var(--space-sm) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: baseline; }
.close__table thead th { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.close__table tbody th { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--display-weight); line-height: 1.2; white-space: nowrap; }
.close__table td { color: var(--color-ink-2); }
.close__table td.num { white-space: nowrap; }

/* ---------- the index: features and the site map ---------- */
.index { padding-block: var(--section-gap-s) var(--section-gap); }
.index__head { margin-bottom: var(--space-2xl); }
.index__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.index__col { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
.index__list { border-top: 2px solid var(--color-rule); }
.index__list li { display: flex; flex-direction: column; gap: var(--space-2xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.index__name { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.01em; }
a.index__name { text-decoration: none; }
a.index__name:hover { color: var(--color-accent-text); text-decoration: underline; }
.index__blurb { color: var(--color-muted); font-size: var(--text-md); }

/* ---------- features: one group per section, its tools as rows ---------- */
.group { padding-block: var(--section-gap-s); }
.group + .group, .shot + .group { border-top: var(--rule-hair) solid var(--color-rule); }
.group__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.group__grid > h2 { grid-column: 1 / span 4; }
.group__list { grid-column: 6 / span 7; border-top: var(--rule-hair) solid var(--color-rule); }
.group__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.group__item a { text-decoration: none; }
.group__item a:hover { color: var(--color-accent-text); text-decoration: underline; }
.group__item p { color: var(--color-muted); }

/* ---------- the real first screen (features only) ---------- */
.shot { padding-block: var(--section-gap-s) var(--section-gap-l); border-top: var(--rule-hair) solid var(--color-rule); }
.shot .container { display: grid; gap: var(--space-2xl); }
.shot__frame { justify-self: center; width: min(100%, 1040px); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-panel); }
.shot__frame img { width: 100%; height: auto; border-radius: inherit; outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; }
.shot__pic { display: block; border-radius: inherit; }
.shot__pic--dark { display: none; }
[data-theme="dark"] .shot__pic--light { display: none; }
[data-theme="dark"] .shot__pic--dark { display: block; }

/* ---------- footer: a mast, the wordmark over the links ---------- */
.foot { padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.foot .container { display: grid; gap: var(--space-2xl); }
.foot__mark { font-size: var(--text-2xl); gap: var(--space-sm); }
.foot__mark .wm-icon { width: 44px; height: 44px; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); }
.foot__links a { color: var(--color-muted); text-decoration: none; }
.foot__links a:hover { color: var(--color-ink); text-decoration: underline; }
.foot__legal { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- under 60rem: one column, reading order ---------- */
@media (max-width: 60rem) {
  .say__line, .say__back, .faq__grid > h2, .faq__list, .faq__row h3, .faq__row p, .close__offer, .close__table, .hero--say .hero__col, .hero__say { grid-column: 1 / -1; }
  .say__back, .faq__row p { margin-top: var(--space-xs); }
  .say__row { padding-block: var(--space-lg); }
  .get__grid, .more__grid, .index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group__grid > h2, .group__list { grid-column: 1 / -1; }
  .hero { min-height: auto; padding-block: var(--space-3xl); }
}
@media (max-width: 40rem) {
  .get__grid, .more__grid, .index__grid { grid-template-columns: minmax(0, 1fr); }
  .group__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block: var(--space-lg); }
  .btn { min-height: 48px; }
  .nav .btn--quiet { padding: 0 var(--space-md); font-size: var(--text-sm); }
  .wordmark { font-size: var(--text-md); }
  .foot__mark { font-size: var(--text-xl); }
  .hero .actions { width: 100%; flex-direction: column; align-items: stretch; }
  .close__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .close__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .close__table th, .close__table td { padding: 0; border: 0; }
  .close__table td:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}