/* VoiceOwl homepage v12 (thought 35): quiet. Black, one typeface (Hanken Grotesk), hairlines, square frames, and one bold
   element: a line of light in the hero that carries a demo call and can be plucked (v12.js). The only colour on the page is
   the logo. The page scrolls naturally; one scene, the claim, is tied to the scroll. Loads after site.css and v4.css (dark tokens, the header).
   Motion has one language: things rise out of a line (--out), lines draw (--io). Reduced motion and no script: all of it
   simply there. */
html:root[data-v12]{
  --ink:#e9eaec; --mute:#8d929a; --rule:rgba(233,234,236,.14); --rule-2:rgba(233,234,236,.36);
  --f:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --out:cubic-bezier(.16,1,.3,1); --io:cubic-bezier(.65,0,.35,1);
  --gut:clamp(20px,4.4vw,64px); --w:1320px;
  /* the site's own tokens, and v4's */
  --bg:#000; --surface:#0a0a0b; --raised:#111214; --fg:var(--ink); --muted:var(--mute); --line:var(--rule); --night:#000;
  --f-sans:var(--f); --f-display:var(--f); --f-serif:var(--f);
  --o-black:#000; --o-plat:var(--ink); --o-smoke:var(--mute); --o-accent:var(--ink); --accent:var(--ink); --accent-ink:var(--ink);
  background:#000;
}
html[data-v12] body{background:#000;color:var(--ink);font-family:var(--f)}
html[data-v12] main{background:#000;margin-inline:-20px;padding-inline:0}
.v12-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.v12-w{box-sizing:border-box;width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
html[data-v12] :is(.v12-btn,.v12-a,.v12-it-h,.v12-play,.v12-bead):focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* ── header: clear at the top, black glass once the page moves; its button stays an outline so the hero's is the only solid one ── */
html:root[data-v12] header.nav{background:transparent;box-shadow:none;transition:background-color .5s ease,box-shadow .5s ease}
html:root[data-v12].v12-scrolled header.nav{background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 1px 0 var(--rule)}
html:root[data-v12] header.nav .btn-dark{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-2);transition:background-color .35s ease,color .35s ease}
html:root[data-v12] header.nav .btn-dark:hover{background:var(--ink);color:#000}
html[data-v12] header.nav .nl,html[data-v12] header.nav .signin{font-family:var(--f);font-size:14.5px}
html:root[data-v12] header.nav .logo img{background:none;padding:0;border-radius:0}   /* the light logo, bare: site.css gives a dark page a white plate */
html:root[data-v12] header.nav .logo .mo-lg-d{display:none}
html:root[data-v12] header.nav .logo .mo-lg-l{display:block}

/* ── the hero: headline, line, a sentence and one button ─────────────────────────────────────────────────────────── */
.v12-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;margin-top:-64px;padding-top:64px;overflow:hidden}
.v12-top{flex:1.3 1 auto;display:flex;align-items:flex-end;padding-top:clamp(28px,7vh,96px);padding-bottom:clamp(14px,2.4vh,26px)}
.v12-h1{margin:0;font:300 clamp(36px,5.9vw,92px)/1.03 var(--f);letter-spacing:-.036em;color:var(--ink);font-kerning:normal}
.v12-m{display:block;overflow:hidden;padding:.06em 0 .16em;margin:-.06em 0 -.16em}
.v12-ln{display:block;text-wrap:balance}
.v12-wd{display:inline-block}
.v12-rot{display:inline-grid;overflow:hidden;white-space:nowrap;padding:.06em 0 .16em;margin:-.06em 0 -.16em}
.v12-rw{grid-area:1/1;transform:translateY(118%);transition:transform .95s var(--out)}
.v12-rw.is-on{transform:none}
.v12-rw.is-off{transform:translateY(-118%);transition:transform .7s var(--io)}

.v12-line{position:relative;flex:none;height:1px;background:var(--ink)}
.v12-line::before{content:"";position:absolute;inset:-240px 0;z-index:-1;pointer-events:none;   /* the line lights the air around it, more when someone speaks */
  background:radial-gradient(52% 50% at 26% 50%,rgba(233,234,236,.085),rgba(233,234,236,0) 72%);opacity:calc(.4 + var(--v12-lv,0)*1.1)}
.v12-line canvas{display:none;position:absolute;left:0;top:50%;width:100%;height:150px;margin-top:-75px;pointer-events:none}
.v12-line.is-live{background:none}
.v12-line.is-live canvas{display:block}
/* the bead on the line: Volie, the live agent. A ring spreads from it while it waits; in a call it turns solid, its halo
   follows her voice and its ring follows yours. */
.v12-bead{position:absolute;z-index:2;right:max(var(--gut),calc((100% - var(--w))/2 + var(--gut)));top:50%;display:grid;place-items:center;width:68px;height:68px;margin:-34px 0 0;padding:0;border:0;border-radius:50%;
  background:#000;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink),0 0 calc(18px + 46px*var(--v12-her,0)) calc(var(--v12-her,0)*8px) rgba(233,234,236,calc(.08 + .3*var(--v12-her,0)));cursor:pointer;transition:background-color .4s ease,color .4s ease,scale .5s var(--out)}
.v12-bead:hover{background:var(--ink);color:#000}
.v12-bead:active{scale:.95}
.v12-bead svg{position:relative;width:22px;height:22px}
.v12-i-stop{display:none}
.v12-bead-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px var(--ink);opacity:0;pointer-events:none}
.v12-bead.is-ping .v12-bead-ring{animation:v12-ping 2.6s var(--out)}
@keyframes v12-ping{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
.v12-bead[data-state="connecting"] .v12-bead-ring{inset:-7px;opacity:1;box-shadow:none;background:conic-gradient(from 0deg,rgba(233,234,236,0) 40%,var(--ink));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));animation:v12-turn 1.1s linear infinite}
@keyframes v12-turn{to{transform:rotate(360deg)}}
.v12-bead[data-state="live"]{background:var(--ink);color:#000}
.v12-bead[data-state="live"] .v12-i-mic,.v12-bead[data-state="connecting"] .v12-i-mic{display:none}
.v12-bead[data-state="live"] .v12-i-stop,.v12-bead[data-state="connecting"] .v12-i-stop{display:block}
.v12-bead[data-state="live"] .v12-bead-ring{animation:none;opacity:.55;transform:scale(calc(1.14 + var(--v12-you,0)*.55));transition:transform .12s ease-out}
.v12-talk{margin-top:22px;text-align:right}
.v12-talk-t{margin:0;font:400 19px/1.3 var(--f);letter-spacing:-.01em;color:var(--ink)}
.v12-talk-c{margin-left:.6em;color:var(--mute);font-variant-numeric:tabular-nums}
.v12-talk-d{margin:6px 0 0 auto;max-width:40ch;font:400 15px/1.5 var(--f);color:var(--mute)}
.v12-talk-cap{margin:12px 0 0 auto;max-width:34ch;min-height:4.05em;font:300 clamp(18px,1.55vw,22px)/1.35 var(--f);letter-spacing:-.012em;color:var(--ink)}
.v12-talk-cap b{margin-right:.45em;font-weight:400;color:var(--mute)}
.v12-talk-cap[data-who="you"] span{color:var(--mute)}
.v12-talk-n{margin:10px 0 0;font:400 13px/1.45 var(--f);color:var(--mute)}
.v12-talk-ask{margin:10px 0 0;font:400 15px/1.5 var(--f);color:var(--mute);transition:opacity .45s ease}
.v12-talk-ask q{color:var(--ink)}
.v12-talk-ask.is-out{opacity:0}
.v12-talk [hidden],.v12-talk[hidden],.v12-bead[hidden]{display:none}
.v12-hero :is(.v12-h1,.v12-pitch){transition:opacity 1s ease}
.v12-talking .v12-hero .v12-h1{opacity:.4}   /* in a call, the conversation has the floor */
.v12-talking .v12-hero .v12-pitch{opacity:.55}

.v12-under{flex:1 1 auto;padding-top:clamp(24px,3.6vh,40px)}
.v12-hero .v12-under{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);column-gap:48px;align-items:start}
.v12-sub{margin:0;max-width:47ch;font:400 clamp(16.5px,1.25vw,19px)/1.6 var(--f);color:var(--mute)}
.v12-btn{position:relative;display:inline-flex;align-items:center;height:54px;margin-top:clamp(24px,3.4vh,34px);padding:0 30px;border-radius:999px;overflow:hidden;background:var(--ink);color:#000;font:500 16px/1 var(--f);text-decoration:none;transition:color .5s var(--out),transform .5s var(--out)}
.v12-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(102%);transition:transform .6s var(--out)}
.v12-btn span{position:relative}
.v12-btn:hover,.v12-btn:focus-visible{color:var(--ink)}
.v12-btn:hover::before,.v12-btn:focus-visible::before{transform:none}
.v12-btn:active{transform:scale(.98)}
.v12-trust{display:flex;align-items:center;flex-wrap:wrap;gap:16px 44px;padding-block:22px 30px}
.v12-trust p{flex:none;margin:0;max-width:23ch;font:400 13.5px/1.45 var(--f);color:var(--mute)}
.v12-logos{display:flex;align-items:center;flex-wrap:wrap;gap:14px 30px}
html[data-v12] .v12-logos .clogo{height:20px;max-height:20px;width:auto;max-width:104px;filter:none;opacity:.5;transition:opacity .4s ease}
html[data-v12] .v12-logos .clogo:hover{opacity:.95}
.v12-logos span{font:500 13.5px/1 var(--f);color:var(--mute);white-space:nowrap}
@media (min-width:1200px){.v12-trust{flex-wrap:nowrap}.v12-logos{flex:1;min-width:0;flex-wrap:nowrap;justify-content:space-between;gap:0 16px}}

/* the opening: the line is drawn, the headline rises out of it, the rest arrives. Hidden only when a script is there to show it. */
.v12-js .v12-hero .v12-ln{transform:translateY(118%)}
.v12-js .v12-hero :is(.v12-sub,.v12-btn,.v12-trust,.v12-talk){opacity:0;translate:0 10px}
.v12-js .v12-hero .v12-bead{opacity:0;scale:.5}
.v12-js .v12-hero .v12-line:not(.is-live){transform:scaleX(0);transform-origin:0 50%}
.v12-js.v12-open .v12-hero .v12-ln{transform:none;transition:transform 1.3s var(--out) .5s}
.v12-js.v12-open .v12-hero .v12-m+.v12-m .v12-ln{transition-delay:.62s}
.v12-js.v12-open .v12-hero :is(.v12-sub,.v12-btn,.v12-trust,.v12-talk){opacity:1;translate:none;transition:opacity 1.1s ease 1.05s,translate 1.1s var(--out) 1.05s,color .5s var(--out),transform .5s var(--out)}
.v12-js.v12-open .v12-hero .v12-btn{transition-delay:1.18s,1.18s,0s,0s}
.v12-js.v12-open .v12-hero .v12-trust{transition-delay:1.45s}
.v12-js.v12-open .v12-hero .v12-talk{transition-delay:1.75s}
.v12-js.v12-open .v12-hero .v12-bead{opacity:1;scale:1;transition:opacity .7s ease 1.5s,scale 1.1s var(--out) 1.5s,background-color .4s ease,color .4s ease}
.v12-js.v12-open .v12-hero .v12-line:not(.is-live){transform:none;transition:transform 1.2s var(--io)}
.v12-done .v12-hero .v12-m{overflow:visible}   /* the words ride the line when it is plucked */

/* ── sections: a hairline, then content. Two layouts: full width, or a note at the left and the matter at the right ── */
.v12-sec>.v12-w{padding-bottom:clamp(80px,13vh,160px)}
.v12-sec>.v12-w::before{content:"";display:block;grid-column:1/-1;height:1px;margin-bottom:clamp(40px,7vh,84px);background:var(--rule)}
.v12-live .v12-sec>.v12-w::before{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.5s var(--io)}
.v12-live .v12-sec.is-in>.v12-w::before{transform:none}
.v12-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(32px,5vw,96px);align-items:start}
.v12-side{position:sticky;top:104px}
.v12-label{margin:0 0 18px;font:400 15.5px/1.4 var(--f);letter-spacing:0;color:var(--mute)}
.v12-h2{margin:0;font:300 clamp(30px,3.5vw,56px)/1.08 var(--f);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.v12-lede{margin:22px 0 0;max-width:58ch;font:400 17px/1.6 var(--f);color:var(--mute)}
.v12-head{max-width:880px;margin-bottom:clamp(40px,6.5vh,76px)}
.v12-p{margin:0;font:400 16.5px/1.6 var(--f);color:var(--mute)}
.v12-a{color:var(--ink);font:400 16px/1.4 var(--f);text-decoration:none;padding-bottom:5px;background:linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--out)}
.v12-a:hover{background-size:32% 1px}

/* the claim. Plain by default (reduced motion, no script): two lines with a rule between them. With motion it is the one
   scene tied to the scroll: it holds for about a screen while v12.js stretches its letters out of the rule, one line up
   and one down, from the middle outwards. Then the numbers that back it, in a section of their own. */
.v12-say-in{padding-block:clamp(72px,14vh,170px) clamp(24px,5vh,56px)}
.v12-say-h{margin:0;font:300 clamp(40px,9vw,160px)/1 var(--f);letter-spacing:-.045em;color:var(--ink)}
.v12-say-a,.v12-say-b{display:block;white-space:nowrap}
.v12-say-a{padding-bottom:.02em}
.v12-say-b{padding-top:.09em}
.v12-rule{display:block;height:1px;background:var(--ink)}
.v12-say-why{margin-top:clamp(22px,3.4vh,40px);font:400 clamp(16px,1.3vw,20px)/1.4 var(--f);color:var(--mute)}
.v12-lt{display:inline-block;will-change:transform}
.v12-say-a .v12-lt{transform-origin:50% 100%}
.v12-say-b .v12-lt{transform-origin:50% 0}
.v12-live .v12-say{height:200vh}
.v12-live .v12-say-pin{position:sticky;top:0;display:flex;align-items:center;height:100vh;height:100svh;overflow:hidden}
.v12-live .v12-say-in{width:100%;padding-block:0 4vh}
.v12-live .v12-rule{transform-origin:0 50%}
@media (max-width:560px){.v12-say-h{font-size:13vw}}
.v12-proof .v12-nums{margin-top:0}
.v12-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(56px,10vh,120px) 0 0}
.v12-nums div{padding:4px 28px 6px;border-left:1px solid var(--rule)}
.v12-nums div:first-child{padding-left:0;border-left:0}
.v12-nums dt{font:300 clamp(40px,4.7vw,78px)/1 var(--f);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.v12-nums dd{margin:16px 0 0;max-width:26ch;font:400 15px/1.5 var(--f);color:var(--mute)}
.v12-nums dd b{display:block;margin-bottom:2px;font-weight:500;color:var(--ink)}
.v12-more{margin:clamp(36px,6vh,60px) 0 0}

/* six steps. The line runs down beside them and fills as you read; a step lights when you reach it. */
.v12-steps{position:relative;isolation:isolate;list-style:none;margin:0;padding:0}
.v12-steps::before,.v12-steps::after{content:"";position:absolute;z-index:-1;left:17px;top:6px;bottom:8px;width:1px;background:var(--rule)}   /* behind the numbers, which break it */
.v12-steps::after{display:none;background:var(--ink);transform-origin:50% 0}
.v12-step{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:clamp(20px,3vw,44px);padding-bottom:clamp(52px,8vh,92px)}
.v12-step:last-child{padding-bottom:0}
.v12-no{position:relative;z-index:1;align-self:start;padding:5px 0 9px;background:#000;font:400 14px/1 var(--f);color:var(--mute);text-align:center;font-variant-numeric:tabular-nums}
.v12-step-k{margin:0 0 14px;font:400 15.5px/1.2 var(--f);color:var(--mute)}
.v12-was{margin:0 0 10px;font:400 16px/1.4 var(--f);color:var(--mute)}
.v12-was s{text-decoration-thickness:1px;text-decoration-color:var(--rule-2)}
.v12-step h3{margin:0 0 14px;max-width:22ch;font:300 clamp(25px,2.7vw,42px)/1.1 var(--f);letter-spacing:-.028em;color:var(--ink);text-wrap:balance}
.v12-step .v12-p{max-width:56ch}
.v12-ch{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:22px 0 0;padding:0}
.v12-ch li{padding:7px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule-2);font:400 14px/1.2 var(--f);color:var(--ink)}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .v12-steps::after{display:block;animation:v12-fill linear both;animation-timeline:view();animation-range:entry 55% exit 45%}
  .v12-step{animation:v12-lit linear both;animation-timeline:view();animation-range:cover 6% cover 24%}
}}
@keyframes v12-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes v12-lit{from{opacity:.5}to{opacity:1}}

