/* VMediaBoard by PixelStorm — site styles
   One family (Nimbus Sans, the deck typeface), a dark control-room ground with the deck's teal,
   and the broadcast tally colours (program red, preview green) used only where they carry meaning.
   Every page is a sequence of full-width screens. A picture is shown at 100 % of the width and never enlarged beyond it:
   on wide screens it fills the screen and the words sit over its lower edge; as the screen narrows the picture gets shorter
   and the words slide down; portrait screens and phones show the whole picture on top, its lower edge melting into the
   page, with the words starting over that fade. No parallax (removed at the owner's request). */

@font-face{font-family:"Nimbus Sans";src:url("assets/fonts/NimbusSans-Regular.woff2") format("woff2"),url("assets/fonts/NimbusSans-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nimbus Sans";src:url("assets/fonts/NimbusSans-Bold.woff2") format("woff2"),url("assets/fonts/NimbusSans-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#0A0D14;--ink-2:#111622;--ink-3:#181F2C;--ink-4:#212A3A;
  --line:#273040;--line-soft:rgba(247,248,251,.14);
  --text:#F7F8FB;--text-2:#ADB6C3;--text-3:#7F8A99;
  --paper:#F3F5F8;--paper-2:#E6EAF0;--paper-text:#0B0D14;--paper-muted:#4A5563;--paper-line:#D3D9E2;
  --signal:#49D6B0;--signal-deep:#0B7F68;--glow:#00F1E1;
  --onair:#FF3D4A;--next:#3CE672;
  --radius-s:4px;--radius-m:10px;
  --gutter:clamp(20px,4.5vw,72px);--head-h:72px;--screen:calc(100svh - var(--head-h));
  --ease:cubic-bezier(.2,.7,.2,1);
  font-family:"Nimbus Sans",Helvetica,Arial,sans-serif;font-size:17px;line-height:1.6;
  color:var(--text);background:var(--ink);color-scheme:dark;
  -webkit-text-size-adjust:100%;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px)}
body{margin:0;min-height:100svh;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
strong{font-weight:700;color:var(--text)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--glow);outline-offset:4px;border-radius:2px}
::selection{background:var(--signal);color:var(--ink)}
[hidden]{display:none!important}

/* ---------- type ---------- */
.display{font-weight:700;letter-spacing:-.035em;line-height:.96;font-size:clamp(2.6rem,6.4vw,6.4rem);text-wrap:balance}
h1{font-weight:700;letter-spacing:-.035em;line-height:.98;font-size:clamp(2.5rem,5.6vw,5.4rem);text-wrap:balance;max-width:28ch}
h2{font-weight:700;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2rem,3.6vw,3.5rem);text-wrap:balance;max-width:34ch}
h3{font-weight:700;letter-spacing:-.015em;line-height:1.2;font-size:clamp(1.3rem,1.8vw,1.7rem);text-wrap:balance}
.lede{font-size:clamp(1.125rem,1.35vw,1.375rem);line-height:1.5;color:var(--text-2);max-width:40ch}
p{color:var(--text-2);max-width:62ch}
p+p{margin-top:1em}
.small{font-size:.875rem;line-height:1.55}
.marker{display:inline-flex;align-items:center;gap:10px;font-size:.875rem;font-weight:700;color:var(--signal);letter-spacing:.01em}
.marker::before{content:"";width:22px;height:2px;background:currentColor;flex:none}
.text-link{color:var(--signal);font-weight:700;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 2px;padding-bottom:3px;transition:background-size .35s var(--ease),color .2s}
.text-link:hover,.text-link:focus-visible{background-size:100% 2px;color:var(--text)}
.link-row{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}

