/* Product-led presentation: shared theme tokens remain user-selectable. */
:root{--bg:#060d14;--surface:#101e2a;--surface-2:#192c3a;--surface-3:#244253;--ink:#f6fbff;--muted:#bdcfdd;--faint:#93acbd;--line:#304d61;--accent:#46f2b5;--accent-2:#49d7ff;--accent-ink:#03261c;--mint-soft:#103e36;--header:rgba(6,13,20,.94)}
[data-theme=light]{--bg:#f2f7fb;--surface:#ffffff;--surface-2:#e5f0f7;--surface-3:#cee4ed;--ink:#09283a;--muted:#3d5b6d;--faint:#546e7e;--line:#c2d8e5;--accent:#007957;--accent-2:#006fac;--accent-ink:#ffffff;--mint-soft:#d9f4e8;--header:rgba(242,247,251,.94)}
body::before{background:radial-gradient(ellipse at 85% 5%,rgba(158,196,178,.09),transparent 40%);animation:none}
.shell,.header-inner{width:min(1200px,calc(100% - 64px))}
.site-header{height:76px}
.header-inner{gap:28px}
.site-header nav{gap:28px;font-size:14px}
.header-actions{gap:18px}
.header-cta{font-size:13px;min-height:42px}
.brand>span{font-size:24px}
.brand svg{width:34px;height:34px}
.icon-button{width:38px;height:38px}
h1,h2,h3{letter-spacing:-.045em;line-height:1.12}
h2{font-size:clamp(34px,3.6vw,48px)}
.eyebrow,.section-number{font-size:10px;letter-spacing:.15em}
.hero{min-height:620px;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:46px;padding-block:72px}
.hero h1{font-size:clamp(36px,3.7vw,50px);line-height:1.16;letter-spacing:-.05em}
.hero-copy{width:100%;max-width:540px}
.hero-lead{font-size:16px;line-height:1.8;max-width:470px;margin-top:24px}
.hero-actions{gap:12px;flex-wrap:wrap;margin-top:28px}
.primary-button,.secondary-button{font-size:13px;min-height:48px;padding:12px 18px;min-width:0;gap:18px;border-radius:7px}
.secondary-button{border-color:var(--line)}
.testing-note{font-size:11px;gap:8px;flex-wrap:wrap;color:var(--muted)}
.product-preview{height:auto;display:block;transform:none!important;perspective:none;will-change:auto}
.preview-window{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:0 32px 65px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.09) inset}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--line)}
.preview-brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--accent)}
.preview-brand b{font-size:12px;color:var(--ink)}
.preview-caption{font-size:10px;color:var(--muted)}
.preview-layout{display:grid;grid-template-columns:130px minmax(0,1fr)}
.preview-sidebar{padding:22px 12px;background:color-mix(in srgb,var(--bg) 50%,var(--surface));border-right:1px solid var(--line);position:relative}
.preview-sidebar>small{font-size:7px;letter-spacing:.12em;color:var(--muted);display:block;margin:0 0 19px 6px}
.preview-nav{display:flex;justify-content:space-between;padding:9px 8px;border-radius:5px;font-size:10px;color:var(--muted);margin-bottom:5px}
.preview-nav.selected{background:var(--mint-soft);color:var(--accent)}
.preview-nav b{font-size:9px;font-weight:500}
.preview-health{position:absolute;bottom:20px;left:18px;font-size:8px;color:var(--muted);display:flex;align-items:center;gap:6px}
.preview-health .live-dot{width:4px;height:4px}
.preview-chat{padding:20px;min-width:0}
.preview-person{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.preview-person .avatar{width:30px;height:30px;font-size:12px}
.preview-person strong{display:block;font-size:11px;font-weight:600}
.preview-person small{font-size:9px;color:var(--muted)}
.preview-bubble{border:1px solid var(--line);background:var(--surface-2);border-radius:8px 8px 8px 0;padding:12px;font-size:12px;line-height:1.6;max-width:92%;animation:enter .7s .15s both}
.preview-context{color:var(--accent);font-size:9px;margin:18px 0;animation:enter .7s .45s both}
.preview-response{border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));background:var(--mint-soft);padding:14px;border-radius:8px 8px 0 8px;animation:enter .7s .75s both}
.preview-response small{font-size:8px;letter-spacing:.08em;color:var(--accent)}
.preview-response p{font-size:12px;color:var(--ink);line-height:1.7;margin-top:6px}
.preview-delivery{display:flex;align-items:center;gap:6px;font-size:9px;margin-top:17px;color:var(--muted)}
.preview-delivery .live-dot{width:4px;height:4px}
.preview-delivery>span:last-child{margin-left:auto;color:var(--accent)}
.preview-footer{display:flex;justify-content:space-between;gap:8px;padding:13px 18px;border-top:1px solid var(--line);font-size:8px;color:var(--muted)}
.preview-proof{display:flex;align-items:center;gap:13px;max-width:360px;margin:18px 0 0 auto;padding:14px 18px;border:1px solid var(--line);border-radius:9px;background:var(--surface);transition:border-color .2s}
.preview-proof:hover{border-color:var(--accent)}
.preview-proof>span{font-size:23px;color:var(--accent)}
.preview-proof strong{font-size:12px;display:block}
.preview-proof small{font-size:10px;color:var(--muted)}
.preview-proof>b{margin-left:auto;color:var(--accent)}
.benefits{height:78px}
.benefits>div{font-size:12px;gap:13px}
.benefit-icon{font-size:10px;letter-spacing:.1em}
.business-value,.product,.capabilities,.process{padding-top:88px}
.section-heading{gap:38px;margin-bottom:32px}
.section-heading h2{margin-top:18px}
.section-heading>div{min-width:0}
.section-heading>p{font-size:15px;max-width:380px}
.value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.value-grid article{padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column}
.value-grid article>span{color:var(--accent);font-size:9px;letter-spacing:.13em}
.value-grid h3{font-size:23px;margin:25px 0 15px}
.value-grid p{font-size:14px;line-height:1.8;margin-bottom:25px}
.value-grid a{font-size:12px;color:var(--accent);margin-top:auto}
.scenario-tabs button{font-size:12px;padding:10px 16px;min-height:44px}
.product-stage{box-shadow:0 20px 55px rgba(0,0,0,.12);border-color:var(--line)}
.messages{min-height:360px;padding:25px}
.assistant-draft footer{flex-wrap:wrap}
.assistant-draft header{flex-wrap:wrap;gap:6px}
.assistant-draft>p{font-size:18px}
.assistant-draft footer>span{font-size:12px}
.approve-button{font-size:13px;min-height:42px}
.context-panel h3{font-size:28px}
.context-item{padding:17px 0}
.context-item strong{font-size:14px}
.capability{padding:28px;min-height:350px;border-radius:12px}
.capability.large{min-height:360px}
.capability h3{font-size:30px;margin:20px 0 16px}
.capability>p{font-size:15px}
.tone-switch{flex-wrap:wrap;margin-top:26px}
.tone-switch button{font-size:12px}
.queue-preview>div{gap:10px}
.queue-symbol{flex-shrink:0;width:30px;height:30px}
.queue-preview strong{font-size:12px}
.queue-preview small,.queue-preview b{font-size:10px}
.steps h3{font-size:23px;margin-top:30px}
.steps p{font-size:14px}
.control{padding-block:88px;gap:40px}
.control-copy h2{font-size:clamp(34px,3.5vw,46px)}
.control-copy>p{font-size:15px}
.control-copy ul{font-size:13px;gap:12px}
.control-demo{padding:24px;box-shadow:none}
.control-demo>header strong{font-size:14px}
#control-toggle{flex-shrink:0}
.safety-alert strong{font-size:15px}
.safety-alert>span{flex-shrink:0}
.safe-draft>p{font-size:17px}
.safe-draft>div{flex-wrap:wrap}
.safe-draft button{font-size:12px}
.questions{padding-bottom:70px;max-width:860px}
.questions h2{margin:18px 0 30px}
.questions details{border-top:1px solid var(--line);padding:19px 0}
.questions details:last-child{border-bottom:1px solid var(--line)}
.questions summary{cursor:pointer;font-size:15px;font-weight:600}
.questions details p{font-size:14px;line-height:1.8;margin:15px 0 0;max-width:730px}
.closing{padding-block:68px;background:radial-gradient(ellipse at 50% 100%,var(--mint-soft),transparent 70%)}
.closing>svg{width:42px;height:42px;margin-bottom:20px}
.closing h2{font-size:clamp(34px,4vw,52px)}
.closing>p{font-size:15px;max-width:510px}
.site-footer{min-height:140px;padding-block:30px;gap:28px}
.site-footer>div:last-child{gap:20px;font-size:12px}
.site-footer>div:first-child p{font-size:12px;max-width:290px}
@media(max-width:1100px){
 .header-cta{display:none}.hero{gap:28px}.hero h1{font-size:38px}.preview-layout{grid-template-columns:100px minmax(0,1fr)}
 .preview-sidebar{padding-inline:7px}.preview-sidebar>small{font-size:6px}.preview-health{left:10px;font-size:7px}.preview-chat{padding:16px}
 .section-heading{display:block}.section-heading>p{max-width:640px;margin-top:22px}.scenario-tabs{margin-top:26px}
}
@media(max-width:980px){
 .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-block:52px;min-height:0}
 .hero-copy{text-align:left;margin:0}.hero .eyebrow{justify-content:flex-start;font-size:8px}.hero-actions,.testing-note{justify-content:flex-start}
 .hero h1{font-size:34px}.hero-lead{font-size:14px}.hero-actions{align-items:stretch}.hero-actions>*{width:100%}
 .product-preview{height:auto;max-width:none;margin:0}.preview-sidebar{display:none}.preview-layout{grid-template-columns:1fr}
 .preview-footer{flex-wrap:wrap}.preview-caption{font-size:8px}.preview-proof{padding:12px}.preview-proof small{font-size:9px}
 .value-grid{gap:12px}.value-grid article{padding:22px}.value-grid h3{font-size:20px}
 .capability.large{padding-bottom:350px}.control{grid-template-columns:1fr}.control-copy{max-width:650px}
}
@media(max-width:720px){
 .shell,.header-inner{width:calc(100% - 36px)}.site-header{height:68px}.header-inner{gap:16px}
 .site-header nav{top:67px}.hero{grid-template-columns:1fr;gap:32px;padding-block:40px}
 .hero-copy{max-width:540px}.hero h1{font-size:clamp(30px,7.8vw,42px)}.hero-lead{font-size:15px}
 .hero-actions{flex-direction:row}.hero-actions>*{width:auto}.product-preview{max-width:540px;margin-inline:auto}
 .preview-person strong{font-size:12px}.preview-bubble,.preview-response p{font-size:13px}
 .preview-context{font-size:10px}.preview-footer{font-size:8px}.preview-proof{max-width:100%}
 .benefits{height:auto}.benefits>div{height:56px;padding-left:10px;font-size:12px}
 .business-value,.product,.capabilities,.process{padding-top:58px}.value-grid{grid-template-columns:1fr}
 .value-grid h3{font-size:23px;margin-top:18px}.value-grid p{font-size:14px}
 h2,.control-copy h2{font-size:31px}.section-heading>p{font-size:14px}
 .capability h3{font-size:27px}.capability{min-height:0;padding:24px}
 .stage-footer{align-items:flex-start}.stage-footer button{flex-shrink:0}
 .control{padding-block:58px}.control-demo{padding:18px}.control-demo>header{gap:12px}
 .control-demo>header strong{font-size:13px}.control-demo>header small{font-size:10px}
 .questions{padding-bottom:48px}.questions summary{font-size:14px}
 .closing h2{font-size:32px}.closing{padding-block:48px}
 .site-footer>div:last-child{font-size:12px}.tone-switch{gap:6px}.tone-switch button{padding:8px}
}