/* languages: one sentence, the names in ink */
.v12-lang .v12-label{margin:10px 0 0}
.v12-big{margin:0;font:300 clamp(25px,3.3vw,52px)/1.2 var(--f);letter-spacing:-.026em;color:var(--mute);text-wrap:pretty}
.v12-big b{font-weight:300;color:var(--ink)}

/* six outcomes: an index at the left, the picture of the one in hand at the right */
.v12-idx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,88px);align-items:start}
.v12-idx-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.v12-it{border-top:1px solid var(--rule)}
.v12-it-hd{margin:0}
.v12-it-h{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:7px;width:100%;padding:22px 0;cursor:pointer;color:var(--mute);transition:color .4s ease}
.v12-it-t{font:300 clamp(22px,2.1vw,31px)/1.15 var(--f);letter-spacing:-.022em}
.v12-it-t::before{content:"";display:inline-block;width:0;height:1px;margin-right:0;vertical-align:.3em;background:var(--ink);transition:width .6s var(--out),margin-right .6s var(--out)}
.v12-it-k{font:400 14.5px/1.3 var(--f);color:var(--mute)}
.v12-it.is-on .v12-it-h,.v12-it-h:hover{color:var(--ink)}
.v12-it.is-on .v12-it-t::before{width:28px;margin-right:14px}
.v12-it-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--out)}
.v12-it.is-on .v12-it-p{grid-template-rows:1fr}
.v12-it-in{min-height:0;overflow:hidden}
.v12-it-in .v12-p{max-width:46ch;padding-bottom:26px}
.v12-it-in .v12-shot{display:none}
.v12-idx-view{position:sticky;top:104px;aspect-ratio:16/11;overflow:hidden;background:#0a0a0b}
.v12-shot{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s ease}
.v12-shot.is-on{opacity:1}
.v12-shot img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.8);transform:scale(1.04);transition:filter 1s ease,transform 6s ease-out}
.v12-shot.is-on img{transform:none}
.v12-idx-view:hover img{filter:none}
.v12-log{position:absolute;left:24px;bottom:24px;box-sizing:border-box;width:min(360px,calc(100% - 48px));padding:6px 18px 8px;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink);font:400 14px/1.4 var(--f)}
html[data-v12] .v12-log .gf-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:9px 0;border-top:1px solid var(--rule);color:var(--ink)}
html[data-v12] .v12-log>:first-child{border-top:0}
html[data-v12] .v12-log .gf-row time{color:var(--mute);font-variant-numeric:tabular-nums}
html[data-v12] .v12-log .gf-row time:empty{display:none}
html[data-v12] .v12-log .gf-row time:empty+span{grid-column:1/3}
html[data-v12] .v12-log .chip2{padding:0;border-radius:0;background:none;font:400 13px/1.3 var(--f);color:var(--mute)}
html[data-v12] .v12-log .chip2.ok{color:var(--ink)}
html[data-v12] .v12-log .bub2{padding:9px 0 10px;border-top:1px solid var(--rule);background:none;color:var(--ink)}
html[data-v12] .v12-log .bub2 small{display:block;margin-bottom:2px;font-size:12.5px;color:var(--mute)}
html[data-v12] .v12-log .mo-en{display:block;font-size:13px;color:var(--mute)}
html[data-v12] .v12-log .gf-big{display:flex;align-items:baseline;gap:12px;padding:8px 0 10px;border:0}
html[data-v12] .v12-log .gf-big b{font:300 40px/1 var(--f);letter-spacing:-.03em}
html[data-v12] .v12-log .gf-big span{color:var(--mute)}