/* ---------- layout ---------- */
.wrap{width:100%;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:1100px}
.section{padding-block:clamp(56px,7vw,112px)}
.section--tight{padding-block:clamp(40px,5vw,72px)}
.section--line{border-top:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px var(--gutter);align-items:end;margin-bottom:clamp(28px,4vw,56px)}
.section-head .lede{max-width:46ch}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.split--reverse{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split--reverse>.split__text{order:2}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.col h3{margin-bottom:.6rem}
.col p{font-size:1rem}
.col h3 b{display:block;font-size:.8125rem;color:var(--signal);margin-bottom:.35rem}
.paper{background:var(--paper);color:var(--paper-text);color-scheme:light}
.paper p,.paper .lede{color:var(--paper-muted)}
.paper strong,.paper h1,.paper h2,.paper h3{color:var(--paper-text)}
.paper .marker,.paper .col h3 b{color:var(--signal-deep)}
.paper .text-link{color:var(--signal-deep)}
.paper .text-link:hover{color:var(--paper-text)}
.paper ::selection{background:var(--signal-deep);color:#fff}
.frame{border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;background:var(--ink-2)}
.paper .frame{border-color:var(--paper-line);background:#fff}
.caption{font-size:.875rem;line-height:1.5;color:var(--text-3);margin-top:12px;max-width:none}
.paper .caption{color:var(--paper-muted)}
.skip{position:fixed;left:16px;top:-80px;z-index:200;padding:12px 18px;background:var(--signal);color:var(--ink);font-weight:700;border-radius:var(--radius-s)}
.skip:focus{top:12px}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:50;height:var(--head-h);display:flex;align-items:center;background:rgba(10,13,20,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.head.is-scrolled{border-bottom-color:var(--line);background:rgba(10,13,20,.9)}
.head__in{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand img{height:24px;width:auto}
.nav{display:flex;align-items:center;gap:6px}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;color:var(--text-2);font-size:.9375rem;border-radius:var(--radius-s);transition:color .2s}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover,.nav a[aria-current=page]{color:var(--text)}
.nav a[aria-current=page]::after,.nav a:hover::after{transform:scaleX(1)}
.nav .nav__cta{margin-left:14px;padding:0 18px;border:1px solid var(--line-soft);color:var(--text);background:rgba(255,255,255,.04)}
.nav .nav__cta::after{display:none}
.nav .nav__cta:hover,.nav .nav__cta[aria-current=page]{border-color:var(--signal);color:var(--signal)}
.menu{display:none;min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--line-soft);border-radius:var(--radius-s);color:var(--text);font-size:.9375rem}


/* ---------- nav: use-cases submenu ---------- */
.nav__group{position:relative;display:flex;align-items:center}
.nav__more{width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-2);border-radius:var(--radius-s);margin-left:-14px}
.nav__more::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .25s}
.nav__group:hover .nav__more,.nav__group:focus-within .nav__more,.nav__group.is-open .nav__more{color:var(--text)}
.nav__group.is-open .nav__more::before,.nav__group:hover .nav__more::before{transform:rotate(225deg) translate(-2px,-2px)}
.nav__sub{position:absolute;left:0;top:calc(100% - 4px);min-width:250px;padding:8px;background:var(--ink-2);border:1px solid var(--line);border-radius:8px;box-shadow:0 24px 48px rgba(3,5,9,.5);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s;z-index:60}
.nav__sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav__group:hover .nav__sub,.nav__group:focus-within .nav__sub,.nav__group.is-open .nav__sub{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s var(--ease),visibility 0s}
.nav__sub li a{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border-radius:var(--radius-s);color:var(--text-2);font-size:.9375rem;white-space:nowrap}
.nav__sub li a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line-soft);transition:background .2s}
.nav__sub li a::after{display:none}
.nav__sub li a:hover,.nav__sub li a[aria-current=page]{color:var(--text);background:rgba(255,255,255,.05)}
.nav__sub li a:hover::before,.nav__sub li a[aria-current=page]::before{background:var(--glow)}
.nav__sub li.nav__all a{color:var(--signal);border-top:1px solid var(--line);border-radius:0;margin-top:4px;padding-top:4px}
.nav__sub li.nav__all a::before{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 24px;border-radius:var(--radius-s);border:1px solid transparent;font-weight:700;font-size:1rem;line-height:1.2;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--signal);color:var(--ink)}
.btn--primary:hover{background:#7FE8CC}
.btn--ghost{border-color:var(--line-soft);color:var(--text);background:rgba(10,13,20,.35);backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:var(--text);background:rgba(255,255,255,.08)}
.btn--ink{background:var(--ink);color:var(--text)}
.btn--ink:hover{background:var(--ink-3)}
.btn:disabled{opacity:.6;cursor:wait}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:clamp(20px,2.5vw,32px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a,.chips button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border:1px solid var(--line-soft);border-radius:999px;color:var(--text);font-size:.9375rem;background:rgba(10,13,20,.4);backdrop-filter:blur(6px);transition:border-color .25s,background .25s}
.chips a::before,.chips button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-soft);transition:background .3s,box-shadow .3s}
.chips a:hover,.chips a.is-active,.chips button:hover,.chips button.is-active{border-color:var(--glow);background:rgba(0,241,225,.1)}
.chips a:hover::before,.chips a.is-active::before,.chips button:hover::before,.chips button.is-active::before{background:var(--glow);box-shadow:0 0 10px var(--glow)}
.chips--paper a{color:var(--paper-text);border-color:var(--paper-line);background:#fff}
.chips--paper a:hover{border-color:var(--signal-deep);background:rgba(11,127,104,.08)}

/* ---------- hero: the picture at 100 % of the width, never enlarged beyond it ----------
   Wide screens: the picture fills the screen (capped to its height) and the words sit over its lower edge, behind a veil.
   As the screen narrows the 16:9 picture gets shorter, so the words slide down and cover less of it.
   Portrait screens, phones and figure heroes (information pictures) show the whole picture on top; its lower edge fades
   into the page and the words start over that fade. */
.hero{--hero-bg:var(--ink);position:relative;isolation:isolate;min-height:var(--screen);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--hero-bg)}
.hero.paper{--hero-bg:var(--paper)}
.hero.hero--white{--hero-bg:#fefefe}
.hero__media{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;max-height:100%;z-index:-2;overflow:hidden}
/* the picture's lower edge melts into the page through a composited gradient (cheaper on phones than a mask) */
.hero__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,transparent,var(--hero-bg));pointer-events:none}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero--short{min-height:min(64svh,680px)}
.hero__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(10,13,20,.72) 0%,rgba(10,13,20,.35) 42%,rgba(10,13,20,0) 70%),linear-gradient(180deg,rgba(10,13,20,.15) 0%,rgba(10,13,20,0) 30%,rgba(10,13,20,.5) 62%,rgba(10,13,20,.92) 100%)}
.hero__body{position:relative;width:100%;padding-block:clamp(40px,6vw,88px) clamp(28px,4vw,56px)}
.hero__body .lede{margin-top:clamp(18px,2vw,28px);max-width:44ch;color:#D6DEE8}
.hero__body h1,.hero__body h2,.hero__body .lede,.hero__body .marker{text-shadow:0 2px 24px rgba(4,6,10,.55)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px var(--gutter);align-items:end}
.hero__note{font-size:.8125rem;color:var(--text-3);max-width:30ch;text-align:right;line-height:1.45}
.hero__body .stages,.hero__body .flow{margin-top:clamp(20px,3vw,40px)}
.hero__body .flow+.hero__grid{margin-top:0}
/* stacked arrangement: the whole picture, its lower edge melting into the page, the words starting over the fade.
   The grid needs its own column and justify-content, otherwise the flex value above shrinks the column to the text. */
.hero--figure{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);justify-content:normal}
.hero--figure .hero__media{position:relative;max-height:none;z-index:auto}
.hero--figure .hero__media::after{height:16%}
.hero--figure .hero__veil{display:none}
.hero--figure .hero__body{align-self:start;z-index:1;padding-block:clamp(8px,1.5vw,20px) clamp(28px,4vw,56px)}
.hero--figure .hero__body h1,.hero--figure .hero__body h2,.hero--figure .hero__body .lede,.hero--figure .hero__body .marker{text-shadow:none}
.hero--figure .hero__body .lede{color:var(--text-2)}
.paper .hero__body .lede{color:var(--paper-muted)}

