/* The dark VoiceOwl homepages, versions 4–10 (thoughts 20, 21). One page template, seven identities: <html data-look>
   sets the accent, the display face, the card shape and, for eclipse, the hero's layout. The one bold element on each
   page is its moving background (v4.js), at the top and again in the closing band. Everything else stays quiet: black
   and graphite, photos in monochrome until you hover them. Loads after site.css, motion.css, home.css and v3.css. */
html:root[data-v4]{
  --o-black:#050506; --o-graphite:#16181c; --o-pewter:#2c3036; --o-smoke:#9aa1ab; --o-plat:#e8eaed;
  --o-accent:#cfae6b; --o-r:24px; --o-r-sm:16px; --o-edge:rgba(255,255,255,.09);
  --o-card:rgba(20,22,26,.72); --o-h1:clamp(46px,7vw,122px); --o-track:-.022em; --o-weight:400;
  --o-page:linear-gradient(180deg,#050506 0%,#0c0d0f 24%,#050506 52%,#0d0e11 78%,#050506 100%);
  --o-ease:cubic-bezier(.16,1,.3,1);
  /* the site's own tokens, so every shared section turns dark without being rewritten */
  --bg:#050506; --surface:#0d0e10; --raised:#14161a; --line:rgba(255,255,255,.09);
  --fg:var(--o-plat); --muted:var(--o-smoke); --faint:#6e747d; --night:#050506; --night-fg:var(--o-plat); --night-muted:var(--o-smoke); --night-line:rgba(255,255,255,.1);
  --accent:var(--o-accent); --accent-ink:var(--o-accent); --tint-c:#0d0e10;
  --vo-blue:var(--o-accent); --vo-gold:var(--o-accent); --vo-teal:var(--o-accent); --vo-red:var(--o-accent); --vo-ink:var(--o-plat); --vo-muted:var(--o-smoke); --vo-navy:#e8eaed;
  --f-display:var(--f-serif);
  background:var(--o-black); color-scheme:dark;
}
/* the seven identities */
html:root[data-look="graphite"]{--f-serif:"Bodoni Moda","Didot",Georgia,serif;--o-track:-.026em}
html:root[data-look="ribbon"]{--f-serif:"Cormorant Garamond","Garamond",Georgia,serif;--o-accent:#d5d9df;--o-weight:300;--o-h1:clamp(52px,8.2vw,142px);--o-track:-.018em;--o-r:8px;--o-r-sm:6px;--o-card:rgba(8,8,10,.74)}
html:root[data-look="smoke"]{--f-serif:"Italiana","Didot",Georgia,serif;--o-accent:#b9c0ca;--o-h1:clamp(50px,7.8vw,132px);--o-track:-.01em;--o-r:18px;--o-r-sm:12px}
html:root[data-look="gradient"]{--f-serif:"Inter Tight","Inter",system-ui,sans-serif;--o-accent:#f2f3f5;--o-weight:300;--o-h1:clamp(42px,6.1vw,104px);--o-track:-.038em;--o-r:28px;--o-r-sm:18px;--o-card:rgba(30,32,37,.62);
  --o-page:linear-gradient(180deg,#050506 0%,#1a1c20 16%,#08080a 34%,#202226 52%,#07070a 70%,#1b1d21 86%,#050506 100%)}
html:root[data-look="marble"]{--f-serif:"Playfair Display",Georgia,serif;--o-accent:#c8a24a;--o-h1:clamp(44px,6.7vw,116px);--o-track:-.016em;--o-r:2px;--o-r-sm:2px;--o-edge:rgba(200,162,74,.28);--o-card:rgba(12,12,14,.82)}
html:root[data-look="eclipse"]{--f-serif:"Jost","Futura",system-ui,sans-serif;--o-accent:#f0e3c6;--o-weight:300;--o-h1:min(3.9vw,6.6vh);--o-track:-.012em;--o-r:36px;--o-r-sm:22px}
html:root[data-look="vinyl"]{--f-serif:"Instrument Serif",Georgia,serif;--o-accent:#d8c3a0;--o-h1:clamp(50px,7.4vw,128px);--o-track:-.018em;--o-r:14px;--o-r-sm:10px}
html[data-v4] body{background:var(--o-black);color:var(--o-plat)}
html[data-v4] main{background:var(--o-page);margin-inline:-20px;padding-inline:20px}
html[data-v4] .mo-progress{height:1px;background:var(--o-accent)}

/* ── header: the light logo always; clear over the hero, dark glass once scrolled ─────────────────────────────── */
html[data-v4] header.nav{background:rgba(5,5,6,.72);box-shadow:0 1px 0 rgba(255,255,255,.06)}
html[data-v4] header.nav.mo-over{background:transparent;box-shadow:none}
html[data-v4] header.nav.mo-over.mo-glass{background:rgba(10,11,13,.5);-webkit-backdrop-filter:saturate(1.2) blur(16px);backdrop-filter:saturate(1.2) blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
html[data-v4] .logo img{background:none;padding:0}
html[data-v4] header.nav .logo .mo-lg-d{display:none}
html[data-v4] header.nav .logo .mo-lg-l{display:block}
html[data-v4] header.nav .nl,html[data-v4] header.nav .signin,html[data-v4] header.nav .burger{color:rgba(232,234,237,.82)}
html[data-v4] header.nav .nv:hover .nl{color:#fff;background:rgba(255,255,255,.08)}
html[data-v4] header.nav .btn-dark,html[data-v4] .pill-btn{background:var(--o-plat);color:#0a0b0d}
html[data-v4] .pill-btn:hover{background:#fff}
/* a system in dark mode: home.css's rules for it outrank the two above (a navy header, and white text on a white button) */
html:root[data-v4] header.nav.mo-over.mo-glass{background:rgba(10,11,13,.5);box-shadow:0 1px 0 rgba(255,255,255,.06)}
html:root[data-v4] header.nav.mo-over .btn-dark{background:var(--o-plat);color:#0a0b0d}

/* ── the hero ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.v4-hero{position:relative;isolation:isolate;height:100vh;height:100svh;min-height:660px;margin:-64px -20px 0;overflow:hidden;color:var(--o-plat);
  background:radial-gradient(70% 65% at 70% 36%,#25282e 0%,#121418 46%,#050506 82%)}   /* before the first frame, and without WebGL */
.v4-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-3;display:block;opacity:0;transition:opacity 2s ease}
.v4-bg.is-on{opacity:1}
.v4-nogl .v4-bg{display:none}
.v4-shade{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,5,6,.92) 0%,rgba(5,5,6,.5) 26%,rgba(5,5,6,0) 52%),
             linear-gradient(90deg,rgba(5,5,6,.62) 0%,rgba(5,5,6,.34) 36%,rgba(5,5,6,0) 60%),
             linear-gradient(180deg,rgba(5,5,6,.55) 0%,rgba(5,5,6,0) 16%)}
.v4-grain{position:absolute;inset:-60px;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:v4-grain 1.2s steps(6) infinite}
@keyframes v4-grain{0%{transform:translate(0,0)}20%{transform:translate(-22px,14px)}40%{transform:translate(18px,-26px)}60%{transform:translate(-30px,-8px)}80%{transform:translate(26px,20px)}100%{transform:translate(0,0)}}

.v4-in{position:absolute;left:0;right:0;bottom:0;max-width:1360px;margin:0 auto;padding:0 40px 34px}
.v4-h1{margin:0;font-family:var(--f-serif);font-weight:var(--o-weight);font-optical-sizing:auto;font-size:var(--o-h1);line-height:1.02;letter-spacing:var(--o-track);font-kerning:normal;color:var(--o-plat)}
.v4-mask{display:block;overflow:hidden;padding:0 .04em .16em 0;margin-bottom:-.14em}
.v4-mask>*{display:block}
.v4-rot{display:grid}
.v4-nb{white-space:nowrap}
.v4-rot>span{grid-area:1/1;opacity:0;filter:blur(14px);transform:translateY(.05em);transition:opacity .8s ease,filter .8s ease,transform .9s var(--o-ease)}
.v4-rot>span.is-on{opacity:1;filter:blur(0);transform:none}
.v4-rot>span.is-off{opacity:0;filter:blur(14px);transform:translateY(-.03em)}
.v4-sub{margin:30px 0 0;max-width:54ch;font:400 clamp(16px,1.2vw,18.5px)/1.62 var(--f-sans);color:rgba(232,234,237,.74)}
.v4-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:34px}
.v4-btn{position:relative;display:inline-flex;align-items:center;height:54px;padding:0 30px;border-radius:999px;overflow:hidden;
  background:var(--o-plat);color:#0a0b0d;font:500 15.5px/1 var(--f-sans);text-decoration:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 20px 40px -24px rgba(0,0,0,.9)}
.v4-btn span{position:relative;z-index:1}
.v4-btn::after{content:"";position:absolute;inset:0;transform:translateX(-110%);transition:transform 1s var(--o-ease);
  background:linear-gradient(105deg,transparent 25%,color-mix(in srgb,var(--o-accent) 70%,transparent) 50%,transparent 75%)}
.v4-btn:hover::after,.v4-btn:focus-visible::after{transform:translateX(110%)}
.v4-btn:focus-visible,.v4-link:focus-visible{outline:2px solid var(--o-accent);outline-offset:4px}
.v4-link{color:var(--o-plat);font:500 15.5px/1 var(--f-sans);text-decoration:none;padding:8px 0 6px;
  background:linear-gradient(var(--o-accent),var(--o-accent)) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--o-ease)}
.v4-link:hover{background-size:35% 1px}
.v4-trust{display:flex;align-items:center;gap:18px 40px;flex-wrap:wrap;margin-top:clamp(36px,6.5vh,68px);padding-top:22px;
  border-top:1px solid transparent;border-image:linear-gradient(90deg,var(--o-accent),rgba(201,206,214,.18) 45%,transparent 85%) 1}
.v4-trust p{margin:0;max-width:24ch;font:400 13.5px/1.45 var(--f-sans);color:var(--o-smoke)}
.v4-logos{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px}
@media (min-width:1100px){.v4-trust{flex-wrap:nowrap}.v4-logos{flex:1;min-width:0;justify-content:space-between}}
html[data-v4] .v4-logos .clogo{height:22px;max-height:22px;width:auto;max-width:112px;filter:none;opacity:.58;transition:opacity .4s ease}
html[data-v4] .v4-logos .clogo:hover{opacity:.9}
.v4-logos span{font:500 14px/1 var(--f-sans);color:rgba(232,234,237,.55);white-space:nowrap}
/* the opening */
.v4-js .v4-mask>*{transform:translateY(108%);transition:transform 1.4s var(--o-ease)}
.v4-js .v4-mask+.v4-mask>*{transition-delay:.12s}
.v4-js .v4-sub,.v4-js .v4-cta,.v4-js .v4-trust{opacity:0;transform:translateY(14px);transition:opacity 1.2s ease,transform 1.2s var(--o-ease)}
.v4-js .v4-sub{transition-delay:.45s}.v4-js .v4-cta{transition-delay:.6s}.v4-js .v4-trust{transition-delay:.85s}
.v4-ready .v4-mask>*,.v4-ready .v4-sub,.v4-ready .v4-cta,.v4-ready .v4-trust{transform:none;opacity:1}

/* eclipse: the copy sits inside the disc, the logos under it */
html[data-look="eclipse"] .v4-shade{background:linear-gradient(0deg,rgba(5,5,6,.9) 0%,rgba(5,5,6,0) 16%),linear-gradient(180deg,rgba(5,5,6,.5) 0%,rgba(5,5,6,0) 12%)}
html[data-look="eclipse"] .v4-rot{justify-items:center}
@media (min-width:761px){
  html[data-look="eclipse"] .v4-in{inset:64px 0 0;max-width:none;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 40px 26px}
  html[data-look="eclipse"] .v4-copy{margin-block:auto}
  html[data-look="eclipse"] .v4-sub{max-width:44ch;margin:18px auto 0;font-size:min(16px,2.2vh)}
  html[data-look="eclipse"] .v4-cta{justify-content:center;margin-top:24px}
  html[data-look="eclipse"] .v4-trust{width:100%;max-width:1280px;margin-top:0;justify-content:center;border:0;padding-top:0}
  html[data-look="eclipse"] .v4-trust p{max-width:18ch;text-align:left}
}

/* ── the shared sections, dark ────────────────────────────────────────────────────────────────────────────────── */
html[data-v4] .hs-kick{font:500 14.5px/1.3 var(--f-sans);letter-spacing:0;text-transform:none;color:var(--o-accent)}
html[data-v4] .h44{font-weight:var(--o-weight);letter-spacing:var(--o-track);font-size:clamp(34px,4.2vw,64px);line-height:1.08}
html[data-look="eclipse"] .hs-head{margin-inline:auto;text-align:center}
html[data-v4] .hs-panel{background:rgba(14,15,18,.82);color:var(--o-plat);border:1px solid var(--o-edge);border-radius:var(--o-r-sm);box-shadow:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html[data-v4] .gf-row{color:var(--o-plat)}
html[data-v4] .gf-row time,html[data-v4] .gf-big span{color:var(--o-smoke)}
html[data-v4] .gf-big{border-bottom-color:var(--o-edge)}
html[data-v4] .gf-big b{font-weight:var(--o-weight)}
html[data-v4] .gf-vis .chip2{background:rgba(255,255,255,.08);color:var(--o-plat)}
html[data-v4] .gf-vis .chip2.ok{background:color-mix(in srgb,var(--o-accent) 20%,transparent);color:var(--o-accent)}
html[data-v4] .gf-vis .chip2.warn,html[data-v4] .gf-vis .chip2.red{background:rgba(255,255,255,.05);color:var(--o-smoke)}
html[data-v4] .gf-vis .bub2 small{color:var(--o-smoke)}
html[data-v4] .gf-vis .bub2.ai{background:rgba(255,255,255,.08);color:var(--o-plat)}
html[data-v4] .gf-vis .bub2.me{background:var(--o-plat);color:#0a0b0d}
html[data-v4] .gf-vis .bub2.me small{color:#4a4f57}
/* grow: a monochrome gallery; hover a photo for its colour */
html[data-v4] .gf2-n,html[data-v4] .gf2-count{display:none}
html[data-v4] .gf2-item h3{font-weight:var(--o-weight);letter-spacing:var(--o-track);margin-top:0;font-size:clamp(28px,3vw,46px)}
html[data-v4] .gf2-kpi{padding:0;border-radius:0;background:none;color:var(--o-accent);font:500 14px/1.3 var(--f-sans);letter-spacing:0}
html[data-v4] .gf2-frame{background:#0b0c0e;border-radius:var(--o-r);box-shadow:0 0 0 1px var(--o-edge)}
html[data-v4] .gf2-slide img,html[data-v4] .uc-card img{filter:grayscale(1) contrast(1.06) brightness(.84);transition:transform 6s ease-out,filter .9s ease}
html[data-v4] .gf2-slide:hover img,html[data-v4] .uc-card:hover img{filter:none}
html[data-v4] .gf2-frame .gf2-slide::after{background:linear-gradient(180deg,rgba(5,5,6,0) 35%,rgba(5,5,6,.72))}
html[data-v4] .gf2-inline .gf2-slide{background:#0b0c0e;border-radius:var(--o-r)}
html[data-v4] .gf2-prog{background:rgba(255,255,255,.14);height:2px}
/* the timeline stays at night: a silver line, the accent at each node */
html[data-v4] .tl{--tl-a:#050506;--tl-b:#0a0a0c;--tl-c:#101114}   /* phones: no script sets these */
html[data-v4] .tl-pin{color:var(--o-plat)}
html[data-v4] .tl-sky i:nth-child(2){opacity:calc(var(--tl-stars,1)*.5)}
html[data-v4] .tl-sky::after{background:radial-gradient(900px 460px at 80% 108%,color-mix(in srgb,var(--o-accent) 26%,transparent),transparent 70%)}
html[data-v4] .tl-svg .node{fill:#08090b}
html[data-v4] .tl-svg .lbl{font-size:12.5px;letter-spacing:0;text-transform:none}
html[data-v4] .tl-svg .chip rect{stroke:rgba(255,255,255,.2)}
html[data-v4] .tl-svg .chip text{font-weight:500;fill:var(--o-plat)}
html[data-v4] .tl-svg .head{filter:drop-shadow(0 0 8px var(--o-accent))}
html[data-v4] .tl-svg .halo{fill:color-mix(in srgb,var(--o-accent) 25%,transparent)}
html[data-v4] .tl-live:not(.is-day) .tl-st{text-shadow:none}
html[data-v4] .tl-list{border-left-color:color-mix(in srgb,var(--o-accent) 60%,transparent)}
html[data-v4] .tl-n{font-size:13.5px;letter-spacing:0;text-transform:none}
html[data-v4] .tl-st h3{font-weight:var(--o-weight);letter-spacing:var(--o-track)}
/* band and results */
html[data-v4] .v3-band-track{font-weight:var(--o-weight);letter-spacing:var(--o-track)}
html[data-v4] .v3-band-track span{-webkit-text-stroke-width:1px}
html[data-v4] .v3-band-track span:hover{color:var(--o-plat);-webkit-text-stroke-color:var(--o-plat)}
html[data-v4] .r4 strong{font-family:var(--f-serif);font-weight:var(--o-weight);letter-spacing:var(--o-track);font-variant-numeric:lining-nums tabular-nums;color:var(--o-plat)}
/* use cases */
html[data-v4] .uc-orb{background:radial-gradient(circle,color-mix(in srgb,var(--o-accent) 14%,transparent),transparent 62%)}
html[data-v4] .uc-card{background:#0d0e11;color:var(--o-plat);border:1px solid var(--o-edge);border-radius:var(--o-r);box-shadow:0 40px 80px -40px #000}
html[data-v4] .uc-card h3{font-family:var(--f-serif);font-weight:var(--o-weight);letter-spacing:var(--o-track);font-size:27px}
html[data-v4] .uc-card p{color:var(--o-smoke)}
html[data-v4] .uc-dir,html[data-v4] .uc-dir.in{padding:0;border-radius:0;background:none;color:var(--o-accent);font:500 13.5px/1.2 var(--f-sans);letter-spacing:0;text-transform:none}
html[data-v4] .uc-ch span{border-color:var(--o-edge);color:var(--o-smoke);border-radius:var(--o-r-sm)}
/* the video and console */
html[data-v4] .vid-frame{background:#0b0c0e;border-radius:var(--o-r);box-shadow:0 0 0 1px var(--o-edge)}
html[data-v4] .vid-play{background:linear-gradient(180deg,rgba(5,5,6,0) 40%,rgba(5,5,6,.55));color:#0a0b0d}
html[data-v4] .vid-play svg{color:#0a0b0d}
html[data-v4] .vid-play:focus-visible span{outline-color:var(--o-accent)}
html[data-v4] .stage{box-shadow:0 0 0 1px var(--o-edge),0 50px 90px -50px #000}
html[data-v4] [data-hs="console"] .scn{filter:invert(.93) hue-rotate(180deg) saturate(.45)}
html[data-v4] .vid-frame video{filter:grayscale(1) brightness(.82);transition:filter .9s ease}
html[data-v4] .vid-frame:hover video,html[data-v4] .vid-frame.is-playing video{filter:none}
html[data-v4] .grey{color:var(--o-smoke)}
/* the closing band: the hero's background returns */
.v4-close{position:relative;isolation:isolate;overflow:hidden;margin-inline:-20px;padding-inline:20px;background:radial-gradient(70% 90% at 50% 30%,#1b1d21 0%,#050506 80%)}
html[data-v4] section.v4-close{padding-block:clamp(120px,15vw,210px)}
html[data-v4] .mo-cta{background:none;border-radius:0;box-shadow:none;overflow:visible;padding:0!important;max-width:1024px}
html[data-v4] .mo-cta p.grey{color:var(--o-smoke)}
html[data-v4] .mo-cta .pill-btn{background:var(--o-plat);color:#0a0b0d}
.v4-close .v4-shade{background:radial-gradient(62% 80% at 50% 58%,rgba(5,5,6,.62),rgba(5,5,6,0) 100%),linear-gradient(0deg,#050506 0%,rgba(5,5,6,0) 22%),linear-gradient(180deg,#050506 0%,rgba(5,5,6,0) 22%)}
html[data-look="eclipse"] .v4-close .v4-shade{background:linear-gradient(0deg,#050506 0%,rgba(5,5,6,0) 22%)}
html[data-v4] .sfoot{background:#050506;border-top:1px solid var(--line)}

/* marble: gold hairlines instead of panels */
html[data-look="marble"] .gf2-frame,html[data-look="marble"] .vid-frame{box-shadow:0 0 0 1px var(--o-edge),0 0 0 7px #08080a,0 0 0 8px var(--o-edge)}
/* ribbon: outlines only */
html[data-look="ribbon"] .uc-card{background:#070709}

/* ── phones ───────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:760px){
  .v4-hero{min-height:720px}
  .v4-in{padding:0 20px 26px}
  .v4-h1{font-size:min(9.2vw,46px)}
  html[data-look="ribbon"] .v4-h1{font-size:min(11vw,52px)}
  html[data-look="smoke"] .v4-h1{font-size:min(10.6vw,50px)}
  html[data-look="gradient"] .v4-h1{font-size:min(8vw,40px)}
  html[data-look="marble"] .v4-h1{font-size:min(8.2vw,42px)}
  html[data-look="eclipse"] .v4-h1{font-size:min(7.4vw,38px)}
  html[data-look="vinyl"] .v4-h1{font-size:min(10vw,50px)}
  html[data-look="eclipse"] .v4-in{text-align:center}
  html[data-look="eclipse"] .v4-sub{margin-inline:auto}
  html[data-look="eclipse"] .v4-cta,html[data-look="eclipse"] .v4-trust,html[data-look="eclipse"] .v4-logos{justify-content:center}
  .v4-sub{margin-top:20px}
  .v4-cta{margin-top:26px}
  .v4-trust{gap:14px 24px;margin-top:30px}
  .v4-trust p{max-width:none}
  .v4-logos{gap:12px 22px}
  html[data-v4] .v4-logos .clogo{height:20px;max-height:20px}
  .v4-logos>:nth-child(n+7){display:none}
}
@media (prefers-reduced-motion:reduce){
  .v4-grain{animation:none}
  .v4-rot>span,.v4-js .v4-mask>*,.v4-js .v4-sub,.v4-js .v4-cta,.v4-js .v4-trust{transition:none}
}