/* Shared component contract. Loaded after inherited page styles, before the
   isolated header. Keep diagram-specific geometry in the page stylesheets. */
:root{
 --bg-2:#0A1713;--fg-2:#B8BFDB;--fg-3:#7A82A6;
 --edge-2:rgba(255,255,255,.055);--glass-2:rgba(255,255,255,.025);--glass-hi:rgba(255,255,255,.14);--peri-d:#4B4BE8;
 --bg2:var(--bg-2)!important;--fg2:var(--fg-2)!important;--fg3:var(--fg-3)!important;
 --edge2:var(--edge-2)!important;--glass2:var(--glass-2)!important;--glasshi:var(--glass-hi)!important;--peri2:var(--peri-d)!important;
 --max:1200px!important;--gut:20px!important;
 --radius-card:20px;--radius-control:13px;--control-height:50px;
 --ff-d:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
 --ff:'Manrope',ui-sans-serif,system-ui,sans-serif;
 --ff-m:'JetBrains Mono',ui-monospace,monospace;
 --e:cubic-bezier(.22,.68,.24,1);--e-out:cubic-bezier(.16,1,.3,1);
}
@media(min-width:600px){:root{--gut:28px!important}}
body[data-page]{font-family:var(--ff)!important;font-size:16.5px!important;line-height:1.62!important;font-weight:450!important}
body[data-page] :is(.d1,.d2,.d3){font-family:var(--ff-d)!important;text-wrap:balance}
body[data-page] .d1{font-size:clamp(2.9rem,7.4vw,5.6rem)!important;line-height:.96!important;letter-spacing:-.045em!important;font-weight:750!important}
body[data-page] .d2{font-size:clamp(2.1rem,4.4vw,3.5rem)!important;line-height:1!important;letter-spacing:-.04em!important;font-weight:700!important}
body[data-page] .d3{font-size:clamp(1.35rem,2.2vw,1.85rem)!important;line-height:1.1!important;letter-spacing:-.03em!important}
@media(min-width:1400px) and (max-height:820px){body[data-page] .d1{font-size:clamp(3.7rem,5.2vw,5.15rem)!important}}
@media(max-width:380px){body[data-page] .d1{font-size:clamp(2.65rem,14.8vw,3.35rem)!important}body[data-page] .d2{font-size:clamp(2.2rem,12vw,2.9rem)!important}}
body[data-page] .lede{font-family:var(--ff)!important;font-size:clamp(1.04rem,1.6vw,1.22rem)!important;line-height:1.6!important;font-weight:450!important;color:var(--fg-2)!important}
body[data-page] .kicker{font-family:var(--ff-m)!important;font-size:.7rem!important;letter-spacing:.13em!important;font-weight:500!important;color:var(--fg-3)!important}
/* Main content surfaces share the home glass treatment. */
body[data-page] :is(.glass,.cap-card,.usecase-tile,.wizard-choice,.value-card){border:1px solid var(--edge)!important;border-radius:var(--radius-card)!important;background:var(--glass)!important;box-shadow:var(--shadow)!important}
body[data-page] :is(.cap-card,.usecase-tile,.wizard-choice){transition:transform .24s var(--e),border-color .24s var(--e),box-shadow .3s var(--e),background .3s var(--e)!important}
body[data-page] :is(.cap-card,.usecase-tile,.wizard-choice) h3{font-family:var(--ff-d)!important;font-size:clamp(1.35rem,2.2vw,1.85rem)!important;line-height:1.1!important;letter-spacing:-.03em!important}
body[data-page] :is(.cap-card,.usecase-tile,.wizard-choice) p{font-size:.94rem!important;line-height:1.6!important;color:var(--fg-2)!important}
body[data-page] :is(.cap-card.active,.wizard-choice.is-selected,.wizard-choice[aria-pressed=true]){border-color:var(--peri)!important;background:color-mix(in srgb,var(--peri) 7%,var(--bg-2))!important}
body[data-page] .btn{min-height:var(--control-height)!important;padding:13px 24px!important;border-radius:var(--radius-control)!important;border-width:1px!important;border-style:solid!important;font-family:var(--ff)!important;font-weight:650!important;font-size:.94rem!important;line-height:1.4!important;letter-spacing:-.005em!important;gap:9px!important;white-space:normal!important;transition:transform .24s var(--e),box-shadow .3s var(--e),background .3s var(--e),border-color .3s var(--e)!important}
body[data-page] :is(.btn--pri,.btn.pri){background:linear-gradient(120deg,var(--peri),var(--peri-d))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 14px 34px -14px var(--peri)!important}
body[data-page] :is(.btn--ghost,.btn.ghost){background:var(--glass-2)!important;border-color:var(--edge)!important;color:var(--fg)!important}
body[data-page] :is(.group-tab,.exp-tab){border:1px solid var(--edge)!important;border-radius:var(--radius-control)!important;background:var(--glass-2)!important;color:var(--fg-2)!important;box-shadow:none!important}
body[data-page] :is(.group-tab,.exp-tab)[aria-selected=true]{border-color:var(--peri)!important;background:color-mix(in srgb,var(--peri) 8%,var(--bg-2))!important;color:var(--fg)!important}
body[data-page] :is(.group-tab,.exp-tab)::after{display:none!important}
body[data-page] :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea){font-family:var(--ff)!important;color:var(--fg)!important;background-color:var(--bg-2)!important;border:1px solid var(--edge)!important;border-radius:var(--radius-control)!important}
body[data-page] :is(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--peri)!important;outline-offset:4px!important}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 html:not(.motion-paused) body[data-page] :is(.cap-card,.usecase-tile,.wizard-choice):hover{transform:translateY(-2px)!important;border-color:var(--peri)!important}
 html:not(.motion-paused) body[data-page] .btn:hover{transform:translateY(-2px)!important}
}
body[data-page] :is(.btn,.cap-card,.usecase-tile,.wizard-choice):active{transform:translateY(0)!important}
html.motion-paused body[data-page] :is(.btn,.cap-card,.usecase-tile,.wizard-choice){transform:none!important}
@media(prefers-reduced-motion:reduce){body[data-page] :is(.btn,.cap-card,.usecase-tile,.wizard-choice){transform:none!important;transition:none!important}}
/* Page gutters must not inherit the explorer's old viewport-width patches. */
body[data-page] main .wrap{box-sizing:border-box;width:100%!important;max-width:var(--max)!important;margin-inline:auto!important;padding-inline:var(--gut)!important}
@media(max-width:380px){:root{--gut:15px!important}}
/* Explorer detail panels use the same warm paper as the page behind them. */
html[data-theme="light"] body[data-page] :is(.detail-head,.detail-experience,.detail-intelligence-band,.detail-together,.related-usecases,.feature-loop-panel,.feature-guide-drawer){background:var(--glass)!important;border-color:var(--edge)!important}
body[data-page] :is(.detail-head,.detail-experience,.feature-modal-frame){border-radius:var(--radius-card)!important}