/* ---------- claims strip ---------- */
.claims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);padding-block:clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.claim{padding-left:22px;border-left:2px solid var(--signal)}
.claim h2{font-size:clamp(1.35rem,1.8vw,1.75rem);letter-spacing:-.02em;line-height:1.15;margin-bottom:.6rem;max-width:none}
.claim p{font-size:1rem;max-width:36ch}

/* ---------- panels: full-height picture panels; the one under the pointer opens to its whole picture, the others fold to a strip ----------
   Each picture keeps one fixed size (the panel height, at its own ratio) and only the panel width moves, so the browser slides
   a window over a static picture instead of redrawing several large pictures on every frame. --focus is the point of the
   picture kept in view at rest (like object-position), chosen per picture so the presenter and the subject stay visible. */
.panels{display:flex;gap:2px;min-height:var(--screen);background:var(--ink)}
.panel{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;color:var(--text);background:var(--ink-2);transition:flex-grow .8s var(--ease),flex-basis .8s var(--ease)}
.panel img{position:absolute;top:0;left:var(--focus,50%);height:100%;width:auto;max-width:none;transform:translateX(calc(-1*var(--focus,50%)));z-index:-2}
.panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,13,20,0) 40%,rgba(10,13,20,.9) 100%)}
.panel__body{padding:clamp(20px,2.4vw,36px) 18px;width:clamp(170px,15vw,260px);max-width:100%;box-sizing:content-box;transition:opacity .3s}
.panels--3 .panel__body{width:clamp(220px,22vw,360px)}
.panel__body h2,.panel__body h3{font-size:clamp(1.25rem,1.6vw,1.75rem);letter-spacing:-.02em}
.panels--3 .panel__body h2,.panels--3 .panel__body h3{font-size:clamp(1.35rem,2vw,2rem)}
.panel__body p{color:#D6DEE8;margin-top:.5rem;max-width:none;font-size:.9375rem}
.panel .marker{margin-bottom:12px}
.panel__more{display:inline-block;margin-top:12px;color:var(--signal);font-weight:700}
.panel--link .panel__body p:not(.marker),.panel--link .panel__more{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease)}
.panel--link:hover .panel__body p,.panel--link:focus-visible .panel__body p,.panel--link:hover .panel__more,.panel--link:focus-visible .panel__more{opacity:1;transform:none}
.panel:focus-visible{outline-offset:-4px}
@media(hover:hover) and (min-width:1181px){
  .panels:has(.panel:hover) .panel:not(:hover),.panels:has(.panel:focus-within) .panel:not(:focus-within){flex:0 0 clamp(28px,2.6vw,48px)}
  .panels:has(.panel:hover) .panel:not(:hover) .panel__body,.panels:has(.panel:focus-within) .panel:not(:focus-within) .panel__body{opacity:0}
}
@media(hover:none){.panel--link .panel__body p:not(.marker),.panel--link .panel__more{opacity:1;transform:none}}
.rendering__text{padding-block:clamp(28px,4vw,56px)}
.rendering__text .stages{margin-top:clamp(20px,3vw,40px)}

