/* BY THE STANDARD. Shared design layer plus the landing page's own rules.
   Tokens are the single source of truth; nothing hard-codes a colour. */

/* BY THE STANDARD: shared design layer.
   Dark is the default world. Light is an explicit choice on data-bts, so a host
   theme can never override the brand. */
:root{
  --bg:#000;        --fg:#fff;
  --s1:#0A0A0A;     --s2:#141414;     --s3:#1A1A1A;
  --line:#1F1F1F;   --line2:#2A2A2A;
  --mute:#A8A8A8;   --faint:#6E6E6E;
  --accent:#E6FA24;                   /* fill only */
  --on-accent:#000;
  --accent-ink:#E6FA24;               /* accent as ink, hairline, focus */
  --ok:#8FE04A;     --warn:#FFC24D;
  --grain-op:.025;  --grain-blend:normal;

  --disp:'Archivo','Arial Narrow',system-ui,sans-serif;
  --txt:'Inter',system-ui,-apple-system,sans-serif;
  --gut:22px; --max:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
}
/* Volt as text on a light ground is 1.04:1, so on light the accent may only be
   a fill. As ink it becomes neutral silver: emphasis by weight, not by hue. */
:root[data-bts="light"]{
  --bg:#F2F2F0;     --fg:#0A0A0A;
  --s1:#E9E9E6;     --s2:#E1E1DE;     --s3:#D9D9D6;
  --line:#D6D6D2;   --line2:#C2C2BE;
  --mute:#54544F;   --faint:#84847F;
  --accent:#E6FA24;
  --on-accent:#000;
  --accent-ink:#5E6260;
  --ok:#3E7A18;     --warn:#8A5A00;
  --grain-op:.035;  --grain-blend:multiply;
}
*{box-sizing:border-box}
/* a standalone file gets no host reset, and display:flex beats the hidden attribute */
[hidden]{display:none!important}
html{background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--txt);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  transition:background 320ms var(--ease),color 320ms var(--ease);
}
#grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);
  background-repeat:repeat;background-size:128px 128px;
}
.page{position:relative;z-index:1}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
p{margin:0}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--disp);text-transform:uppercase;margin:0;font-stretch:76%}
h1{font-weight:900;line-height:.86;letter-spacing:-.03em;font-size:clamp(38px,7vw,86px)}
h2{font-weight:800;line-height:.96;letter-spacing:-.025em;font-size:clamp(26px,4.2vw,50px)}
h3{font-weight:800;line-height:1.02;letter-spacing:-.015em;font-size:clamp(19px,2.3vw,27px)}
h4{font-weight:700;line-height:1.1;letter-spacing:.02em;font-size:14px}

.label{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0}
.label.on{color:var(--accent-ink)}
.body{color:var(--mute);max-width:64ch}
.num{font-variant-numeric:tabular-nums}

/* the wordmark's trailing dash: closes a statement, one per screen */
.us{display:inline-block;width:.38em;height:.082em;background:var(--accent-ink);margin-left:.15em;vertical-align:baseline}

:where(button,a,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}

/* nav */
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.nav-l{display:flex;align-items:center;gap:14px;min-width:0}
.brand{display:block;height:22px;width:auto;flex:none}
.brand.on-light,:root[data-bts="light"] .brand.on-dark{display:none}
:root[data-bts="light"] .brand.on-light{display:block}
.nav-t{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-r{display:flex;align-items:center;gap:10px;flex:none}
#theme{width:38px;height:38px;flex:none;padding:0;cursor:pointer;background:none;
  border:1px solid var(--line2);color:var(--mute);display:inline-flex;align-items:center;justify-content:center;
  transition:border-color 160ms var(--ease),color 160ms var(--ease)}
#theme:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
#theme svg{width:15px;height:15px;display:block}
#theme .moon{display:none}
:root[data-bts="light"] #theme .moon{display:block}
:root[data-bts="light"] #theme .sun{display:none}

