/* Theme values are handled with light-dark() in the shared component styles. */
:root{--dim:light-dark(#4f6489,#9aaac1)}
html[data-theme=light]{--bg:#f7f9fc;--surface:#fff;--surface-up:#dae5fa;--text:#152b52;--muted:#3a4f75;--green:#23694d;--amber:#76541b;--line:#23427b1f}
.nav-shell{gap:22px}#main-nav{gap:20px;font-size:17px}.nav-actions{gap:16px;font-size:17px}.button.small{font-size:17px}.appearance-toggle{flex:none;width:44px;min-height:44px;justify-content:center;border:1px solid var(--line-blue);border-radius:50%;transition:background .2s ease,transform .3s ease}.appearance-toggle:hover{background:var(--line-blue);transform:rotate(-18deg)}.theme-toggle-icon{font-size:22px;line-height:1}
select:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* Readable labels and comfortable spacing, including the live product illustration. */
.eyebrow{font-size:16px;letter-spacing:.1em}.micro-label{font-size:16px;letter-spacing:.07em}.hero-fineprint,.demo-caption,.demo-caption>span:last-child{font-size:16px}.studio-body{grid-template-columns:185px minmax(0,1fr) 275px}.studio-canvas{padding:23px 20px}.studio-canvas-heading{margin-bottom:18px}.studio-nav{padding:11px 8px}.studio-nav .icon{width:16px;height:16px}.mini-stat{padding:12px 10px}.mini-stat>span{align-items:flex-start;line-height:1.4}.mini-stat small{margin-top:6px;line-height:1.5}.sample-table-row{padding-block:11px}.studio-topbar{min-height:48px}.studio-saved{gap:7px}.studio-breadcrumb{gap:12px;flex-wrap:wrap}.status{font-size:16px}.studio-scene-tabs{flex-wrap:wrap}.tiny-avatar{width:25px;height:25px;flex:none}.avatar{width:30px;height:30px}.demo-caption{gap:12px;flex-wrap:wrap}.architecture-node small{line-height:1.5}.repo-file{gap:10px}.repo-file>span{white-space:normal}.button{font-size:18px}.announcement{font-size:16px}.nav-new{font-size:16px}.provider-choice{flex-wrap:wrap}.prompt-bubble{padding:14px}.demo-build{white-space:normal}.studio-workspace{margin-bottom:23px}
html[data-theme=light] .button.primary{background:#23427b;color:#fff}html[data-theme=light] .button.primary:hover{background:#4a71b4;color:#fff}html[data-theme=light] #main-nav>a:hover,html[data-theme=light] #main-nav>a[aria-current],html[data-theme=light] .nav-actions>a:hover{color:var(--text)}
@media(max-width:1200px){.nav-shell{gap:16px}#main-nav{gap:16px}.studio-body{grid-template-columns:170px minmax(0,1fr) 250px}.studio-canvas{padding:20px 15px}.studio-ai{padding:18px 12px}}
@media(max-width:1100px){.nav-actions>a{display:none}.studio-body{grid-template-columns:160px minmax(0,1fr)}.studio-ai{display:none}.mini-stat>span{flex-wrap:wrap}}
@media(max-width:900px){.studio-body{grid-template-columns:140px minmax(0,1fr)}.appearance-toggle{margin-left:auto}.menu-toggle{order:5;margin-left:0}.nav-actions{display:none}#main-nav{font-size:18px}.architecture-node{font-size:17px}.architecture-node small{font-size:16px}.architecture-node{gap:8px}}
@media(max-width:700px){.studio-body{grid-template-columns:minmax(0,1fr)}.studio-sidebar{display:none}.studio-topbar{gap:10px}.studio-topbar>span:nth-child(2){flex-wrap:wrap;gap:5px}.studio-saved{display:none}.mini-stats{gap:8px}.mini-stat strong{font-size:27px}.sample-table-row{grid-template-columns:1.2fr 1fr .9fr;gap:8px}.sample-table-title{flex-wrap:wrap;gap:7px}.studio-canvas-heading h2{font-size:24px}.architecture-node{font-size:16px}.architecture-node small{font-size:16px}.demo-caption>span:last-child{display:none}.product-underbar{gap:12px}.eyebrow{font-size:16px;letter-spacing:.07em}.hero .button-row{gap:10px}.hero .button{padding:13px 15px}.architecture-core{min-width:0}}
@media print{.appearance-toggle{display:none!important}}
/* Switch to the compact navigation before laptop/tablet links become crowded. */
@media(min-width:701px) and (max-width:900px){
 .menu-toggle{display:flex}.menu-toggle .icon{width:22px;height:22px}
 #main-nav{display:none;position:absolute;top:68px;left:0;right:0;margin:0;padding:22px 25px;background:var(--surface);border-block:1px solid var(--line);box-shadow:0 20px 30px #0002;gap:0}
 #main-nav.open{display:flex;flex-direction:column;align-items:stretch}#main-nav>a{padding:13px 6px;border-bottom:1px solid var(--line)}
 .mobile-nav-actions{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:17px}
}
@media(max-width:900px){.studio-body{grid-template-columns:minmax(0,1fr)}}
/* Fit illustrative mockups and wide content on phones. */
@media(max-width:700px){
 .announcement{flex-wrap:wrap;row-gap:2px}.announcement a{white-space:normal}
 .studio,.object-visual,.mini-flow,.guard-demo,.solution-visual{zoom:.9}
 .api-code{overflow-x:auto;zoom:.92}
 .object-mini>span{flex-wrap:wrap}
 .case-study-body{min-width:0}.case-study-body>*{min-width:0;overflow-wrap:anywhere}.case-flow{flex-wrap:wrap}
 .cost-calculator{grid-template-columns:minmax(0,1fr)}.cost-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.cost-fields label{min-width:0;overflow-wrap:anywhere}
}
@media(max-width:360px){.cost-fields{grid-template-columns:minmax(0,1fr)}.studio,.object-visual,.mini-flow,.guard-demo,.solution-visual{zoom:.82}}
/* Apple-style type system: SF Pro on Apple devices, bundled Inter elsewhere.
   Scale: 17px body, 21px intros, ~28-32px card titles, 48-56px section headlines, 80-88px hero. */
body{font:17px/1.47059 var(--sans);letter-spacing:-.022em}
h1,h2{font-family:var(--sans);font-weight:600;line-height:1.07;letter-spacing:-.022em}
.hero h1{font-size:clamp(44px,6.6vw,88px);line-height:1.05;letter-spacing:-.03em}
h2{font-size:clamp(34px,4.2vw,56px)}
h3{letter-spacing:-.016em}
.ai-story>h3,.solution-copy h3,.people-story-copy h3,.case-study h3,.mobile-story h3,.phone-content>h3,.tour-site-hero h3{font-family:var(--sans);font-weight:600;font-size:clamp(24px,2.3vw,32px);line-height:1.15;letter-spacing:-.02em}
.site-mini b,.portal-mini>h4,.step-number,.shop-editorial strong{font-weight:600;letter-spacing:-.02em}
.hero-description,.section-heading p{font-size:21px;line-height:1.381;letter-spacing:.011em}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.06em}
.button{font-size:17px;font-weight:500;letter-spacing:-.01em}
@media(max-width:700px){.hero-description,.section-heading p{font-size:19px;line-height:1.42}}
/* Dark theme: polished and restrained. Neutral charcoal surfaces, one soft indigo→violet→rose gradient
   reserved for headline highlights, and quiet tints everywhere else. */
html[data-theme=dark]{--bg:#0b0b10;--surface:#121219;--surface-up:#17171f;--text:#ececf1;--muted:#a1a1b5;--dim:#8d8da3;--line:#ffffff12;--blue:#b4b8f0;--blue-bright:#9fa5ec;--line-blue:#b4b8f024;--grad:linear-gradient(90deg,#a5b4fc,#c4b5fd 50%,#f0abfc)}
/* Headline highlights: the one place the gradient appears */
html[data-theme=dark] :is(h1,h2) em,html[data-theme=dark] .hero-ai-statement strong{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html[data-theme=dark] .hero-type-cursor{background:#c4b5fd}
html[data-theme=dark] .eyebrow{color:#a5b4fc}
/* Buttons and bars */
html[data-theme=dark] .button.primary{background:#f4f4f8;color:#0b0b10;box-shadow:0 0 0 1px #ffffff1a,0 8px 24px -12px #c4b5fd80}
html[data-theme=dark] .button.primary:hover{background:#fff}
html[data-theme=dark] .announcement{background:linear-gradient(90deg,#16152a,#1d1934 50%,#16152a);color:#d8d8e6;border-bottom:1px solid #ffffff10}
html[data-theme=dark] .announcement a{color:#c4b5fd}
html[data-theme=dark] .header{background:#0b0b10d9}
html[data-theme=dark] .nav-new{color:#c4b5fd;border-color:#c4b5fd40}
/* Surfaces: neutral with a faint glow */
html[data-theme=dark] .hero-ai-spotlight,html[data-theme=dark] .closing-card{border-color:#ffffff14;background:radial-gradient(80% 100% at 0% 0%,#818cf814,transparent 60%),radial-gradient(70% 90% at 100% 100%,#f0abfc0d,transparent 60%),#111118}
html[data-theme=dark] .architecture-core{background:linear-gradient(160deg,#1c1b2e,#131320 70%);border-color:#a5b4fc33}
html[data-theme=dark] .feature-icon,html[data-theme=dark] .feature-icon.blue,html[data-theme=dark] .feature-icon.violet{color:#b4b8f0;background:#a5b4fc0f;border-color:#a5b4fc26}
/* AI scenario panel */
html[data-theme=dark] .guard-demo{background:#111118;border-color:#ffffff14}
html[data-theme=dark] .demo-window-title{background:#17171f;color:#ececf1;border-bottom:1px solid #ffffff10}
html[data-theme=dark] .demo-window-title .icon{color:#a5b4fc}
html[data-theme=dark] .demo-window-title .demo-badge{background:#a5b4fc1f;color:#c7cdfb}
html[data-theme=dark] .scenario-tabs{background:#ffffff08}
html[data-theme=dark] .scenario-tabs button[aria-pressed=true]{background:#2a2a3a;color:#fff;box-shadow:0 0 0 1px #ffffff14}
html[data-theme=dark] .scenario-prompt p{background:#1b1b26;color:#e4e4ee}
html[data-theme=dark] .design-card{background:linear-gradient(135deg,#16161f,#1b1a29);border-color:#ffffff14}
html[data-theme=dark] :is(.design-card-icon,.total){background:linear-gradient(135deg,#4f4f8f,#6b5b9e)}
html[data-theme=dark] .design-card.tone-amber .design-card-icon{background:linear-gradient(135deg,#8a6a2a,#a8843f)}
html[data-theme=dark] .design-card.tone-red .design-card-icon{background:linear-gradient(135deg,#8a3a45,#a54b57)}
/* Use-case illustrations: neutral stage, each accent kept soft */
html[data-theme=dark] .case-art{--accent-soft:color-mix(in srgb,var(--accent) 14%,transparent);background:radial-gradient(60% 70% at 78% 18%,var(--accent-soft),transparent 70%),linear-gradient(160deg,#101017,#16161f)}
html[data-theme=dark] .app{background:#13131a}
html[data-theme=dark] .app-side{background:#1c1c28}
html[data-theme=dark] :is(.case-art .row,.stat,.ring-card,.cal,.detail){background:#1b1b25}
html[data-theme=dark] .map{background:linear-gradient(#ffffff08 1px,transparent 1px) 0 0/2em 2em,linear-gradient(90deg,#ffffff08 1px,transparent 1px) 0 0/2em 2em,#17171f}
/* Background art: one quiet lavender ink, faint indigo and rose glows */
html[data-theme=dark] .bg-art{--ink:#b4b8f0;--o-line:.13;--o-dots:.1}
html[data-theme=dark] .bg-glow-a{background:#6366f11c}
html[data-theme=dark] .bg-glow-b{background:#a855f714}
html[data-theme=dark] .bg-glow-c{background:#ec48990d}