/* eight use cases. Each is a journey on a line: a point of light travels through the steps of that conversation, and each
   step's icon draws itself as the light arrives (v12.js). Without motion or script every journey is simply shown complete. */
.v12-uc-g{display:flex;align-items:center;gap:10px;margin:0;padding:0 0 16px;font:400 19px/1.3 var(--f);letter-spacing:-.01em;color:var(--ink)}
.v12-uc-list+.v12-uc-g{margin-top:clamp(48px,8vh,84px)}
.v12-uc-g svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v12-uc-g span{font-size:15.5px;letter-spacing:0;color:var(--mute)}
.v12-uc-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.v12-uc-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,88px);align-items:start;padding:30px 0 32px;border-top:1px solid var(--rule);transition:border-color .4s ease}
.v12-uc-row:hover{border-top-color:var(--rule-2)}
.v12-uc-text h4{margin:0 0 8px;font:400 clamp(20px,1.7vw,24px)/1.25 var(--f);letter-spacing:-.015em;color:var(--ink)}
.v12-uc-text p{margin:0 0 10px;max-width:46ch;font:400 16px/1.55 var(--f);color:var(--mute);transition:color .4s ease}
.v12-uc-row:hover .v12-uc-text p{color:var(--ink)}
.v12-chs{font:400 14px/1.5 var(--f);color:var(--mute)}
.v12-flow{position:relative;--p:1;--last:160px}
.v12-flow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(calc(var(--n) - 1),minmax(0,1fr)) var(--last)}
.v12-flow-st{display:grid;grid-template-rows:30px 36px auto;justify-items:start;padding-right:14px}
.v12-flow-ico svg{display:block;width:28px;height:28px;margin-left:-8.5px;fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.v12-flow-ico svg *{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .75s var(--io)}
.v12-flow-dot{position:relative;z-index:1;align-self:center;width:11px;height:11px;border-radius:50%;background:var(--ink);transition:background-color .3s ease,box-shadow .3s ease}
.v12-flow-dot::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px var(--ink);opacity:0}
.v12-flow-lab{font:400 14.5px/1.35 var(--f);color:var(--ink);transition:color .5s ease}
.v12-flow-line{position:absolute;left:5.5px;top:48px;width:calc(100% - var(--last));height:1px;background:var(--rule)}
.v12-flow-fill{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p));transition:opacity .35s ease}
.v12-flow-bead{position:absolute;z-index:2;top:50%;left:calc(var(--p)*100%);width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 14px 3px rgba(233,234,236,.55),0 0 3px 1px #fff;opacity:0;transition:opacity .35s ease}
.v12-flow.is-run .v12-flow-bead{opacity:1}
.v12-flow.is-live .v12-flow-st:not(.is-on) .v12-flow-ico svg *{stroke-dashoffset:1;transition:none}
.v12-flow-ico svg{transition:opacity .2s ease}
.v12-flow.is-live .v12-flow-st:not(.is-on) .v12-flow-ico svg{opacity:0;transition:none}   /* round line ends leave a speck at the start of an undrawn path */
.v12-flow.is-live .v12-flow-st:not(.is-on) .v12-flow-dot{background:#000;box-shadow:inset 0 0 0 1px var(--rule-2)}
.v12-flow.is-live .v12-flow-st:not(.is-on) .v12-flow-lab{color:var(--mute)}
.v12-flow.is-live .v12-flow-st.is-on .v12-flow-dot::after{animation:v12-ring .95s var(--out)}
.v12-flow.is-wipe .v12-flow-fill{opacity:0}
@keyframes v12-ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(3.6)}}