/* controls */
.btn{font-family:var(--txt);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  background:var(--accent);color:var(--on-accent);border:0;padding:0 28px;height:50px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:transform 120ms var(--ease);text-decoration:none;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn.ghost{background:none;color:var(--mute);border:1px solid var(--line2)}
.btn.ghost:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
.btn.sm{height:42px;padding:0 18px;font-size:10px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:default}

.field{display:block;width:100%;height:52px;background:var(--s2);color:var(--fg);
  border:1px solid var(--line2);padding:0 16px;font:inherit;font-size:15px;border-radius:0}
.field::placeholder{color:var(--faint)}
.field:focus{border-color:var(--accent-ink);outline:none;box-shadow:0 0 0 1px var(--accent-ink)}

.pill{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line2);color:var(--faint);padding:6px 11px;white-space:nowrap}
.pill.on{border-color:var(--accent-ink);color:var(--accent-ink)}
.pill.fill{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* the mock frame: every screen below is a labelled specimen, not a live page */
.spec{margin-bottom:clamp(54px,9vh,104px)}
.spec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:0;border-bottom:1px solid var(--line)}
.spec-head .n{font-family:var(--disp);font-stretch:76%;font-weight:800;font-size:11px;letter-spacing:.18em;color:var(--accent-ink)}
.spec-head .t{font-family:var(--disp);font-stretch:76%;text-transform:uppercase;font-weight:800;font-size:clamp(15px,1.9vw,20px);letter-spacing:-.005em;flex:1;min-width:180px}
.spec-head .d{font-size:12.5px;color:var(--faint);max-width:52ch;line-height:1.5}
.screen{border:1px solid var(--line);border-top:0;background:var(--s1);overflow:hidden}
.screen.pad{padding:clamp(24px,4vw,56px)}

section{border-top:1px solid var(--line);padding-block:clamp(48px,7vw,86px)}
.sec-head{margin-bottom:clamp(30px,5vw,48px)}
.sec-head h2{margin-bottom:12px}

/* video */
.video{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#050505;overflow:hidden;border:0;padding:0;cursor:pointer;text-align:left}
.video img{width:100%;height:100%;object-fit:cover;display:block}
.video .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.12) 46%,rgba(0,0,0,.34) 100%)}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;background:var(--accent);display:grid;place-items:center;transition:transform 160ms var(--ease)}
.video:hover .play{transform:translate(-50%,-50%) scale(1.06)}
.play svg{width:24px;height:24px;fill:#000;margin-left:3px}
.vmeta{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.vmeta .vt{font-family:var(--disp);font-stretch:76%;text-transform:uppercase;font-weight:800;font-size:clamp(14px,1.7vw,20px);color:#fff;line-height:1.05}
.vmeta .vd{font-size:10.5px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.72);white-space:nowrap}
.vbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18)}
.vbar i{display:block;height:100%;background:var(--accent);width:0}
/* the watermark that makes a leak attributable */
.wm{position:absolute;right:14px;top:12px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.34);text-align:right;line-height:1.5;pointer-events:none;user-select:none}

.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.grid > *{background:var(--bg)}
.cols2{grid-template-columns:1fr}
.cols3{grid-template-columns:1fr}
@media(min-width:720px){.cols2{grid-template-columns:1fr 1fr}}
@media(min-width:720px){.cols3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.cols3{grid-template-columns:repeat(3,1fr)}}

