:root { color-scheme:dark; --paper:#08090b; --ink:#edf2fa; --muted:#a5b4cd; --blue:#91b5ef; --line:#2b3d5c; --band:#152136; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--blue); }
a:focus-visible,video:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
img,video { display:block; max-width:100%; }
figure { margin:0; }
.wrap { width:min(1200px,calc(100% - 96px)); margin-inline:auto; }
.section { padding-block:104px; }
.site-nav { position:absolute; inset:0 0 auto; z-index:100; display:flex; justify-content:space-between; align-items:center; padding:28px 48px; background:transparent; }
.site-nav .nav-logo { padding:10px 16px; border-radius:12px; background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); color:var(--ink); font-size:24px; font-weight:500; letter-spacing:-1px; }
.site-nav .nav-logo span { color:#8b9cb5; }
.site-nav .nav-connect { display:inline-flex; align-items:center; padding:11px 20px; border:1px solid #a9c6fa40; border-radius:999px; background:#142033; color:#e6edf7; font-size:13px; }
.site-nav .nav-connect:hover { background:#243553; border-color:#a9c6fa80; }
.eyebrow { margin:0 0 24px; color:var(--blue); font-size:11px; font-weight:600; letter-spacing:1.6px; line-height:1.6; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-weight:500; }
h1 { margin:28px 0; font-size:clamp(76px,10.5vw,150px); letter-spacing:-.065em; line-height:.95; }
h1 span { color:var(--blue); }
h2 { max-width:1000px; margin-bottom:24px; font-size:clamp(34px,4.2vw,56px); letter-spacing:-.045em; line-height:1.12; }
h3 { font-size:25px; letter-spacing:-.025em; line-height:1.3; }
.body-copy { max-width:850px; color:var(--muted); font-size:17px; line-height:1.8; margin-bottom:20px; }
.body-copy a { text-decoration:underline; text-underline-offset:4px; }
.hero { padding-top:112px; text-align:center; }
.hero h1 { max-width:1000px; margin:16px auto 28px; font-size:clamp(36px,5vw,64px); line-height:1.18; letter-spacing:-.045em; text-wrap:balance; }
.hero>.eyebrow { margin-bottom:12px; }
.hero>.body-copy { max-width:800px; margin:0 auto 20px; font-size:15px; line-height:1.6; }
.hero-top { display:flex; justify-content:center; flex-wrap:wrap; gap:24px; margin-bottom:28px; font-size:13px; }
.site-link { color:var(--blue); }
.hero-deck { max-width:740px; margin:0 auto 32px; font-size:clamp(18px,2vw,23px); line-height:1.6; letter-spacing:-.025em; text-wrap:balance; }
.hero-pills { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; list-style:none; margin:0 auto; padding:0; }
.hero-pills li { padding:8px 16px; border:1px solid #50545b; border-radius:999px; background:#292c31; color:#e0e2e5; font-size:12px; font-weight:500; line-height:1.5; }
.hero-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:24px 0; padding-top:18px; border-top:1px solid var(--line); }
.hero-meta .eyebrow { margin-bottom:10px; font-size:10px; }
.hero-meta p { font-size:13px; color:var(--muted); margin:0; }
.hero-visual { width:100%; max-width:1200px; margin:clamp(40px,6vw,72px) auto 0; perspective:1400px; }
.hero-device-frame { transform-origin:center bottom; }
.hero-device-frame { padding:16px; border:1px solid #fff; border-radius:32px; background:#000; box-shadow:0 20px 60px #0006; }
.hero-device-frame video { display:block; width:100%; height:auto; border-radius:17px; background:#000; }
.result-badge { display:flex; justify-content:center; align-items:center; gap:12px; padding-top:12px; color:var(--blue); }
.result-badge>span:first-child { font-size:28px; }
.result-badge strong { font-size:36px; letter-spacing:-2px; font-weight:500; }
.result-badge>span:last-child { max-width:150px; color:var(--ink); font-size:13px; line-height:1.5; }
.chapter-nav { position:sticky; top:0; z-index:10; margin-top:40px; background:#08090bf5; backdrop-filter:blur(16px); border-block:1px solid var(--line); }
.chapter-nav>.wrap { display:flex; gap:36px; padding-block:22px; overflow-x:auto; }
.chapter-nav a { flex-shrink:0; font-size:12px; }
.metrics { display:grid; grid-template-columns:1fr 1fr; margin:40px 0 32px; border-block:1px solid var(--line); }
.metrics>div { padding:32px 0; }
.metrics>div+div { padding-left:40px; border-left:1px solid var(--line); }
.metrics strong { color:var(--blue); font-size:76px; font-weight:500; letter-spacing:-4px; }
.metrics strong span { font-size:40px; }
.metrics p { margin:8px 0 12px; font-size:15px; }
.metrics small { color:var(--muted); font-size:13px; }
.insight { margin-top:40px; border-left:2px solid var(--blue); padding:24px 32px; background:var(--band); }
.insight .eyebrow { margin-bottom:14px; }
.insight>p { max-width:850px; font-size:25px; line-height:1.5; margin:0; }
.goal { margin-top:64px; }
.goal h3 { max-width:760px; font-size:32px; }
.light-visual { padding:0; background:transparent; }
.light-visual img { width:100%; max-height:520px; object-fit:contain; }
.green-band { background:var(--band); }
.strategy-grid,.build-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:48px; }
.strategy-grid article,.build-steps article { padding-top:24px; border-top:1px solid #3a5278; }
.number { font-size:11px; color:var(--blue); letter-spacing:1px; }
.strategy-grid h3,.build-steps h3 { margin:18px 0 14px; }
.strategy-grid p,.build-steps p { color:var(--muted); font-size:15px; line-height:1.8; }
.strategy-statement { margin-top:48px; padding-top:32px; border-top:1px solid #3a5278; }
.strategy-statement>p { max-width:950px; font-size:clamp(22px,2.5vw,30px); line-height:1.55; margin-bottom:0; }
.audit-summary { margin:40px 0; padding:32px 0; border:0; border-radius:10px; }
.audit-summary h3 { max-width:850px; font-size:30px; }
.buyer-questions { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:question; padding:0; list-style:none; margin:32px 0 0; }
.buyer-questions li { border-top:0; padding-top:20px; font-size:18px; line-height:1.5; }
.buyer-questions li::before { counter-increment:question; content:'0' counter(question); display:block; margin-bottom:12px; color:var(--blue); font-size:12px; }
.artifact { margin-top:40px; }
.artifact-label { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 18px; background:var(--band); border-radius:8px 8px 0 0; font-size:11px; letter-spacing:.7px; }
.artifact-label>span { color:var(--muted); font-weight:500; }
.artifact-image { display:block; padding:0; background:transparent; border:1px solid var(--line); border-top:0; border-radius:0 0 8px 8px; overflow:hidden; }
.artifact img { width:100%; height:auto; }
figcaption { color:var(--muted); font-size:12px; line-height:1.7; padding-top:16px; }
.subsection-heading { margin-top:88px; }
.journey { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; list-style:none; margin:40px 0; padding:0; }
.journey li { border-top:1px solid #3a5278; padding:20px 20px 0 0; }
.journey span { color:var(--blue); font-size:12px; }
.journey h3 { margin:16px 0 8px; font-size:21px; }
.journey p { color:var(--muted); font-size:13px; line-height:1.6; }
.demo-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:64px 0 24px; }
.demo-heading .eyebrow { margin:0; }
.demo-heading a { font-size:13px; color:var(--blue); }
.demo video { width:100%; height:auto; border:1px solid #edf2fa4d; border-radius:12px; background:var(--paper); }
.outcome-stat { display:flex; align-items:center; gap:32px; margin:40px 0; padding-block:28px; border-block:1px solid var(--line); }
.outcome-stat strong { font-size:clamp(56px,8vw,96px); font-weight:500; color:var(--blue); letter-spacing:-.06em; white-space:nowrap; }
.outcome-stat>span { max-width:180px; font-size:19px; line-height:1.5; }
.contact { margin-top:72px; padding:40px; background:var(--band); border-radius:10px; }
.contact h3 { font-size:36px; }
.contact>p:not(.eyebrow) { max-width:750px; color:var(--muted); font-size:16px; line-height:1.8; }
.button { display:inline-block; margin-top:12px; padding:16px 24px; color:var(--paper); background:var(--band); border-radius:6px; font-size:14px; font-weight:600; }
.button:hover { color:var(--paper); background:#152136; }
footer { display:flex; justify-content:space-between; gap:20px; padding-block:32px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.back-to-top { position:fixed; right:24px; bottom:24px; z-index:20; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--band); color:var(--paper); box-shadow:0 6px 24px #0004; font-size:26px; }
.back-to-top:hover { color:var(--paper); background:#152136; }
.back-to-top[hidden] { display:none; }
.skip-link { position:fixed; top:-100px; left:20px; padding:12px; background:var(--band); color:var(--paper); z-index:30; }
.skip-link:focus { top:12px; }
@media(max-width:800px) {
  .wrap { width:calc(100% - 40px); }
  .site-nav { padding:20px; }
  .section { padding-block:64px; }
  .hero-top { margin-bottom:24px; }
  .hero-meta { grid-template-columns:1fr; gap:14px; }
  .hero-device-frame { padding:12px; border-radius:26px; }
  .hero-device-frame video { border-radius:13px; }
  .strategy-grid,.build-steps { grid-template-columns:1fr; gap:16px; }
  .buyer-questions { grid-template-columns:1fr; gap:16px; }
  .journey { grid-template-columns:1fr 1fr; row-gap:24px; }
  .artifact-image { padding:0; }
  .chapter-nav>.wrap { gap:24px; }
}
@media(max-width:520px) {
  h1 { font-size:76px; }
  .hero-meta { grid-template-columns:1fr; }
  .hero-device-frame { padding:10px; border-radius:22px; }
  .hero-device-frame video { border-radius:11px; }
  .result-badge { gap:10px; }
  .result-badge strong { font-size:30px; }
  .result-badge>span:last-child { font-size:11px; }
  .metrics strong { font-size:60px; }
  .metrics>div+div { padding-left:20px; }
  .metrics p { font-size:12px; }
  .metrics small { font-size:11px; }
  .insight,.contact { padding:24px; }
  .audit-summary { padding:24px 0; }
  .insight>p { font-size:22px; }
  .light-visual { padding:0; }
  .artifact-label { padding:16px 12px; font-size:9px; }
  .outcome-stat { flex-direction:column; align-items:flex-start; gap:8px; }
  .outcome-stat>span { max-width:none; font-size:16px; }
  footer>span { display:none; }
  .demo-heading { align-items:flex-start; flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.project-context { margin:32px 0; }
.project-context>p { font-size:17px; color:var(--muted); line-height:1.8; }
.project-context h3 { margin-bottom:16px; }

/* Original-site evidence: baseline metrics paired with the recording. */
.old-site-baseline { margin:40px 0 32px; padding:32px; border:1px solid var(--line); border-radius:12px; background:#101a2b; }
.old-site-heading .eyebrow { margin-bottom:12px; }
.old-site-heading h3 { margin-bottom:12px; font-size:30px; }
.old-site-heading .body-copy { margin-bottom:28px; font-size:15px; }
.old-site-evidence { display:grid; grid-template-columns:minmax(220px,1fr) minmax(0,2.6fr); align-items:center; gap:36px; }
.old-site-metrics { display:block; margin:0; border:0; }
.old-site-metrics>div { padding:20px 0; }
.old-site-metrics>div+div { padding:20px 0; border-left:0; border-top:1px solid var(--line); }
.old-site-metrics strong { font-size:64px; }
.old-site-metrics small { display:block; line-height:1.6; }
.old-site-recording video { width:100%; height:auto; border:1px solid #edf2fa4d; border-radius:8px; }
.old-site-recording figcaption { font-size:10px; letter-spacing:1px; }
@media(max-width:800px) {
  .old-site-baseline { padding:24px; }
  .old-site-evidence { grid-template-columns:1fr; gap:24px; }
  .old-site-metrics { display:grid; grid-template-columns:1fr 1fr; }
  .old-site-metrics>div+div { padding:20px 0 20px 24px; border-top:0; border-left:1px solid var(--line); }
}
@media(max-width:520px) {
  .old-site-baseline { padding:20px; }
  .old-site-metrics strong { font-size:48px; }
  .old-site-metrics>div+div { padding-left:16px; }
}

/* Keep the original-site context and baseline together beside a smaller demo. */
.old-site-evidence { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:40px; align-items:center; }
.old-site-context .eyebrow { margin-bottom:12px; }
.old-site-context h3 { margin-bottom:16px; font-size:24px; }
.old-site-context>p { color:var(--muted); font-size:15px; line-height:1.8; margin-bottom:24px; }
.old-site-metrics { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.old-site-metrics>div+div { border-top:0; border-left:1px solid var(--line); padding:20px 0 20px 24px; }
.old-site-metrics strong { font-size:54px; }
.old-site-metrics p { font-size:14px; }
@media(max-width:800px) {
  .old-site-evidence { grid-template-columns:1fr; gap:24px; }
  .old-site-recording { width:100%; max-width:560px; margin-inline:auto; }
}
@media(max-width:520px) {
  .old-site-metrics strong { font-size:44px; }
  .old-site-metrics>div+div { padding-left:16px; }
}

.accuengine-site-button { color:var(--ink); }
.accuengine-site-button:hover { color:var(--ink); background:#2b3d5c; }

.artifact-label .accuengine-site-button { margin:0; padding:8px 12px; border:1px solid var(--line); color:var(--blue); font-size:12px; letter-spacing:0; white-space:nowrap; }

/* Compact outcome summary */
#outcome { padding-block:64px; }
#outcome .eyebrow { margin-bottom:16px; }
#outcome h2 { font-size:clamp(30px,3.4vw,44px); }
.outcome-comparison { display:flex; align-items:center; gap:32px; padding:24px; margin-bottom:20px; background:var(--band); border-radius:10px; }
.outcome-comparison>div { display:grid; gap:4px; }
.outcome-comparison>div>span { color:var(--muted); font-size:11px; letter-spacing:1.4px; }
.outcome-comparison strong { color:var(--blue); font-size:clamp(40px,5vw,64px); font-weight:500; line-height:1.1; letter-spacing:-.05em; }
.outcome-arrow { color:var(--muted); font-size:28px; }
.outcome-comparison p { margin:0 0 0 auto; color:var(--muted); font-size:15px; }
.outcome-comparison b { display:block; color:var(--ink); font-size:28px; font-weight:500; }
.outcome-intro { font-size:16px; line-height:1.5; margin-bottom:16px; }
.outcome-highlights { display:grid; gap:14px; margin:0; padding-left:20px; }
.outcome-highlights li { padding-left:4px; color:var(--blue); }
.outcome-highlights strong { display:block; margin-bottom:3px; color:var(--ink); font-size:16px; font-weight:500; }
.outcome-highlights li>span { display:block; color:var(--muted); font-size:15px; line-height:1.5; }
.outcome-links { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:24px; color:var(--blue); font-size:13px; }
@media (max-width:600px) {
  #outcome { padding-block:48px; }
  .outcome-comparison { gap:16px; flex-wrap:wrap; }
  .outcome-comparison p { margin-left:0; }
  .outcome-comparison b { font-size:22px; }
}

.outcome-details { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.outcome-sku { min-width:0; }
.outcome-sku img { width:100%; height:auto; border:1px solid var(--line); border-radius:8px; }
.outcome-sku figcaption { margin-top:8px; color:var(--muted); font-size:12px; }
@media (max-width:800px) {
  .outcome-details { grid-template-columns:1fr; gap:24px; }
}