/* E:Voice page, direction A "hero continuation" (2026-10-16). Black, greys and white; colour only as light; hairlines; the
   /aerisOS type (Inter, mono eyebrows). The hero keeps its own styles (assets/evoice-hope/page.css); everything here is scoped
   to the new parts. Default = the still page in flow (no JavaScript, reduced motion, no WebGL); html[data-mode="film"] = the
   film that owns scrolling until it releases the page to native scrolling for Access. */
@font-face { font-family: Inter; src: url(/assets/charles-page/assets/InterVariable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ev-bg: #030405; --ev-ink: #f3f1ec; --ev-muted: #b6bbbe; --ev-dim: #899095; --ev-rule: rgba(243, 241, 236, .10); --ev-rule-strong: rgba(243, 241, 236, .22);
  --lime: #9be11e; --cyan: #3fe0c8; --orange: #a85f00; --amber: #e3a24a; --acc: var(--cyan);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(20px, 5vw, 88px); --ease: cubic-bezier(.2, .8, .2, 1);
  --pool: 24cqh;                         /* the water band under every section (the film reads it from .pool-probe) */
}
html { background: var(--ev-bg); }
body { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ shared type for the new parts */
.sec, .after, .index, .skip-install, .cue { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-synthesis: none; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; color: var(--ev-ink); }
.sec h2, .access h2 { margin: 0; font-weight: 400; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; color: var(--ev-ink); }
.sec .eyebrow, .access .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ev-dim); }
.eyebrow .n { color: var(--acc); }
.sec .lede, .sec .sub, .access .lede { margin: 16px 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; color: var(--ev-muted); letter-spacing: -.01em; }
.sec p { color: var(--ev-muted); }
.facts { margin: 22px 0 0; padding: 0; border-top: 1px solid var(--ev-rule); }
.facts > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--ev-rule); }
.facts dt { font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ev-dim); padding-top: 2px; }
.facts dd { margin: 0; font-size: clamp(13px, .95vw, 14.5px); line-height: 1.5; color: var(--ev-muted); }
.ctl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ev-muted); font: 500 14px/1 Inter, sans-serif; text-decoration: none; cursor: pointer; transition: color .12s; }
.ctl:hover { color: var(--ev-ink); text-decoration: none; }
.ctl-acc { color: var(--ev-ink); }
.ctl-acc:hover { color: var(--cyan); }
.sec :focus-visible, .after :focus-visible, .index :focus-visible, .skip-install:focus-visible, .phone :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.more { margin: 14px 0 0; }