/* ---------- stage: full-width scenario slides ---------- */
.stage-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line)}
.stage-tabs button{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;color:var(--text-2);font-size:.9375rem;border-radius:var(--radius-s) var(--radius-s) 0 0;transition:color .2s}
.stage-tabs button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s,box-shadow .3s}
.stage-tabs button:hover{color:var(--text)}
.stage-tabs button[aria-selected=true]{color:var(--text)}
.stage-tabs button[aria-selected=true]::before{background:var(--onair);box-shadow:0 0 10px var(--onair)}
.stage-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--text);transform:scaleX(0);transition:transform .35s var(--ease)}
.stage-tabs button[aria-selected=true]::after{transform:scaleX(1)}
.stage{position:relative;height:calc(var(--screen) - 53px);width:100%;background:var(--ink-2);overflow:hidden;isolation:isolate}
.stage__slide{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.stage__slide.is-active{opacity:1;pointer-events:auto}
.stage__slide img{width:100%;height:100%;object-fit:cover;object-position:center}
.stage__slide--light{background:#fff;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(14px,2vw,24px);justify-items:center;padding:clamp(20px,3vw,36px) var(--gutter) clamp(18px,2.6vw,32px)}
.stage__slide--light img{position:static;width:auto;height:auto;max-width:min(100%,960px);max-height:calc(var(--screen) - 53px - 230px);object-fit:contain;align-self:center;filter:drop-shadow(0 24px 32px rgba(10,13,20,.22))}
.stage__slide--light .stage__caption{position:static;width:100%;max-width:none;padding:0;background:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px var(--gutter);align-items:end}
.stage__slide--light .stage__caption h3{max-width:24ch;font-size:clamp(1.5rem,2.4vw,2.2rem)}
.stage__slide--light .stage__caption p{max-width:60ch;font-size:1.0625rem}
.stage__slide.is-active img{animation:stageIn 1.4s var(--ease) both}
@keyframes stageIn{from{transform:scale(1.03)}to{transform:scale(1)}}
.stage__caption{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3vw,40px) var(--gutter);background:linear-gradient(180deg,rgba(10,13,20,0),rgba(10,13,20,.88) 55%);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px var(--gutter);align-items:end}
.stage__caption h3{font-size:clamp(1.4rem,2.4vw,2.2rem);letter-spacing:-.025em;max-width:22ch}
.stage__caption p{color:#D6DEE8;margin-top:.4rem;max-width:56ch}
.stage__slide--light .stage__caption h3{color:var(--paper-text)}
.stage__slide--light .stage__caption p{color:var(--paper-muted)}
.stage__slide--light .stage__caption .text-link{color:var(--signal-deep)}
.stage__slide--light .stage__caption .text-link:hover{color:var(--paper-text)}

/* ---------- console zones (used in the platform hero) ---------- */
.console__zone{position:absolute;border-radius:6px;cursor:pointer;transition:box-shadow .35s var(--ease),background .35s}
.console__zone::after{content:attr(data-label);position:absolute;left:8px;top:8px;padding:5px 9px;border-radius:3px;background:var(--glow);color:var(--ink);font-size:.75rem;font-weight:700;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s var(--ease)}
.has-active .console__zone{background:rgba(10,13,20,.62)}
.has-active .console__zone.is-active{background:transparent;box-shadow:inset 0 0 0 2px var(--glow),0 0 0 1px rgba(0,241,225,.35),0 0 36px rgba(0,241,225,.25)}
.has-active .console__zone.is-active::after{opacity:1;transform:translateY(0)}

/* ---------- full-screen function chapters with annotated screens ---------- */
.function{min-height:var(--screen);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.function__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px var(--gutter);align-items:end;margin-bottom:clamp(20px,3vw,36px)}
.function__head h2{font-size:clamp(1.8rem,3vw,2.9rem)}
.function__head .lede{font-size:clamp(1rem,1.15vw,1.15rem);max-width:44ch}
.annot{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,4vw,64px);align-items:center}
.annot--reverse{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.annot--reverse .annot__legend{order:-1}
.annot__screen{position:relative;width:fit-content;max-width:100%;border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--line);background:var(--ink-2)}
.annot__screen img{width:auto;height:auto;max-width:100%;max-height:calc(var(--screen) - 270px)}
.pin{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--glow);color:var(--ink);font-size:.8125rem;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(10,13,20,.55),0 0 18px rgba(0,241,225,.5);transition:transform .3s var(--ease),background .3s;z-index:2}
.pin::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(0,241,225,.55);opacity:.6;animation:ping 2.4s var(--ease) infinite}
.pin:nth-of-type(2)::before{animation-delay:.3s}.pin:nth-of-type(3)::before{animation-delay:.6s}.pin:nth-of-type(4)::before{animation-delay:.9s}.pin:nth-of-type(5)::before{animation-delay:1.2s}.pin:nth-of-type(6)::before{animation-delay:1.5s}
@keyframes ping{0%{transform:scale(.6);opacity:.8}70%{transform:scale(1.35);opacity:0}100%{transform:scale(1.35);opacity:0}}
.pin.is-hot,.pin:hover,.pin:focus-visible{transform:scale(1.18);background:#fff}
.pin.is-hot::before{animation:none;opacity:0}
.pin__tip{position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,-4px);white-space:nowrap;padding:7px 10px;border-radius:3px;background:var(--ink);color:var(--text);font-size:.8125rem;font-weight:400;border:1px solid var(--line);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.pin.is-hot .pin__tip,.pin:hover .pin__tip,.pin:focus-visible .pin__tip{opacity:1;transform:translate(-50%,0)}
.pin--up .pin__tip{top:auto;bottom:calc(100% + 10px)}
.pin--left .pin__tip{left:auto;right:0;transform:translate(0,-4px)}
.pin--left.is-hot .pin__tip,.pin--left:hover .pin__tip,.pin--left:focus-visible .pin__tip{transform:translate(0,0)}
.pin--right .pin__tip{left:0;transform:translate(0,-4px)}
.pin--right.is-hot .pin__tip,.pin--right:hover .pin__tip,.pin--right:focus-visible .pin__tip{transform:translate(0,0)}
.annot__screen.has-hot .pin:not(.is-hot){opacity:.55}
.annot__legend{display:grid;gap:2px;align-content:center}
.annot__legend li{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:11px 12px;border-radius:var(--radius-s);border:1px solid transparent;transition:background .25s,border-color .25s}
.annot__legend li>b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-soft);font-size:.8125rem;color:var(--text-2);transition:background .3s,color .3s,border-color .3s}
.annot__legend li strong{display:block;font-size:1rem}
.annot__legend li p{font-size:.9375rem;line-height:1.45;margin-top:2px}
.annot__legend li.is-hot,.annot__legend li:hover{background:rgba(255,255,255,.04);border-color:var(--line)}
.annot__legend li.is-hot>b,.annot__legend li:hover>b{background:var(--glow);color:var(--ink);border-color:var(--glow)}

