:root { --ink:#243d42; --muted:#5c7379; --line:#dbe6e8; --teal:#116f70; --green:#267351; --coral:#bb5544; font-family:Arial,sans-serif; color:var(--ink); background:#fff; }
* { box-sizing:border-box; letter-spacing:0; } html { scroll-behavior:smooth; } body { margin:0; } [hidden] { display:none !important; }
button,input,textarea,select { font:inherit; } a { color:var(--teal); text-decoration:none; } a:hover { text-decoration:underline; }
button,a,input,textarea,select,summary { -webkit-tap-highlight-color:transparent; } :focus-visible { outline:3px solid #dc8b50; outline-offset:4px; }
.siteHeader { max-width:1200px; margin:auto; padding:18px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:72px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; font-size:15px; min-width:0; } .brand span { overflow-wrap:anywhere; }
.siteHeader nav { display:flex; align-items:center; gap:24px; font-size:13px; }
.navCta { color:var(--teal); font-weight:700; border-bottom:2px solid var(--teal); padding:8px 0; }
.releaseStatus { margin:0; padding:8px 20px; text-align:center; background:#fff4e8; color:#75552d; font-size:11px; line-height:1.5; }
.hero { background:#f1f7f6; border-top:1px solid var(--line); text-align:center; padding:34px 24px 0; overflow:hidden; }
.eyebrow { color:var(--teal); font-size:12px; font-weight:700; margin:0 0 12px; }
h1 { font-size:44px; line-height:1.15; margin:0 0 14px; overflow-wrap:anywhere; } .lead { color:var(--muted); font-size:24px; line-height:1.35; margin:0; }
.heroActions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:24px; margin:22px 0 12px; }
.primaryButton { display:inline-flex; align-items:center; justify-content:center; gap:18px; background:var(--teal); color:white; min-height:48px; padding:14px 22px; font-weight:700; font-size:14px; border-radius:5px; text-align:center; }
.primaryButton:hover { background:#075759; text-decoration:none; } .primaryButton img { width:18px; height:18px; filter:invert(1); }
.textLink { font-size:13px; font-weight:700; } .reassurance { font-size:11px; color:var(--muted); margin:14px 0 22px; }
.heroPreview { margin:0 auto; max-width:960px; } .heroPreview img { display:block; width:100%; height:auto; } figcaption { color:var(--muted); font-size:11px; line-height:1.6; padding:10px 0 14px; }
.benefits { max-width:1100px; margin:auto; padding:32px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; }
.benefits img { width:22px; height:22px; margin-bottom:10px; } .benefits div:nth-child(2) { border-top:3px solid var(--green); padding-top:12px; } .benefits div:nth-child(3) { border-top:3px solid var(--coral); padding-top:12px; } .benefits div:first-child { border-top:3px solid var(--teal); padding-top:12px; }
h2 { font-size:28px; line-height:1.25; margin:0 0 16px; overflow-wrap:anywhere; } h3,.benefits h2 { font-size:17px; line-height:1.4; margin:0 0 8px; }
p { line-height:1.65; overflow-wrap:anywhere; } .benefits p,.evidenceGrid p { font-size:14px; color:var(--muted); margin:0; }
.demoSection,.evidenceSection,.supportSection { padding:56px 32px; } .demoSection { background:#f8fafb; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sectionHeader { max-width:1040px; margin:0 auto 28px; }
.demoTabs { max-width:1040px; margin:0 auto 18px; display:flex; gap:4px; border-bottom:1px solid var(--line); }
.demoTabs button { border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--muted); min-height:44px; padding:10px 18px; font-size:13px; cursor:pointer; }
.demoTabs [aria-selected="true"] { border-bottom-color:var(--teal); color:var(--teal); font-weight:700; }
.demoFigure { max-width:1040px; margin:auto; } .demoFigure img { width:100%; height:auto; display:block; aspect-ratio:8/5; object-fit:contain; background:#fff; }
.evidenceGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; max-width:1040px; margin:auto; }
.researchSection { background:#eaf5f0; padding:48px max(32px,calc((100% - 1040px)/2)); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; }
.researchSection p { color:var(--muted); font-size:14px; }
.researchSection form label { display:block; font-size:12px; color:var(--muted); margin-bottom:16px; }
select,textarea { display:block; width:100%; border:1px solid #bacdca; background:#fff; color:var(--ink); padding:11px; border-radius:5px; margin-top:7px; min-height:40px; } textarea { resize:vertical; }
button { cursor:pointer; border:1px solid #abc4c4; color:var(--teal); background:white; border-radius:5px; padding:10px 14px; }
.secondaryButton { display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:13px; } .secondaryButton img { width:16px; height:16px; }
#surveyDraft { margin-top:16px; font-size:12px; } #surveyDraft a { margin-right:18px; }
.faq { max-width:1040px; margin:auto auto 24px; } .faq details { border-top:1px solid var(--line); padding:18px 0; } summary { cursor:pointer; font-size:15px; font-weight:700; } .faq p { color:var(--muted); font-size:14px; max-width:780px; }
.supportSection > .textLink { display:block; max-width:1040px; margin:auto; }
.finalCta { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:26px; background:#f0f6f7; padding:40px 24px; border-top:1px solid var(--line); }
.finalCta h2 { font-size:22px; margin:0 0 6px; } .finalCta p { font-size:13px; color:var(--muted); margin:0; }
.siteFooter { max-width:1100px; margin:auto; padding:28px 32px; display:flex; justify-content:space-between; gap:24px; color:var(--muted); font-size:11px; }
.siteFooter p { margin:0; } .siteFooter div { display:flex; gap:20px; flex-wrap:wrap; }
@media(max-width:800px) { .siteHeader { padding:16px 24px; } .siteHeader nav { gap:16px; } .siteHeader nav a:not(.navCta) { display:none; } .benefits,.evidenceGrid { gap:22px; } .researchSection { gap:32px; padding:40px 24px; } .siteFooter { flex-direction:column; } }
@media(max-width:600px) { .siteHeader { padding:14px 18px; gap:16px; } .brand { font-size:12px; gap:8px; max-width:200px; } .brand img { width:28px; height:28px; } .navCta { font-size:12px; white-space:nowrap; } h1 { font-size:30px; } .hero { padding:26px 18px 0; } .lead { font-size:19px; } .heroActions { gap:14px; margin-top:20px; } .primaryButton { padding:13px 16px; } .heroActions .textLink { display:none; } .heroPreview { margin-top:20px; } .benefits { grid-template-columns:1fr; gap:22px; padding:28px 24px; } .benefits div { display:grid; grid-template-columns:28px 1fr; gap:4px 14px; } .benefits img { grid-row:1/3; } .benefits p { grid-column:2; font-size:13px; } .demoSection,.evidenceSection,.supportSection { padding:36px 24px; } h2 { font-size:24px; } .demoTabs { gap:0; } .demoTabs button { flex:1; padding:10px 5px; font-size:11px; } .evidenceGrid,.researchSection { grid-template-columns:1fr; } .evidenceGrid { gap:28px; } .researchSection { gap:24px; } .finalCta { justify-content:flex-start; padding:28px 24px; gap:16px; } .finalCta > div { flex:1; min-width:200px; } .siteFooter { padding:24px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }