/* WS.AgenticOS: shared canvas + pause button, and the banner used on the home page (#software) and /apps. */
.ao-ad{display:grid;gap:32px;align-items:center;margin-top:48px;padding:clamp(28px,5vw,64px);border-radius:var(--r-card);background:#0a0a0a;color:var(--ink-d);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);overflow:hidden}
@media (min-width:900px){.ao-ad{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
.ao-ad .ao-ad-h{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.2vw,60px);line-height:1.02;letter-spacing:-.02em;color:var(--ink-d)}
.ao-ad .ao-ad-l{margin:20px 0 0;max-width:560px;font-size:18px;line-height:1.55;color:var(--mute-d);opacity:1}
.ao-ad-chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.ao-ad-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 rgba(255,255,255,.14)}
.ao-ad-cta{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0}
.ao-ad .btn-g{color:var(--ink-d)}
.ao-ad :is(.btn-p,.btn-g):focus-visible{outline:2px solid var(--ink-d);outline-offset:3px}
.ao-ad-fig{margin:0;display:grid;gap:10px;justify-items:center;text-align:center}
.ao-ad-fig figcaption{font-size:13px;color:var(--mute-d)}
#apps-ao{padding-top:0;padding-bottom:0}
#apps-ao .ao-ad .ao-ad-h{font-size:clamp(34px,3.8vw,52px)}
#apps-ao .ao-ad{margin-top:0;background:var(--s1)}
@media (max-width:700px){
  .ao-ad{padding:24px;gap:24px}
  .ao-ad .ao-ad-l{font-size:16px}
  .ao-ad-chips span:nth-child(3){display:none} /* two chips fit one row */
}
/* the mono face has Latin glyphs only: other scripts use the text face in chips */
:is(:lang(he),:lang(hi),:lang(zh),:lang(ja),:lang(ko),:lang(el),:lang(ru),:lang(uk)) :is(.duo-chips,.ao-ad-chips) span{font-family:var(--sans);letter-spacing:0}
/* the android lineup (concept illustration): full strength, no mask; blend modes melt the render's own background into the section */
.ao-line{display:block;width:100%;height:auto;margin-inline:auto}
.ao-line-d{mix-blend-mode:lighten}
:root[data-theme="dark"] .ao-line-l,:root:not([data-theme="dark"]) .ao-line-fig .ao-line-d{display:none}
/* banner: the lineup across the top, text below */
.ao-ad:has(.ao-line){grid-template-columns:minmax(0,1fr)!important;gap:28px}
.ao-ad .ao-ad-fig:has(.ao-line){order:-1;max-width:none}
.ao-ad .ao-line{max-width:680px}
.ao-ad:has(.ao-line) .ao-ad-t{max-width:760px}