/* ---------- stage legends under a figure hero ---------- */
.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 24px;margin-top:clamp(14px,2vw,24px)}
.stages li{font-size:.9375rem;line-height:1.45;color:var(--paper-muted)}
.stages li b{display:block;color:var(--paper-text);font-size:1rem}
.stages li i{display:block;font-style:normal;font-size:.8125rem;color:var(--signal-deep);font-weight:700;margin-bottom:2px}
.stages--3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}


/* ---------- feature: a full-screen phone picture with its message beside it ---------- */
.feature{min-height:var(--screen);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(40px,5vw,72px)}
.feature__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.feature--reverse .feature__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.feature--reverse .feature__text{order:-1}
.feature__phone{display:flex;justify-content:center;align-items:center}
.feature__phone img{width:auto;height:auto;aspect-ratio:var(--ar,auto);max-width:100%;max-height:calc(var(--screen) - 120px);filter:drop-shadow(0 28px 36px rgba(10,13,20,.28))}
.feature__text h2{font-size:clamp(1.8rem,3vw,2.8rem);margin-top:.6rem}
.feature__text .lede{margin-top:1rem;max-width:46ch;font-size:clamp(1.0625rem,1.2vw,1.2rem)}
.feature__text .link-row{margin-top:1.4rem}
.audiences{display:grid;gap:12px;margin-top:1.25rem}
.audiences li{font-size:1rem;line-height:1.5;color:var(--text-2)}
.audiences li strong{display:block}
.paper .audiences li{color:var(--paper-muted)}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin-top:1.5rem;font-size:.875rem;font-weight:700;color:var(--signal)}
.flow li{display:inline-flex;align-items:center}
.flow li+li::before{content:"";width:26px;height:2px;margin:0 10px;background:currentColor;opacity:.5}
.paper .flow{color:var(--signal-deep)}

/* ---------- copilot exchange ---------- */
.exchange{border:1px solid var(--line);border-radius:var(--radius-m);background:var(--ink-2);overflow:hidden}
.exchange__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:.8125rem;color:var(--text-3)}
.exchange__bar b{color:var(--text-2);font-weight:700}
.exchange ol{display:grid;gap:14px;padding:20px 18px 22px}
.exchange li{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:start}
.exchange li>span{font-size:.8125rem;font-weight:700;color:var(--text-3);padding-top:9px}
.exchange li>div{padding:11px 14px;border-radius:8px;background:var(--ink-3);color:var(--text);font-size:.9375rem;line-height:1.5;max-width:56ch}
.exchange li.is-you>div{background:rgba(73,214,176,.12);border:1px solid rgba(73,214,176,.25)}
.exchange li.is-you>span{color:var(--signal)}
.exchange li>div em{font-style:normal;color:var(--text-2)}
.exchange__state{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 18px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--text-2)}
.exchange__state span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--next);vertical-align:1px}
.exchange__state span.is-program::before{background:var(--onair)}
.exchange__state span.is-idle::before{background:var(--line-soft)}
.checklist{display:grid;gap:14px;margin-top:1.5rem}
.checklist li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:1rem;color:var(--text-2)}
.checklist li>div{min-width:0}
.checklist li::before{content:"";width:22px;height:2px;margin-top:12px;background:var(--signal)}
.checklist li strong{display:block;color:var(--text)}
.paper .checklist li{color:var(--paper-muted)}
.paper .checklist li::before{background:var(--signal-deep)}
.paper .checklist li strong{color:var(--paper-text)}

/* ---------- technology row ---------- */
.tech{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(28px,3vw,40px)}
.tech__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.tech__label{font-size:.875rem;color:var(--text-3);flex:0 0 auto}
.tech__logos{display:flex;flex-wrap:wrap;align-items:center;gap:22px clamp(28px,3.4vw,56px);flex:1 1 auto;justify-content:space-between}
.tech__logos li{display:flex;align-items:center;gap:12px;color:var(--text-2);font-size:.9375rem;white-space:nowrap}
.tech__logos img{display:block;width:auto;height:var(--h,26px)}
.tech__logos .on-dark{filter:brightness(0) invert(1)}
.logo-note{margin-top:14px;font-size:.8125rem;color:var(--text-3)}
.destinations{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:1.25rem}
.destinations li{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px 8px 10px;border:1px solid var(--line);border-radius:999px;background:var(--ink-2);color:var(--text-2);font-size:.9375rem}
.destinations img{height:22px;width:auto}