footer{border-top:1px solid var(--line);padding-block:28px 46px}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot-in p{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* player transport */
.ctrls{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--s2);border-top:1px solid var(--line);flex-wrap:wrap}
.ctrls button{background:none;border:0;color:var(--fg);cursor:pointer;display:grid;place-items:center;width:32px;height:32px;padding:0}
.ctrls svg{width:15px;height:15px;fill:currentColor}
.track{flex:1 1 160px;height:3px;background:var(--line2);position:relative;cursor:pointer;min-width:120px}
.track i{position:absolute;inset:0 auto 0 0;background:var(--accent-ink);width:0}
.track .mk{position:absolute;top:-3px;width:2px;height:9px;background:var(--faint)}
.time{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.cc{font-size:10px;font-weight:600;letter-spacing:.14em;border:1px solid var(--line2);padding:5px 8px;color:var(--faint);background:none;cursor:pointer;width:auto!important;height:auto!important}
.cc[aria-pressed="true"]{border-color:var(--accent-ink);color:var(--accent-ink)}
.caption{position:absolute;left:50%;transform:translateX(-50%);bottom:34px;background:rgba(0,0,0,.76);
  color:#fff;font-size:14px;padding:7px 13px;max-width:82%;text-align:center;line-height:1.4}


/* ---- landing ---- */

/* Landing v2. The film is the page: it runs on arrival, muted, and the type
   sits in it rather than beside it. Same quiet register as the member app v2. */
:root{
  --fg:#E9E9E4; --mute:#9B9B95; --faint:#67675F;
  --line:#191919; --line2:#232323; --s1:#070707; --s2:#0D0D0D;
}
:root[data-bts="light"]{
  --fg:#1A1B18; --mute:#5F605A; --faint:#90918A;
  --line:#E0E0DB; --line2:#CFCFC9; --s1:#EDEDE9; --s2:#E6E6E1;
}
body{font-size:16px;line-height:1.7}
.wrap{max-width:1180px}
h2{font-family:var(--disp);font-stretch:80%;text-transform:uppercase;font-weight:800;
  font-size:clamp(22px,3vw,36px);line-height:1.02;letter-spacing:-.015em}
.lb{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:0}

/* nav floats over the film until you scroll past it */
nav{border-bottom:1px solid transparent;background:transparent;transition:background 300ms var(--ease),border-color 300ms var(--ease)}
nav.stuck{background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom-color:var(--line)}
.nav-in{height:66px}
.brand{height:19px;opacity:.92}
.nav-r{gap:10px}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:13.5px;color:var(--mute);text-decoration:none}
.nav-links a:hover{color:var(--fg)}
@media(max-width:820px){.nav-links{display:none}}
#theme{border-radius:50%;width:34px;height:34px;border-color:var(--line2);color:var(--faint)}
#theme:hover{border-color:var(--faint);color:var(--fg)}
.enrolbtn{font-size:12px;letter-spacing:.06em;height:38px;padding:0 18px;text-transform:none;font-weight:500}

/* hero */
.hero{position:relative;min-height:clamp(540px,84svh,880px);display:flex;align-items:flex-end;
  overflow:hidden;background:#050505;margin-top:-66px;padding-top:66px}
.hero video,.hero .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.34) 46%,rgba(0,0,0,.52) 100%)}
.hero .inner{position:relative;width:100%;padding-block:clamp(38px,7vh,86px)}
.htitle{font-family:var(--disp);font-stretch:80%;text-transform:uppercase;font-weight:900;
  font-size:clamp(40px,9.6vw,132px);line-height:.88;letter-spacing:-.035em;color:#F4F4F0;
  margin-block:18px 20px}
.hsub{font-size:clamp(15px,1.9vw,19px);line-height:1.6;color:rgba(240,240,236,.76);max-width:40ch}
.hacts{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,4vh,36px);align-items:center}
.hero .lb{color:rgba(240,240,236,.6)}

/* film controls, bottom right, deliberately small */
.film{position:absolute;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vh,30px);
  display:flex;gap:8px;align-items:center;z-index:3}
.fbtn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.34);
  background:rgba(0,0,0,.3);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;
  backdrop-filter:blur(6px);transition:border-color 200ms var(--ease),background 200ms var(--ease)}
.fbtn:hover{border-color:#fff;background:rgba(0,0,0,.5)}
.fbtn svg{width:14px;height:14px;fill:currentColor}
.fbtn.wide{width:auto;border-radius:19px;padding:0 15px;gap:8px;font:inherit;font-size:12px;
  letter-spacing:.04em;display:flex;align-items:center;justify-content:center}
.fnote{font-size:11px;color:rgba(255,255,255,.4);margin-right:4px}
@media(max-width:620px){.fnote{display:none}}

/* big play, only if autoplay was refused */
.bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:76px;height:76px;border-radius:50%;border:1px solid rgba(255,255,255,.6);
  background:rgba(0,0,0,.28);color:#fff;display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(4px)}
.bigplay svg{width:20px;height:20px;fill:currentColor;margin-left:3px}

.scroll{position:absolute;left:50%;bottom:clamp(16px,3vh,30px);transform:translateX(-50%);z-index:2;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42)}
@media(max-width:760px){.scroll{display:none}}