/* the tour */
.v12-film{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0a0b}
.v12-film video{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.72);transition:filter 1.2s ease}
.v12-film:hover video{filter:grayscale(.2) brightness(.86)}
.v12-film.is-playing video{filter:none}
.v12-play{all:unset;position:absolute;inset:0;display:grid;place-items:center;cursor:pointer}
.v12-play span{display:inline-flex;align-items:center;height:54px;padding:0 30px;border-radius:999px;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink);font:500 16px/1 var(--f);transition:background-color .4s ease,color .4s ease}
.v12-play:hover span{background:var(--ink);color:#000}
.v12-film.is-playing .v12-play{display:none}

/* the console and compliance */
html[data-v12] .v12-stage .stage{max-width:none!important;width:100%;border-radius:0!important}
.v12-defs{margin:0;border-bottom:1px solid var(--rule)}
.v12-defs div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);column-gap:32px;align-items:baseline;padding:22px 0;border-top:1px solid var(--rule)}
.v12-defs dt{font:300 clamp(21px,1.9vw,27px)/1.2 var(--f);letter-spacing:-.02em;color:var(--ink)}
.v12-defs dd{margin:0;font:400 16px/1.55 var(--f);color:var(--mute)}

/* the close: the hero's own shape again, and a line to pluck */
.v12-end{position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;padding-top:clamp(72px,14vh,180px);padding-bottom:clamp(80px,14vh,170px)}
.v12-end .v12-top{flex:none;padding-top:0}
.v12-end-h{margin:0;max-width:17ch;font:300 clamp(34px,5vw,80px)/1.04 var(--f);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.v12-end .v12-line::before{background:radial-gradient(46% 50% at 24% 50%,rgba(233,234,236,.07),rgba(233,234,236,0) 72%)}
html[data-v12] .sfoot{background:#000}

@media (max-width:900px){
  .v12-hero .v12-under{grid-template-columns:minmax(0,1fr)}
  .v12-talk{order:-1;margin:20px 0 30px}
  .v12-talk-cap{min-height:0}
  .v12-bead{width:60px;height:60px;margin-top:-30px}
  .v12-grid,.v12-idx{grid-template-columns:minmax(0,1fr)}
  .v12-side{position:static;margin-bottom:36px}
  .v12-lang .v12-side{margin-bottom:20px}
  .v12-idx-view{display:none}
  .v12-it-in .v12-shot{display:block;position:relative;opacity:1;margin:0 0 26px}
  .v12-it-in .v12-shot img{aspect-ratio:16/10;height:auto;transform:none}
  .v12-it-in .v12-log{position:static;width:auto;margin-top:0;padding:4px 16px 6px;background:#0a0a0b;backdrop-filter:none}
  .v12-nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .v12-nums div:nth-child(odd){padding-left:0;border-left:0}
  .v12-uc-row{grid-template-columns:minmax(0,1fr);row-gap:24px;padding:26px 0 28px}
  .v12-flow{--last:92px}
  .v12-flow-lab{font-size:12.5px}
  .v12-flow-st{padding-right:10px}
  .v12-defs div{grid-template-columns:minmax(0,1fr);row-gap:4px}
}
@media (max-width:560px){
  .v12-h1{font-size:clamp(33px,9.4vw,44px)}
  .v12-btn{height:52px}
  .v12-step{grid-template-columns:28px minmax(0,1fr);column-gap:16px}
  .v12-steps::before,.v12-steps::after{left:13px}
  .v12-nums div{padding-inline:18px}
  .v12-trust{padding-bottom:22px}
}