/* /agentic-os — WS.AgenticOS page. Own file next to apps.css (same tokens and classes: pr-item, duo-chips). */
.ao-top{display:grid;gap:40px;align-items:center;margin-top:24px}
@media (min-width:1000px){.ao-top{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.ao-lead,.ao-p{max-width:680px;font-size:18px;line-height:1.55;color:var(--mute-d);margin:20px 0}
.ao-p{font-size:17px;margin-block:0 36px}
/* .pad>* centres a 1120 column; text columns and the segmented control start at its left edge instead */
.pad>.ao-p{margin-inline:max(0px,calc((100% - var(--wrap))/2)) auto}
#content h2:is(.h-dark,.h-light){margin-bottom:48px}
#content h2:has(+.ao-p){margin-bottom:20px}
.sec-light .ao-p,.sec-lightalt .ao-p{color:var(--mute-l)}
.ao-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.ao-cta button{cursor:pointer;border:0;font:500 15px/1 var(--sans)}
.ao-cta .btn-g{color:var(--ink-d)}
.ao-cta :is(.btn-p,.btn-g):focus-visible{outline:2px solid var(--ink-d);outline-offset:3px}

.ao-fig{margin-block:0;display:grid;gap:12px}
.ao-fig figcaption{font-size:14px;line-height:1.5;color:var(--mute-d)}
.sec-light .ao-fig figcaption,.sec-lightalt .ao-fig figcaption{color:var(--mute-l)}
.ao-fig-hero{justify-items:center;text-align:center}



.ao-grid{display:grid;gap:16px}
@media (min-width:700px){.ao-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ao-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ao-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ao-card{padding:28px 26px}
.ao-card h3{font:600 19px/1.3 var(--sans);margin:0 0 10px}
.ao-card p{font-size:15.5px;line-height:1.55;margin:0}
.ao-card:hover{transform:none!important} /* not links: no lift */

/* how it is built: flow on the left, definitions on the right */
.ao-how{display:grid;gap:40px;align-items:start}
@media (min-width:960px){.ao-how{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px}}
.ao-flow{list-style:none;margin:0;padding:0;display:grid;gap:28px;position:relative}
.ao-flow li{position:relative;padding-inline-start:36px}
.ao-flow li::before{content:"";position:absolute;inset-inline-start:2px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--bg0);box-shadow:inset 0 0 0 1.5px var(--mute-d)}
.ao-flow li:nth-child(4)::before{background:var(--ink-d);box-shadow:none}
.ao-flow b{display:block;font:500 17px/1.35 var(--sans);color:var(--ink-d)}
.ao-flow span{display:block;margin-top:4px;font-size:15px;line-height:1.5;color:var(--mute-d)}
.ao-dl{margin:0;display:grid;gap:16px}
.ao-dl div{padding:24px 26px;border-radius:var(--r-card);background:var(--s1);box-shadow:inset 0 0 0 1px var(--ring-d)}
.ao-dl dt{font:600 17px/1.3 var(--sans);color:var(--ink-d)}
.ao-dl dd{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:var(--mute-d)}

/* panel mock-up: always dark, like a screenshot of the app */
.ao-ui{border-radius:var(--r-card);overflow:hidden;background:#0a0a0a;color:var(--ink-d);box-shadow:0 0 0 1px rgba(0,0,0,.12),0 24px 60px -30px rgba(0,0,0,.45);font-size:14px}
.ao-ui-bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;background:#141414;border-bottom:1px solid rgba(255,255,255,.07)}
.ao-ui-dot{width:10px;height:10px;border-radius:50%;background:#333336}
.ao-ui-t{margin-inline-start:12px;font:500 13px/1 var(--sans);color:var(--mute-d)}
.ao-ui-body{display:grid;grid-template-columns:150px minmax(0,1fr)}
.ao-ui-nav{display:flex;flex-direction:column;gap:2px;padding:16px 10px;border-inline-end:1px solid rgba(255,255,255,.07)}
.ao-ui-nav>*{padding:8px 10px;border-radius:6px;color:var(--mute-d);font-weight:400}
.ao-ui-nav b{background:#1d1d1f;color:var(--ink-d);font-weight:500}
.ao-ui-main{padding:20px;display:grid;gap:16px}
.ao-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ao-kpi div,.ao-ui-box{background:#141414;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);padding:14px 16px}
.ao-kpi span{display:block;font-size:12px;color:var(--mute-d)}
.ao-kpi b{display:block;margin-top:6px;font:500 26px/1 var(--mono);color:var(--ink-d)}
.ao-ui-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ao-ui-wide{grid-column:1/-1}
.ao-ui .ao-ui-h{margin:0 0 10px;font-size:12px;font-weight:500;color:var(--mute-d)}
.ao-rows,.ao-bars{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ao-rows li{display:flex;align-items:center;gap:12px;padding:7px 0;color:var(--ink-d)}
.ao-rows span{flex:1;min-width:0}
.ao-rows em{font:400 12.5px/1 var(--mono);font-style:normal;color:var(--mute-d)}
.ao-rows i{font:500 11.5px/1 var(--mono);font-style:normal;color:var(--mute-d);padding:5px 7px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ao-rows i.ok{color:var(--ink-d)}
.ao-ui .ao-ui-foot{margin:10px 0 0;font:400 12.5px/1.4 var(--mono);color:var(--mute-d)}
.ao-reco b{flex:none;width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1.5px #6e6e73}
.ao-reco b.on{background:#f5f5f7;box-shadow:none;position:relative}
.ao-reco b.on::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ao-ui .ao-ui-basket{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.ao-ui-btn{font:500 13px/1 var(--sans);color:#000;background:#f5f5f7;padding:9px 12px;border-radius:6px}
.ao-bars li{display:grid;grid-template-columns:96px minmax(0,1fr) 44px;align-items:center;gap:10px;padding:6px 0;color:var(--ink-d)}
.ao-bars i{height:8px;border-radius:4px;background:linear-gradient(90deg,#d2d2d7 var(--w),#262628 var(--w))}
.ao-bars em{font:400 12.5px/1 var(--mono);font-style:normal;color:var(--mute-d);text-align:end}
@media (max-width:820px){
  .ao-ui-body{grid-template-columns:1fr}.ao-ui-nav{display:none}
  .ao-kpi,.ao-ui-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ao-ui-main{padding:14px}
}
@media (max-width:480px){.ao-ui-cols{grid-template-columns:1fr}.ao-kpi b{font-size:22px}}
:root[data-theme="dark"] .sec-lightalt .ao-ui{box-shadow:inset 0 0 0 1px var(--ring-d)}
:root[data-theme="dark"] :is(.sec-light,.sec-lightalt) .ao-ui li{color:var(--ink-d)!important}
:root[data-theme="dark"] :is(.sec-light,.sec-lightalt) .ao-fig figcaption{color:var(--mute-d)!important}
:root[data-theme="dark"] :is(.sec-light,.sec-lightalt) .ao-ui p{color:var(--mute-d)!important}
.duo-chips{display:flex;flex-wrap:wrap;gap:8px}
.duo-chips span{font:500 13px/1 var(--mono);color:var(--ink-d);padding:8px 10px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--ring-d)}

/* closing section: text and the concept close-up side by side */
.ao-end{display:grid;gap:40px;align-items:center}
.ao-end .ao-p{margin-inline:0}
.ao-end-fig{margin:0;display:grid;gap:10px;width:100%;max-width:320px;justify-self:end} /* the torso is an accent, not the main visual */
.ao-end-fig img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;border-radius:var(--r-card)}
.ao-end-fig figcaption{font-size:14px;color:var(--mute-d)}
@media (max-width:899px){.ao-end-fig{justify-self:start;max-width:260px}.ao-end-fig img{aspect-ratio:1}}
/* hero lineup band, under the headline */
.ao-lineup{padding:24px var(--gut) 56px;background:#f6f6f6} /* = the light render's own background, so it has no visible edge */
.ao-line-fig{margin:0 auto;max-width:var(--wrap);display:grid;gap:10px;text-align:center}
.ao-line-fig figcaption{font-size:14px;color:var(--mute-l)}
:root[data-theme="dark"] .ao-line-fig figcaption{color:var(--mute-d)!important}
.ao-line-fig .ao-line-d{max-width:1000px}
@media (min-width:900px){.ao-end{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:64px}}
#ao-hero{padding-bottom:40px}
#ao-hero .ao-top{grid-template-columns:minmax(0,1fr)}