/* sections */
section{padding-block:clamp(66px,11vw,140px)}
section + section{border-top:1px solid var(--line)}
.stmt{font-family:var(--disp);font-stretch:80%;text-transform:uppercase;font-weight:800;
  font-size:clamp(24px,4.2vw,54px);line-height:1.02;letter-spacing:-.02em;max-width:18ch}
.stmt em{font-style:normal;color:var(--mute)}
.stmt-b{color:var(--mute);max-width:52ch;font-size:15.5px;margin-top:clamp(24px,4vw,38px)}

.facts{display:grid;gap:26px 44px;grid-template-columns:repeat(2,1fr);margin-top:clamp(34px,5vw,54px)}
@media(min-width:760px){.facts{grid-template-columns:repeat(4,1fr)}}
.facts .v{font-family:var(--disp);font-stretch:80%;font-weight:800;font-size:clamp(24px,3vw,34px);line-height:1;font-variant-numeric:tabular-nums}
.facts .k{font-size:12px;color:var(--faint);margin-top:8px}

/* curriculum, locked */
.chp{margin-bottom:clamp(30px,5vw,48px)}
.chp-h{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line2);
  width:100%;background:none;border-left:0;border-right:0;border-top:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer;padding-inline:0}
.chp-h:hover .n,.chp-h:hover .m{color:var(--mute)}
.chp-h .n{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);flex:none}
.chp-h .t{font-family:var(--disp);font-stretch:80%;text-transform:uppercase;font-weight:800;
  font-size:clamp(20px,2.8vw,32px);line-height:1;letter-spacing:-.012em;flex:1;min-width:140px}
.chp-h .m{font-size:12.5px;color:var(--faint);white-space:nowrap}
.chp-chev{width:16px;height:16px;flex:none;stroke:var(--faint);fill:none;stroke-width:2;
  transition:transform 200ms var(--ease)}