/* ------------------------------------------------------------------ the still page (default): everything in flow */
.page { position: relative; }
.stage { position: relative; }
#gl { display: none; }
.sec { position: relative; padding: clamp(56px, 9vw, 120px) var(--gutter); max-width: 1280px; margin: 0 auto; border-top: 1px solid var(--ev-rule); }
.sec-two { display: grid; grid-template-columns: minmax(280px, 44%) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 72px); align-items: center; }
.sec-two .copy { max-width: 560px; }
.sec-two h2 { font-size: clamp(28px, 3vw, 44px); }
.fig { position: relative; width: 100%; min-height: 300px; height: 46vh; }
.fig svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sec-demo { display: grid; grid-template-columns: minmax(260px, 40%) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 72px); align-items: center; min-height: 90vh; }
.copy-demo h2 { font-size: clamp(26px, 2.6vw, 38px); }
.copy-demo .note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ev-dim); max-width: 420px; }
.status { display: inline-flex; align-items: center; gap: 9px; }
.status-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgba(63, 224, 200, .6); }
html[data-demo="loading"] .status-dot { animation: ev-pulse 1.2s ease-in-out infinite; }
@keyframes ev-pulse { 50% { opacity: .3 } }
.dock { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-top: 22px; }
.phone { position: relative; justify-self: center; width: min(360px, 86vw); aspect-ratio: 390 / 844; border-radius: 44px; padding: 10px; background: #050607; box-shadow: 0 0 0 1px rgba(243, 241, 236, .16), -2px 0 18px -6px rgba(155, 225, 30, .45), 2px 0 18px -6px rgba(168, 95, 0, .6), 0 24px 80px -20px rgba(63, 224, 200, .35); }
.screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; overflow: clip; background: #000; }
.screen iframe { position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0; display: block; background: #000; transform-origin: 0 0; }
.shield { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 0 18px; border: 0; color: var(--ev-ink); font: 500 14px/1.3 Inter, sans-serif; text-align: center; cursor: pointer;
  /* the sample conversation plays under a scrim; the cue sits in its own pool of dark, so no app text runs through it */
  background: radial-gradient(closest-side, rgba(3, 4, 5, .97), rgba(3, 4, 5, .93) 60%, rgba(3, 4, 5, 0)) center / min(96%, 320px) 250px no-repeat, rgba(3, 4, 5, .66); }
.shield-l { max-width: 15em; text-wrap: balance; text-shadow: 0 0 12px #030405, 0 0 4px #030405; }
.shield[hidden] { display: none; }
.shield .ring { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(63, 224, 200, .8); box-shadow: 0 0 22px rgba(63, 224, 200, .35), inset 0 0 14px rgba(63, 224, 200, .25); animation: ev-ring 2.4s var(--ease) infinite; }
@keyframes ev-ring { 0% { transform: scale(.82); opacity: .5 } 50% { transform: scale(1); opacity: 1 } 100% { transform: scale(.82); opacity: .5 } }
.close-full { position: absolute; z-index: 3; right: 12px; top: 4px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ev-rule-strong); border-radius: 6px; background: rgba(3, 4, 5, .86); color: var(--ev-ink); font: 500 14px/1 Inter, sans-serif; cursor: pointer; }
.close-full[hidden] { display: none; }
/* full screen on a phone held sideways: the portrait app at full height on black, and why it is narrow */
.turn-hint { display: none; }
html[data-demofull="turn"] .phone.full .turn-hint { display: block; position: absolute; z-index: 2; left: calc(50% + var(--fw, 180px) / 2 + 28px); right: 16px; top: 50%; max-width: 15em; margin: 0; transform: translateY(-50%); color: var(--ev-muted); font: 400 14px/1.45 Inter, sans-serif; letter-spacing: -.01em; }
/* the bezel and rim belong to the page (demo.js): strips over them, a little past the rim, under nothing but the shield */
.bezel { display: none; }
html[data-mode="film"] .phone.live:not(.full) .bezel { display: block; }
.bezel i { position: absolute; z-index: 3; pointer-events: auto; }
.bezel i:nth-child(1) { left: -10px; top: -10px; bottom: -10px; width: calc(var(--bez, 9px) + 10px); }
.bezel i:nth-child(2) { right: -10px; top: -10px; bottom: -10px; width: calc(var(--bez, 9px) + 10px); }
.bezel i:nth-child(3) { left: 0; right: 0; top: -10px; height: calc(var(--bez, 9px) + 10px); }
.bezel i:nth-child(4) { left: 0; right: 0; bottom: -10px; height: calc(var(--bez, 9px) + 10px); }
.cue, .index, .skip-install, .loader, .fps { display: none; }
@media (max-width: 860px) {
  .sec-two, .sec-demo { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .fig { height: 300px; }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* the still page's illustrations: drawn, not moving */
.fig .ln { fill: none; stroke: var(--ev-rule-strong); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.fig .acc { stroke: var(--acc); }
.fig .soft { stroke: var(--ev-rule); }
.fig .ink { stroke: rgba(243, 241, 236, .55); }
.fig .lbl { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; fill: var(--ev-muted); }
.fig .lbl.dim { fill: var(--ev-dim); letter-spacing: .06em; text-transform: none; }
.fig .lbl.hot { fill: var(--acc); }
.fig .lbl.ink { fill: var(--ev-ink); stroke: none; }
.fig .val { font: 500 11px/1 var(--mono); letter-spacing: .04em; fill: var(--ev-ink); }
.fig .dot { fill: var(--acc); }
.fig .dot.dim { fill: var(--ev-dim); }
.fig .face { filter: grayscale(1) contrast(1.05) brightness(.82); transition: filter .5s var(--ease); }
.fig .face.hot { filter: none; }
.fig .card { fill: rgba(243, 241, 236, .025); stroke: var(--ev-rule-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fig .card.hot { stroke: rgba(63, 224, 200, .55); }
.fig .fill { fill: var(--acc); }
.fig .dash { stroke-dasharray: 3 4; }

/* ------------------------------------------------------------------ the film */
html[data-mode="film"][data-scroll="film"], html[data-mode="film"][data-scroll="film"] body { overflow: hidden; height: 100%; overscroll-behavior: none; }
html[data-mode="film"][data-scroll="film"] .page { position: fixed; inset: var(--hdr, 0px) 0 0 0; touch-action: none; will-change: transform; }
html[data-mode="film"] .stage { height: calc(100vh - var(--hdr, 0px)); height: calc(100svh - var(--hdr, 0px)); overflow: hidden; overflow: clip; background: var(--ev-bg); z-index: 1; container-type: size; }
html[data-mode="film"][data-scroll="film"] .stage { height: 100%; }
/* the hero fills the stage exactly (its own page.css sizes it to the viewport minus the header) */
html[data-mode="film"] .stage > .story { position: absolute; inset: 0; z-index: 1; height: 100% !important; }
html[data-mode="film"] .stage > .story .story-stage { height: 100% !important; min-height: 0 !important; }
html[data-mode="film"] .stage > .story-result { display: none; }
html[data-mode="film"]:not([data-phase="hero"]) .stage > .story { pointer-events: none; }
html[data-mode="film"]:not([data-phase="hero"]) .stage > .story :is(.hero-copy, .story-controls, .bubbles) { visibility: hidden; }
html[data-mode="film"] #gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: var(--glo, 0); }

html[data-mode="film"] .sec { position: absolute; inset: 0; z-index: 5; max-width: none; margin: 0; border: 0; padding: 0 var(--gutter); opacity: var(--o, 0); pointer-events: none; }
html[data-mode="film"] .sec.off { visibility: hidden; }
html[data-mode="film"] .sec > * { transform: translate3d(0, var(--y, 0px), 0); }
html[data-mode="film"] .sec a, html[data-mode="film"] .sec button { pointer-events: auto; }
html[data-mode="film"] .sec-two { grid-template-columns: minmax(280px, 40%) minmax(0, 1fr); align-items: center; padding-top: 40px; padding-right: calc(var(--gutter) + 44px); padding-bottom: calc(var(--pool) + 8px); }
html[data-mode="film"] .sec-two h2 { font-size: clamp(26px, 2.7vw, 42px); }
html[data-mode="film"] .sec-two .lede { font-size: clamp(14px, 1.12vw, 16.5px); line-height: 1.5; }
html[data-mode="film"] .fig { height: min(calc(100cqh - var(--pool) - 80px), 600px); min-height: 0; align-self: center; }
.pool-probe { position: absolute; left: 0; right: 0; top: calc(100% - var(--pool)); height: 0; pointer-events: none; visibility: hidden; }

/* the demo: copy on the left, the phone standing in the pool */
html[data-mode="film"] .sec-demo { display: block; padding: 0; min-height: 0; }
html[data-mode="film"] .copy-demo { position: absolute; left: var(--gutter); width: min(34cqw, 440px); top: 50%; transform: translate3d(0, calc(-50% - var(--pool) / 2 + var(--y, 0px)), 0); }
html[data-mode="film"] .phone {
  --bez: clamp(7px, 1.1cqh, 11px);
  --sh: min(calc(100cqh - var(--pool) * .62 - 56px), 820px);
  --sw: calc(var(--sh) * 390 / 844);
  position: absolute; z-index: 1; padding: 0; background: none; box-shadow: none; border-radius: 0;
  width: calc(var(--sw) + 2 * var(--bez)); height: calc(var(--sh) + 2 * var(--bez)); aspect-ratio: auto;
  left: calc(50% + min(14cqw, 200px) - (var(--sw) + 2 * var(--bez)) / 2); bottom: calc(var(--pool) * .62); transform: none;
}
html[data-mode="film"] .screen { position: absolute; inset: var(--bez); width: auto; height: auto; border-radius: calc(var(--sw) * .085); opacity: var(--scr, 0); clip-path: inset(calc((1 - var(--scrc, 1)) * 50%) 0 calc((1 - var(--scrc, 1)) * 50%) 0 round calc(var(--sw) * .085)); background: #000; }
/* full screen: the film's .page (fixed under the header, will-change: transform) is the containing block, so 0/100% is the viewport under the header */
html[data-mode="film"] .phone.full { position: fixed; z-index: 60; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 100% !important; transform: none !important; background: #000; }
html:not([data-mode="film"]) .phone.full { position: fixed; z-index: 60; top: var(--hdr, 0px); left: 0; width: 100vw; height: calc(100vh - var(--hdr, 0px)); height: calc(100dvh - var(--hdr, 0px)); aspect-ratio: auto; padding: 0; border-radius: 0; box-shadow: none; background: #000; }
html:not([data-mode="film"]) .phone.full .screen { border-radius: 0; }
html[data-mode="film"] .phone.full .screen { inset: 0; border-radius: 0; opacity: 1; clip-path: none; }
html[data-mode="film"] .sec-demo .dock { margin-top: 26px; }
@media (max-width: 860px), (orientation: portrait) {
  :root { --pool: 15cqh; }
  html[data-mode="film"] .sec-two { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 38%) minmax(0, 1fr); row-gap: 10px; align-items: start; padding-top: 56px; padding-bottom: calc(var(--pool) + 4px); }
  html[data-mode="film"] .sec-two .fig { grid-row: 1; height: 100%; align-self: stretch; }
  html[data-mode="film"] .sec-two .copy { grid-row: 2; align-self: center; }
  html[data-mode="film"] .sec-two h2 { font-size: clamp(23px, 6.2vw, 32px); }
  html[data-mode="film"] .sec-two .lede { font-size: 14px; margin-top: 10px; }
  html[data-mode="film"] .sec .eyebrow { margin-bottom: 10px; }
  html[data-mode="film"] .facts { margin-top: 12px; }
  html[data-mode="film"] .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 7px 0; }
  html[data-mode="film"] .facts dd { font-size: 13px; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  html[data-mode="film"] .more { display: none; }
  /* the demo on a portrait phone: one line of copy at the top, the phone as tall as it can stand, the controls on the water */
  html[data-mode="film"] .copy-demo { left: 20px; right: 20px; width: auto; top: 14px; transform: translate3d(0, var(--y, 0px), 0); }
  html[data-mode="film"] .copy-demo .eyebrow, html[data-mode="film"] .copy-demo .note, html[data-mode="film"] .copy-demo .sub { display: none; }
  html[data-mode="film"] .copy-demo h2 { font-size: 21px; }
  html[data-mode="film"] .copy-demo .sub { margin-top: 4px; font-size: 12.5px; }
  html[data-mode="film"] .phone { --sh: min(calc(100cqh - var(--pool) * .55 - 84px), calc((100cqw - 44px) * 844 / 390)); left: calc(50% - (var(--sw) + 2 * var(--bez)) / 2); bottom: calc(var(--pool) * .55); }
  /* the controls stand on the water under the phone (the copy block is their containing block: it sits 14 px from the stage top) */
  html[data-mode="film"] .sec-demo .dock { position: absolute; left: 0; right: 0; top: calc(100cqh - 14px - var(--pool) * .55); height: calc(var(--pool) * .55); margin: 0; justify-content: space-between; gap: 0 10px; flex-wrap: nowrap; }
  html[data-mode="film"] .sec-demo .dock .ctl { font-size: 13px; }
}
@media (max-height: 920px) and (orientation: portrait) { html[data-mode="film"] .facts > div:nth-child(3) { display: none; } }

@media (max-height: 520px) and (orientation: landscape) {
  :root { --pool: 16cqh; }
  html[data-mode="film"] .sec-two { grid-template-columns: minmax(250px, 48%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; padding-top: 40px; padding-bottom: calc(var(--pool) + 2px); column-gap: 24px; }
  html[data-mode="film"] .sec-two .copy { grid-row: 1; grid-column: 1; align-self: center; }
  html[data-mode="film"] .sec-two .fig { grid-row: 1; grid-column: 2; align-self: center; }
  html[data-mode="film"] .sec-two h2 { font-size: 21px; }
  html[data-mode="film"] .sec-two .lede { font-size: 13px; margin-top: 6px; line-height: 1.4; }
  html[data-mode="film"] .facts { margin-top: 8px; }
  html[data-mode="film"] .facts > div { padding: 4px 0; grid-template-columns: 7.5em minmax(0, 1fr); }
  html[data-mode="film"] .facts > div:nth-child(3) { display: none; }
  html[data-mode="film"] .facts dd { font-size: 11.5px; line-height: 1.35; display: block; -webkit-line-clamp: none; overflow: visible; }
  html[data-mode="film"] .facts dt { font-size: 10px; }
  html[data-mode="film"] .sec .eyebrow { margin-bottom: 6px; }
  html[data-mode="film"] .fig { height: calc(100cqh - var(--pool) - 48px); }
  html[data-mode="film"] .more { display: none; }
  html[data-mode="film"] .copy-demo { width: 40cqw; }
  html[data-mode="film"] .copy-demo .note { display: none; }
  html[data-mode="film"] .copy-demo h2 { font-size: 20px; }
  html[data-mode="film"] .sec-demo .dock { margin-top: 10px; gap: 0 18px; }
  html[data-mode="film"] .sec-demo .dock .ctl { font-size: 12.5px; min-height: 40px; }
  html[data-mode="film"] .phone { --sh: calc(100cqh - var(--pool) * .55 - 16px); left: calc(70cqw - (var(--sw) + 2 * var(--bez)) / 2); bottom: calc(var(--pool) * .55); }
}
/* a short landscape stage (a phone on its side under the site header): whole sentences, so one definition row instead of two */
@container (max-height: 340px) { html[data-mode="film"] .sec-two .facts > div:nth-child(n+2) { display: none; } }
/* a short portrait stage (a small phone): whole sentences too, so one definition row */
@container (max-height: 700px) and (orientation: portrait) { html[data-mode="film"] .sec-two .facts > div:nth-child(n+2) { display: none; } }
html[data-mode="film"] .phone:not(.live) .screen iframe { pointer-events: none; }
/* the section is pointer-transparent; the live demo is not: once entered a finger on it belongs to it */
html[data-mode="film"] .phone.live .screen, html[data-mode="film"] .phone.live .screen iframe, html[data-mode="film"] .phone.full, html[data-mode="film"] .phone .close-full { pointer-events: auto; }
html[data-phase="demo"] .sec-demo .dock, html[data-phase="after"] .sec-demo .dock { pointer-events: auto; }

/* cue at the hero's end, section index, skip, loader, fps */
html[data-mode="film"] .cue { display: flex; position: absolute; z-index: 6; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; flex-direction: column; align-items: center; gap: 8px; font: 500 10px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ev-dim); opacity: var(--cue, 0); transition: opacity .6s var(--ease); pointer-events: none; }
.cue-line { display: block; width: 1px; height: 28px; background: linear-gradient(var(--ev-rule-strong), transparent); animation: ev-cue 2.6s var(--ease) infinite; }
@keyframes ev-cue { 0% { transform: scaleY(.4); transform-origin: top; opacity: .3 } 50% { transform: scaleY(1); opacity: 1 } 100% { transform: scaleY(.4); opacity: .3 } }
html[data-mode="film"] .index { display: flex; position: fixed; z-index: 20; right: 18px; top: calc(50% + var(--hdr, 0px) / 2); transform: translateY(-50%); flex-direction: column; gap: 0; transition: opacity .4s var(--ease); }
html[data-mode="film"][data-phase="hero"] .index, html[data-phase="demo"] .index { opacity: 0; pointer-events: none; }
.index a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--ev-dim); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.index a:hover { text-decoration: none; }
.index .l { position: absolute; right: calc(100% + 4px); opacity: 0; transform: translateX(6px); transition: opacity .18s var(--ease), transform .18s var(--ease); white-space: nowrap; pointer-events: none; }
.index .n { position: relative; padding-right: 18px; }
.index .n::after { content: ""; position: absolute; right: 0; top: 50%; width: 10px; height: 1px; background: currentColor; transition: width .18s var(--ease), background .18s; }
.index:hover .l, .index a:focus-visible .l { opacity: 1; transform: none; }
.index a[aria-current] { color: var(--ev-ink); }
.index a[aria-current] .n::after { width: 14px; background: var(--ev-ink); }
html[data-mode="film"] .skip-install { display: inline-flex; position: fixed; z-index: 20; left: 18px; bottom: 14px; align-items: center; gap: 8px; min-height: 44px; color: var(--ev-dim); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: color .12s, opacity .3s; }
.skip-install:hover { color: var(--ev-ink); text-decoration: none; }
html[data-phase="hero"] .skip-install, html[data-phase="demo"] .skip-install, html[data-phase="after"] .skip-install, html[data-scroll="native"] .skip-install { opacity: 0; pointer-events: none; }
@media (max-width: 640px), ((max-height: 520px) and (orientation: landscape)) {
  html[data-mode="film"] .index { right: 6px; top: calc(var(--hdr, 0px) + 4px); transform: none; flex-direction: row; }
  .index .l { display: none; }
  .index a { min-height: 44px; min-width: 32px; justify-content: center; }
  .index .n { padding: 0 0 6px; }
  .index .n::after { right: 50%; top: auto; bottom: 0; width: 8px; margin-right: -4px; }
  .index a[aria-current] .n::after { width: 12px; margin-right: -6px; }
  html[data-mode="film"] .skip-install { display: none; }
  html[data-phase="hero"] .index { opacity: 0; pointer-events: none; }
}
@media (max-width: 360px) { .index a { min-width: 29px; } }
html[data-mode="film"] .loader { display: block; position: absolute; z-index: 7; left: 50%; bottom: 6px; width: 120px; margin-left: -60px; height: 1px; background: var(--ev-rule); overflow: hidden; opacity: 0; transition: opacity .4s; pointer-events: none; }
html[data-mode="film"][data-film="loading"][data-hero="done"] .loader { opacity: 1; }
.loader-bar { display: block; height: 100%; }
.loader-bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--ev-ink); transition: transform .25s var(--ease); }
html[data-mode="film"] .fps:not([hidden]) { display: block; position: fixed; z-index: 100; left: 8px; top: calc(var(--hdr, 0px) + 8px); padding: 6px 8px; border-radius: 4px; background: rgba(0, 0, 0, .7); color: #cfe; font: 11px/1.45 var(--mono); white-space: pre; pointer-events: none; }
html[data-clean="1"] :is(.sec .copy, .index, .skip-install, .dock, .cue, .sound) { display: none !important; }
/* Sound: a frameless toggle in the index's grammar (sound.js; off until the visitor turns it on). Desktop: top right under the
   header, clear of the hero's copy (left) and its bubbles (lower right). Phones: in the index's row at the top left; while the hero's
   headline is up (phase hero) only the glyph shows, so it never touches the centred headline. Short landscape: just left of the
   index row. In the page's flow (Access, the still page) bottom left, on a soft backing so it stays legible over text scrolling
   under it. On phones it steps aside at the demo, where the demo's own controls stand. */
.sound { position: fixed; z-index: 21; right: 18px; top: calc(var(--hdr, 0px) + 10px); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; margin: 0; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--ev-dim); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .12s, opacity .3s var(--ease); }
.sound[hidden] { display: none; }
.sound:hover, .sound[aria-pressed="true"] { color: var(--ev-ink); }
.sound:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sound svg { flex: none; overflow: visible; }
.sound svg path:first-child { fill: currentColor; }
.sound svg path + path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.sound[aria-pressed="true"] svg path + path { stroke: var(--acc, var(--cyan)); }
html:is([data-mode="still"], [data-phase="after"]) .sound { top: auto; right: auto; left: 18px; bottom: 14px; background: rgba(3, 4, 5, .78); }
@media (max-width: 640px) {
  html[data-mode="film"] .sound { right: auto; left: 4px; top: calc(var(--hdr, 0px) + 4px); }
  html[data-mode="film"][data-phase="hero"] .sound { gap: 0; }
  html[data-mode="film"][data-phase="hero"] .sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-height: 520px) and (orientation: landscape) {
  html[data-mode="film"] .sound { right: 298px; top: calc(var(--hdr, 0px) + 4px); gap: 0; }
  html[data-mode="film"] .sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 640px), ((max-height: 520px) and (orientation: landscape)) {
  html[data-mode="film"]:is([data-phase="demo"], [data-phase="handoff"]) .sound { opacity: 0; pointer-events: none; }
  html:is([data-mode="still"], [data-phase="after"]) .sound { top: auto; right: auto; bottom: 12px; left: 8px; }
  html[data-mode="film"][data-phase="after"] .sound { opacity: 0; pointer-events: none; }
}
html:is([data-demofull="1"], [data-demofull="turn"]) .sound { opacity: 0; pointer-events: none; }
/* While the hero is up the same toggle stands in the hero's controls, just after Pause motion / Replay story, in the hero's row
   (sound.js moves it there and back). "Tap for sound": sound was chosen before but the browser still holds it until a tap. */
html[data-mode="film"] .story .motion-controls .sound { position: static; top: auto; right: auto; left: auto; bottom: auto; min-width: 44px; min-height: 44px; padding: 0 8px; gap: 8px; border: 0; background: none; color: #c3ccc6; text-shadow: 0 1px 10px #000; }
html[data-mode="film"] .story .motion-controls .sound span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
html[data-mode="film"] .story .motion-controls .sound:hover, html[data-mode="film"] .story .motion-controls .sound[aria-pressed="true"] { color: var(--ev-ink); }
/* phones: the hero's row is full (Pause, Skip the story, Explore demo), so the cue stands just above Pause motion, in the caption's
   place (phones hide the caption) */
@media (max-width: 640px) {
  html[data-mode="film"] .story .motion-controls { position: relative; }
  html[data-mode="film"] .story .motion-controls .sound { position: absolute; left: 0; right: auto; top: auto; bottom: 100%; padding: 0 6px; }
}
.sound[data-state="wait"] { color: var(--ev-ink); }
.sound[data-state="wait"] svg path + path { stroke: var(--acc, var(--cyan)); }

/* ------------------------------------------------------------------ after the film: Access, in plain HTML */
.after { position: relative; z-index: 2; background: var(--ev-bg); }
/* at least a screen tall, so the release can always scroll the stage fully away (a shorter page clamps scrollTo and re-locks) */
html[data-mode="film"] .after { min-height: calc(100vh - var(--hdr, 0px)); min-height: calc(100svh - var(--hdr, 0px)); display: flex; flex-direction: column; }
html[data-mode="film"] .after .access { flex: 1 0 auto; align-content: center; }
.access { width: min(100% - var(--gutter) * 2, 1180px); margin: 0 auto; padding: clamp(64px, 10vw, 132px) 0 clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.access-head { grid-column: 1; }
.access h2 { font-size: clamp(36px, 4.6vw, 64px); }
.access h2:focus { outline: none; }
.access .lede { max-width: 560px; font-size: clamp(15px, 1.25vw, 18px); }
.access-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 30px; }
.cta { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--ev-ink); color: var(--ev-ink); font: 400 clamp(17px, 1.5vw, 20px)/1 Inter, sans-serif; letter-spacing: .04em; text-decoration: none; transition: color .15s, border-color .15s; }
.cta:hover { color: var(--cyan); border-color: var(--cyan); text-decoration: none; }
.avail { display: inline-flex; align-items: center; gap: 9px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ev-dim); }
.avail .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px rgba(227, 162, 74, .55); }
.access .downloads { display: block; grid-column: 1; border-top: 1px solid var(--ev-rule); padding-top: 18px; }   /* the hero stylesheet's own .downloads grid does not apply here */
.access .downloads[hidden] { display: none; }
.dl-row .cta { font-size: 16px; white-space: nowrap; }
.dl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--ev-rule); }
.dl-row b { display: block; font-weight: 500; color: var(--ev-ink); }
.dl-row .meta { font: 12px/1.5 var(--mono); color: var(--ev-dim); }
.downloads .small { margin: 14px 0 0; font-size: 13px; color: var(--ev-dim); }
.downloads .small a { color: var(--ev-muted); }
/* the shared newsletter block (lock-v1), made frameless for this page; its form and script are unchanged */
.access .er-lock { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0 0 0 clamp(24px, 4vw, 48px); width: 100%; max-width: 520px; background: none; border: 0; border-left: 1px solid var(--ev-rule); border-radius: 0; font-family: Inter, sans-serif; --l-ink: var(--ev-ink); --l-muted: var(--ev-muted); --l-line: var(--ev-rule-strong); --l-accent: var(--ev-ink); }
.access .er-lock__eyebrow { font: 500 11px/1.4 var(--mono); letter-spacing: .2em; color: var(--ev-dim); margin-bottom: 14px; }
.access .er-lock h3 { margin: 0 0 10px; font: 400 clamp(22px, 2vw, 28px)/1.15 Inter, sans-serif; letter-spacing: -.02em; color: var(--ev-ink); }
.access .er-lock p { font-size: 14.5px; color: var(--ev-muted); }
.access .er-lock input[type=email] { border-radius: 6px; border-color: var(--ev-rule-strong); background: rgba(243, 241, 236, .02); color: var(--ev-ink); font-family: Inter, sans-serif; }
.access .er-lock input[type=email]:focus { outline: 2px solid var(--cyan); outline-offset: 2px; }
.access .er-lock button { border-radius: 6px; background: transparent; color: var(--ev-ink); border: 1px solid var(--ev-rule-strong); font: 500 15px/1 Inter, sans-serif; transition: border-color .15s, color .15s; }
.access .er-lock button:hover { border-color: var(--ev-ink); }
.access .er-lock__privacy, .access .er-lock__privacy a { color: var(--ev-dim) !important; }
.site-footer { position: relative; z-index: 2; width: min(100% - var(--gutter) * 2, 1180px); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 28px 0 40px; border-top: 1px solid var(--ev-rule); color: var(--ev-dim); font: 13px/1.4 Inter, sans-serif; letter-spacing: 0; justify-content: flex-start; flex-direction: row; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.site-footer a { color: var(--ev-muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.site-footer a:hover { color: var(--ev-ink); text-decoration: none; }
/* the site's Frank launcher (nginx-injected .em-support-launcher, fixed bottom right) never covers the page's controls. On phones it
   steps aside while the demo is up (the demo's controls stand where it sits) and comes back at Access and everywhere else; in Full
   screen it steps aside at every size; at Access the newsletter button keeps clear of it. */
.em-support-launcher { transition: opacity .3s var(--ease), visibility .3s; }
@media (max-width: 860px), (orientation: portrait), ((max-height: 520px) and (orientation: landscape)) {
  html[data-mode="film"]:is([data-phase="handoff"], [data-phase="demo"]) .em-support-launcher { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}
html:is([data-demofull="1"], [data-demofull="turn"]) .em-support-launcher { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
body:has(.em-support-launcher) .site-footer { padding-right: 84px; }
@media (max-width: 520px) { body:has(.em-support-launcher) .access .er-lock button { margin-right: 70px; } }
@media (min-width: 521px) and (max-width: 860px) { body:has(.em-support-launcher) .access .er-lock button { margin-right: 160px; } }
/* the SCROLL cue would sit on the hero's own controls row on phones: the row says it there */
@media (max-width: 860px), ((max-height: 520px) and (orientation: landscape)) { html[data-mode="film"] .cue { display: none; } }
@media (max-width: 860px) {
  .access { grid-template-columns: minmax(0, 1fr); }
  .access .er-lock { grid-column: 1; grid-row: auto; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--ev-rule); }
}
/* first load (round 3): the hero's poster is not painted until story.js has sized it to the stage (evoice.html's head sets
   data-hero-geo); before that it would draw stretched to the stage and then jump into place */
html[data-mode="film"]:not([data-hero-geo]) #story-poster { visibility: hidden; }