/* ---------- steps: the signal path ---------- */
.path{counter-reset:step}
.step{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.1fr);gap:20px var(--gutter);padding-block:clamp(22px,2.6vw,36px);border-top:1px solid var(--line);align-items:start;counter-increment:step}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{font-weight:700;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.03em;line-height:1;color:var(--signal)}
.step__n::before{content:"0" counter(step)}
.step h3{margin-bottom:.4rem}
.step p{font-size:1rem}
.step__aside{font-size:.9375rem;color:var(--text-2);border-left:1px solid var(--line);padding-left:20px;max-width:52ch}
.step__aside b{display:block;color:var(--text);font-weight:700;margin-bottom:.3rem}

/* ---------- facts / status / details ---------- */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.fact{padding-top:18px;border-top:2px solid var(--signal)}
.fact b{display:block;font-size:clamp(1.5rem,2.4vw,2.2rem);letter-spacing:-.03em;line-height:1.05;margin-bottom:.5rem}
.fact p{font-size:1rem}
.paper .fact{border-color:var(--signal-deep)}
.paper .fact b{color:var(--paper-text)}
.quote{font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.35;letter-spacing:-.015em;color:var(--text);max-width:30ch}
.facts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.facts3 h3{font-size:1.0625rem;letter-spacing:0;margin-bottom:.4rem;color:var(--signal)}
.facts3 p{font-size:1rem}
.detail li{padding:16px 0;border-top:1px solid var(--line);font-size:1rem;color:var(--text-2)}
.detail li>div{min-width:0}
.detail li strong{display:block;margin-bottom:.2rem}

/* ---------- zoom / lightbox ---------- */
.zoom{position:absolute;right:12px;top:12px;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:var(--radius-s);background:rgba(10,13,20,.72);border:1px solid var(--line-soft);color:var(--text);font-size:.8125rem;backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.zoom:hover{background:rgba(10,13,20,.9);border-color:var(--text)}
.zoom svg{width:16px;height:16px}
.lightbox{width:min(1700px,96vw);max-width:96vw;max-height:94svh;padding:0;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--ink);color:var(--text);overflow:hidden}
.lightbox::backdrop{background:rgba(3,5,9,.9)}
.lightbox__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.lightbox__bar p{font-size:.9375rem;color:var(--text)}
.lightbox__stage{max-height:calc(94svh - 60px);overflow:auto;overscroll-behavior:contain}
.lightbox__stage img{width:100%;height:auto}
.lightbox__stage.is-zoomed img{width:auto;max-width:none}
.lightbox__actions{display:flex;gap:8px}
.lightbox__actions button{min-height:40px;padding:0 14px;border:1px solid var(--line-soft);border-radius:var(--radius-s);color:var(--text);background:var(--ink-2)}
.lightbox__actions button:hover{border-color:var(--text)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.form{padding:clamp(20px,3vw,36px);border:1px solid var(--line);border-radius:var(--radius-m);background:var(--ink-2)}
.field{display:grid;gap:8px;margin-bottom:20px}
.field label{font-weight:700;font-size:.9375rem}
.field label span{font-weight:400;color:var(--text-3);font-size:.8125rem}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:var(--radius-s);background:var(--ink);color:var(--text);transition:border-color .2s}
.field textarea{min-height:170px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--text-3)}
.field-hint{font-size:.8125rem;color:var(--text-3)}
.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form-note{font-size:.875rem;line-height:1.55;color:var(--text-3)}
.form-note a,.legal a{color:var(--signal);text-decoration:underline;text-underline-offset:4px}
.form-status{margin-top:16px;font-size:.9375rem;color:var(--signal);overflow-wrap:anywhere;min-height:1.5em}
.legal h2{font-size:clamp(1.4rem,2vw,1.8rem);margin-top:2.4rem;margin-bottom:.8rem}
.legal p{max-width:70ch}

/* ---------- consent (shown only when Google Analytics is configured and no choice is stored) ---------- */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;max-width:640px;margin-inline:auto;padding:16px 18px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:0 24px 48px rgba(3,5,9,.5);display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.consent p{font-size:.9375rem;line-height:1.5;max-width:44ch;color:var(--text-2)}
.consent p a{color:var(--signal);text-decoration:underline;text-underline-offset:4px}
.consent__actions{display:flex;gap:10px}
.consent .btn{min-height:44px;padding:10px 18px}

