/* BATech View. Built from the BATech Trace page (/trace): same tokens, type, rhythm and film
   engine; Trace's three lights are swapped for View's cobalt ramp. NOTHING HERE MAY SCALE WITH
   SCROLL: plates cross and drift sideways, copy fades and lifts by 20px; that is all. */
:root{
  --carbon:#000; --graphite:#101317; --slate:#181C22; --line:#242932; --line2:#333A46;
  --alum:#9AA3AE; --porcelain:#E8EAED; --white:#fff;
  --cobalt:#2E62FF; --cobalt-hi:#4C79FF; --cobalt-head:#7AA3FF; --cobalt-deep:#1F4FE0;
  --ultra:#3B36D6; --ice:#CFE0FF; --ice-hi:#E8F0FF;
  --surface-1:#171B21; --surface-2:#101319; --rule:#31384A;
  --thread:linear-gradient(90deg,#1F4FE0,#4C79FF 55%,#BFD3FF);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-full:100px;
  --display:'Cabinet Grotesk',system-ui,sans-serif;
  --body:'General Sans',system-ui,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(24px,5vw,80px); --maxw:1240px; --nav-h:52px;
  --edge:calc(max(0px,(100vw - var(--maxw))/2) + var(--pad));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{margin:0;background:var(--carbon);color:var(--porcelain);font-family:var(--body);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;text-wrap:balance}
h1{letter-spacing:-.032em;line-height:1.02}
h2{letter-spacing:-.026em;line-height:1.05;font-size:clamp(30px,4.6vw,56px)}
h3{letter-spacing:-.012em;line-height:1.16;font-size:clamp(19px,1.6vw,22px);font-weight:700}
@media(max-width:820px){h1{letter-spacing:-.022em}h2{letter-spacing:-.016em}}
.nw{white-space:nowrap}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.lede{font-size:clamp(17px,1.5vw,21px);color:var(--alum);max-width:58ch;line-height:1.45;
  margin:clamp(16px,2vw,28px) 0 0;text-wrap:pretty}
.lede b{color:var(--porcelain);font-weight:500}
.lede b.lead-in{color:var(--cobalt-head);font-weight:600}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
::selection{background:var(--cobalt);color:#fff}
:root{scrollbar-color:var(--line2) var(--carbon);scrollbar-width:thin;accent-color:var(--cobalt)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--cobalt-head);outline-offset:3px;border-radius:4px}
/* the ribbon "View" wordmark wherever the word sits in a headline: its cap (88 of the box's
   104 units) matches the type's cap, its baseline sits on the baseline (8 units under it) */
.tw{display:inline-block;height:.83em;width:auto;aspect-ratio:263.06/104;vertical-align:-.064em;margin:0 -.02em 0 .03em}
.tw-p{margin-right:-.05em}
/* a reading line under text links: drawn in from the left on hover and focus */
.tl{text-decoration:none;color:var(--cobalt-head);background:linear-gradient(90deg,rgba(122,163,255,.35),rgba(191,211,255,.35)) no-repeat 0 100%/100% 1px;
  position:relative;padding-bottom:2px}
.tl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:2px;background:var(--thread);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.tl:hover::after,.tl:focus-visible::after{transform:scaleX(1)}
a,button{-webkit-tap-highlight-color:transparent}

/* ---------------- nav (the site's bar, as /trace) ---------------- */
.nav{position:sticky;top:0;z-index:60;background:var(--carbon);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);height:var(--nav-h);
  display:flex;align-items:center;gap:28px}
.nav-brand{display:flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;font-size:17px;flex:0 0 auto}
.nav-brand .lk{height:30px}
@media(max-width:430px){ .nav-brand .lk{height:25px} }
.nav-links{display:flex;gap:22px;margin-left:auto;font-size:14px;color:var(--alum)}
.nav-links a{text-decoration:none;padding:9px 2px;display:inline-block;transition:color .2s}
.nav-links a:hover{color:var(--porcelain)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--cobalt);color:#fff;
  border:0;border-radius:var(--r-full);padding:.62em 1.15em;font:600 14px/1 var(--body);
  text-decoration:none;cursor:pointer;white-space:nowrap;min-height:40px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:background .2s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.btn:hover{background:#2757f0;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 22px -10px rgba(46,98,255,.85)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.08s}
.btn.ghost{background:transparent;color:var(--porcelain);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--alum)}
.btn.lg{font-size:16px;padding:.85em 1.5em;min-height:48px}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.nav-toggle{display:none;flex:0 0 auto;width:44px;height:40px;border:1px solid var(--line);
  background:transparent;border-radius:10px;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav-toggle span{display:block;width:15px;height:1.5px;background:var(--porcelain);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav-menu{display:none;border-top:1px solid var(--line);padding:6px var(--pad) 14px}
.nav-menu a{display:block;padding:13px 2px;font-size:16px;color:var(--porcelain);text-decoration:none;border-bottom:1px solid var(--line)}
@media(max-width:820px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-menu:not([hidden]){display:block}
  .nav-in{gap:10px}
  .nav-in .btn{margin-left:auto;padding:8px 14px;font-size:14px}
}
@media(max-width:430px){ .nav-in .btn{font-size:0;padding:9px 14px} .nav-in .btn::after{content:'Demo';font-size:14px} }

/* the lockup wherever it is drawn large (signature, footer) */
.v-lockup{display:inline-flex;align-items:center;text-decoration:none;color:var(--white)}
/* full cut at 56 px and up only; the footer takes the small cut */
.v-lockup .lk{height:max(56px,2.9em)}
.v-lockup--foot .lk{height:40px}

/* ================= THE FILM ================= */
/* One film in film time T (film.js, MODE hybrid): beats 1-3 a scrubbed video, beats 4-6 drawn in
   code (film-anim.js). Nothing on it is ever scaled by scroll. */
.film{position:relative;background:var(--carbon)}
.film-stage{position:relative}
.film-media,.film-scene,.film-note,.film-canvas,.film-shade,.film-readout,.film-cue,.film-skip{display:none}
.film-snap-pt{display:none}
/* stills: no JavaScript, reduced motion or Save-Data — a list in reading order, one rest frame a beat */
.film .beats{list-style:none;margin:0;padding:clamp(48px,8vh,96px) var(--pad);display:grid;
  gap:clamp(48px,8vh,88px);max-width:var(--maxw);margin-inline:auto}
.film .beat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center}
.film .beat-still{display:block;margin:0}
.film .beat-still img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-md);
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(120% 120% at 50% 50%,#000 60%,transparent 100%)}
.film .beat-copy{order:-1}
.film .beat h1,.film .beat h2{font-size:clamp(30px,4vw,52px);line-height:1.04}
.film .beat p{color:var(--alum);font-size:clamp(16.5px,1.4vw,19px);margin-top:16px;max-width:40ch;text-wrap:pretty}
.film .beat p b{color:var(--porcelain);font-weight:500}
.beat-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* phones: the square rest frames, whole */
@media(max-width:820px){ .film .beat{grid-template-columns:1fr} .film .beat-copy{order:0}
  .film .beat-still img{aspect-ratio:1/1;object-position:50% 50%} }

@media (prefers-reduced-motion:no-preference){
  .js .film:not(.film--static){height:1300vh}
  @media (pointer:coarse){ html.film-snap{scroll-snap-type:y proximity} }
  html.film-snap.js .film:not(.film--static) .film-snap-pt{display:block;position:absolute;left:0;width:1px;height:1px;
    pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}
  .js .film:not(.film--static) .film-stage{position:sticky;top:var(--nav-h);overflow:hidden;
    height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));background:#000}
  .js .film:not(.film--static) .beats{display:block;position:static;padding:0;max-width:none}
  .js .film:not(.film--static) .beat{display:block;position:static}
  /* the list's stills are not the moving film's: never laid out, so never fetched */
  .js .film:not(.film--static) .beat-still{display:none}

  /* the picture: the video over its rest frame, at the video's own place. film.js sizes the box to
     the video's rect under film-anim.js's mapping (wide stages: cover, shifted so the page clears the
     words; much wider than 16:9, the whole slab in height). The square composition (phones,
     upright tablets): a square at the top. Before the script, a plain cover */
  .js .film:not(.film--static) .film-media{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;background:#000}
  .js .film .film-poster,.js .film .film-poster img,.js .film .film-video{position:absolute;left:0;top:0;width:100%;height:100%;
    display:block;margin:0;object-fit:cover;object-position:var(--film-ox,50%) 50%;border:0}
  .js .film .film-poster{transition:opacity .6s var(--ease)}
  .js .film .film-poster.is-alt{opacity:0}
  .js .film .film-poster.is-alt.is-on{opacity:1}
  /* the first view at the top plays the print; until film.js knows it will, the printed page waits
     (it shows by itself after 3 s if the script never runs) */
  html.film-intro .film .film-poster:not(.is-alt){opacity:0;animation:film-poster-in .5s 1.2s forwards}
  @keyframes film-poster-in{to{opacity:1}}
  /* the video shows once it has painted the frame asked of it (film.js .is-live) */
  .js .film .film-video{opacity:0;background:transparent}
  .js .film .film-video.is-live{opacity:1}
  .js .film .film-media.is-crop .film-video{object-position:100% 50%}
  .js .film:not(.film--static) .film-scene{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
  /* beat 2's key note, under the slab's lower right corner; film.js fades it with film time */
  .js .film:not(.film--static) .film-note{display:block;position:absolute;z-index:3;left:0;top:0;pointer-events:none;
    font-family:var(--mono);font-size:clamp(11px,.85vw,13px);letter-spacing:.04em;color:var(--ice);white-space:nowrap;
    text-shadow:0 0 12px rgba(76,121,255,.55);opacity:0;visibility:hidden}
  .js .film .film-note i{font-style:normal}
  /* a short phone stage: stacked in the empty column right of the slab */
  .js .film .film-note.is-stack{white-space:normal;line-height:1.45}
  .js .film .film-note.is-stack span{display:block}
  .js .film .film-note.is-stack i{display:none}

  /* the base shade only keeps the nav and the readout legible; each beat brings its own shade
     (.beat-shade, measured by film.js to its words and never over the page) and fades it with them */
  .js .film:not(.film--static) .film-shade{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(to top,#000 0,rgba(0,0,0,.55) 7%,transparent 16%),
      linear-gradient(to bottom,rgba(0,0,0,.6) 0,transparent 9%)}
  .js .film:not(.film--static) .beat-shade{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
    transition:opacity .5s var(--ease)}
  .js .film:not(.film--static) .beat.is-on .beat-shade{opacity:1}
  .js .film:not(.film--static) .beat-copy{position:absolute;z-index:4;left:var(--edge);right:var(--pad);top:50%;
    max-width:38rem;opacity:0;--shift:20px;transform:translateY(calc(-50% + var(--shift)));will-change:opacity,transform;
    transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;-webkit-user-select:none;user-select:none}
  .js .film:not(.film--static) .beat.is-on .beat-copy{opacity:1;--shift:0px}
  /* a feathered scrim that belongs to the copy (it fades and lifts with it) dims whatever runs
     under the type, and nothing else */
  .js .film:not(.film--static) .beat-copy::before{content:"";position:absolute;z-index:-1;inset:-12% -6% -14% -12%;
    pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,.46),rgba(0,0,0,.26) 55%,rgba(0,0,0,0))}
  .js .film:not(.film--static) .beat:first-child h1{font-size:clamp(38px,4.3vw,62px)}
  .js .film:not(.film--static) .beat:first-child .beat-copy{max-width:36rem;top:44%}
  /* beats 1-3 sit left of the page (film.js narrows them to the page's edge); beat 3 low-left;
     beats 4-6 where the scene left room for them (film.js, from film-anim.js copyBox) */
  .js .film:not(.film--static) .beat[data-pos=right] .beat-copy{left:auto;right:var(--edge);max-width:30rem}
  .js .film:not(.film--static) .beat[data-pos=low] .beat-copy{top:auto;bottom:calc(clamp(18px,4vh,36px) + 52px);
    max-width:40rem;transform:translateY(var(--shift))}
  .js .film:not(.film--static) .beat.is-on .beat-cta,
  .js .film:not(.film--static) .beat.is-on .beat-mail{pointer-events:auto}
  .js .film:not(.film--static) .beat h1{line-height:1.0}
  .js .film:not(.film--static) .beat h2{font-size:clamp(30px,3.4vw,48px)}
  .js .film:not(.film--static) .beat p{color:rgba(232,234,237,.9);font-size:clamp(16.5px,1.3vw,19px);
    text-shadow:0 0 12px rgba(0,0,0,.6),0 1px 24px rgba(0,0,0,.8)}
  .js .film:not(.film--static) .beat h1,.js .film:not(.film--static) .beat h2{text-shadow:0 0 22px rgba(0,0,0,.55),0 2px 40px rgba(0,0,0,.6)}

  .js .film:not(.film--static) .film-readout{display:flex;align-items:center;gap:1rem;position:absolute;z-index:6;
    pointer-events:none;left:var(--edge);bottom:clamp(18px,4vh,36px);font-family:var(--mono);font-size:12px;
    letter-spacing:.08em;color:var(--porcelain)}
  .js .film .film-track{width:clamp(72px,16vw,190px);height:2px;background:rgba(255,255,255,.2);position:relative;overflow:hidden;border-radius:2px}
  .js .film .film-readout-bar{position:absolute;inset:0;background:var(--thread);transform:scaleX(0);transform-origin:left}
  .js .film .film-readout span{white-space:nowrap}
  .js .film .film-readout-label{text-transform:uppercase;letter-spacing:.1em}
  .js .film .film-readout-idx{order:-2}
  .js .film .film-track{order:-1}
  .js .film:not(.film--static) .film-cue{display:flex;align-items:center;gap:.6rem;position:absolute;z-index:6;
    pointer-events:none;right:var(--edge);bottom:clamp(18px,4vh,36px);font-family:var(--mono);font-size:12px;
    letter-spacing:.08em;color:rgba(232,234,237,.88);text-shadow:0 0 12px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.7);transition:opacity .5s}
  .js .film .film-cue-line{display:block;width:1px;height:34px;background:linear-gradient(var(--cobalt-hi),transparent)}
  .js .film:not(.film--static) .film-skip{display:inline-flex;align-items:center;position:absolute;z-index:7;
    top:16px;right:var(--edge);min-height:40px;padding:0 16px;border-radius:var(--r-full);font-size:13px;font-weight:500;
    color:var(--porcelain);text-decoration:none;background:rgba(0,0,0,.55);border:1px solid var(--line2)}
  .js .film .film-skip:hover{border-color:var(--alum)}

  /* the square composition: phones, and tablets held upright (taller than wide) */
  @media (max-width:820px),(max-aspect-ratio:1/1){
    .js .film:not(.film--static) .film-media{right:auto;bottom:auto;width:100%;height:auto;aspect-ratio:1/1}
    .js .film:not(.film--static) .beat-copy,
    .js .film:not(.film--static) .beat:first-child .beat-copy,
    .js .film:not(.film--static) .beat[data-pos] .beat-copy{top:auto;left:var(--pad);right:var(--pad);
      bottom:calc(clamp(18px,4vh,36px) + 34px);max-width:none;transform:translateY(var(--shift))}
    .js .film:not(.film--static) .beat h1,
    .js .film:not(.film--static) .beat:first-child h1{font-size:clamp(34px,9.6vw,46px)}
    .js .film:not(.film--static) .beat h2{font-size:clamp(28px,7.6vw,38px)}
    .js .film:not(.film--static) .film-cue{display:none}
    .js .film .film-readout-label{display:none}
    .js .film .film-track{flex:1 1 auto;width:auto}
    .js .film:not(.film--static) .beat:first-child p{font-size:15.5px;line-height:1.5}
    .js .film:not(.film--static) .beat-cta{flex-wrap:nowrap;gap:10px;margin-top:20px}
    .js .film:not(.film--static) .beat-cta .btn.lg{font-size:15px;padding:.75em 1.05em;min-height:46px}
    .js .film:not(.film--static) .film-readout{left:var(--pad);right:var(--pad)}
    .js .film:not(.film--static) .film-skip{right:var(--pad);top:12px}
    .js .film:not(.film--static) .film-note{font-size:11px}
  }
  /* a short phone held upright (Safari with its bars showing, an iPhone SE): beat 1's words are set
     tighter so the page above them can stay large and is never covered (film.js sizes the square to
     what the words leave) */
  @media (max-width:820px) and (max-height:760px) and (min-height:501px){
    .js .film:not(.film--static) .beat:first-child h1{font-size:clamp(28px,8.2vw,34px)}
    .js .film:not(.film--static) .beat:first-child p{font-size:14.5px;line-height:1.42;margin-top:10px}
    .js .film:not(.film--static) .beat:first-child .beat-cta{margin-top:14px}
    .js .film:not(.film--static) .beat:first-child .beat-cta .btn.lg{min-height:42px;padding:.6em 1em;font-size:14.5px}
    .js .film:not(.film--static) .beat:first-child .beat-note{margin-top:8px!important;font-size:12.5px!important}
  }
  /* on the square composition the picture fills the top of the stage, so Skip leaves it and sits in
     the readout's row, at its right end (phones held upright, upright tablets) */
  @media (max-width:820px) and (min-height:501px),(max-aspect-ratio:1/1) and (min-height:501px){
    .js .film:not(.film--static) .film-skip{top:auto;right:var(--pad);bottom:calc(clamp(18px,4vh,36px) - 9px);
      min-height:30px;padding:0 12px;font-size:12px}
    .js .film:not(.film--static) .film-readout{right:calc(var(--pad) + 118px)}
  }
}
.beat-note{margin-top:14px!important;font-size:14px!important;color:var(--alum)!important;max-width:44ch}
.beat-note::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 8px 1px 0;vertical-align:middle;
  background:radial-gradient(circle at 40% 35%,#dfe8ff 0,#2E62FF 45%,#122c8f 100%);box-shadow:0 0 8px rgba(46,98,255,.7)}

/* ---------------- what changes: what a pilot measures ---------------- */
.outs{list-style:none;margin:clamp(36px,5vh,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:o}
.out{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);padding:22px 22px 20px;display:flex;flex-direction:column;
  position:relative;counter-increment:o}
.out::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;border-radius:0 0 2px 2px;background:var(--thread);opacity:.55}
.out b{font-family:var(--display);font-weight:700;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.012em;line-height:1.15}
.out p{color:var(--alum);font-size:15.5px;margin-top:10px}
.out .who{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt-head)}
@media(max-width:860px){ .outs{grid-template-columns:1fr} }