.chp-h[aria-expanded="true"] .chp-chev{transform:rotate(180deg)}
.chp-body{padding-top:14px}
.chp .sum{font-size:14.5px;color:var(--mute);line-height:1.6;max-width:56ch;margin-top:0}
.mods{display:grid;gap:20px 34px;grid-template-columns:1fr;margin-top:20px}
@media(min-width:620px){.mods{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.mods{grid-template-columns:repeat(3,1fr)}}
.mod .mh{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.mod ol{list-style:none;margin:0;padding:0}
.mod li{font-size:14px;color:var(--mute);padding-block:4px;line-height:1.45}

/* the lock: structure and counts legible, content is not */
.lock{filter:blur(var(--b,7px));opacity:.5;user-select:none;-webkit-user-select:none;pointer-events:none}
.chp-h .t.lock{--b:13px}
.sum.lock{--b:5px}
.mods.lock{--b:6px}
@media(max-width:700px){.chp-h .t.lock{--b:9px}}

/* enrol */
.enrol{display:grid;gap:40px;grid-template-columns:1fr}
@media(min-width:900px){.enrol{grid-template-columns:1.1fr .9fr;gap:0}
  .enrol > div:first-child{padding-right:60px;border-right:1px solid var(--line)}
  .enrol > div:last-child{padding-left:60px}}
.price{font-family:var(--disp);font-stretch:80%;font-weight:800;font-size:clamp(34px,5vw,52px);line-height:1;margin-block:14px 6px}
.price small{display:block;font-family:var(--txt);font-size:12.5px;color:var(--faint);margin-top:10px;font-weight:400}
.incl{list-style:none;margin:18px 0 0;padding:0}
.incl li{font-size:14.5px;color:var(--mute);padding-block:9px;border-bottom:1px solid var(--line);line-height:1.5}
.incl li:last-child{border-bottom:0}
.incl li b{color:var(--fg);font-weight:400}
.wl form{display:flex;gap:0;margin-top:20px;flex-wrap:wrap;max-width:460px}
.wl input{flex:1 1 220px;background:none;border:0;border-bottom:1px solid var(--line2);
  color:var(--fg);font:inherit;font-size:16px;height:54px;outline:none;min-width:0}
.wl input::placeholder{color:var(--faint)}
.wl input:focus{border-bottom-color:var(--faint)}
.wl .btn{height:54px}
.fine{font-size:12.5px;color:var(--faint);margin-top:16px;max-width:42ch;line-height:1.6}
.done2{display:none;gap:10px;flex-direction:column;margin-top:20px}
.done2 h3{font-family:var(--disp);font-stretch:80%;text-transform:uppercase;font-weight:800;font-size:clamp(19px,2.4vw,26px)}
.done2 p{font-size:14.5px;color:var(--mute);max-width:44ch}

.btn{height:48px;padding:0 24px;font-size:12.5px;letter-spacing:.05em;text-transform:none;font-weight:500}
.btn.ghost{border-color:rgba(255,255,255,.34);color:#F0F0EC;background:none}
.btn.ghost:hover{border-color:#fff}
section .btn.ghost{border-color:var(--line2);color:var(--mute)}
section .btn.ghost:hover{border-color:var(--faint);color:var(--fg)}

footer{border-top:1px solid var(--line);padding-block:30px 46px}
.foot-in p{font-size:12.5px;color:var(--faint);text-transform:none;letter-spacing:.02em}

@media(prefers-reduced-motion:reduce){.scroll{display:none}}


/* ---- deploy additions ---- */

/* the film fills the hero; the trailer sits on top of the loop when playing */
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#trailer{z-index:1}
.hero .veil{z-index:2}
.hero .film,.hero .bigplay,.hero .scroll,.hero .inner{z-index:3}

/* watching the film: the type steps out of the way and the scrim lifts */
.hero.watching .inner,.hero.watching .scroll{opacity:0;pointer-events:none}
.hero.watching .veil{opacity:.25}
.hero .inner,.hero .scroll,.hero .veil{transition:opacity 420ms var(--ease)}
.fbtn.close{display:none}
.hero.watching .fbtn.close{display:grid}
@media(prefers-reduced-motion:reduce){.hero .inner,.hero .scroll,.hero .veil{transition:none}}

/* honeypot: off screen rather than display:none, which bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.err{color:var(--warn);font-size:13.5px;margin-top:12px;max-width:42ch;line-height:1.6}
.wl form[hidden],.fine[hidden],.done2[hidden]{display:none}
.done2{display:flex}
.btn[disabled]{opacity:.5;cursor:default}

/* Over the film the nav sits on photography, not on a token background, so it
   cannot use the theme's ink. Force it light until the nav gains a ground. */
nav:not(.stuck) .nav-links a{color:rgba(255,255,255,.82)}
nav:not(.stuck) .nav-links a:hover{color:#fff}
nav:not(.stuck) #theme{color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.34)}
nav:not(.stuck) #theme:hover{color:#fff;border-color:#fff}
/* and lift the top of the scrim so light type always has something to sit on */
.hero .veil{background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.34) 46%,rgba(0,0,0,.62) 100%)}

/* ---------- the site gate ----------
   A soft privacy curtain, not a security boundary: nothing behind it on the
   landing page is sensitive (no pricing, no real curriculum). It exists so
   the site can sit quiet before a deliberate public announcement. Toggled
   from the admin console's Settings tab, backed by config/site.public. */
.gate{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.gatebox{width:fit-content;max-width:90vw;text-align:center}
.gatebox img{height:20px;width:auto;margin-bottom:44px;opacity:.92}
.gatebox h1{font-family:var(--disp);font-stretch:80%;text-transform:uppercase;font-weight:800;
  font-size:19px;letter-spacing:.005em;margin-bottom:26px;white-space:nowrap}
@media(max-width:360px){.gatebox h1{white-space:normal;font-size:17px;max-width:220px}}
.gate-pass{display:flex;gap:0;width:100%;border-bottom:1px solid var(--line2)}
.gate-pass input{flex:1;min-width:0;background:none;border:0;color:var(--fg);font:inherit;font-size:12.5px;
  height:38px;padding:0;outline:none;text-align:center;letter-spacing:.03em}
.gate-pass input::placeholder{color:var(--faint);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.gate-pass input:focus{color:var(--fg)}
.gate-pass button{flex:none;height:38px;padding:0 14px;margin-left:10px;font-size:10px}
.gate-google{display:block;margin:22px auto 0;background:none;border:0;color:var(--faint);
  font:inherit;font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:6px}
.gate-google:hover{color:var(--mute)}
.gate .err{margin-top:14px;font-size:11.5px}