/* JB DEV — shared visual system. No framework or remote assets. */
:root {
  --ink:#17243b; --muted:#606c80; --blue:#3559dc; --blue-dark:#2946b6;
  --line:#e0e5ed; --white:#fff; --cloud:#f5f6fa; --night:#0b1426;
  --night-2:#152343; --purple:#aea0e6; --cyan:#8ecbd0; --radius:14px;
  --shadow:0 24px 56px #111e3c12;
  --motion-fast:180ms; --motion-base:320ms; --motion-enter:640ms;
  --motion-ease:cubic-bezier(.2,.75,.25,1); --motion-distance:18px;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:105px }
body { margin:0; color:var(--ink); font:16px/1.65 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--white); -webkit-font-smoothing:antialiased }
button,input { font:inherit }
a { color:inherit; text-decoration:none }
img,svg { max-width:100% }
button { cursor:pointer }
button:disabled { cursor:not-allowed; opacity:.62 }
[hidden] { display:none!important }
::selection { background:#ced8ff; color:#101c36 }
:focus-visible { outline:3px solid #738df0; outline-offset:4px }
.shell { width:min(1180px,calc(100% - 64px)); margin-inline:auto }
.skip-link { position:fixed; top:-100px; left:16px; padding:10px 18px; background:#fff; color:var(--night); z-index:9999 }
.skip-link:focus { top:10px }
.product-icon { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0 }
.section-pad { padding:104px 0 }
.section-dark { background:var(--night); color:white }
.eyebrow,.kicker,.mini-label { font-size:11px; font-weight:750; letter-spacing:1.7px; text-transform:uppercase }
.eyebrow { display:flex; align-items:center; gap:12px; color:#bcc9f3 }
.kicker { color:var(--blue); display:block; margin-bottom:18px }
.kicker.light { color:#b9c9ff }
.signal,.announcement-dot,.pill-live i,.widget-state i { display:inline-block; width:6px; height:6px; flex-shrink:0; border-radius:50%; background:#8acfb6 }
.signal { box-shadow:0 0 0 4px #8acfb612 }
.gradient-text { color:#a6b4fa; background:linear-gradient(100deg,#9ab5ff 5%,#b4a3e4 90%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent }
.muted { color:#79849a }
.fine-print,.pricing-note { font-size:12px!important; color:#626d80!important; line-height:1.7!important }

/* Navigation and shared controls */
.site-header { background:#0b1426f5; color:#fff; position:sticky; top:0; z-index:40; border-bottom:1px solid #ffffff12; backdrop-filter:blur(12px) }
.nav-wrap { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px }
.brand { display:inline-flex; align-items:center; gap:9px; font-size:18px; font-weight:800; white-space:nowrap }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; height:36px; aspect-ratio:1; background:#5676ef; border:1px solid #92a8ff55; border-radius:9px; line-height:1; letter-spacing:-1.4px; color:#fff }
.brand-mark span { color:#c4d0ff }
.brand-name { font-size:16px; letter-spacing:1.5px }
.brand-divider { width:1px; height:20px; background:#ffffff26; margin:0 6px }
.product-brand { font-size:10px; letter-spacing:1.6px; color:#a8b9d4; font-weight:650 }
.main-nav,.nav-wrap>nav { display:flex; align-items:center; gap:27px }
.main-nav>a:not(.nav-cta),.nav-wrap>nav>a:not(.nav-cta) { font-size:13px; font-weight:600; color:#c0cadc; transition:color var(--motion-fast) }
.main-nav>a:hover,.nav-wrap>nav>a:hover { color:#fff }
.nav-cta { display:inline-flex; align-items:center; gap:12px; border:1px solid #ffffff32; border-radius:8px; padding:10px 16px; font-size:12px; font-weight:650; background:#ffffff08; transition:background var(--motion-fast),border-color var(--motion-fast) }
.nav-cta:hover { background:#ffffff12; border-color:#ffffff60 }
.menu-toggle { display:none; background:transparent; color:white; border:1px solid #405071; border-radius:8px; padding:10px; line-height:1; min-height:44px }
.menu-toggle span { display:block; background:currentColor; height:2px; width:22px; margin:4px }
.announcement { background:#1b2948; color:#d7dff0; display:flex; align-items:center; justify-content:center; gap:12px; min-height:34px; padding:6px 20px; font-size:11px }
.announcement a { color:#fff; text-decoration:underline; text-underline-offset:3px }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:15px 22px; min-height:50px; border:1px solid transparent; border-radius:9px; font-size:13px; font-weight:700; line-height:1.3; color:inherit; transition:transform var(--motion-fast) var(--motion-ease),background var(--motion-fast),box-shadow var(--motion-fast) }
.btn-primary { background:var(--blue); color:white; box-shadow:0 5px 16px #2547b51a }
.btn-primary:hover { background:var(--blue-dark) }
.section-dark .btn-primary,.home-page .btn-primary,.access-section .btn-primary { background:#4b65d5; color:white }
.section-dark .btn-primary:hover,.home-page .btn-primary:hover,.access-section .btn-primary:hover { background:#4260d7 }
.btn-ghost { border-color:#66759580; color:#e4eafa; background:#ffffff03 }
.btn-ghost:hover { background:#ffffff09 }
.btn-outline { color:#344ba1; border-color:#ccd5ef; background:white }
.btn-outline:hover { background:#f3f5fc }
.btn>span,.text-link>span,.home-demo-link>span { transition:transform var(--motion-base) var(--motion-ease) }
.btn:active { transform:translateY(1px) }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:30px 0 }
.text-link { font-size:13px; font-weight:700; color:var(--blue); display:inline-flex; align-items:center; gap:18px }
.text-link:hover { text-decoration:underline; text-underline-offset:5px }

/* Product hero: one product surface, subtle depth, no floating decorations. */
.hero { overflow:hidden; position:relative; padding:80px 0 85px; background:radial-gradient(ellipse at 93% 30%,#29326577,transparent 56%),var(--night) }
.hero-layout { display:grid; grid-template-columns:1.06fr 1fr; align-items:center; gap:58px }
.hero h1,.home-hero h1 { font-size:clamp(46px,4.7vw,64px); line-height:1.09; letter-spacing:-2.8px; font-weight:750; margin:25px 0 }
.hero-copy>p { font-size:16px; color:#b9c6dc; max-width:510px; line-height:1.85 }
.hero-trust { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:28px; color:#afc0d7; font-size:11px }
.hero-trust span:first-letter { color:#8acfb6 }
.hero-stage { position:relative; min-width:0; padding:18px 0 0; perspective:1100px }
.stage-label { display:flex; justify-content:space-between; gap:12px; color:#a6b4d5; font-size:9px; letter-spacing:1.35px; margin-bottom:17px }
.search-widget { position:relative; background:#fff; color:var(--ink); border-radius:13px; border:1px solid #e0e5f0; box-shadow:0 30px 75px #00000030; overflow:hidden; transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform 460ms var(--motion-ease) }
.widget-top { height:40px; border-bottom:1px solid #e8ecf4; background:#f5f6fb; display:flex; align-items:center; gap:16px; padding:0 18px; color:#616d84; font-size:10px }
.widget-dots { display:flex; gap:5px }
.widget-dots i { width:6px; height:6px; background:#c4cddd; border-radius:50% }
.widget-state { margin-left:auto; color:#397458; display:flex; gap:6px; align-items:center }
.widget-content { padding:25px }
.widget-heading { display:flex; align-items:center; gap:10px; margin-bottom:22px }
.widget-heading strong,.widget-heading small { display:block }
.widget-heading strong { font-size:15px; line-height:1.4 }
.widget-heading small { font-size:11px; color:#6f7b8e }
.widget-logo { width:35px; height:35px; display:grid; place-items:center; border-radius:8px; background:#eeedfa; color:#6053b2; font-size:28px; line-height:1 }
.mock-search-row { height:47px; border:1px solid #91a4e7; box-shadow:0 0 0 3px #f0f2ff; display:flex; align-items:center; gap:12px; padding:0 13px; border-radius:8px; color:#273650; font-size:14px }
.mock-search-row svg,.demo-input-wrap>svg { width:18px; height:18px; stroke:#7588ab; stroke-width:1.8; fill:none; flex-shrink:0 }
.mock-search-row kbd { margin-left:auto; color:#7a859b; border:1px solid #e1e5f0; background:#f7f8fc; border-radius:4px; font:12px monospace; padding:2px 5px }
.mock-meta { display:flex; justify-content:space-between; gap:8px; color:#6c7890; font-size:11px; margin:22px 0 6px }
.mock-meta strong { color:#4b56a2 }
.mock-item { display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid #edf0f5 }
.mock-item strong,.mock-item small { display:block }
.mock-item strong { font-size:12px; font-weight:650 }
.mock-item small { font-size:11px; color:#6b788e; margin-top:2px }
.mock-product-icon { width:46px; height:46px; display:grid; place-items:center; flex-shrink:0; border-radius:8px }
.icon-mouse { background:#edf1fb; color:#506aab }
.icon-headset { background:#f0ecf9; color:#8371b4 }
.icon-keyboard { background:#eaf3f1; color:#517f76 }
.mock-arrow { color:#8493af; margin-left:auto }
.mock-bottom { display:flex; justify-content:space-between; align-items:center; color:#3f59b7; font-size:12px; font-weight:700; padding:18px 0 0 }
.mock-caption { font-size:11px; text-align:center; color:#a6b4ce; margin:19px 0 0 }

/* Editorial problem statement and deliberately varied feature surfaces. */
.section-intro { max-width:710px; margin-bottom:44px }
.section-intro.centered { text-align:center; margin-inline:auto }
.section-intro h2,.demo-copy h2,.insights-copy h2,.faq-layout h2,.access-layout h2 { font-size:clamp(32px,3.4vw,45px); line-height:1.18; letter-spacing:-1.6px; margin:0 0 18px; font-weight:720; text-wrap:balance }
.section-intro p,.demo-copy>p,.insights-copy>p,.faq-layout>div>p { color:var(--muted); font-size:15px; margin:0; line-height:1.85 }
.problem-section .section-intro { text-align:left; display:grid; grid-template-columns:1.2fr 1fr; gap:0 80px; max-width:none; margin-bottom:52px }
.problem-section .kicker { grid-column:1/-1 }
.problem-section .section-intro h2 { font-size:36px; margin:0 }
.problem-section .section-intro p { align-self:center }
.pain-grid,.feature-grid,.how-grid,.price-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px }
.pain-card { border-top:1px solid #bcc8df; padding:24px 16px 8px 0 }
.pain-icon { font-size:10px; letter-spacing:1.2px; font-weight:750; color:#687ca6; margin-bottom:20px }
.pain-card h3,.feature-card h3,.how-card h3 { font-size:17px; letter-spacing:-.3px; margin:0 0 10px; font-weight:700 }
.pain-card p,.feature-card p,.how-card p { color:var(--muted); font-size:13px; margin:0; line-height:1.8 }
.pain-card>span { display:inline-block; font-size:12px; color:#625692; margin-top:17px; padding:3px 0 }
.features-section { background:#fff }
.feature-grid { gap:16px 34px }
.feature-card { padding:25px 8px 24px 0; border-top:1px solid var(--line); min-width:0 }
.feature-card:first-child { background:var(--night-2); color:white; border:0; border-radius:12px; padding:26px; grid-row:span 2; display:flex; flex-direction:column; justify-content:center }
.feature-card:first-child p { color:#becce2 }
.feature-card:last-child { grid-column:2/-1; display:grid; grid-template-columns:40px 1fr; gap:0 18px; padding-bottom:0 }
.feature-card:last-child .feature-symbol { grid-row:span 2 }
.feature-symbol { display:block; color:#6b71aa; font-size:26px; font-weight:500; margin-bottom:18px; line-height:1 }
.feature-card:first-child .feature-symbol { width:52px; height:52px; display:grid; place-items:center; border:1px solid #7281a960; border-radius:12px; color:#b8bff3; font-size:38px; margin-bottom:35px }
.feature-card:last-child p { max-width:550px }

/* Interactive demo */
.demo-section { background:#f1f3f9; border-block:1px solid #e7eaf3 }
.demo-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center }
.demo-copy>p { margin-bottom:30px }
.demo-steps { display:grid; gap:22px; margin-bottom:27px }
.demo-steps>div { position:relative; padding-left:44px }
.demo-steps span { position:absolute; left:0; top:2px; color:#687cb6; font-size:12px; font-weight:650; font-variant-numeric:tabular-nums }
.demo-steps strong { font-size:14px; font-weight:650 }
.demo-steps p { font-size:12px; color:#657187; margin:3px 0 0 }
.demo-panel { padding:27px; background:#fff; border-radius:15px; border:1px solid #d8dfef; box-shadow:var(--shadow); min-width:0; color:var(--ink) }
.demo-panel-header { display:flex; gap:11px; align-items:center; border-bottom:1px solid #e8ecf4; padding-bottom:20px; margin-bottom:24px }
.demo-panel-icon { display:grid; place-items:center; width:39px; height:39px; flex-shrink:0; border-radius:9px; background:var(--blue); color:white; font-size:29px; line-height:1 }
.demo-panel-header strong,.demo-panel-header div>span { display:block }
.demo-panel-header strong { font-size:14px; font-weight:650 }
.demo-panel-header div>span { color:#6b778d; font-size:11px }
.pill-live { margin-left:auto; color:#36775c; font-size:10px; display:flex; align-items:center; gap:6px; font-weight:650 }
.demo-label { font-size:12px; font-weight:650; display:block; margin-bottom:10px }
.demo-input-wrap { display:flex; align-items:center; gap:12px; border:1px solid #a2b3e4; box-shadow:0 0 0 3px #f4f5fb; border-radius:9px; padding:0 12px; height:55px; transition:border-color var(--motion-fast),box-shadow var(--motion-fast) }
.demo-input-wrap input { background:none; border:0; outline:0; width:100%; min-width:0; font-size:15px; color:#26395a; appearance:none }
.demo-input-wrap input::-webkit-search-cancel-button { appearance:none }
.demo-input-wrap input:focus-visible { outline:none }
.demo-input-wrap:focus-within { box-shadow:0 0 0 4px #e8edff; border-color:#5475e6 }
.clear-query { color:#687997; background:none; border:0; font-size:22px; width:40px; height:40px; flex-shrink:0; border-radius:6px }
.clear-query:hover { background:#f0f3fa }
.suggestion-pills { display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 20px }
.suggestion-pills button { font-size:11px; font-weight:550; color:#586780; padding:7px 10px; min-height:34px; background:#fff; border:1px solid #e1e6f1; border-radius:6px; transition:background var(--motion-fast),border-color var(--motion-fast) }
.suggestion-pills button:hover { background:#f4f6fc; border-color:#bac8ed }
.suggestion-pills button[aria-pressed="true"] { background:#edf1ff; color:#3a52ae; border-color:#bdcaef }
.demo-status { display:flex; justify-content:space-between; gap:12px; font-size:11px; font-weight:600; color:#626e85; margin-bottom:8px; min-height:37px; align-items:center; overflow-wrap:anywhere }
.demo-status>span:first-child { flex:1 }
.demo-status>span:last-child { flex-shrink:0; max-width:42%; text-align:right }
.demo-results-slot,.demo-results { min-height:288px }
.demo-result { display:flex; width:100%; min-height:72px; gap:12px; align-items:center; padding:11px 7px; text-align:left; background:transparent; border:0; border-bottom:1px solid #edf0f6; border-radius:6px; transition:background var(--motion-fast) }
.demo-result:hover,.demo-result.active { background:#f0f3fd }
.result-emoji { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border-radius:8px; background:#edf1fa; color:#6275ad }
.demo-result:nth-child(2) .result-emoji { background:#f0edf8; color:#8572b3 }
.demo-result:nth-child(3) .result-emoji { background:#edf4f2; color:#588379 }
.result-info { min-width:0; flex:1 }
.result-info strong,.result-info small { display:block }
.result-info strong { font-size:13px; color:#263754; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.result-info small { font-size:11px; color:#6c798e }
.result-arrow { color:#788dad }
.demo-empty { display:grid; place-items:center; min-height:288px; text-align:center; color:#6b7890; font-size:13px; padding:20px }
.demo-empty strong { color:#283954 }
.demo-help { font-size:10px; color:#637087; margin:12px 0 0 }
.demo-foot { display:flex; justify-content:space-between; gap:10px; color:#707d93; font-size:10px; margin-top:18px; padding-top:14px; border-top:1px solid #e7ebf3 }

/* Illustrative analytics: stable bars scale without layout changes. */
.insights-section { background:var(--night-2); color:#fff }
.insights-layout { display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:76px }
.insights-preview { background:#fff; color:var(--ink); border-radius:14px; padding:27px; border:1px solid #e2e7f2; min-width:0 }
.preview-header { display:flex; align-items:start; justify-content:space-between }
.preview-header .mini-label { color:#6e7b93; font-size:9px }
.preview-header h3 { font-size:21px; letter-spacing:-.6px; margin:5px 0 }
.preview-dots { color:#8a96ad; letter-spacing:3px }
.preview-note { font-size:10px; color:#657287; margin:12px 0 23px; display:flex; align-items:center; flex-wrap:wrap; gap:7px }
.sample-label { background:#eeeaf8; color:#756095; font-size:8px; letter-spacing:.7px; padding:3px 6px; border-radius:4px; font-weight:700 }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); padding-bottom:24px; gap:15px }
.metric { border-right:1px solid #e4e9f3; padding-right:12px; min-width:0 }
.metric:last-child { border:0; padding:0 }
.metric span,.metric small,.metric strong { display:block }
.metric span { font-size:10px; color:#657289 }
.metric strong { font-size:28px; font-weight:700; line-height:1.6; letter-spacing:-1px; font-variant-numeric:tabular-nums }
.metric small { font-size:9px; color:#6e7b90 }
.chart-panel { border-top:1px solid #e5eaf3; padding-top:20px }
.chart-title { display:flex; justify-content:space-between; align-items:center; gap:8px }
.chart-title strong { font-size:12px; font-weight:650 }
.chart-tabs { background:#f1f3f8; border-radius:7px; display:flex; padding:3px; gap:2px }
.chart-tabs button { border:0; background:none; font-weight:650; color:#637189; font-size:10px; border-radius:5px; padding:6px 9px; min-width:32px; min-height:30px }
.chart-tabs button.active { background:#fff; color:#3e55b4; box-shadow:0 1px 4px #0c235018 }
.chart-bars { height:145px; display:flex; gap:8px; align-items:flex-end; padding:20px 0 0; border-bottom:1px solid #dae2f1; background:repeating-linear-gradient(to top,#edf0f7 0,#edf0f7 1px,transparent 1px,transparent 36px) }
.chart-bar { flex:1; min-width:2px; max-width:100%; border-radius:4px 4px 0 0; background:#7188d8; height:100%; transform:scaleY(calc(var(--height,50)/100)); transform-origin:bottom; transition:transform var(--motion-enter) var(--motion-ease) }
.chart-bar:nth-child(3n) { background:#a89bd0 }
.chart-labels { display:flex; justify-content:space-between; font-size:9px; color:#64718a; margin-top:8px }
.preview-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:23px; padding-top:17px; border-top:1px solid #e8ecf3 }
.preview-bottom>span { font-size:11px; font-weight:600 }
.term-chip { display:inline-block; background:#f1f3fa; color:#5f7098; font-size:10px; padding:4px 7px; border-radius:4px; margin-left:3px }
.insights-copy .kicker { color:#b4bcea }
.insights-copy>p { color:#bdc8dc; margin-bottom:24px }
.check-list { list-style:none; margin:0 0 27px; padding:0; display:grid; gap:12px }
.check-list li { position:relative; padding-left:25px; font-size:13px; color:#d3dced }
.check-list li:before { content:"✓"; position:absolute; left:0; top:0; color:#94c7cc }
.insights-copy .text-link { color:#b8c4ff }

/* How it works, plans, FAQ and early access. */
.how-card { padding:25px 20px 0 0; border-top:1px solid #d9dfec }
.how-card>span { display:block; font-size:35px; color:#7e8bab; font-weight:500; letter-spacing:-1.5px; margin-bottom:22px }
.pricing-section { background:#f5f6fa }
.price-grid { align-items:stretch; gap:20px }
.price-card { position:relative; border:1px solid #dee4ee; border-radius:13px; padding:30px; background:#fff; display:flex; flex-direction:column }
.price-card.featured { background:#192a4b; border-color:#192a4b; color:#fff }
.price-flag { position:absolute; top:29px; right:24px; color:#d3c7f8; font-size:10px }
.price-kind { font-size:10px; letter-spacing:1.5px; font-weight:750; color:#516aa8 }
.featured .price-kind { color:#b8c7f1 }
.price-card h3 { font-size:20px; font-weight:600; margin:7px 0 25px }
.price { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; margin-bottom:14px }
.price strong { font-size:39px; font-weight:700; letter-spacing:-1.8px; line-height:1.1 }
.price span { font-size:12px; color:#6e7d93 }
.price-card>p { font-size:12px; color:#617087; min-height:43px }
.price-card ul { list-style:none; border-top:1px solid #e3e8f1; margin:8px 0 30px; padding:22px 0 0; display:grid; gap:13px; flex:1 }
.price-card li { font-size:12px; color:#52637c; padding-left:21px; position:relative }
.price-card li:before { content:"✓"; color:#6e82b6; position:absolute; left:0 }
.featured>p,.featured li,.featured .price span { color:#c3d0e7 }
.featured ul { border-color:#ffffff21 }
.featured li:before { color:#a5c3cd }
.featured .btn-primary { background:#dce3ff; color:#273c73; box-shadow:none }
.featured .btn-primary:hover { background:#edf0ff }
.price-card>.btn { width:100%; font-size:12px; padding:12px 14px }
.pricing-note { margin:26px auto 0; max-width:800px; text-align:center }
.faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:85px }
.faq-list { border-top:1px solid #dce2ec }
.faq-list details { border-bottom:1px solid #dce2ec }
.faq-list summary { padding:22px 32px 22px 0; list-style:none; cursor:pointer; font-size:14px; font-weight:650; position:relative }
.faq-list summary::-webkit-details-marker { display:none }
.faq-list summary span { position:absolute; right:8px; top:16px; font-size:25px; font-weight:300; color:#7584a3; transition:transform var(--motion-base) var(--motion-ease) }
.faq-list details[open] summary span { transform:rotate(45deg) }
.faq-list details p { font-size:13px; color:#62728b; line-height:1.85; margin:0 0 23px }
.access-section { background:#0e1b33; color:#fff }
.access-layout { display:grid; grid-template-columns:1fr .85fr; gap:92px; align-items:center }
.access-layout h2 { font-size:clamp(36px,4vw,52px) }
.access-layout>div:first-child>p { color:#bdcbe1; max-width:460px; font-size:15px; line-height:1.85 }
.access-features { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px }
.access-features span { font-size:11px; color:#b9c9e3 }
.access-form-card { border:1px solid #3b4b68; background:#172642; padding:30px; border-radius:14px }
.access-form-card h3 { font-size:22px; font-weight:650; letter-spacing:-.5px; margin:0 0 8px }
.access-form-card>p { color:#becbe2; font-size:12px; margin:0 0 24px }
.access-form-card form { display:grid; gap:9px }
.access-form-card label:not(.consent-label) { font-size:12px; font-weight:600; color:#dbe5f8 }
.access-form-card input:not([type="checkbox"]):not([type="hidden"]) { height:45px; width:100%; background:#0d1b34; color:#fff; border:1px solid #495a7a; border-radius:7px; padding:0 13px; font-size:13px; margin-bottom:6px; transition:border-color var(--motion-fast) }
.access-form-card input::placeholder { color:#a4b4ce }
.access-form-card input:focus { border-color:#9aaff5; outline:2px solid #5978c0; outline-offset:1px }
.consent-label { display:flex; align-items:flex-start; gap:9px; color:#c3d1e6; font-size:11px; line-height:1.7; margin:5px 0 }
.consent-label input { accent-color:#8ca4ff; margin-top:4px; min-width:15px; height:15px }
.access-form-card .btn { width:100%; margin-top:9px }
.form-message { font-size:12px; line-height:1.6; margin:3px 0 0; color:#f4d199 }
.form-message.success { color:#91deba }
.form-hint { font-size:11px!important; color:#aebed8!important; margin:14px 0 0!important }
.site-footer { background:var(--night); color:#b9c8df; padding-top:58px }
.footer-main { display:flex; justify-content:space-between; gap:40px; padding-bottom:46px }
.footer-main>div p { max-width:325px; color:#a7b6ce; font-size:13px }
.footer-main nav { display:flex; align-items:start; gap:24px }
.footer-main nav a { font-size:12px }
.footer-main nav a:hover { color:#fff }
.footer-line { border-top:1px solid #29364d; padding:21px 0 26px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:11px; color:#a6b6cf }

/* Home — product introduction, not a second landing. */
.home-page { background:var(--night); color:#fff }
.home-hero { display:grid; grid-template-columns:1fr .94fr; align-items:center; gap:90px; padding:90px 0 82px }
.home-hero h1 { font-size:clamp(54px,5.8vw,79px); line-height:1.03; letter-spacing:-3.8px; margin:28px 0 }
.home-copy>p { color:#bac7dd; max-width:480px; font-size:16px; line-height:1.85 }
.home-demo-link { display:inline-flex; align-items:center; gap:12px; padding:12px 0; color:#d0dbf0; font-size:12px; font-weight:600 }
.home-hero .hero-actions { gap:24px }
.home-signature { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:10px; letter-spacing:.3px; color:#9fafc9; padding-top:12px }
.home-showcase { background:#dddff2; color:#263451; border:1px solid #cdd2e7; border-radius:14px; overflow:hidden; position:relative }
.showcase-label { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:8px; font-weight:700; letter-spacing:1px; padding:20px 25px; border-bottom:1px solid #c5cce1 }
.showcase-label>span:last-child { color:#5c5c89 }
.showcase-body { padding:30px }
.showcase-heading { display:flex; align-items:center; gap:17px; font-size:29px; letter-spacing:-1.1px; line-height:1.13; font-weight:400 }
.showcase-heading strong { font-weight:700 }
.showcase-heading>.product-icon { width:62px; height:62px; padding:12px; background:#273c6d; color:#ebefff; border-radius:14px }
.showcase-body>p { font-size:14px; color:#5e6883; line-height:1.7; margin:24px 0 28px }
.home-query { display:flex; gap:16px; align-items:center; background:#f5f5fc; border:1px solid #cad0e6; padding:14px 16px; border-radius:9px 9px 0 0; font-size:13px }
.home-query>span:first-child { color:#77819c }
.home-query>strong { font-weight:650 }
.query-tag { font-size:9px; color:#4e736d; margin-left:auto }
.home-product { display:flex; align-items:center; gap:14px; background:white; padding:20px 16px; border-radius:0 0 9px 9px; box-shadow:0 14px 27px #253b6710 }
.home-product-drawing { background:#f0f2f8; display:grid; place-items:center; width:66px; height:72px; border-radius:8px; color:#6479a5; flex-shrink:0 }
.home-product-drawing .product-icon { width:44px; height:44px }
.home-product>span:nth-child(2) { flex:1; min-width:0 }
.home-product small,.home-product strong,.home-product>span>span { display:block }
.home-product small { font-size:8px; letter-spacing:1px; color:#697996 }
.home-product strong { font-size:13px; margin:4px 0; font-weight:650 }
.home-product>span>span { font-size:10px; color:#697996 }
.showcase-tags { display:flex; flex-wrap:wrap; gap:7px 16px; margin-top:25px; font-size:10px; color:#596788 }
.showcase-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 25px; border-top:1px solid #c5cce1; font-size:10px; color:#5e6a88 }
.showcase-footer a { font-size:11px; font-weight:700; color:#344e87; display:flex; gap:20px }
.home-feature { border-top:1px solid #35425a; display:grid; grid-template-columns:1.1fr 1fr auto; gap:45px; align-items:center; padding-block:36px 43px }
.home-feature .kicker { color:#9aabd4; font-size:9px; margin-bottom:12px }
.home-feature h2 { font-size:22px; line-height:1.4; font-weight:550; letter-spacing:-.4px; margin:0 }
.home-feature p { font-size:13px; color:#adbed8; margin:0 }
.home-feature .text-link { color:#becbff; font-size:12px }
.home-page .site-footer { padding-top:0 }

@media(hover:hover) and (pointer:fine) {
  .btn:hover { transform:translateY(-2px) }
  .btn:hover>span,.text-link:hover>span,.home-demo-link:hover>span { transform:translateX(3px) }
  .mock-bottom:hover { color:#233c94 }
}
@media(max-width:1070px) {
  .hero-layout { gap:30px }
  .hero h1 { font-size:clamp(43px,4.8vw,55px) }
  .demo-layout,.insights-layout,.access-layout { gap:40px }
  .home-hero { gap:45px }
  .home-hero h1 { font-size:64px }
  .showcase-body { padding:25px }
  .home-feature { gap:26px; grid-template-columns:1fr 1fr }
  .home-feature .text-link { grid-column:2 }
  .main-nav { gap:18px }
  .product-brand { display:none }
  .brand-divider { display:none }
}
@media(max-width:800px) {
  .section-pad { padding:76px 0 }
  .hero { padding:62px 0 }
  .hero-layout,.demo-layout,.insights-layout,.faq-layout,.access-layout,.home-hero { grid-template-columns:1fr }
  .hero-copy { max-width:620px }
  .hero h1 { font-size:clamp(45px,7vw,62px) }
  .hero-stage { max-width:560px; width:100%; margin:15px auto 0; perspective:none }
  .search-widget { transform:none }
  .hero-copy>p { max-width:600px }
  .home-hero { padding:64px 0; gap:48px }
  .home-hero h1 { font-size:72px }
  .home-copy>p { max-width:560px }
  .home-showcase { max-width:550px; width:100%; justify-self:center }
  .problem-section .section-intro { grid-template-columns:1fr; gap:0; max-width:620px }
  .problem-section .section-intro h2 { margin-bottom:18px }
  .pain-grid { gap:23px }
  .feature-grid { gap:20px 24px }
  .feature-card:first-child { padding:22px }
  .price-grid { gap:12px }
  .price-card { padding:22px 17px }
  .price strong { font-size:33px }
  .price-flag { position:static; order:-1; margin-bottom:7px }
  .price-card.featured { margin-top:-24px }
  .insights-preview { max-width:600px; width:100% }
  .insights-copy { grid-row:1 }
  .faq-layout { gap:30px }
  .access-form-card { max-width:600px; width:100% }
}
@media(max-width:600px) {
  .shell { width:calc(100% - 36px) }
  .nav-wrap { min-height:68px; gap:15px }
  .brand-mark { flex-basis:34px; width:34px; height:34px }
  .brand-name { font-size:14px }
  .announcement { font-size:10px; gap:7px; padding:8px 10px; flex-wrap:wrap }
  .nav-ready .menu-toggle { display:block; margin-left:auto }
  .nav-wrap>.main-nav { display:none; position:absolute; top:100%; left:0; right:0; background:#101e36; padding:12px 18px 22px; flex-direction:column; align-items:stretch; gap:0; border-bottom:1px solid #364767 }
  .nav-wrap>.main-nav.open { display:flex }
  html:not(.nav-ready) .main-nav { display:flex; position:static; width:100%; padding:0 0 15px; border:0 }
  html:not(.nav-ready) .nav-wrap { flex-wrap:wrap }
  html:not(.nav-ready) .site-header { position:relative }
  .main-nav a { display:block; padding:12px 6px; font-size:14px!important }
  .main-nav .nav-cta { padding:13px; margin-top:6px; text-align:center }
  .home-page .nav-wrap>nav { gap:12px }
  .home-page .nav-wrap>nav>a:not(.nav-cta) { font-size:10px }
  .home-page .nav-cta { font-size:10px; padding:10px; gap:7px }
  .hero { padding:49px 0 50px }
  .hero h1 { font-size:clamp(39px,10.1vw,54px); letter-spacing:-1.9px; line-height:1.12; margin:23px 0 }
  .eyebrow { font-size:9px; letter-spacing:1.25px }
  .hero-copy>p { font-size:14px }
  .hero-actions { gap:10px; margin:25px 0 }
  .hero-actions .btn { font-size:12px; padding:14px 16px }
  .hero-trust { gap:9px 13px; font-size:10px; margin-top:24px }
  .hero-stage { padding:0; margin:16px auto 0 }
  .stage-label { font-size:8px; letter-spacing:.8px; margin-bottom:12px }
  .widget-content { padding:20px }
  .widget-top { padding:0 14px; font-size:9px; gap:10px }
  .mock-caption { font-size:10px }
  .section-pad { padding:64px 0 }
  .section-intro h2,.demo-copy h2,.insights-copy h2,.faq-layout h2,.access-layout h2,.problem-section .section-intro h2 { font-size:32px; letter-spacing:-1px }
  .section-intro { margin-bottom:32px }
  .section-intro.centered { text-align:left }
  .section-intro p,.demo-copy>p,.insights-copy>p { font-size:14px }
  .problem-section .section-intro { margin-bottom:30px }
  .pain-grid,.feature-grid,.price-grid,.how-grid { grid-template-columns:1fr }
  .pain-grid { gap:24px }
  .pain-card { padding:20px 0 0 }
  .pain-icon { margin-bottom:12px }
  .pain-card>span { margin-top:12px }
  .feature-card:first-child { grid-row:auto; min-height:235px }
  .feature-card:first-child .feature-symbol { margin-bottom:24px }
  .feature-card:last-child { grid-column:auto; display:block }
  .feature-card { padding:20px 0 }
  .feature-symbol { margin-bottom:14px }
  .demo-layout,.insights-layout { gap:35px }
  .demo-panel { padding:19px 16px }
  .demo-panel-header { gap:9px; margin-bottom:20px }
  .demo-panel-header strong { font-size:13px }
  .demo-panel-header div>span { font-size:10px }
  .pill-live { font-size:9px; gap:5px }
  .demo-foot { flex-direction:column; gap:4px }
  .suggestion-pills { gap:6px }
  .suggestion-pills button { padding:7px 9px }
  .demo-results-slot,.demo-results { min-height:304px }
  .demo-result { min-height:76px; padding-inline:2px; gap:10px }
  .demo-empty { min-height:304px }
  .result-info strong { font-size:12px }
  .result-info small { font-size:10px }
  .demo-help { font-size:9px }
  .insights-preview { padding:21px 18px }
  .metric-grid { gap:9px }
  .metric strong { font-size:24px }
  .metric { padding-right:8px }
  .metric span { font-size:9px }
  .metric small { font-size:8px }
  .preview-bottom { align-items:start; flex-direction:column }
  .chart-bars { gap:6px }
  .price-grid { gap:20px }
  .price-card { padding:28px }
  .price-card.featured { margin:0 }
  .price-flag { position:absolute; top:28px; right:26px }
  .price strong { font-size:39px }
  .pricing-note { text-align:left }
  .how-grid { gap:30px }
  .how-card { padding-top:20px }
  .how-card>span { font-size:30px; margin-bottom:13px }
  .faq-list summary { font-size:13px }
  .access-form-card { padding:23px }
  .footer-main { flex-direction:column; gap:12px }
  .footer-main nav { flex-wrap:wrap }
  .footer-line { flex-direction:column; align-items:start; gap:8px }
  .home-hero { padding:55px 0 45px; gap:42px }
  .home-hero h1 { font-size:clamp(52px,13.9vw,70px); letter-spacing:-2.6px }
  .home-copy>p { font-size:14px }
  .home-hero .hero-actions { gap:15px }
  .home-demo-link { font-size:11px }
  .home-signature { padding-top:4px; font-size:9px }
  .showcase-body { padding:25px 20px }
  .showcase-label { padding:18px 20px; font-size:7px }
  .showcase-heading { font-size:28px }
  .showcase-footer { padding:16px 20px; font-size:9px }
  .home-feature { grid-template-columns:1fr; gap:20px; padding-block:32px }
  .home-feature .text-link { grid-column:auto }
  .home-feature h2 { font-size:23px }
}
/* Content is visible without JS. WAAPI reveals are optional enhancements. */
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important }
  .search-widget { transform:none!important }
}
@media(forced-colors:active) {
  .gradient-text { background:none; -webkit-text-fill-color:currentColor; color:CanvasText }
  .chart-bar { background:CanvasText }
  .btn,.brand-mark,.demo-result.active { border:1px solid ButtonText }
}