/* ---------- cta + footer ---------- */
.cta{background:var(--signal);color:var(--ink);color-scheme:light}
.cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;padding-block:clamp(48px,6vw,88px)}
.cta h2{max-width:20ch;color:#052a24}
.cta p{color:#0f4a41;margin-top:.6rem;max-width:44ch}
.cta .btn--ink:focus-visible{outline-color:var(--ink)}
.foot{padding-block:clamp(40px,5vw,72px) 28px;border-top:1px solid var(--line)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr)) auto;gap:32px var(--gutter);margin-bottom:40px}
.foot__brand img{height:22px;width:auto}
.foot__brand p{margin-top:16px;font-size:.9375rem;max-width:34ch}
.foot h3{font-size:.9375rem;letter-spacing:0;margin-bottom:12px}
.foot ul{display:grid;gap:2px}
.foot li a{display:inline-flex;align-items:center;min-height:36px;color:var(--text-2);font-size:.9375rem;transition:color .2s}
.foot li a:hover{color:var(--text)}
.motion-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-s);color:var(--text-2);font-size:.875rem;white-space:nowrap}
.motion-toggle:hover{color:var(--text);border-color:var(--text-3)}
.motion-toggle::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--next)}
.motion-toggle[aria-pressed=true]::before{background:var(--text-3)}
.foot__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:20px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--text-3)}
.foot__note{margin-top:20px;font-size:.8125rem;color:var(--text-3);max-width:80ch}
.foot__note a{color:var(--text-2);text-decoration:underline;text-underline-offset:4px}


/* ---------- hero slideshow: pictures slide in from the left and stack, with a slow zoom ---------- */
.show{position:absolute;inset:0;overflow:hidden;background:var(--ink)}
.show__slide{position:absolute;inset:0;visibility:hidden;transform:translateX(-100%)}
.show__slide img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 50%}
.show__slide.is-active{visibility:visible;transform:none;z-index:2}
.show__slide.is-leaving{visibility:visible;transform:none;z-index:1}
.show__slide.is-entering{animation:slideIn 1.1s var(--ease) both}
.show__slide.is-active img{animation:kenburns 9s linear both}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:none}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.04)}}
.show__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.show__caption{font-size:.9375rem;font-weight:700;color:var(--text);min-width:22ch}
.show__dots{display:flex;gap:6px}
.show__dots button{width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.show__dots button::before{content:"";width:10px;height:10px;border-radius:50%;border:1px solid var(--text-2);transition:background .3s,transform .3s,border-color .3s}
.show__dots button:hover::before{border-color:var(--text)}
.show__dots button[aria-pressed=true]::before{background:var(--glow);border-color:var(--glow);transform:scale(1.15);box-shadow:0 0 10px var(--glow)}
.show__pause{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--line-soft);border-radius:999px;color:var(--text-2);font-size:.8125rem;background:rgba(10,13,20,.4);backdrop-filter:blur(6px)}
.show__pause:hover{color:var(--text);border-color:var(--text-3)}

/* ---------- console explorer: point at a work area, open it ---------- */
.console{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:center}
.console__list{display:grid;gap:4px}
.console__list a{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;width:100%;padding:14px 16px;border-radius:var(--radius-s);border:1px solid transparent;color:var(--text-2);transition:background .25s,border-color .25s,color .25s}
.console__list a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line);grid-row:1;transition:background .3s,box-shadow .3s}
.console__list a strong{display:block;color:var(--text);font-size:1.0625rem}
.console__list a span{grid-column:2;font-size:.9375rem;line-height:1.45}
.console__list a:hover,.console__list a.is-active{background:rgba(255,255,255,.04);border-color:var(--line)}
.console__list a.is-active::before{background:var(--glow);box-shadow:0 0 10px var(--glow)}
.console__list a em{grid-column:2;font-style:normal;font-size:.8125rem;color:var(--signal);font-weight:700;margin-top:2px;opacity:0;transition:opacity .3s}
.console__list a:hover em,.console__list a.is-active em{opacity:1}
.console__screen{position:relative;border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--line);background:var(--ink-2)}
.console__screen img{width:100%;height:auto}
.console__hint{margin-top:12px;font-size:.875rem;color:var(--text-3)}
.areas{min-height:var(--screen);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(48px,6vw,88px)}

