/* Hallmark · macrostructure: Narrative Workflow · H2 Split Diptych knobs: 7/5, product proof, vertical rule · F1 Bento knobs: tiles=6, spans=irregular, border=hairline · F4 Step Sequence knobs: 1.0/2.0/3.0, vertical stack, line · nav: N1b SaaS three-section · footer: Ft5 Statement · enrichment: E4 Floating no-frame, Tier-A CSS art
 * theme: custom · vibe: "endearing, comfortable, professional, community-driven" · paper: oklch(95% 0.008 80) · accent: oklch(47% 0.145 149)
 * display: Bricolage Grotesque · body: Satoshi · axes: light / geometric-sans / chromatic-green ~149° · studied: no · context: explicit · v1.1.0
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49–57)
 */
/* Hallmark · pre-emit critique: P5 H4 E5 S5 R4 V5 */

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; background: var(--color-page); color: var(--color-ink); }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, summary { font-family: var(--font-body); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; letter-spacing: -0.035em; line-height: 1.04; overflow-wrap: anywhere; min-width: 0; }
ul, ol { margin: 0; padding: 0; }
.shell { width: min(100% - (var(--page-gutter) * 2), var(--page-max)); margin-inline: auto; }
.skip-link { position: fixed; inset-block-start: var(--space-sm); inset-inline-start: var(--space-sm); z-index: var(--z-sticky); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background: var(--color-page); border-block-end: var(--rule-hair) solid var(--color-rule); }
.nav-shell { width: min(100% - (var(--page-gutter) * 2), var(--page-max)); min-height: 4.5rem; margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-md); }
.wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; white-space: nowrap; }
.wordmark span { color: var(--color-accent); font-size: var(--text-sm); margin-inline-end: var(--space-xs); }
.desktop-nav, .nav-actions, .hero-actions, .footer-meta nav { display: flex; align-items: center; }
.desktop-nav { gap: var(--space-lg); }
.desktop-nav a, .footer-meta nav a, .text-link { white-space: nowrap; font-size: var(--text-sm); font-weight: 700; }
.desktop-nav a { color: var(--color-ink-2); }
.desktop-nav a:hover, .text-link:hover { color: var(--color-accent-deep); }
.desktop-nav a:active, .footer-meta nav a:active, .text-link:active { color: var(--color-accent); }
.nav-actions { justify-content: flex-end; gap: var(--space-md); }
.button { display: inline-flex; min-height: 2.9rem; align-items: center; justify-content: center; padding: var(--space-sm) var(--space-lg); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-sm); font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: var(--shadow-whisper); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.button:hover { background: var(--color-accent-deep); transform: translateY(-1px); }
.button:active { transform: translateY(1px); }
.button[aria-disabled="true"], .button:disabled { cursor: not-allowed; opacity: 0.55; pointer-events: none; }
.button--small { min-height: 2.5rem; padding-inline: var(--space-md); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.mobile-menu { display: none; justify-self: end; position: relative; }
.mobile-menu summary { min-height: 2.75rem; display: flex; align-items: center; gap: var(--space-xs); list-style: none; cursor: pointer; font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span, .mobile-menu summary span::before { width: 1.15rem; height: 2px; display: block; background: var(--color-ink); content: ""; }
.mobile-menu summary span::before { transform: translateY(-5px); }
.mobile-menu[open] nav { position: absolute; inset-block-start: calc(100% + var(--space-xs)); inset-inline-end: 0; width: min(20rem, 18rem); padding: var(--space-md); display: grid; gap: var(--space-xs); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.mobile-menu nav a:not(.button) { min-height: 2.75rem; display: flex; align-items: center; padding-inline: var(--space-xs); font-weight: 700; white-space: nowrap; }
.hero { padding-block-start: var(--space-3xl); padding-block-end: var(--space-4xl); display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr); align-items: center; gap: clamp(var(--space-xl), 7vw, var(--space-4xl)); }
.kicker, .panel-label, .plan-name { color: var(--color-accent-deep); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hero h1 { max-width: 10ch; margin-block: var(--space-sm) var(--space-lg); font-size: var(--text-display-s); font-weight: 800; }
.hero-lede { max-width: 58ch; color: var(--color-ink-2); font-size: var(--text-md); }
.hero-actions { flex-wrap: wrap; gap: var(--space-lg); margin-block: var(--space-xl) var(--space-md); }
.text-link { display: inline-flex; align-items: center; min-height: 2.75rem; gap: var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-accent); transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.text-link--arrow span { transition: transform var(--dur-short) var(--ease-out); }
.text-link--arrow:hover span { transform: translateX(3px); }
.reassurance { color: var(--color-muted); font-size: var(--text-sm); }
.overview { margin: 0; padding: var(--space-lg); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.overview figcaption { margin-block-end: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.overview-head, .overview-summary, .overview-list > div, .overview-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.overview-head strong, .overview-summary strong { display: block; font-family: var(--font-display); letter-spacing: -0.035em; }
.overview-head small, .overview-list small { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.overview-mark { width: 2.3rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent-deep); font-weight: 700; }
.overview-summary { margin-block: var(--space-lg); padding: var(--space-md); background: var(--color-paper-2); border-radius: var(--radius-md); }
.overview-summary span { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.overview-summary strong { font-size: var(--text-lg); }
.overview-list { display: grid; }
.overview-list > div { padding-block: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.overview-list p { min-width: 0; margin-inline-end: auto; }
.overview-list strong { display: block; font-size: var(--text-sm); }
.overview-list b { padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent-deep); font-size: var(--text-xs); white-space: nowrap; }
.avatar { width: 2rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 700; }
.overview-footer { margin-block-start: var(--space-md); padding-block-start: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.overview-footer strong { color: var(--color-ink); }
.relief-band { padding-block: var(--space-3xl); background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.relief-grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: var(--space-3xl); align-items: start; }
.relief-intro h2, .section-copy h2, .payments-copy h2, .trust-card h2, .pricing-intro h2, .final-cta h2 { font-size: var(--text-3xl); font-weight: 800; }
.relief-intro p, .section-copy p, .payments-copy p, .trust-card p, .pricing-intro p, .final-cta p { max-width: 58ch; margin-block-start: var(--space-md); color: var(--color-ink-2); }
.contrast-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); overflow: clip; }
.contrast-panel article { padding: var(--space-xl); }
.contrast-panel .after { background: var(--color-paper); border-inline-start: var(--rule-hair) solid var(--color-rule); }
.contrast-panel ul { display: grid; gap: var(--space-md); margin-block-start: var(--space-lg); list-style: none; }
.contrast-panel li { padding-inline-start: var(--space-lg); position: relative; }
.contrast-panel li::before { position: absolute; inset-inline-start: 0; color: var(--color-accent); content: "•"; font-weight: 800; }
.feature-section, .narrative-section, .trust-section, .audience-section, .pricing-section { padding-block: var(--space-4xl); }
.section-copy { max-width: 43rem; }
.section-copy--offset { margin-inline-start: clamp(0rem, 10vw, 9rem); }
.bento-grid { margin-block-start: var(--space-2xl); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(11rem, auto); gap: var(--space-md); }
.feature { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-xl); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); transition: transform var(--dur-short) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .feature:hover { transform: translateY(-2px); } }
.feature--large { grid-column: span 2; grid-row: span 2; background: var(--color-paper-2); }
.feature--wide { grid-column: span 2; }
.feature-number { color: var(--color-accent-deep); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; }
.feature h3 { margin-block: var(--space-xl) var(--space-sm); font-size: var(--text-xl); font-weight: 800; }
.feature p { color: var(--color-ink-2); font-size: var(--text-sm); }
.record-lines { display: grid; gap: var(--space-sm); margin-block-start: var(--space-xl); }
.record-lines span { height: 0.65rem; display: block; border-radius: var(--radius-pill); background: var(--color-rule-2); }
.record-lines span:nth-child(1) { width: 82%; background: var(--color-accent-soft); }.record-lines span:nth-child(2) { width: 63%; }.record-lines span:nth-child(3) { width: 92%; }.record-lines span:nth-child(4) { width: 46%; }
.steps { margin-block-start: var(--space-2xl); list-style: none; border-block-start: 2px solid var(--color-ink); }
.steps li { display: grid; grid-template-columns: minmax(5rem, 0.25fr) minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-xl); border-block-end: var(--rule-hair) solid var(--color-rule); }
.stage { color: var(--color-accent-deep); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.04em; }
.steps h3 { font-size: var(--text-2xl); font-weight: 800; }.steps p { max-width: 58ch; margin-block-start: var(--space-sm); color: var(--color-ink-2); }
.payments-section { padding-block: var(--space-4xl); background: var(--color-ink); color: var(--color-paper); }.payments-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--space-3xl); }.payments-copy h2 { color: var(--color-paper); }.payments-copy p { color: var(--color-paper-3); }.payments-copy .kicker { color: var(--color-accent-soft); }.payments-copy .text-link { color: var(--color-paper); border-color: var(--color-accent-soft); margin-block-start: var(--space-lg); }.payment-notes { display: grid; border-block-start: var(--rule-hair) solid var(--color-muted); }.payment-notes > div { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); border-block-end: var(--rule-hair) solid var(--color-muted); }.payment-notes span { color: var(--color-accent-soft); font-family: var(--font-display); font-weight: 800; }.payment-notes p { color: var(--color-paper-2); }
.trust-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--space-3xl); padding: clamp(var(--space-xl), 5vw, var(--space-3xl)); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); }.trust-card > div:last-child { display: grid; gap: var(--space-md); }.trust-card p { margin: 0; }.trust-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin-block-start: var(--space-md); list-style: none; }.trust-list li { min-width: 0; padding: var(--space-md); border-block-start: 2px solid var(--color-accent); color: var(--color-ink-2); font-size: var(--text-sm); }
.audience-section { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-3xl); }.audience-list { display: flex; align-content: flex-start; flex-wrap: wrap; gap: var(--space-sm); }.audience-list span { padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); font-size: var(--text-sm); font-weight: 700; }
.pricing-section { padding-block-start: var(--space-3xl); }.pricing-intro { max-width: 43rem; }.price-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--space-3xl); margin-block-start: var(--space-2xl); padding: clamp(var(--space-xl), 5vw, var(--space-3xl)); background: var(--color-accent-soft); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-lg); }.price { margin-block: var(--space-sm); font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 800; letter-spacing: -0.05em; }.price-note { color: var(--color-ink-2); font-size: var(--text-sm); }.price-card > div:last-child { display: grid; align-content: space-between; gap: var(--space-lg); color: var(--color-ink-2); }
.final-cta { padding-block: var(--space-4xl); background: var(--color-paper); border-block-start: var(--rule-hair) solid var(--color-rule); }.final-cta h2 { max-width: 17ch; }.final-cta p { max-width: 52ch; }
.site-footer { padding-block: var(--space-3xl) var(--space-xl); background: var(--color-page); }.footer-statement { max-width: 25ch; font-family: var(--font-display); font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); font-weight: 800; letter-spacing: -0.045em; line-height: 1.03; }.footer-meta { display: grid; grid-template-columns: 1fr auto; gap: var(--space-lg); margin-block-start: var(--space-3xl); padding-block-start: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule); }.footer-meta nav { justify-content: flex-end; flex-wrap: wrap; gap: var(--space-md); }.footer-meta p { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-xs); }
@media (max-width: 60rem) { .nav-shell { grid-template-columns: 1fr auto; }.desktop-nav, .nav-actions { display: none; }.mobile-menu { display: block; }.hero, .relief-grid, .payments-grid, .trust-card, .audience-section, .price-card { grid-template-columns: minmax(0, 1fr); }.hero { padding-block-start: var(--space-3xl); padding-block-end: var(--space-4xl); }.overview { max-width: 38rem; }.relief-grid { gap: var(--space-2xl); }.bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.section-copy--offset { margin-inline-start: 0; }.footer-meta { grid-template-columns: 1fr; }.footer-meta nav { justify-content: flex-start; } }
@media (max-width: 40rem) { .shell { width: min(100% - (var(--page-gutter) * 2), var(--page-max)); }.hero h1 { font-size: clamp(2.4rem, 11vw, 3.55rem); }.hero-actions { align-items: flex-start; flex-direction: column; gap: var(--space-sm); }.hero-actions .button { width: 100%; }.contrast-panel, .bento-grid, .trust-list { grid-template-columns: minmax(0, 1fr); }.contrast-panel .after { border-inline-start: 0; border-block-start: var(--rule-hair) solid var(--color-rule); }.feature--large, .feature--wide { grid-column: span 1; grid-row: span 1; }.feature { min-height: 0; }.steps li { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }.payments-section, .feature-section, .narrative-section, .trust-section, .audience-section, .pricing-section { padding-block: var(--space-3xl); }.relief-band { padding-block: var(--space-3xl); }.footer-meta nav { gap: var(--space-sm) var(--space-md); }.button, .text-link, .mobile-menu summary { min-height: 3rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; } }