/* ---------------- after the film ---------------- */
section.band{padding:clamp(80px,13vh,150px) 0;position:relative}
@media(max-width:820px){section.band{padding:72px 0}}
section.band + section.band{border-top:1px solid var(--line)}
.band-head{max-width:820px}
/* hidden only when the script that reveals it is running: with no JavaScript everything shows */
.rise{transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.rise.in{opacity:1;transform:none}
.js .rise:not(.in){opacity:0;transform:translateY(18px)}
.no-io .rise:not(.in){opacity:1;transform:none}

/* ---------------- what View shows: its screens, redrawn, in a frame ---------------- */
.shows{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:clamp(36px,5vh,56px)}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{appearance:none;border:1px solid var(--line2);background:transparent;color:var(--alum);border-radius:var(--r-full);
  padding:10px 16px;font:500 14.5px/1 var(--body);cursor:pointer;min-height:42px;transition:color .2s,border-color .2s,background .2s}
.tab:hover{color:var(--porcelain);border-color:var(--alum)}
.tab[aria-selected=true]{color:#fff;background:var(--cobalt);border-color:var(--cobalt)}
html:not(.js) .tabs{display:none}
.tab .tl-s{display:none}
/* phones: one row of short labels (it scrolls sideways if a narrow screen needs it) */
@media(max-width:600px){
  .tabs{flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--pad));padding:0 var(--pad)}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:1 0 auto;padding:10px 11px;font-size:14px}
  .tab .tl-l{display:none}
  .tab .tl-s{display:inline}
}
.device{margin:0;border:1px solid var(--line2);border-radius:14px;background:#0b0d11;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(46,98,255,.28),0 30px 60px -30px rgba(0,0,0,.9)}
.device-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-bottom:1px solid var(--line);background:#111419}
.device-bar i{width:10px;height:10px;border-radius:50%;background:#2a2f38}
.device-url{margin:0 auto;font-family:var(--mono);font-size:12px;color:var(--alum);background:#0b0d11;
  border:1px solid var(--line);border-radius:7px;padding:4px 14px;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-badge{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#06102b;
  background:var(--cobalt-head);border-radius:6px;padding:4px 8px;font-weight:500;white-space:nowrap}
.device-screen{position:relative;aspect-ratio:16/10;background:#0c1219;container-type:inline-size;overflow:hidden}
.shows-cap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:22px;align-items:start}
.shows-cap h3{font-size:clamp(20px,2vw,26px)}
.shows-cap p{color:var(--alum);font-size:16px;max-width:52ch}
.shows-cap .small{font-size:13.5px;color:var(--alum);margin-top:8px}
@media(max-width:900px){ .shows-cap{grid-template-columns:1fr;gap:10px} }

/* The redrawn app. One screen per tab; every size is in em of the screen's own font. Above
   1000px the frame keeps a 16:10 screen and the font follows the frame's width, with a floor
   (13px) so no label drops below ~10.5px; a list longer than the frame scrolls inside it, as it
   does in View. At 1000px and under the frame keeps one fixed height for every tab (so switching
   tabs never moves the page) and each screen reflows and scrolls inside it.
   Colours are View's dark product tokens (docs/VIEW-DESIGN.md §14.2). */
.scr{--paper:#0c1219;--paper2:#121a23;--card:#131c26;--ink:#e7edf3;--ink2:#c9d3dd;--muted:#a3b0be;--faint:#8592a1;
  --ln:#243140;--ln2:#1c2733;--lns:#3a4a5c;--cob:#6d8cf2;--cobi:#8fa8ff;--tint:#172447;--tintl:#4a63b8;
  --warn:#e6b04c;--warnbg:#33270c;--good:#52cc93;--goodbg:#10301f;
  position:absolute;inset:0;font-family:Inter,'General Sans',system-ui,sans-serif;font-size:max(13px,1.06cqw);line-height:1.4;
  color:var(--ink);background:var(--paper);display:flex;flex-direction:column;opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s .45s}
.scr.on{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.scr .num{font-variant-numeric:tabular-nums}
.scr ::-webkit-scrollbar{width:8px;height:8px}
.scr ::-webkit-scrollbar-thumb{background:#2a3646;border-radius:8px}
.scr ::-webkit-scrollbar-track{background:transparent}
.app-top{flex:0 0 auto;display:flex;align-items:center;gap:1.7em;height:3.2em;padding:0 1.3em;background:#05090d;border-bottom:1px solid var(--ln)}
.app-brand{display:flex;align-items:center;gap:.6em;font-weight:650;color:#fff;white-space:nowrap}
.app-brand img{width:1.55em;height:1.55em}
.app-nav{display:flex;gap:.25em}
.app-nav span{color:var(--muted);padding:.4em .75em;border-radius:.45em;white-space:nowrap}
.app-nav span.on{color:#fff;background:rgba(255,255,255,.08)}
.app-who{margin-left:auto;color:var(--muted);font-size:.86em;white-space:nowrap}
.app-who u{color:var(--cobi);text-decoration:none}
.app-body{flex:1 1 auto;min-height:0;padding:1.2em 1.4em;overflow:auto;scrollbar-width:thin;scrollbar-color:#2a3646 transparent}
.app-h1{font-size:1.4em;font-weight:650;letter-spacing:-.01em}
.app-sub{color:var(--muted);font-size:.9em;margin-top:.15em}
.app-card{background:var(--card);border:1px solid var(--ln);border-radius:.6em}
.pill{display:inline-block;font-size:.82em;line-height:1.3;padding:.12em .6em;border-radius:99px;border:1px solid var(--lns);color:var(--ink2);white-space:nowrap}
.pill.filed{border-color:#245c41;background:var(--goodbg);color:var(--good)}
.pill.match{border-color:var(--tintl);background:var(--tint);color:var(--cobi)}
.pill.warn{border-color:#6b5217;background:var(--warnbg);color:var(--warn);white-space:normal}
.pill.soft{border-color:var(--ln);background:var(--paper2);color:var(--muted);white-space:normal}
.rv-h{font-size:.8em;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.5em}

/* screen 0: the review workspace, generated from View's own reading */
.app-body.rv{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:1.3em;overflow:hidden;padding-bottom:0}
.rv-doc{min-width:0;min-height:0;display:flex;flex-direction:column;gap:.5em;padding-bottom:1.2em}
.rv-meta{display:flex;align-items:baseline;gap:.9em;font-size:.86em;color:var(--muted);flex-wrap:wrap}
.rv-meta b{color:var(--ink);font-weight:650}
.fax-img{position:relative;flex:0 0 auto;background:#fff;border-radius:.2em;overflow:hidden;
  box-shadow:0 0 0 1px #000,0 1.2em 2.4em -1.2em rgba(0,0,0,.9)}
.fax-img img{display:block;width:100%;height:auto}
/* one box per proposal, where the reader placed it on the page (bbox from the reading) */
.bx{position:absolute;left:calc(var(--x) - .35%);top:calc(var(--y) - .25%);width:calc(var(--w) + .7%);height:calc(var(--h) + .5%);
  border-radius:3px;box-shadow:0 0 0 1.5px rgba(47,84,201,.62);background:rgba(47,84,201,.05);pointer-events:none;
  transition:box-shadow .25s ease,background .25s ease}
.bx.warnbox{box-shadow:0 0 0 1.5px rgba(148,96,10,.85);background:rgba(230,176,76,.1)}
.bx.hot,.bx.lit{box-shadow:0 0 0 2.5px #2f54c9,0 0 0 6px rgba(47,84,201,.18);background:rgba(47,84,201,.14)}
.bx.warnbox.hot,.bx.warnbox.lit{box-shadow:0 0 0 2.5px #94600a,0 0 0 6px rgba(230,176,76,.24);background:rgba(230,176,76,.2)}
.has-lit .bx.hot:not(.lit){box-shadow:0 0 0 1.5px rgba(148,96,10,.85);background:rgba(230,176,76,.1)}
.rv-side{min-width:0;min-height:0;display:flex;flex-direction:column}
.rv-list{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:.5em;padding:0 .5em 1em 0;
  scrollbar-width:thin;scrollbar-color:#2a3646 transparent;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 1.6em),transparent);mask-image:linear-gradient(#000 calc(100% - 1.6em),transparent)}
.rv-title b{display:block;font-size:1.2em;font-weight:650}
.rv-title dl{display:grid;grid-template-columns:auto 1fr;gap:.1em .9em;margin:.35em 0 0;font-size:.86em}
.rv-title dt{color:var(--muted)}
.rv-title dd{margin:0;color:var(--ink2);font-variant-numeric:tabular-nums}
.rv-pick{display:flex;align-items:flex-start;gap:.6em;padding:.45em .75em;background:var(--card);border:1px solid var(--tintl);border-radius:.5em;font-size:.92em}
.rv-pick small{display:block;color:var(--muted);font-size:.9em;margin-top:.1em}
.rv-pick .pill{margin-left:.3em;font-size:.86em}
.rv-pick.off{border-color:var(--ln);color:var(--muted);padding:.35em .75em}
.rv-pick.off .radio::after{display:none}
.radio{width:.95em;height:.95em;border-radius:50%;border:1.5px solid var(--cob);display:inline-grid;place-items:center;flex:0 0 auto;margin-top:.2em}
.radio::after{content:"";width:.45em;height:.45em;border-radius:50%;background:var(--cob)}
.rv-notice{font-size:.86em;color:var(--ink2);background:var(--tint);border:1px solid var(--tintl);border-radius:.5em;padding:.5em .75em}
.rv-notice u{color:var(--cobi);text-decoration:underline;text-underline-offset:2px}
.cand{display:grid;grid-template-columns:1.2em minmax(0,1fr);gap:.25em .65em;align-items:start;padding:.5em .7em;background:var(--card);
  border:1px solid var(--ln);border-radius:.5em;transition:border-color .2s}
.cand>*{grid-column:2}
.cand>.cb{grid-column:1;grid-row:1/span 4}
.cand.ident{grid-template-columns:minmax(0,1fr);background:transparent;border-style:dashed}
.cand.ident>*{grid-column:1}
.cand.hot,.cand:hover{border-color:var(--cob)}
.cand.hot{box-shadow:inset .22em 0 0 var(--cob)}
.cb{width:1.05em;height:1.05em;border:1.5px solid var(--lns);border-radius:.25em;margin-top:.15em;background:var(--paper)}
.cand .lab{display:flex;align-items:baseline;gap:.55em;flex-wrap:wrap;font-size:.88em;color:var(--ink2)}
.cand .lab .pg{color:var(--cobi)}
.cand .val{display:flex;align-items:center;gap:.6em}
.cand .val.idv{font-variant-numeric:tabular-nums}
.inp{display:inline-block;min-width:8.5em;max-width:100%;padding:.2em .55em;border:1px solid var(--lns);border-radius:.35em;background:var(--paper);
  font-variant-numeric:tabular-nums;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cand .flags{display:flex;flex-wrap:wrap;gap:.35em}
.cand .evq{font-size:.82em;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-add{display:flex;gap:.45em;font-size:.88em;color:var(--faint)}
.rv-add .inp{min-width:0;flex:1 1 auto;color:var(--faint)}
.rv-add .pgi{flex:0 0 3em}
.rv-foot{flex:0 0 auto;display:flex;align-items:center;gap:.6em;padding:.65em 0 .9em;border-top:1px solid var(--ln);background:var(--paper)}
.rv-foot > span:not(.abtn){color:var(--muted);font-size:.86em;margin-right:auto}
.abtn{display:inline-flex;align-items:center;padding:.38em .9em;border:1px solid var(--lns);border-radius:.4em;font-weight:600;font-size:.9em;color:var(--ink);white-space:nowrap}
.abtn.pri{background:#2f54c9;border-color:#2f54c9;color:#fff}
.abtn.dis{opacity:.6}

/* screen 1: the patient's record */
.pt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1em;margin-bottom:1em}
.pt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1em;align-items:start}
.pt-col{display:grid;gap:1em;min-width:0}
.pt-lists{margin-top:1em}
.pt-card{padding:.85em 1.05em}
/* the record's group titles are h3 under the section's h2 (no skipped level); they keep the app's look */
.pt-card h3{margin:0 0 .4em;font-family:inherit;font-size:1em;font-weight:650;letter-spacing:normal;line-height:inherit;text-wrap:wrap}
.fact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1em;padding:.45em 0;border-top:1px solid var(--ln2)}
.fact:first-of-type{border-top:0}
.fact .k{color:var(--ink2);font-size:.9em}
.fact .v{font-variant-numeric:tabular-nums;font-weight:600}
.fact .src{font-size:.82em;color:var(--faint);font-weight:400;margin-top:.1em}
.fact .src a{color:var(--cobi);text-decoration:none}
.fact .ed{font-size:.82em;color:var(--warn);font-weight:400;margin-top:.1em}
.gov{margin-top:.5em;padding:.55em .7em;border:1px dashed var(--lns);border-radius:.45em;display:flex;flex-wrap:wrap;gap:.3em .4em;font-size:.84em;color:var(--muted)}
.gov b{flex-basis:100%;font-weight:500;color:var(--ink2)}
.gov span{border:1px solid var(--ln);border-radius:99px;padding:.05em .55em;background:var(--paper2)}
.tbl{width:100%;border-collapse:collapse;font-size:.88em}
.tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:.92em;padding:.55em .9em;border-bottom:1px solid var(--ln)}
.tbl td{padding:.5em .9em;border-top:1px solid var(--ln2);white-space:nowrap}
.tbl tr:first-child td{border-top:0}
.tbl .mut{color:var(--faint)}
.tbl a{color:var(--cobi);text-decoration:none}
.pt-hist .rv-h{margin:0 0 .45em}

/* screen 2: the audit log */
.au-card{margin-top:1em;overflow:hidden}
.au-card .tbl td:nth-child(3){color:var(--ink)}
.au-card code{font-family:var(--mono);font-size:.92em;color:var(--muted)}

/* screen 3: the API */
.scr-api{background:#070b10}
.api-req{flex:0 0 auto;display:flex;align-items:center;gap:1em;padding:.9em 1.5em;border-bottom:1px solid var(--ln);font-family:var(--mono);font-size:.92em}
.api-req .m{color:#06102b;background:var(--cobi);border-radius:.3em;padding:.1em .5em;font-weight:500}
.api-req .p{color:var(--ink)}
.api-req .h{color:var(--faint);margin-left:auto}
.api-res{flex:0 0 auto;display:flex;align-items:center;gap:.8em;padding:.6em 1.5em;font-size:.86em;color:var(--muted);border-bottom:1px solid var(--ln2)}
.api-res .ok{color:var(--good);font-family:var(--mono)}
.api-body{flex:1 1 auto;min-height:0;margin:0;padding:1em 1.5em;font-family:var(--mono);font-size:.88em;line-height:1.55;color:var(--ink2);
  white-space:pre;overflow:auto;scrollbar-width:thin;scrollbar-color:#2a3646 transparent}
.api-body .k{color:#9fb6ff}
.api-body .s{color:#cfe0ff}
.api-body .n{color:#7ee2b8}
.api-body .z{color:var(--faint)}

/* 1000px and under: one fixed frame height for every tab; nothing inside the mock scrolls, so a swipe on it
   always moves the page (each screen is clipped, with a fade at the bottom edge) */
@media(max-width:1000px){
  .device-screen{aspect-ratio:auto;container-type:normal;height:min(620px,72svh)}
  .app-body,.app-body.rv,.rv-list,.api-body{overflow:hidden!important}
  .device-screen::after{content:"";position:absolute;inset:auto 0 0 0;height:56px;pointer-events:none;
    background:linear-gradient(rgba(12,18,25,0),#0c1219);z-index:3}
  .scr{font-size:13px}
  .app-top{gap:.9em;padding:0 1em}
  .app-nav{display:none}
  .app-body{padding:1em}
  .app-body.rv{display:block;padding-bottom:0}
  .rv-doc{padding-bottom:1em}
  .rv-list{overflow:visible;-webkit-mask-image:none;mask-image:none;padding-right:0}
  .rv-foot{position:sticky;bottom:0;z-index:2;margin:0 -1em;padding:.65em 1em .8em}
  .bx{left:calc(var(--px) - .5%);top:calc(var(--py) - .6%);width:calc(var(--pw) + 1%);height:calc(var(--ph) + 1.2%)}
  .bx.nph{display:none}
  .cand .evq{white-space:normal}
  .pt-grid{grid-template-columns:1fr}
  .tbl td{white-space:normal}
  .tbl th,.tbl td{padding-left:.7em;padding-right:.7em}
  .tbl th:nth-child(4),.tbl td:nth-child(4),.tbl.docs th:nth-child(3),.tbl.docs td:nth-child(3){display:none}
  .au-card .tbl th:nth-child(5),.au-card .tbl td:nth-child(5){display:none}
  .api-req{flex-wrap:wrap;gap:.5em;padding:.8em 1em}
  .api-req .h{margin-left:0;width:100%}
  .api-res{padding:.6em 1em;flex-wrap:wrap}
  .api-body{padding:.9em 1em;font-size:11.5px;white-space:pre-wrap;word-break:break-word}
}
/* tablets (701-1000px): the fax's benefits block and the value list side by side, the list
   scrolling inside, the filing bar always in view */
@media(min-width:701px) and (max-width:1000px){
  .app-body.rv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1em;overflow:hidden}
  .rv-list{padding-right:.5em;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 1.6em),transparent);mask-image:linear-gradient(#000 calc(100% - 1.6em),transparent)}
  .rv-foot{position:static;margin:0;padding:.65em 0 .8em}
}
@media(max-width:520px){
  .device-screen{height:min(560px,70svh)}
  .scr{font-size:12.5px}
  .pt-head .abtn{display:none}
  .fact{grid-template-columns:1fr;gap:.15em}
}

/* ---------------- the problem: the same page, typed and read ---------------- */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(40px,6vh,64px)}
.vs{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);overflow:hidden;transition:border-color .3s,transform .35s var(--ease)}
.vs.lit:hover{transform:translateY(-3px);border-color:#2b4a9a}
.vs svg{display:block;width:100%;height:auto;background:#000}
.vs-body{padding:22px 24px 26px}
.vs h3{font-size:18px}
.vs ul{margin:12px 0 0;padding:0;list-style:none;color:var(--alum);font-size:15.5px}
.vs li{padding:7px 0 7px 22px;position:relative;border-top:1px solid var(--line)}
.vs li:first-child{border-top:0}
.vs li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--line2)}
.vs.lit{border-color:#1d2f5a;background:linear-gradient(180deg,#070d1d,var(--surface-2) 60%)}
.vs.lit li::before{background:var(--cobalt-hi);box-shadow:0 0 8px rgba(76,121,255,.7)}
.vs.lit li b{color:var(--porcelain);font-weight:500}
.motto{margin:clamp(36px,5vh,56px) 0 0;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,30px);
  letter-spacing:-.015em;line-height:1.2;max-width:34ch}
.motto span{color:var(--cobalt-head)}
@media(max-width:760px){ .versus{grid-template-columns:1fr} }
.js .thread-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.45,.05,.25,1)}
.js .in .thread-draw{stroke-dashoffset:0}
.js .peb-lit{opacity:.18;transition:opacity .6s}
.js .in .peb-lit{opacity:1}

/* ---------------- how it works: one reading line, three stops ---------------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
  margin-top:clamp(48px,7vh,80px);padding-top:46px}
.steps-line{position:absolute;left:0;right:0;top:0;height:24px;width:100%;overflow:visible}
.step{position:relative}
.step-dot{position:absolute;top:-46px;left:0;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#dfe8ff 0,#2E62FF 34%,#122c8f 100%);border:3px solid #000;
  box-shadow:0 0 14px rgba(46,98,255,.55)}
.step:nth-child(3) .step-dot{background:radial-gradient(circle at 40% 35%,#eef3ff 0,#4C79FF 34%,#1f3fb0 100%)}
.step:nth-child(4) .step-dot{background:radial-gradient(circle at 40% 35%,#ffffff 0,#BFD3FF 34%,#4C79FF 100%)}
.step h3{font-size:clamp(20px,1.9vw,24px)}
@media(min-width:821px){ .step h3{min-height:2.32em} }
.step p{color:var(--alum);font-size:16px;margin-top:12px;max-width:34ch}
.step p b{color:var(--porcelain);font-weight:500}
.note{font-size:14.5px;color:var(--alum);margin-top:clamp(36px,5vh,52px);padding-left:15px;border-left:2px solid var(--rule);max-width:70ch}
.note b{color:var(--porcelain);font-weight:500}
@media(max-width:820px){
  .steps{grid-template-columns:1fr;padding-top:0;padding-left:44px;gap:34px}
  .steps-line{display:none}
  .steps::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;border-radius:2px;
    background:linear-gradient(#1F4FE0,#4C79FF 55%,#BFD3FF)}
  .step-dot{top:2px;left:-44px}
}

/* ---------------- measured, not estimated ---------------- */
.acc{margin-top:clamp(36px,5vh,56px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);overflow:hidden}
.acc table{width:100%;border-collapse:collapse}
.acc caption{text-align:left;padding:18px 24px 6px;font-size:14px;color:var(--alum);caption-side:top}
.acc th,.acc td{padding:18px 24px;text-align:right;border-top:1px solid var(--line);vertical-align:baseline}
.acc thead th{border-top:0;font-family:var(--body);font-weight:500;font-size:13.5px;color:var(--alum);line-height:1.3;vertical-align:bottom;padding-top:12px;padding-bottom:14px}
.acc th[scope=row]{text-align:left;font-weight:500;color:var(--porcelain);font-size:16px}
.acc th[scope=row] small{display:block;font-size:13px;color:var(--alum);font-weight:400;margin-top:3px}
.acc td{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(17px,1.5vw,20px);color:var(--porcelain)}
.acc td small{display:block;font-size:12px;color:var(--alum);margin-top:2px}
.acc .safe{background:linear-gradient(180deg,rgba(46,98,255,.09),rgba(46,98,255,.04))}
.acc thead .safe{color:var(--porcelain);font-weight:600;box-shadow:inset 0 2px 0 var(--cobalt-hi)}
.acc td.safe{font-weight:500;color:#fff}
.acc tbody tr:first-child td:not(.safe){color:var(--cobalt-head)}
.acc-lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(28px,4vh,40px)}
.acc-lines p{color:var(--alum);font-size:16px;padding-top:14px;border-top:1px solid var(--line)}
.acc-lines p b{color:var(--porcelain);font-weight:500;display:block;margin-bottom:4px}
.acc-small{font-size:13.5px;color:var(--alum);margin-top:clamp(24px,3vh,32px);max-width:80ch}
@media(max-width:900px){ .acc-lines{grid-template-columns:1fr} }
@media(max-width:640px){
  .acc table,.acc tbody,.acc tr,.acc th,.acc td,.acc caption{display:block}
  .acc thead{display:none}
  .acc caption{padding:16px 18px 4px}
  .acc tbody tr{border-top:1px solid var(--line);padding:14px 18px 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
  .acc tbody tr:first-child{border-top:0}
  .acc th[scope=row]{grid-column:1/-1;padding:0;border:0}
  .acc td{padding:8px 10px;border:1px solid var(--line);border-radius:10px;text-align:left;font-size:17px}
  .acc td::before{content:attr(data-h);display:block;font-family:var(--body);font-size:12px;color:var(--alum);margin-bottom:3px;line-height:1.25}
  .acc td.safe{border-color:#2b4a9a}
}

/* ---------------- see it read: a scripted review, real readings ---------------- */
.talk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:900px){ .talk{grid-template-columns:1fr} }
.talk-points{margin:22px 0 0;padding:0;list-style:none}
.talk-points li{padding:12px 0;border-top:1px solid var(--line);color:var(--alum);font-size:16px}
.talk-points li b{color:var(--porcelain);font-weight:500}
.wqs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.wq{display:inline-block;padding:4px 11px;border:1px solid #2a3348;border-radius:14px;background:#0f1524;color:var(--alum);font-size:13.5px;line-height:1.4}
.wq.amber{border-color:#6b5217;background:#33270c;color:#e6b04c}
.rd{position:relative;border:1px solid #22305a;border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(120% 90% at 85% 0%,rgba(59,54,214,.22),transparent 55%),
             radial-gradient(90% 80% at 0% 100%,rgba(46,98,255,.16),transparent 60%),#05070b;
  padding:18px;min-height:540px;display:flex;flex-direction:column}
.rd-top{display:flex;align-items:center;gap:10px;padding:4px 4px 16px;border-bottom:1px solid #1a2240}
.rd-top .vkb{width:26px;height:26px}
.rd-top b{font-family:var(--display);font-weight:700;font-size:16px;white-space:nowrap}
.rd-top .demo-badge{margin-left:auto}
.rd-status{font-family:var(--mono);font-size:12px;color:var(--alum);opacity:0;transition:opacity .3s;margin-left:6px}
.rd.reading .rd-status{opacity:1}
.rd.reading .rd-top .vk .sh3{animation:vk-breathe3 1.5s cubic-bezier(.45,.05,.25,1) infinite}
.rd.reading .rd-top .vk .sh1{animation:vk-breathe1 1.5s cubic-bezier(.45,.05,.25,1) .08s infinite}
.rd.reading .rd-top .vk .vk-halo{animation:vk-glow 1.5s ease-in-out infinite}
.rd-page{position:relative;overflow:hidden;margin:16px 2px 0;background:#fff;border-radius:6px;box-shadow:0 18px 30px -18px rgba(0,0,0,.9)}
.rd-page img{display:block;width:100%;height:auto}
/* while View reads: one cobalt line runs down the page, top to bottom */
.rd-page::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transform:translateY(-100%);
  background:linear-gradient(to bottom,transparent 55%,rgba(46,98,255,.10) 92%,rgba(76,121,255,.85) calc(100% - 2px),#4C79FF 100%)}
.rd.reading .rd-page::after{animation:rd-scan 1.25s cubic-bezier(.45,.05,.25,1) both}
@keyframes rd-scan{0%{opacity:0;transform:translateY(-100%)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(0)}}
.rd-page .ev{position:absolute;left:calc(var(--x) - .8%);top:calc(var(--y) - 1.5%);width:calc(var(--w) + 1.6%);height:calc(var(--h) + 3%);pointer-events:none}
.rd-page .ev::after{content:"";position:absolute;inset:0;border-radius:4px;box-shadow:0 0 0 2px #2f54c9;background:rgba(47,84,201,.08);opacity:0;transform:scale(1.08);
  transition:opacity .35s var(--ease),transform .45s var(--ease)}
.rd-page .ev.on::after{opacity:1;transform:none}
.rd-page .ev.amber::after{box-shadow:0 0 0 2px #94600a;background:rgba(230,176,76,.14)}
.rd-page .ev.pulse::after{animation:rd-pulse 1s var(--ease) 2}
@keyframes rd-pulse{0%,100%{box-shadow:0 0 0 2px #2f54c9}50%{box-shadow:0 0 0 2px #2f54c9,0 0 0 7px rgba(47,84,201,.28)}}
.rd-log{flex:1;display:flex;flex-direction:column;gap:10px;padding:14px 2px 6px}
.vc{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:11px 14px;border:1px solid #1d2742;border-radius:12px;background:#0b1020;
  transition:opacity .45s,transform .45s,border-color .3s}
.js .vc:not(.show){opacity:0;transform:translateY(10px)}
.vc .tick{width:18px;height:18px;margin-top:2px;border-radius:5px;border:1.5px solid #3a4a6c;display:grid;place-items:center;transition:background .25s,border-color .25s}
.vc .tick svg{width:12px;height:12px;opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s var(--ease)}
.vc.ticked .tick{background:#2f54c9;border-color:#2f54c9}
.vc.ticked .tick svg{opacity:1;transform:none}
.vc .lab{font-size:13px;color:var(--alum);line-height:1.35}
.vc .lab .pg{color:var(--cobalt-head)}
.vc .v{grid-column:2;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:17px;color:var(--porcelain);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vc .v s{color:var(--alum);text-decoration-color:rgba(230,176,76,.8)}
.vc .st{grid-column:3;grid-row:1/3;align-self:center}
.vc .pill{font-family:var(--body);font-size:12px;padding:3px 9px;border-radius:99px;border:1px solid #245c41;background:#10301f;color:#52cc93;opacity:0;transition:opacity .3s}
.vc.filed .pill{opacity:1}
.vc .vn{grid-column:2/4;justify-self:start;min-width:0;max-width:100%;margin:4px 0 0;padding:4px 10px;border:1px solid #2a3348;border-radius:14px;background:#0f1524;
  color:var(--alum);font-family:var(--body);font-size:12.5px;line-height:1.4}
.vc .vn.amber{border-color:#6b5217;background:#33270c;color:#e6b04c}
.vc .corr{grid-column:2/4;min-width:0;font-size:12.5px;color:#e6b04c;margin-top:2px;opacity:1;transition:opacity .3s}
.js .vc .corr:not(.show){opacity:0}
.rd-foot{display:flex;align-items:center;gap:16px;border-top:1px solid #1a2240;padding:12px 4px 0;color:var(--alum);font-size:12px;line-height:1.4}
.rd-foot .replay{flex:0 0 auto;white-space:nowrap}
.replay{appearance:none;background:none;border:0;color:var(--alum);font:500 13px/1 var(--body);cursor:pointer;
  margin-left:auto;padding:8px 4px;text-decoration:underline;text-underline-offset:3px}
.replay:hover{color:var(--porcelain)}
html:not(.js) .replay{display:none}
@media(max-width:520px){ .rd-status{display:none} .rd{padding:14px;min-height:0} .vc{padding:10px 12px} .vc .v{font-size:16px} }

/* ---------------- who it is for ---------------- */
.buyers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(40px,6vh,64px)}
@media(max-width:1060px){ .buyers{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .buyers{grid-template-columns:1fr} }
.buyer{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);padding:24px 22px 22px;
  transition:border-color .3s,transform .35s var(--ease);display:flex;flex-direction:column}
.buyer:hover{border-color:#2b4a9a;transform:translateY(-3px)}
.buyer svg{width:56px;height:56px;margin-bottom:18px;display:block;overflow:visible}
.buyer h3{font-size:19px;line-height:1.22}
.buyer p{color:var(--alum);font-size:15px;margin-top:12px}
/* the role sits under the card's words, never above its heading */
.buyer .who{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cobalt-head)}
.gov-block{margin-top:16px;border:1px solid #23407e;border-radius:var(--r-lg);padding:22px 24px;display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;gap:6px 22px;align-items:start;
  background:linear-gradient(100deg,rgba(46,98,255,.12),rgba(59,54,214,.05) 55%,var(--surface-2))}
.gov-block svg{width:56px;height:56px;display:block;overflow:visible}
.gov-block h3{font-size:clamp(19px,1.7vw,22px)}
.gov-block p{color:var(--alum);font-size:15.5px;margin-top:8px;max-width:72ch}
.gov-block .who{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt-head);white-space:nowrap;padding-top:4px}
@media(max-width:760px){ .gov-block{grid-template-columns:1fr} .gov-block .who{order:3;padding-top:8px} }
.lead-row{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px;display:flex;
  flex-wrap:wrap;gap:8px 18px;align-items:baseline;background:linear-gradient(90deg,rgba(46,98,255,.13),transparent 60%)}
.lead-row b{font-family:var(--display);font-weight:700;font-size:18px}
.lead-row span.p{color:var(--alum);font-size:15px}
.lead-row .who{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt-head);margin-left:auto}
@media(max-width:600px){ .lead-row .who{margin-left:0} }
@supports (grid-template-rows:subgrid){
  .buyer{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0}
  .buyer .who{align-self:end}
}

/* ---------------- the signature: three sheets, the reading line through them ---------------- */
.sig{position:relative;min-height:clamp(520px,82vh,860px);display:flex;align-items:center;overflow:hidden;
  border-top:1px solid var(--line)}
.sig-media{position:absolute;inset:0;z-index:0}
.sig-art{position:absolute;top:50%;right:-10%;width:min(96%,1500px);aspect-ratio:16/9;transform:translateY(-50%);
  --ly:51.9%;--lx0:31.6%;--lx1:87.3%;--p1:48.4%;--p2:60.5%;--p3:73.8%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 82%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 82%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.sig-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* one bead of light runs the reading line and each sheet answers as it passes (plays only on
   screen, never under reduced motion; transform and opacity only) */
.sig-run{position:absolute;left:var(--lx0);width:calc(var(--lx1) - var(--lx0));top:var(--ly);height:0;pointer-events:none}
.sig-bead{position:absolute;left:0;top:-7px;width:12%;height:14px;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(50% 50% at 50% 50%,rgba(240,246,255,.95),rgba(150,185,255,.5) 35%,rgba(46,98,255,0) 72%)}
.sig-pt{position:absolute;top:var(--ly);width:7%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:0;mix-blend-mode:screen;pointer-events:none;
  background:radial-gradient(closest-side,rgba(232,240,255,.85),rgba(122,163,255,.35) 40%,rgba(46,98,255,0))}
.sig-pt.p1{left:var(--p1)}.sig-pt.p2{left:var(--p2)}.sig-pt.p3{left:var(--p3)}
@media (prefers-reduced-motion:no-preference){
  .sig.run .sig-bead{animation:sig-run 8s cubic-bezier(.42,0,.38,1) .4s infinite}
  .sig.run .sig-pt.p1{animation:sig-flash 8s ease-out .79s infinite}
  .sig.run .sig-pt.p2{animation:sig-flash 8s ease-out 1.1s infinite}
  .sig.run .sig-pt.p3{animation:sig-flash 8s ease-out 1.41s infinite}
  .sig.paused .sig-bead,.sig.paused .sig-pt{animation-play-state:paused}
}
@keyframes sig-run{0%{transform:translateX(-100%);opacity:0}2.5%{opacity:1}17.5%{opacity:1}20%{transform:translateX(833%);opacity:0}100%{transform:translateX(833%);opacity:0}}
@keyframes sig-flash{0%{opacity:0}1.5%{opacity:1}7%{opacity:0}100%{opacity:0}}
.sig::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 30%,rgba(0,0,0,.5) 46%,transparent 62%)}
.sig-copy>*{max-width:min(50vw,680px)}
.sig-copy{position:relative;z-index:2;width:100%}
.sig .v-lockup{font-size:clamp(17px,1.7vw,22px)}
.sig h2{font-size:clamp(44px,5.2vw,80px);letter-spacing:-.04em;line-height:.96;margin-top:clamp(28px,4vh,40px)}
.sig h2 span{color:var(--cobalt-head);padding-bottom:.08em;background:var(--thread) no-repeat 0 100%/100% .07em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.sig .lede{max-width:40ch}
@media(max-width:820px){
  .sig{min-height:0;display:block;padding:0 0 64px}
  .sig-media{position:relative;inset:auto;height:auto;aspect-ratio:1/1;max-height:70vh;margin:0 auto}
  .sig::before{display:none}
  .sig-art{position:absolute;inset:0;top:0;right:auto;width:100%;height:100%;aspect-ratio:auto;transform:none;
    --ly:51.1%;--lx0:4.9%;--lx1:92.3%;--p1:31%;--p2:50.1%;--p3:71.1%;
    -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
  .sig-pt{width:11%}
  .sig-copy{margin-top:-5vh}
  .sig-copy>*{max-width:none}
}

/* ---------------- what BATech builds: View as the proof ---------------- */
.bld{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(40px,6vh,64px)}
@media(max-width:1100px){ .bld{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){ .bld{grid-template-columns:1fr} }
.bc{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-2);padding:22px 22px 20px;transition:border-color .3s,transform .35s var(--ease),background .3s}
.bc::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;border-radius:0 0 2px 2px;background:var(--thread);
  opacity:.45;transform:scaleX(.18);transform-origin:left;transition:transform .5s var(--ease),opacity .3s}
.bc:hover{border-color:#2b4a9a;transform:translateY(-3px);background:#0d1220}
.bc:hover::before{transform:scaleX(1);opacity:1}
.bc h3{font-size:clamp(19px,1.55vw,21px);margin-top:4px}
.bc p{color:var(--alum);font-size:15px;margin-top:10px}
.bc .proof{margin-top:auto;padding-top:16px;font-size:14px;color:var(--porcelain)}
.bc .proof b{display:block;font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--alum);margin-bottom:6px}
.bc .proof::before{content:"";display:block;height:1px;background:var(--line);margin:0 0 14px}
/* the number and kind sit at the card's foot, never above its heading */
.bc-foot{display:flex;align-items:center;gap:10px;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.bc-n{color:var(--alum)}
.bc-k{color:var(--cobalt-head);margin-left:auto}
.bc:nth-child(3n+2) .bc-k{color:#A9C2FF}
.bc:nth-child(3n) .bc-k{color:#9C98FF}
.bc.next{border-color:#23407e;background:linear-gradient(160deg,rgba(46,98,255,.16),rgba(59,54,214,.08) 70%,var(--surface-2));text-decoration:none;color:inherit}
.bc.next h3{font-size:clamp(21px,1.8vw,24px)}
.bc.next .go{margin-top:auto;padding-top:18px;font-weight:600;font-size:14.5px;color:var(--cobalt-head);display:flex;align-items:center;gap:10px;overflow-wrap:anywhere}
.bc.next .go .vkb{width:26px;height:26px;flex:0 0 auto}
.bc.next .go .arr{transition:transform .25s var(--ease)}
.bc.next:hover .go .arr{transform:translateX(4px)}
.bc.next:active{transform:translateY(-1px);transition-duration:.08s}
@supports (grid-template-rows:subgrid){
  .bld{grid-auto-rows:auto}
  .bc{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start}
  .bc .proof{margin-top:0;align-self:start}
  .bc-foot{align-self:end}
  .bc.next .go{margin-top:0;align-self:end}
}

/* ---------------- what BATech builds: one line ---------------- */
section.band.builds-line{padding:clamp(40px,7vh,72px) 0}
.builds-line p{font-family:var(--display);font-weight:700;font-size:clamp(19px,1.9vw,24px);letter-spacing:-.012em;line-height:1.3;
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.builds-line p span{color:var(--alum);font-weight:500}
.builds-line .tl{white-space:nowrap}

/* ---------------- security and privacy ---------------- */
.sec{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start}
@media(max-width:900px){ .sec{grid-template-columns:1fr} }
.sec-lines{margin-top:clamp(18px,2.4vw,28px);display:grid;gap:14px;max-width:60ch}
.sec-lines p{font-size:clamp(16.5px,1.35vw,19px);color:var(--alum);line-height:1.5}
.sec-lines p b{color:var(--porcelain);font-weight:500}
.sec-list{list-style:none;margin:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);padding:8px 24px}
.sec-list li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:15px 0;border-top:1px solid var(--line);color:var(--alum);font-size:15.5px}
.sec-list li:first-child{border-top:0}
.sec-list li b{color:var(--porcelain);font-weight:500}
.sec-list li::before{content:"";width:10px;height:10px;margin:7px 0 0 4px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#dfe8ff 0,#2E62FF 40%,#122c8f 100%);box-shadow:0 0 8px rgba(46,98,255,.5)}
.sec-list li:nth-child(2)::before,.sec-list li:nth-child(4)::before{background:radial-gradient(circle at 40% 35%,#eef3ff 0,#4C79FF 40%,#1f3fb0 100%)}
.sec-list li:nth-child(5)::before{background:radial-gradient(circle at 40% 35%,#fff 0,#BFD3FF 35%,#4C79FF 100%)}
.sec-note{font-size:13.5px;color:var(--alum);margin-top:16px}

/* ---------------- the close ---------------- */
.cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(36px,5vh,56px)}
@media(max-width:860px){ .cta-grid{grid-template-columns:1fr} }
.cta-card{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
  background:var(--surface-2);text-decoration:none;transition:border-color .25s,background .25s,transform .35s var(--ease)}
.cta-card:hover{border-color:#2b4a9a;background:#0b1020;transform:translateY(-3px)}
.cta-card:active{transform:translateY(-1px);transition-duration:.08s}
.cta-card b{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.cta-card b .arr{color:var(--cobalt-hi);transition:transform .2s}
.cta-card:hover b .arr{transform:translateX(4px)}
.cta-card span{color:var(--alum);font-size:15px}
.cta-card.primary{border-color:#23407e;background:linear-gradient(160deg,rgba(46,98,255,.18),rgba(59,54,214,.08) 70%,var(--surface-2))}
.contact{margin-top:clamp(28px,4vh,40px);display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);flex-wrap:wrap;
  border:1px solid #22305a;border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,34px);
  background:radial-gradient(90% 140% at 100% 0%,rgba(59,54,214,.18),transparent 60%),radial-gradient(70% 120% at 0% 100%,rgba(46,98,255,.14),transparent 60%),#05070b}
.contact .vkb{width:56px;height:56px;flex:0 0 auto}
.contact-body{flex:1 1 280px;min-width:0}
.contact-k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--alum)}
.contact .mail{display:inline-block;margin-top:6px;font-family:var(--display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(22px,2.7vw,34px);line-height:1.15;color:var(--porcelain);overflow-wrap:anywhere}
.contact .mail.tl{color:var(--porcelain)}
.contact-p{color:var(--alum);font-size:15px;margin-top:8px;max-width:56ch}
.contact .btn{flex:0 0 auto}

footer{border-top:1px solid var(--line);padding:56px 0 40px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px}
@media(max-width:980px){ .foot{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .foot{grid-template-columns:1fr} }
.foot a.foot-mail{color:var(--cobalt-head);font-weight:500}
.foot a.foot-mail:hover{color:var(--porcelain)}
.foot .fh{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--alum);margin:0 0 14px;font-weight:400}
.foot a{display:block;text-decoration:none;color:var(--alum);font-size:14.5px;padding:4px 0;transition:color .2s,transform .25s var(--ease)}
.foot a:not(.v-lockup):hover{transform:translateX(2px)}
.foot a:hover{color:var(--porcelain)}
.foot p{color:var(--alum);font-size:14.5px;margin-top:14px;max-width:42ch}
.legal{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--alum)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rise:not(.in){opacity:1;transform:none}
  .js .vc:not(.show){opacity:1;transform:none}
  .js .vc .corr:not(.show){opacity:1}
  .js .thread-draw{stroke-dashoffset:0}
  .js .peb-lit{opacity:1}
}

/* ---------------- technical audit, 8 Oct: two layouts that broke ---------------- */
/* 821-1000px (an iPad upright at 834, a phone on its side at 844-932): the six inline links did
   not fit beside the lockup and the button, and wrapped to two lines taller than the bar ("What
   View / shows"). The menu button takes over up to 1000px, as it does on phones. */
@media(min-width:821px) and (max-width:1000px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-menu:not([hidden]){display:block}
  .nav-in{gap:10px}
  .nav-in .btn{margin-left:auto}
}
/* Short stages (a phone on its side leaves ~300-430px): the copy was placed for a tall stage, so
   the opening headline went up under the bar (667x375, 844x390) and longer copy ran into the
   readout and the skip pill. On a short stage every beat's words sit low, above the readout, in
   smaller type on a wider measure; the opening (the longest) then fits in about 230px. */
@media (prefers-reduced-motion:no-preference) and (max-height:500px){
  .js .film:not(.film--static) .beat-copy,
  .js .film:not(.film--static) .beat:first-child .beat-copy,
  .js .film:not(.film--static) .beat[data-pos] .beat-copy{top:auto;bottom:44px;transform:translateY(var(--shift))}
  .js .film:not(.film--static) .beat:first-child .beat-copy{max-width:min(46rem,calc(100vw - 2 * var(--pad)))}
  .js .film:not(.film--static) .beat h1,
  .js .film:not(.film--static) .beat:first-child h1{font-size:clamp(24px,8vh,32px)}
  .js .film:not(.film--static) .beat h2{font-size:clamp(22px,7vh,30px)}
  .js .film:not(.film--static) .beat p,
  .js .film:not(.film--static) .beat:first-child p{font-size:14.5px;line-height:1.45;margin-top:8px;max-width:72ch}
  .js .film:not(.film--static) .beat-cta{flex-wrap:nowrap;gap:10px;margin-top:12px}
  .js .film:not(.film--static) .beat-cta .btn.lg{font-size:14px;padding:.6em 1em;min-height:40px}
  .js .film:not(.film--static) .beat .beat-note{margin-top:8px!important;font-size:12.5px!important;max-width:none}
  .js .film:not(.film--static) .film-readout{bottom:12px}
  .js .film:not(.film--static) .film-cue{display:none}
  .js .film:not(.film--static) .film-skip{top:10px;transition:opacity .4s var(--ease),visibility .4s}
  /* on a stage this short the code beats' panels reach the top corner: Skip steps aside once the
     film leaves the video (it is there for beats 1-3, where a reader decides), and the readout
     keeps its number and bar */
  .js .film.film--late:not(.film--static) .film-skip{opacity:0;visibility:hidden}
  .js .film .film-readout-label{display:none}
}

/* phones and tablets: tap targets, and the "What View shows" tabs fit a 320 px screen */
@media(max-width:1000px){ .js .film:not(.film--static) a.film-skip::after{content:"";position:absolute;inset:-8px -2px} }
@media(max-width:360px){
  .tabs:not(.mc-tabs){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0;padding:0}
  .tabs:not(.mc-tabs) .tab{min-width:0}
}