/* ---------- reveal + hero motion ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal=slide]{transform:translateX(64px);transition-duration:1s}
[data-reveal].is-in{opacity:1;transform:none}
html.no-js [data-reveal]{opacity:1;transform:none}
.hero__body>*{animation:rise .9s var(--ease) both;animation-delay:.25s}
.hero__body>*:nth-child(2){animation-delay:.35s}.hero__body>*:nth-child(3){animation-delay:.45s}.hero__body>*:nth-child(4){animation-delay:.55s}.hero__body>*:nth-child(5){animation-delay:.65s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
html[data-motion=off]{scroll-behavior:auto}
html[data-motion=off] [data-reveal]{opacity:1;transform:none}
html[data-motion=off] .pin::before{display:none}
@media(prefers-reduced-motion:reduce){
  html:not([data-motion=on]) *,html:not([data-motion=on]) *::before,html:not([data-motion=on]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html:not([data-motion=on]){scroll-behavior:auto}
  html:not([data-motion=on]) [data-reveal]{opacity:1;transform:none}
  html:not([data-motion=on]) .pin::before{display:none}
}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .panels{flex-direction:column;min-height:0;gap:2px}
  .panel{min-height:min(52svh,480px);flex:none}
  .panel img{inset:0;left:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50%) 50%;transform:none}
  .panel__body{width:auto;max-width:560px;box-sizing:border-box;padding:clamp(20px,2.6vw,40px) clamp(18px,2.2vw,34px)}
  .panel--link .panel__body p:not(.marker),.panel--link .panel__more{opacity:1;transform:none}
  .annot,.annot--reverse{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .annot--reverse .annot__legend{order:0}
  .foot__grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
  .foot__grid>:last-child{grid-column:1/-1}
  .stages{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:980px){
  .nav{gap:0}
  .nav a{padding:0 10px;font-size:.9rem}
  .nav .nav__cta{margin-left:6px;padding:0 14px}
  .section-head,.split,.split--reverse,.function__head{grid-template-columns:minmax(0,1fr)}
  .console{grid-template-columns:minmax(0,1fr)}
  .console__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--reverse>.split__text{order:0}
  .cols,.facts,.facts3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .annot,.annot--reverse{grid-template-columns:minmax(0,1fr)}
  .annot__screen{width:auto}
  .annot__screen img{max-height:none;width:100%}
  .annot__legend{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px}
  .feature__grid,.feature--reverse .feature__grid{grid-template-columns:minmax(0,1fr)}
  .feature--reverse .feature__text{order:0}
  .feature__phone img{max-height:70svh}
  .step{grid-template-columns:56px minmax(0,1fr)}
  .step__aside{grid-column:2;border-left:0;padding-left:0;padding-top:4px}
  .contact{grid-template-columns:minmax(0,1fr)}
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__note{text-align:left;max-width:none}
  .stage__caption{grid-template-columns:minmax(0,1fr)}
}
@media(max-aspect-ratio:1/1),(max-width:820px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);justify-content:normal}
  .hero__media{position:relative;max-height:none;z-index:auto}
  .hero__media::after{height:36%}
  .show__slide.is-active img{animation:none}
  .hero__veil{display:none}
  .hero__body{align-self:start;z-index:1;margin-top:calc(-1*clamp(56px,11vw,140px));padding-block:0 clamp(28px,4vw,48px)}
  .hero--figure .hero__media::after{height:16%}
  .hero--figure .hero__body{margin-top:0;padding-top:clamp(8px,1.5vw,20px)}
  .hero--figure .hero__body h2,.hero--figure .hero__body .lede,.hero--figure .hero__body .marker{text-shadow:none}
}
@media(max-width:820px){
  .menu{display:inline-flex;align-items:center;justify-content:center}
  .nav{display:none;position:absolute;left:0;right:0;top:var(--head-h);flex-direction:column;align-items:stretch;gap:2px;padding:12px var(--gutter) 20px;background:var(--ink);border-bottom:1px solid var(--line);max-height:calc(100svh - var(--head-h));overflow:auto}
  .nav.is-open{display:flex}
  .nav a{min-height:48px;font-size:1.0625rem;padding:0 12px}
  .nav a::after{bottom:8px}
  .nav .nav__cta{margin:10px 0 0;justify-content:center}
  .nav__group{flex-direction:column;align-items:stretch}
  .nav__more{display:none}
  .nav__sub{position:static;opacity:1;visibility:visible;transform:none;border:0;background:none;box-shadow:none;padding:0 0 6px 14px;min-width:0}
  .nav__sub::before{display:none}
  .nav__sub li a{min-height:40px;font-size:1rem}
  .nav__sub li.nav__all{display:none}
  .hero--short{min-height:var(--screen)}
  .stage{height:auto;min-height:calc(var(--screen) - 53px);display:flex;flex-direction:column}
  .stage__slide{position:relative;inset:auto;display:none;opacity:1;flex:1 0 auto}
  .stage__slide.is-active{display:grid;grid-template-rows:auto minmax(0,1fr)}
  .stage__slide img{aspect-ratio:16/9;height:auto}
  .stage__caption{position:static;background:var(--ink-2);padding:18px var(--gutter) 24px;align-self:center}
  .stage__slide--light{padding:20px var(--gutter) 0}
  .stage__slide--light img{aspect-ratio:auto;max-height:52svh;margin-inline:auto}
  .stage__slide--light .stage__caption{background:#fff;padding:18px 0 24px}
  .stage-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .stage-tabs::-webkit-scrollbar{display:none}
  .stage-tabs button{white-space:nowrap;flex:none}
  .claims{grid-template-columns:minmax(0,1fr);gap:22px}
  .console__zone::after{font-size:.7rem;left:6px;top:6px;padding:4px 7px}
  .console__list{grid-template-columns:minmax(0,1fr)}
  .console__list a em{opacity:1}
  .annot__legend{grid-template-columns:minmax(0,1fr)}
  .pin{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:.75rem}
  .pin__tip{display:none}
  .zoom{padding:0;width:40px;justify-content:center}
  .zoom span{display:none}
  .tech__logos{justify-content:flex-start;gap:18px 28px}
  .cta .wrap{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  :root{font-size:16px}
  .cols,.cols--5,.facts,.facts3,.stages,.stages--3{grid-template-columns:minmax(0,1fr)}
  .foot__grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .step{grid-template-columns:44px minmax(0,1fr);gap:12px 16px}
  .exchange li{grid-template-columns:minmax(0,1fr);gap:4px}
  .exchange li>span{padding-top:0}
  .panel{min-height:min(60svh,420px)}
  .panel__body{padding:20px}
  .actions .btn{width:100%}
  .brand img{height:21px}
  .hero{min-height:0}
  .form{padding:18px}
  .foot__bottom{flex-direction:column}
}