@import url("/assets/overhaul-20261008/editorial.css?v=20261008-3");
/* E:Voice runtime bridge pages: layout only. Every colour, type step and component comes
   from /assets/system/system.css; this file arranges them for the product template. */

/* Gate fix until the system's Day/Night switch reaches 44px (components.css sets 38px). */
.daynight a{min-height:44px}
/* Gate fix: at phone width the header's brand, clock, switch and menu overflow the bar
   (hidden by overflow-x:clip). The clock is decorative, so it yields first. */
@media (max-width:419px){.site-head .clock{display:none}}

/* Hero: copy beside the voice Signal. */
.bridge-hero .split{--split-min:340px;align-items:center}
.bridge-hero h1{font-size:clamp(2.3rem,5vw,4.3rem);max-width:15ch}
.bridge-hero .facts-wrap{margin-top:clamp(40px,6vw,72px)}
.bridge-hero .signal-stage{aspect-ratio:4/3;min-height:260px}
.bridge-hero .motto{font-size:var(--step-1);max-width:34ch}

/* How it works: numbered cards. */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.steps>li{counter-increment:step;display:grid;gap:10px;align-content:start;max-width:none;padding:20px 22px 22px;
  border-radius:var(--r-l);border:1px solid var(--line);background:var(--lift)}
.steps>li::before{content:counter(step,decimal-leading-zero);font:600 var(--step--1)/1 var(--mono);color:var(--muted)}
.steps h3{font-size:var(--step-1)}
.steps p{font-size:var(--step--1)}
.steps code{overflow-wrap:anywhere}

/* The example exchange: bubbles with the thought box between them. */
.exchange{display:grid;gap:var(--space-4);max-width:620px}
.thought{display:grid;gap:4px;max-width:min(440px,100%);margin-left:52px;padding:12px 16px;border-radius:var(--r-m);
  border:1px dashed var(--line);background:var(--surface);font:400 var(--step--2)/1.5 var(--mono);color:var(--muted)}
.thought b{font:600 var(--step--2)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.bubble .b{overflow-wrap:anywhere}

/* Install block additions. */
.install .term{min-width:0}
.install .links{display:grid;gap:4px;padding-left:1.2em}
.install>p.small{max-width:none}

/* Two-column "what crosses" lists. */
.crosses{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.crosses ul{margin:0;padding-left:1.2em;display:grid;gap:6px}

/* Other runtimes. */
.runtimes{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:0;margin:0;list-style:none}
.runtimes a.chip img{width:20px;height:20px;border-radius:5px;flex:none}
.runtimes img[src$="openai.svg"],.bubble .av.brand img[src$="openai.svg"]{background:#fff;padding:2px}
.runtimes a.chip[aria-current="page"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

/* Comparison and catalog tables. */
.table-wrap caption{caption-side:top}
.vs th[scope="row"],.catalog th[scope="row"]{font:700 var(--step--1)/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--ink)}
td.mono{white-space:nowrap}

.bridge-hero .signal-stage{display:none}.steps>li{border-radius:6px;background:#101214}.thought{border-radius:6px}.bridge-hero .split{align-items:start}

/* Keep inline update commands within their responsive grid track. */
.crosses>*{min-width:0}.crosses code{overflow-wrap:anywhere;word-break:normal}
body .skip:focus{color:#090a0b;background:#eeeeef}