/* parks.beyondproof.ai — built from src/parks-lp/css (tokens, base, components, sections) */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --navy-950: #0f2e67;
  --navy-900: #163468;
  --navy-700: #2c4a7c;
  --navy-500: #4a6590;
  --navy-100: #c9d4e6;
  --gold-600: #c98a26;
  --gold-500: #e3a23b;
  --gold-100: #fbf0dc;
  --bluegray-50: #f6f8fb;
  --bluegray-100: #edf2f8;
  --bluegray-200: #dce4ef;
  --bluegray-300: #c3cfdf;
  --slate-900: #0f172a;
  --slate-700: #334155;
  --slate-500: #64748b;
  --white: #ffffff;
  --green-600: #2f7d57;
  --green-100: #e3f2ea;
  --yellow-500: #d9a21b;
  --yellow-100: #fcf3dc;
  --red-600: #b42318;
  --red-100: #fdecea;
  --bg-page: var(--white);
  --bg-subtle: var(--bluegray-50);
  --bg-card: var(--bluegray-100);
  --bg-inverse: var(--navy-900);
  --bg-inverse-deep: var(--navy-950);
  --bg-highlight: var(--gold-100);
  --text-heading: var(--navy-900);
  --text-body: var(--slate-700);
  --text-muted: var(--slate-500);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--navy-100);
  --text-on-gold: var(--navy-900);
  --text-accent: var(--gold-500);
  --action-primary: var(--gold-500);
  --action-primary-hover: var(--gold-600);
  --action-secondary: var(--navy-900);
  --border-default: var(--bluegray-200);
  --border-strong: var(--bluegray-300);
  --border-focus: var(--navy-900);
  --border-on-dark: var(--navy-500);
  --status-success: var(--green-600);
  --status-success-bg: var(--green-100);
  --status-warning: var(--yellow-500);
  --status-warning-bg: var(--yellow-100);
  --status-danger: var(--red-600);
  --status-danger-bg: var(--red-100);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --shadow-card: 0 1px 2px rgba(15, 46, 103, 0.06), 0 8px 24px rgba(15, 46, 103, 0.08);
  --shadow-form: 0 2px 6px rgba(15, 23, 42, 0.08), 0 24px 48px rgba(15, 23, 42, 0.18);
  --shadow-sticky: 0 -4px 16px rgba(15, 46, 103, 0.12);
  --gradient-hero: linear-gradient(45deg, #0f2e67 0%, #1e3d70 55%, #4a6590 100%);
  --overlay-hero: linear-gradient(90deg, rgba(15, 46, 103, 0.96) 0%, rgba(22, 52, 104, 0.88) 60%, rgba(44, 74, 124, 0.72) 100%);
  --overlay-hero-mobile: linear-gradient(180deg, rgba(22, 52, 104, 0.55) 0%, rgba(15, 46, 103, 0.9) 55%, #0f2e67 100%);
  --container: 1200px;
  --gutter: 20px;
  --section-pad: 56px;
  --section-gap: 32px;
  --header-h: 72px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --h1: 700 34px/42px var(--font);   --h1-ls: -0.01em;
  --h2: 700 28px/36px var(--font);   --h2-ls: -0.0075em;
  --h3: 600 22px/30px var(--font);   --h3-ls: -0.0025em;
  --h4: 600 20px/28px var(--font);   --h4-ls: 0;
  --h5: 600 17px/24px var(--font);
  --eyebrow: 600 13px/18px var(--font);
  --body-l: 400 18px/28px var(--font);
  --body: 400 16px/26px var(--font);
  --body-strong: 600 16px/26px var(--font);
  --body-s: 400 16px/24px var(--font);
  --caption: 500 14px/20px var(--font);
  --button: 600 16px/24px var(--font);
  --label: 500 15px/20px var(--font);
  --input: 400 16px/24px var(--font);
}
@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --section-pad: 72px;
    --section-gap: 48px;
    --header-h: 96px;
    --h1: 700 44px/52px var(--font);   --h1-ls: -0.015em;
    --h2: 700 34px/42px var(--font);   --h2-ls: -0.01em;
    --h3: 600 26px/34px var(--font);   --h3-ls: -0.005em;
    --h4: 600 21px/29px var(--font);   --h4-ls: -0.0025em;
    --h5: 600 18px/26px var(--font);
    --body-l: 400 19px/30px var(--font);
    --body: 400 17px/28px var(--font);
    --body-strong: 600 17px/28px var(--font);
    --button: 600 17px/24px var(--font);
  }
}
@media (min-width: 1024px) {
  :root {
    --section-pad: 96px;
    --h1: 700 56px/64px var(--font);
    --h2: 700 40px/48px var(--font);
    --h3: 600 28px/36px var(--font);
    --h4: 600 22px/30px var(--font);
    --body-l: 400 20px/32px var(--font);
    --body: 400 18px/30px var(--font);
    --body-strong: 600 18px/30px var(--font);
    --body-s: 400 16px/26px var(--font);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font: var(--body); color: var(--text-body); background: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }
.on-light :focus-visible, .card :focus-visible { outline-color: var(--navy-900); }
.h1, .h2, .h3, .section-closer { text-wrap: balance; }
.h1 { font: var(--h1); letter-spacing: var(--h1-ls); }
.h2 { font: var(--h2); letter-spacing: var(--h2-ls); }
.h3 { font: var(--h3); letter-spacing: var(--h3-ls); }
.h4 { font: var(--h4); letter-spacing: var(--h4-ls); }
.h5 { font: var(--h5); }
.body-l { font: var(--body-l); }
.body { font: var(--body); }
.body-strong { font: var(--body-strong); }
.body-s { font: var(--body-s); }
.caption { font: var(--caption); }
.label { font: var(--label); }
.c-heading { color: var(--text-heading); }
.c-body { color: var(--text-body); }
.c-muted { color: var(--text-muted); }
.c-on-dark { color: var(--text-on-dark); }
.c-on-dark-muted { color: var(--text-on-dark-muted); }
.c-accent { color: var(--text-accent); }
.center { text-align: center; }
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); }
.section > .container { display: flex; flex-direction: column; align-items: center; gap: var(--section-gap); }
.section > .container > * { width: 100%; }
.bg-subtle { background: var(--bg-subtle); }
.bg-inverse { background: var(--bg-inverse); }
.bg-gradient { background: var(--gradient-hero); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed !important; z-index: 100; top: 8px; left: 8px; width: auto; height: auto; margin: 0; padding: 12px 16px; clip: auto; overflow: visible; white-space: normal; border-radius: var(--radius-md); background: var(--bg-page); color: var(--text-heading); font: var(--label); }
@media (max-width: 1023px) { .desktop-only { display: none !important; } }
@media (min-width: 1024px) { .hide-desktop { display: none !important; } }
@media (max-width: 767px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .mobile-only { display: none !important; } }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: var(--eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-heading); }
.eyebrow::before { content: ""; width: 24px; height: 3px; border-radius: 2px; background: var(--action-primary); flex: none; }
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--text-accent); }
.section-header { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 640px; text-align: center; color: var(--text-heading); }
.section-header .h2 { width: 100%; }
.section-header p { color: var(--text-body); }
.on-dark .section-header { color: var(--text-on-dark); }
@media (min-width: 768px) { .section-header { gap: 16px; } }
@media (min-width: 1024px) { .section-header { max-width: 760px; } }
.section-closer { font: var(--h4); color: var(--text-heading); text-align: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--radius-md); font: var(--button); text-decoration: none; text-align: center; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn .icon { width: 18px; height: 18px; }
.btn-lg { min-height: 56px; padding: 0 32px; }
.btn-lg .icon { width: 20px; height: 20px; }
@media (max-width: 767px) {
  .btn-lg { padding: 0 16px; }
  .btn-lg.arrow-desktop .icon { display: none; }
}
.btn-primary { background: var(--action-primary); color: var(--text-on-gold); }
.btn-primary:hover { background: var(--action-primary-hover); }
.btn-secondary { background: transparent; color: var(--text-heading); box-shadow: inset 0 0 0 1.5px var(--action-secondary); }
.btn-secondary:hover { background: var(--action-secondary); color: var(--text-on-dark); }
.btn-link-dark { min-height: 44px; padding: 0; background: none; color: var(--text-on-dark); }
.btn-link-dark:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.cta-sub { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.cta-sub .caption { color: var(--text-muted); }
.on-dark .cta-sub .caption, .cta-sub.on-dark .caption { color: var(--text-on-dark-muted); }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: var(--button); color: var(--text-on-dark); text-decoration: none; }
.text-link .icon { width: 18px; height: 18px; color: var(--text-accent); }
.text-link:hover span { text-decoration: underline; text-underline-offset: 4px; }
.checklist { display: flex; flex-direction: column; gap: 12px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; }
.checklist .icon { margin-top: 4px; width: 22px; height: 22px; }
.icon-circle { display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--bg-inverse); color: var(--white); }
.icon-circle .icon { width: 26px; height: 26px; }
.icon-circle.s48 { width: 48px; height: 48px; }
.icon-circle.s48 .icon { width: 24px; height: 24px; }
.icon-circle.s40 { width: 40px; height: 40px; }
.icon-circle.s40 .icon { width: 20px; height: 20px; }
.icon-circle.on-dark { background: rgba(255, 255, 255, 0.12); color: var(--text-accent); }
.card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--radius-lg); background: var(--bg-card); color: var(--text-heading); }
.card.outlined { background: var(--bg-page); box-shadow: inset 0 0 0 1px var(--border-default); }
.card.dark { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: var(--text-on-dark); }
.card-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card-text p { color: var(--text-body); }
.card.h { flex-direction: row; align-items: flex-start; gap: 20px; }
.card.h .icon-circle { width: 48px; height: 48px; }
.card.h .icon-circle .icon { width: 24px; height: 24px; }
@media (min-width: 768px) {
  .card { padding: 32px; }
  .card.h .icon-circle { width: 56px; height: 56px; }
  .card.h .icon-circle .icon { width: 26px; height: 26px; }
}
@media (min-width: 1024px) { .card.h { flex-direction: column; gap: 16px; } }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--radius-full); font: var(--caption); color: var(--text-heading); box-shadow: inset 0 0 0 1px var(--border-strong); }
.badge.gold { background: var(--bg-highlight); box-shadow: none; }
.badge.navy { background: var(--bg-inverse); color: var(--text-on-dark); box-shadow: none; }
.badge.dark-outline { color: var(--text-on-dark); box-shadow: inset 0 0 0 1px var(--border-on-dark); }
.badge.card-fill { background: var(--bg-card); color: var(--text-body); box-shadow: inset 0 0 0 1px var(--border-default); }
.badge-list { display: flex; flex-wrap: wrap; gap: 8px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-label { font: var(--label); color: var(--text-heading); }
.field-label .optional { color: var(--text-muted); margin-left: 4px; }
.input-wrap { position: relative; }
.input { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-page); font: var(--input); color: var(--text-heading); transition: border-color .15s, box-shadow .15s; }
.input::placeholder { color: var(--text-muted); opacity: 1; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
select.input:invalid { color: var(--text-muted); }
.input-wrap .caret { position: absolute; right: 16px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--text-heading); }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(22, 52, 104, 0.15); }
.field.has-error .input { border-color: var(--status-danger); }
.field.has-error .input:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.15); }
.field-error { font: var(--caption); color: var(--status-danger); }
.field-row { display: grid; gap: 16px; }
@media (min-width: 768px) { .field-row { grid-template-columns: 1fr 1fr; } }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px 16px; border-radius: var(--radius-full); background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--border-strong); font: var(--caption); color: var(--text-body); transition: background-color .15s; }
.chip .icon { display: none; width: 16px; height: 16px; }
.chip input:checked + span { background: var(--bg-inverse); color: var(--text-on-dark); box-shadow: none; }
.chip input:checked + span .icon { display: block; }
.chip input:focus-visible + span { outline: 3px solid var(--navy-900); outline-offset: 2px; }
@media (min-width: 768px) { .chip span { min-height: 36px; padding: 8px 16px; } }
.checkbox { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; cursor: pointer; font: var(--body-s); color: var(--text-body); }
.checkbox input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-page) center / 16px no-repeat; cursor: pointer; }
.checkbox input:checked { background-color: var(--bg-inverse); border-color: var(--bg-inverse); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.checkbox input:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 2px; }
.form-card { display: flex; flex-direction: column; gap: 20px; padding: 20px; border-radius: var(--radius-xl); background: var(--bg-page); box-shadow: inset 0 0 0 1px var(--border-default); color: var(--text-heading); }
.form-card.raised { box-shadow: inset 0 0 0 1px var(--border-default), var(--shadow-form); }
@media (min-width: 768px) { .form-card { padding: 32px; } }
.form-head { display: flex; flex-direction: column; gap: 8px; }
.form-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.offer-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--radius-full); background: var(--bg-highlight); font: var(--caption); color: var(--text-heading); }
.offer-pill .icon { width: 14px; height: 14px; }
.form-intro { font: var(--body-s); color: var(--text-body); }
.chips-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.chips-group legend { padding: 0; float: left; width: 100%; }
.chips-group legend + * { clear: both; }
.reassurance { display: flex; align-items: center; gap: 8px; font: var(--caption); color: var(--text-muted); }
.reassurance .icon { width: 16px; height: 16px; }
.form-status { padding: 12px 16px; border-radius: var(--radius-md); font: var(--body-s); }
.form-status.error { background: var(--status-danger-bg); color: var(--status-danger); }
.form-status.success { background: var(--status-success-bg); color: var(--status-success); }
.quiz-card { display: flex; flex-direction: column; gap: 24px; padding: 20px; border-radius: var(--radius-xl); background: var(--bg-page); box-shadow: inset 0 0 0 1px var(--border-default), var(--shadow-form); color: var(--text-heading); }
@media (min-width: 768px) { .quiz-card { padding: 40px; } }
.quiz-top { display: flex; flex-direction: column; gap: 4px; font: var(--caption); }
@media (min-width: 768px) { .quiz-top { flex-direction: row; justify-content: space-between; } }
.quiz-progress { height: 6px; border-radius: 3px; background: var(--border-default); overflow: hidden; margin-top: 4px; }
.quiz-progress span { display: block; width: 100%; height: 100%; background: var(--action-primary); transform: scaleX(0); transform-origin: left center; transition: transform .25s ease; }
.quiz-question:focus { outline: none; }
.quiz-options { display: flex; flex-direction: column; gap: 12px; border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz-option { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-strong); font: var(--body); color: var(--text-heading); cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.quiz-option:hover { background: var(--bg-subtle); }
.quiz-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.quiz-option .mark { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--bg-page); }
.quiz-option.multi .mark { border-radius: var(--radius-sm); }
.quiz-option:has(input:checked) { background: var(--bg-subtle); box-shadow: inset 0 0 0 2px var(--border-focus); }
.quiz-option input:checked + .mark { border: 6px solid var(--action-secondary); background: var(--action-secondary); }
.quiz-option.multi input:checked + .mark { border-width: 1.5px; background: var(--action-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.quiz-option input:focus-visible + .mark { outline: 3px solid var(--navy-900); outline-offset: 3px; }
.quiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; font: var(--label); color: var(--text-heading); }
.back-link .icon { width: 18px; height: 18px; }
.back-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.quiz-hint { font: var(--caption); color: var(--status-danger); }
.meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.meter div { display: flex; flex-direction: column; gap: 8px; font: var(--caption); color: var(--text-muted); }
.meter div::before { content: ""; height: 8px; border-radius: 4px; background: var(--border-default); }
.meter .on { color: var(--text-heading); }
.meter .on::before { background: var(--action-secondary); }
.steps-list { display: flex; flex-direction: column; gap: 12px; }
.steps-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-body); }
.num { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-inverse); color: var(--text-on-dark); font: var(--caption); }
.result-actions { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 768px) { .result-actions { flex-direction: row; flex-wrap: wrap; } }
.faq-list { max-width: 800px; }
.faq-item { border-bottom: 1px solid var(--border-default); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; list-style: none; cursor: pointer; font: var(--h5); color: var(--text-heading); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-toggle { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-card); color: var(--text-heading); }
.faq-toggle .minus { display: none; }
.faq-item[open] .faq-toggle { background: var(--bg-inverse); color: var(--white); }
.faq-item[open] .faq-toggle .plus { display: none; }
.faq-item[open] .faq-toggle .minus { display: block; }
.faq-item p { padding: 0 56px 20px 0; color: var(--text-body); margin-top: -8px; }
@media (min-width: 768px) { .faq-item summary { padding: 24px 0; } .faq-item p { padding-bottom: 24px; } }
.chevron { display: grid; place-items: center; height: 56px; font: var(--h5); color: var(--text-on-dark); background: var(--bg-inverse); clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%); }
.chevron.mid { clip-path: polygon(0 0, 50% 25%, 100% 0, 100% 75%, 50% 100%, 0 75%); padding-top: 6px; }
.chevron.gold { background: var(--action-primary); color: var(--text-on-gold); }
@media (min-width: 1024px) {
  .chevron { height: 64px; clip-path: polygon(0 0, calc(100% - 27px) 0, 100% 50%, calc(100% - 27px) 100%, 0 100%); }
  .chevron.mid { padding-top: 0; clip-path: polygon(0 0, calc(100% - 27px) 0, 100% 50%, calc(100% - 27px) 100%, 0 100%, 27px 50%); }
}
.dots { display: flex; justify-content: center; gap: 8px; }
.dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: background-color .2s; }
.dots span.on { background: var(--action-secondary); }
.swipe-hint { font: var(--caption); color: var(--text-muted); text-align: center; }
.photo-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; height: 260px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); font: var(--label); color: var(--text-muted); text-align: center; }
.photo-ph .icon { width: 40px; height: 40px; }
.sticky-bar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--bg-page); border-top: 1px solid var(--border-default); box-shadow: var(--shadow-sticky); transition: transform .25s ease; }
.sticky-bar .btn { width: 100%; }
.sticky-bar.is-hidden { transform: translateY(110%); }
@media (min-width: 768px) { .sticky-bar { display: none; } }
.dialog { width: min(720px, 100%); max-height: 100dvh; padding: 0; border: 0; background: transparent; overflow: visible; }
.dialog::backdrop { background: rgba(15, 23, 42, 0.6); }
.dialog-inner { position: relative; padding: 16px; }
.dialog-close { position: absolute; top: 4px; right: 4px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg-page); color: var(--text-heading); box-shadow: var(--shadow-card); }
@media (max-width: 767px) {
  .dialog { width: 100%; max-width: 100%; height: 100dvh; margin: 0; }
  .dialog-inner { min-height: 100dvh; padding: 0; background: var(--bg-subtle); overflow-y: auto; }
  .dialog-inner .quiz-card { min-height: 100dvh; border-radius: 0; box-shadow: none; padding: 64px 20px 32px; }
  .dialog-close { top: 10px; right: 10px; box-shadow: none; background: var(--bg-card); }
}
.dialog-scroll { max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: var(--radius-xl); }
@media (max-width: 767px) { .dialog-scroll { max-height: none; border-radius: 0; } }
body.dialog-open { overflow: hidden; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 116px; translate: -50% 0; max-width: calc(100% - 40px); padding: 12px 20px; border-radius: var(--radius-md); background: var(--bg-inverse); color: var(--text-on-dark); font: var(--body-s); box-shadow: var(--shadow-card); }
@media (min-width: 768px) { .toast { bottom: 32px; } }
.top { position: relative; display: grid; grid-template-columns: 100%; }
.hero-bg { grid-column: 1; grid-row: 1 / 3; position: relative; overflow: hidden; background: var(--bg-inverse-deep); }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: var(--overlay-hero-mobile); }
.site-header, .hero, .hero-form-band { position: relative; z-index: 1; grid-column: 1; }
.site-header { grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); padding: 0 20px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { width: 152px; height: auto; }
.hero { grid-row: 2; padding: 48px 20px; color: var(--text-on-dark); }
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
.hero-copy .h1 { color: var(--text-on-dark); }
.hero-copy .body-l { color: var(--text-on-dark-muted); }
.hero-copy .checklist .icon { color: var(--text-accent); width: 20px; height: 20px; margin-top: 5px; }
.built-for { display: flex; flex-direction: column; gap: 12px; }
.built-for.on-dark { padding-top: 24px; border-top: 1px solid var(--border-on-dark); }
.built-for.on-dark .caption { color: var(--text-on-dark-muted); }
.built-for.light { align-items: center; }
.built-for.light .caption { color: var(--text-muted); }
.built-for.light .badge-list { justify-content: center; }
.hero-form-band { grid-row: 3; display: flex; flex-direction: column; gap: 32px; padding: 40px 20px 56px; background: var(--bg-subtle); }
@media (min-width: 768px) {
  .site-header { padding: 0 40px; }
  .logo img { width: 180px; }
  .hero { padding: 96px 40px 120px; }
  .hero-form-band { padding: 56px 40px 72px; }
  .hero-form-band > * { width: 100%; max-width: 640px; margin-inline: auto; }
}
@media (min-width: 1024px) {
  .top { grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 656px) 64px clamp(400px, 36vw, 480px) minmax(var(--gutter), 1fr); grid-template-rows: auto 1fr; }
  .hero-bg { grid-column: 1 / -1; grid-row: 1 / -1; }
  .hero-bg::after { background: var(--overlay-hero); }
  .site-header { grid-column: 1 / -1; }
  .hero { grid-column: 2; grid-row: 2; align-self: center; padding: 56px 0 96px; }
  .hero-form-band { grid-column: 4; grid-row: 2; align-self: center; padding: 56px 0 96px; background: none; }
  .hero-form-band > * { max-width: none; }
}
.grid-5, .grid-4, .qa-grid, .team-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .grid-5, .grid-4, .qa-grid, .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dept-grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.dept-grid::-webkit-scrollbar { display: none; }
.dept { flex: 0 0 290px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--radius-lg); background: var(--bg-page); box-shadow: inset 0 0 0 1px var(--border-default); }
.dept-head { display: flex; align-items: center; gap: 12px; color: var(--text-heading); }
.dept-jobs { display: flex; flex-direction: column; gap: 8px; }
.dept-jobs li { display: flex; gap: 8px; align-items: flex-start; font: var(--body-s); color: var(--text-body); }
.dept-jobs .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--text-heading); }
.approve { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--bg-highlight); font: var(--label); color: var(--text-heading); }
.approve .icon { width: 18px; height: 18px; }
.carousel-foot { display: flex; flex-direction: column; gap: 12px; margin-top: -12px; }
@media (min-width: 768px) {
  .dept-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; overflow: visible; margin: 0; padding: 0; }
}
@media (min-width: 1024px) { .dept-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rules { display: grid; gap: 12px; }
.rule { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--radius-md); }
.rule .swatch { flex: none; width: 16px; height: 16px; border-radius: 50%; }
.rule strong { display: block; font: var(--label); color: var(--text-heading); margin-bottom: 4px; }
.rule span { font: var(--caption); color: var(--text-body); }
.rule.green { background: var(--status-success-bg); } .rule.green .swatch { background: var(--status-success); }
.rule.yellow { background: var(--status-warning-bg); } .rule.yellow .swatch { background: var(--status-warning); }
.rule.red { background: var(--status-danger-bg); } .rule.red .swatch { background: var(--status-danger); }
@media (min-width: 768px) { .rules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.brain { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.brain-sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.brain-sources li { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--bg-card); font: var(--label); color: var(--text-heading); }
.brain-sources .icon { width: 18px; height: 18px; }
.flow-arrow { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-highlight); color: var(--text-heading); }
.flow-arrow .icon { width: 22px; height: 22px; rotate: 90deg; }
.brain-core { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 32px; border-radius: var(--radius-xl); background: var(--bg-inverse); text-align: center; }
.brain-core .h3 { color: var(--text-on-dark); }
.brain-core p { color: var(--text-on-dark-muted); }
.brain-outputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.brain-outputs li { display: flex; align-items: center; gap: 12px; padding: 20px; border-radius: var(--radius-lg); background: var(--bg-page); box-shadow: inset 0 0 0 1px var(--border-strong); font: var(--h5); color: var(--text-heading); }
@media (max-width: 400px) { .brain-outputs li { padding: 16px 12px; gap: 8px; } }
@media (min-width: 1024px) {
  .brain { flex-direction: row; gap: 24px; }
  .brain-sources { flex: 0 0 320px; flex-direction: column; flex-wrap: nowrap; }
  .flow-arrow .icon { rotate: 0deg; }
  .brain-core { flex: 1; width: auto; }
  .brain-outputs { flex: 0 0 240px; grid-template-columns: 1fr; width: auto; }
}
.steps { display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; flex-direction: column; gap: 8px; }
.step .card { flex: 1; }
@media (min-width: 1024px) {
  .steps { flex-direction: row; gap: 12px; }
  .step { flex: 1 1 0; min-width: 0; gap: 12px; }
}
.assess { display: flex; flex-direction: column; gap: 32px; }
.assess-copy { display: flex; flex-direction: column; gap: 20px; color: var(--text-heading); }
.assess-copy .body-l, .assess-copy .checklist { color: var(--text-body); }
.assess-copy .checklist .icon { color: var(--status-success); }
@media (min-width: 1024px) {
  .assess { flex-direction: row; align-items: center; gap: 64px; }
  .assess-copy { flex: 1; min-width: 0; }
  .assess-card { flex: 0 0 min(640px, 55%); }
}
.price-box { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: var(--radius-xl); background: var(--bg-page); box-shadow: inset 0 0 0 1px var(--border-strong); }
.price-box .price { display: flex; flex-direction: column; gap: 4px; }
.price-box .h2 { color: var(--text-heading); }
@media (min-width: 768px) {
  .price-box { flex-direction: row; align-items: center; padding: 32px; }
  .price-box .price { flex: 1; }
}
.care { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: var(--radius-xl); background: var(--bg-inverse); }
.care-copy { display: flex; flex-direction: column; gap: 16px; }
.care-copy .h2 { color: var(--text-on-dark); }
.care .checklist li { font: var(--body-strong); color: var(--text-on-dark); }
.care .checklist .icon { color: var(--text-accent); }
@media (min-width: 768px) { .care { padding: 40px; } }
@media (min-width: 1024px) { .care { flex-direction: row; align-items: center; gap: 64px; padding: 56px; } .care > * { flex: 1; } }
.types { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.types::-webkit-scrollbar { display: none; }
.type-card { flex: 0 0 240px; scroll-snap-align: start; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-page); box-shadow: inset 0 0 0 1px var(--border-default); }
.type-card img { width: 100%; height: 150px; object-fit: cover; }
.type-card .h5 { padding: 16px; color: var(--text-heading); }
.roles { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.roles .badge-list { justify-content: center; }
@media (min-width: 768px) {
  .types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
}
@media (min-width: 1024px) { .types { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.qa { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--radius-lg); background: var(--bg-page); box-shadow: inset 0 0 0 1px var(--border-default); }
.qa-q { display: flex; gap: 12px; align-items: flex-start; color: var(--text-heading); }
.qa-q .icon { width: 24px; height: 24px; color: var(--text-accent); }
.qa p { color: var(--text-body); }
.bio { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: var(--radius-xl); background: var(--bg-card); }
.bio-copy { display: flex; flex-direction: column; gap: 12px; color: var(--text-heading); }
.bio-copy .body-strong, .bio-copy .body { color: var(--text-body); }
.bio-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: var(--label); color: var(--text-heading); text-decoration: none; }
@media (min-width: 1024px) {
  .bio { flex-direction: row; }
  .bio .photo-ph { flex: 0 0 200px; height: 240px; }
}
.guide { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.guide-copy { display: flex; flex-direction: column; gap: 20px; width: 100%; color: var(--text-heading); }
.guide-copy > .body-l { color: var(--text-body); }
.ebook { position: relative; flex: none; width: 320px; height: 420px; max-width: 100%; }
.ebook .page { position: absolute; width: 280px; height: 380px; border-radius: 8px; background: rgba(219, 227, 240, 0.35); }
.ebook .page.p1 { left: 40px; top: 10px; }
.ebook .page.p2 { left: 30px; top: 20px; background: rgba(219, 227, 240, 0.6); }
.ebook .cover { position: absolute; left: 10px; top: 30px; width: 280px; height: 380px; display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: 6px; background: var(--gradient-hero); box-shadow: var(--shadow-form); }
.ebook .cover img { width: 40px; height: 40px; }
.ebook .cover .tag { font: var(--eyebrow); letter-spacing: .08em; color: var(--text-accent); }
.ebook .cover .h4 { color: var(--text-on-dark); }
.ebook .cover .rule-gold { width: 48px; height: 3px; background: var(--action-primary); }
.ebook .cover .body-s { color: var(--text-on-dark-muted); }
.ebook .cover .brand { margin-top: auto; font: var(--label); color: var(--text-on-dark); }
@media (max-width: 359px) { .ebook { transform: scale(.9); } }
@media (min-width: 1024px) {
  .guide { flex-direction: row; gap: 64px; }
  .guide-art { flex: 0 0 420px; display: flex; justify-content: center; }
  .guide-copy { flex: 1; min-width: 0; }
}
.founding { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: var(--radius-xl); background: var(--bg-highlight); box-shadow: inset 0 0 0 1.5px var(--action-primary); }
.founding-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--text-heading); }
.founding-copy .body-l { color: var(--text-body); }
@media (max-width: 767px) { .founding .btn { width: 100%; } }
@media (min-width: 768px) { .founding { padding: 40px; align-items: flex-start; } }
@media (min-width: 1024px) { .founding { flex-direction: row; align-items: center; gap: 48px; padding: 56px; } .founding-copy { flex: 1; } }
.final { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 800px; text-align: center; }
.final .h2 { color: var(--text-on-dark); }
.final .caption { color: var(--text-on-dark-muted); }
@media (max-width: 767px) { .final .btn-primary { width: 100%; min-height: 48px; padding: 0 24px; } }
.footer { padding: 56px 0 120px; background: var(--bg-inverse-deep); color: var(--text-on-dark-muted); }
.footer .container { display: flex; flex-direction: column; gap: 32px; }
.footer-top { display: flex; flex-direction: column; gap: 32px; }
.footer-brand { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.footer-brand img { width: 200px; height: auto; }
.footer-brand .tagline { font: var(--eyebrow); letter-spacing: .08em; color: var(--text-accent); }
.footer-brand p { font: var(--body-s); }
.footer a { color: var(--text-on-dark); text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-site { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: var(--label); }
.footer-site .icon { width: 16px; height: 16px; color: var(--text-accent); }
.footer hr { width: 100%; height: 1px; margin: 0; border: 0; background: rgba(255, 255, 255, 0.12); }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; font: var(--caption); }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 768px) {
  .footer { padding: 72px 0 40px; }
  .footer .container { gap: 48px; }
}
@media (min-width: 1024px) { .footer-top { flex-direction: row; gap: 64px; } .footer-brand { flex: 0 0 520px; } }