/* ============================================================
   INJAZ — "2,480" demo (revision v2)
   Zone grid · measured contrast · footnote slot · white rail.
   ============================================================ */

@font-face { font-family:"Noto Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("../assets/fonts/noto-sans-400.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("../assets/fonts/noto-sans-700.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans"; font-style:italic; font-weight:400; font-display:swap; src:url("../assets/fonts/noto-sans-400i.woff2") format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-style:normal; font-weight:400; font-display:swap; src:url("../assets/fonts/source-serif-4-400.woff2") format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-style:normal; font-weight:600; font-display:swap; src:url("../assets/fonts/source-serif-4-600.woff2") format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-style:normal; font-weight:700; font-display:swap; src:url("../assets/fonts/source-serif-4-700.woff2") format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-style:italic; font-weight:400; font-display:swap; src:url("../assets/fonts/source-serif-4-400i.woff2") format("woff2"); }

:root{
  --ink:#000F47;
  --sky:#CEEBFF;
  --cream:#F7F3ED;
  --blue:#82B9FF;
  --gold:#FFC000;
  --dark:#060C26;
  --sky-90:rgba(206,235,255,.90);
  --sky-75:rgba(206,235,255,.75);
  --cream-80:rgba(247,243,237,.80);
  --ink-70:rgba(0,15,71,.70);
  --ink-55:rgba(0,15,71,.55);
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --m:clamp(48px, 6vw, 128px);            /* 12-col grid margin */
  --safe-b:96px;                          /* bottom safe-area for footnotes */
}
/* column helper: gx(c) = left edge of column c (0..12) */
/* used inline via calc(var(--m) + (c/12) * (100% - 2*var(--m))) */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--sans); color:#EAF1FF; background:var(--dark);
  font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ list-style:none; padding:0; }
a{ color:inherit; text-decoration:none; }
canvas{ display:block; }
sup{ font-size:.62em; }
.display{ font-family:var(--serif); font-weight:600; letter-spacing:-.012em; line-height:1.08; }
b,strong{ font-weight:700; }

/* ---- fixed layers ---- */
.bg{ position:fixed; inset:0; z-index:0; background:var(--dark); }
.bg::after{ content:""; position:fixed; inset:0; pointer-events:none; opacity:0; transition:opacity .8s ease;
  background:linear-gradient(to bottom, transparent 42%, rgba(130,185,255,.12) 100%); }
body.epi .bg::after{ opacity:1; }
.field{ position:fixed; inset:0; z-index:1; width:100vw; height:100vh; pointer-events:none; }
.scroll-track{ display:none; }

/* ============================================================
   PROGRESS RAIL (00–05 + ∞) — white active, never gold (§G6)
   ============================================================ */
.rail{
  position:fixed; left:clamp(16px,2.4vw,38px); top:50%; transform:translateY(-50%);
  z-index:40; display:flex; flex-direction:column; gap:14px; opacity:0; transition:opacity .6s ease;
}
body.motion .rail{ opacity:1; }
/* only the number chips are persistent (they live in the left margin, clear of the
   text column); the chapter name is a hover-only pill so it never covers the copy */
.rail-item{ position:relative; display:flex; align-items:center; width:30px; opacity:.4; transition:opacity .4s ease; }
.rail-item.active{ opacity:1; }
.rail-num{
  width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--serif); font-size:12px;
  border:1px solid rgba(255,255,255,.28); color:rgba(255,255,255,.7);
  transition:background .4s ease, color .4s ease, border-color .4s ease;
}
.rail-item.active .rail-num{ background:#fff; color:var(--ink); border-color:#fff; }
.rail-label{
  position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#fff; white-space:nowrap; pointer-events:none; opacity:0;
  background:rgba(6,12,38,.94); padding:5px 11px; border-radius:6px; box-shadow:0 2px 12px rgba(0,0,0,.35);
  transition:opacity .25s ease;
}
.rail-item:hover .rail-label{ opacity:1; }
.rail.on-light .rail-num{ border-color:rgba(11,19,48,.3); color:rgba(11,19,48,.7); }
.rail.on-light .rail-item.active .rail-num{ background:var(--ink); color:#fff; border-color:var(--ink); }
.rail.on-light .rail-label{ color:var(--ink); background:rgba(247,243,237,.96); box-shadow:0 2px 12px rgba(0,15,71,.16); }

/* ============================================================
   STAGE / SCENES
   ============================================================ */
body.motion .stage{ position:fixed; inset:0; z-index:5; pointer-events:none; }
body.motion .scene{ position:absolute; inset:0; }
body.motion .scroll-track{ display:block; height:1800vh; }
body.preboot .stage{ opacity:0; }

.scene-dark, .scene-epilogue{ color:#EAF1FF; }
.scene-light, .scene-cream{ color:var(--ink); }

/* shared type */
.eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); line-height:1.7; margin-bottom:24px; }
.lede{ font-size:clamp(16px,1.4vw,19px); line-height:1.55; color:var(--sky-90); max-width:44ch; }
.stat-huge{ font-family:var(--serif); font-weight:600; font-size:clamp(64px,8.5vw,150px); line-height:.9; letter-spacing:-.03em; }
.stat-label{ font-family:var(--serif); font-size:clamp(18px,1.7vw,25px); line-height:1.25; margin-top:14px; max-width:22ch; }
.stat-support{ font-size:15px; color:var(--sky-75); margin-top:16px; max-width:38ch; }
.dot-sep{ opacity:.4; margin:0 .4em; }

/* footnote slot (§G5): bottom-left, one column, ≤44ch */
.footnote{
  position:absolute; left:var(--m); bottom:clamp(40px,6vh,72px);
  max-width:44ch; font-size:13px; line-height:1.5; color:var(--sky-75); text-align:left;
}
.scene-light .footnote, .scene-cream .footnote{ color:var(--ink-70); }

/* ---- ACT 0 ---- */
.scene-logos{ position:absolute; left:var(--m); right:var(--m); top:clamp(28px,4vw,48px); display:flex; justify-content:space-between; align-items:flex-start; }
.logo{ height:clamp(24px,2.6vw,36px); width:auto; }
.logo-ow, .logo-injaz{ filter:brightness(0) invert(1); opacity:.92; }
.scene-light .logo-ow, .scene-cream .logo-ow, .scene-light .logo-injaz, .scene-cream .logo-injaz{ filter:none; opacity:1; }
.act0-center{ position:absolute; left:var(--m); top:45%; transform:translateY(-50%); width:min(58ch,50vw); }
.act0-title{ font-size:clamp(32px,3.9vw,60px); margin-bottom:20px; }
.act0-sub{ margin-top:4px; }
.amal-callout{ position:absolute; left:58%; top:40%; font-size:13.5px; color:var(--sky-90); max-width:24ch; line-height:1.5; will-change:left,top; }
.amal-callout .amal-name{ color:var(--gold); font-weight:700; }
.scroll-cue{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--sky-75); }
.scroll-cue i{ width:1px; height:32px; background:linear-gradient(var(--sky-75), transparent); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(.5); transform-origin:top; opacity:.4;} 50%{ transform:scaleY(1); opacity:1;} }

/* ---- CHAPTER CARDS ---- */
.scene-card{ display:grid; place-items:center; text-align:center; padding:var(--m); }
body.motion .scene-card{ opacity:0; }
body.motion .scene-card.scene-dark{ background:rgba(6,12,38,.74); }
body.motion .scene-card.scene-light{ background:rgba(206,235,255,.80); }
body.motion .scene-card.scene-cream{ background:rgba(247,243,237,.82); }
.card-inner{ max-width:58ch; }
.card-eyebrow{ font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:24px; }
.scene-card.scene-light .card-eyebrow, .scene-card.scene-cream .card-eyebrow{ color:#8A7A00; }
.card-promise{ font-size:clamp(26px,3.2vw,46px); line-height:1.16; }

/* ---- ACT 1 — text zone left (cols 1–5), field right ---- */
.act1-stat{ position:absolute; left:var(--m); top:50%; transform:translateY(-50%); max-width:min(34ch,40vw); text-align:left; }
.act1-stat .stat-huge{ color:#fff; }
.act1-row{ position:absolute; left:var(--m); right:var(--m); bottom:clamp(44px,7vh,84px); display:flex; flex-wrap:wrap; gap:8px 26px; font-size:15px; color:var(--sky-90); }
.act1-row b{ color:var(--blue); }
.dossier-cta{
  position:absolute; z-index:8; pointer-events:none; transform:translate(-50%,0);
  font-family:var(--sans); font-size:13px; font-weight:700; color:var(--gold);
  background:rgba(6,12,38,.72); border:1px solid var(--gold); border-radius:999px;
  padding:9px 16px; cursor:pointer; white-space:nowrap; backdrop-filter:blur(2px);
  transition:background .25s ease, color .25s ease;
}
.dossier-cta:hover{ background:var(--gold); color:#04081e; }

/* ---- ACT 2 — bar chart (dots) + DOM chrome ---- */
.act2-label{ position:absolute; left:var(--m); top:clamp(84px,14vh,150px); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-70); line-height:1.5; max-width:30ch; }
.bars-chart{ position:absolute; inset:0; }
.bar-baseline{ position:absolute; width:1px; background:rgba(0,15,71,.18); }
.bar-track{ position:absolute; height:1px; background:rgba(0,15,71,.12); }
.bar-label{ position:absolute; transform:translateY(-50%); text-align:right; padding-right:0; font-size:clamp(14px,1.35vw,17px); color:var(--ink); }
.bar-value{ position:absolute; transform:translateY(-50%); font-family:var(--serif); font-weight:600; font-size:clamp(15px,1.4vw,18px); color:var(--ink); white-space:nowrap; }
.bars-legend{ display:none; }
.act2-text{ position:absolute; left:var(--m); bottom:clamp(56px,10vh,120px); max-width:min(34ch,34vw); font-size:clamp(16px,1.5vw,19px); color:var(--ink); }
.act2-text b{ color:#2b6bb0; }

/* ---- ACT 3 ---- */
.beat{ position:absolute; inset:0; }
.neet-label{ position:absolute; top:clamp(80px,13vh,150px); font-size:15px; line-height:1.4; max-width:24ch; }
.neet-label b{ font-family:var(--serif); font-size:19px; display:block; margin-bottom:4px; }
.neet-left{ left:calc(var(--m) + 8%); color:var(--blue); }
.neet-right{ left:56%; color:var(--sky-75); }
.bridge-line{ position:absolute; left:var(--m); top:44%; transform:translateY(-50%); font-family:var(--serif); font-size:clamp(22px,2.4vw,34px); line-height:1.24; max-width:min(20ch,40vw); }
.bridge-line b{ color:var(--blue); }
.extract-lockup{ position:absolute; right:var(--m); top:50%; transform:translateY(-50%); text-align:left; max-width:min(30ch,36vw); }
.extract-line{ font-family:var(--serif); font-size:clamp(20px,2.1vw,30px); line-height:1.5; }
.extract-line b{ color:var(--blue); }
.ex-3 b{ color:var(--sky); }
.burst-stat{ position:absolute; right:var(--m); top:50%; transform:translateY(-50%); text-align:left; max-width:min(34ch,40vw); }
.burst-stat .stat-huge{ color:var(--gold); }
.burst-close{ font-size:15px; color:var(--sky-90); margin-top:16px; max-width:30ch; }

/* ---- ACT 4 — text left, wheel right ---- */
.return-lines{ position:absolute; left:var(--m); top:50%; transform:translateY(-50%); max-width:min(38ch,42vw); }
.return-line{ font-family:var(--serif); font-size:clamp(22px,2.4vw,36px); line-height:1.3; }
.return-line b{ color:#2b6bb0; }
.rl-2{ margin-top:12px; }
.substats{ font-size:15px; color:var(--ink-70); margin-top:20px; }
.ring-label{ position:absolute; transform:translate(0,-50%); font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--ink); background:rgba(247,243,237,.82); border:1px solid rgba(0,15,71,.12); border-radius:999px; padding:3px 10px; white-space:nowrap; }
.rl-rest{ color:var(--ink-55); }

/* ---- ACT 5 ---- */
.terrace-card{ position:absolute; width:min(228px,20vw); padding:14px 16px; border:1px solid rgba(255,255,255,.18); border-radius:12px; background:rgba(6,12,38,.62); backdrop-filter:blur(3px); }
.tc-0{ left:calc(var(--m) + 2%); bottom:15%; } .tc-1{ left:38%; bottom:33%; } .tc-2{ left:64%; bottom:51%; }
.tc-month{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:8px; }
.tc-metric{ font-family:var(--serif); font-size:22px; line-height:1.35; }
.tc-metric .tc-cap{ font-family:var(--sans); font-size:12px; color:var(--sky-75); margin-left:6px; }
.mult-amal{ position:absolute; right:var(--m); top:24%; text-align:right; font-size:14px; color:var(--gold); max-width:22ch; }
.mult-summit{ position:absolute; left:50%; top:12%; transform:translateX(-50%); text-align:center; font-size:clamp(19px,1.9vw,27px); line-height:1.3; max-width:32ch; }
.mult-flywheel{ position:absolute; left:var(--m); right:var(--m); bottom:clamp(112px,17vh,168px); text-align:center; font-size:16px; color:var(--gold); }
.mult-fn{ max-width:min(1000px,84vw); left:50%; transform:translateX(-50%); text-align:center; }

/* ---- EPILOGUE — centre text, field low ---- */
.scene-epilogue{ display:grid; grid-template-rows:1fr auto; padding:var(--m); }
.epi-center{ align-self:center; text-align:center; max-width:min(60ch,72vw); margin:0 auto; padding-top:2vh; }
.epi-triad{ font-size:clamp(30px,3.8vw,56px); line-height:1.14; }
.epi-triad .et{ display:block; }
.epi-sub{ font-size:clamp(16px,1.5vw,20px); line-height:1.55; color:var(--sky-90); margin:26px auto 0; max-width:54ch; }
.epi-context{ font-size:14px; color:var(--cream-80); margin-top:18px; }
.epi-cta{ display:flex; gap:16px; justify-content:center; margin-top:32px; }
.btn{ pointer-events:auto; display:inline-block; padding:13px 26px; border-radius:999px; font-weight:700; font-size:14px; }
.btn-solid{ background:var(--gold); color:#04081e; }
.btn-ghost{ border:1px solid rgba(255,255,255,.32); color:#EAF1FF; }
.epi-footer{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding-bottom:6px; }
.epi-teaser{ font-size:13px; color:var(--sky-75); font-style:italic; max-width:60ch; }
.foot-logos{ display:flex; gap:26px; align-items:center; margin-top:6px; }
.foot-logos .logo{ height:22px; }
.foot-source{ font-size:12px; color:var(--sky-75); }
.foot-badge{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,192,0,.78); border:1px solid rgba(255,192,0,.42); border-radius:999px; padding:5px 12px; }

/* ============================================================
   DOSSIER
   ============================================================ */
.dossier{ position:fixed; inset:0; z-index:80; display:none; }
.dossier.show{ display:block; }
.dossier-scrim{ position:absolute; inset:0; background:rgba(4,8,26,.55); backdrop-filter:blur(6px); animation:fade .35s ease; }
.dossier-panel{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(720px,94vw); max-height:94vh; overflow-y:auto;
  background:var(--cream); color:var(--ink); border-radius:20px 20px 0 0;
  padding:clamp(28px,4vw,52px); box-shadow:0 -20px 60px rgba(0,0,0,.4);
  animation:slideUp .5s cubic-bezier(.2,.7,.2,1);
}
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes slideUp{ from{ transform:translate(-50%,40px); opacity:0; } to{ transform:translate(-50%,0); opacity:1; } }
.dossier-close{ position:sticky; top:0; float:right; margin:-8px -8px 0 0; width:38px; height:38px; border-radius:50%; border:1px solid rgba(0,15,71,.2); background:rgba(255,255,255,.7); color:var(--ink); font-size:20px; line-height:1; cursor:pointer; }
.dossier-close:hover{ background:var(--ink); color:#fff; }
.portrait{ display:flex; flex-direction:column; align-items:center; margin-bottom:10px; }
.portrait-canvas{ width:200px; height:250px; }
.portrait-cap{ font-size:11px; color:var(--ink-55); text-align:center; max-width:44ch; margin-top:8px; line-height:1.45; }
.dossier-nameblock{ text-align:center; margin:12px 0 22px; }
.dossier-name{ font-size:38px; }
.dossier-role{ font-size:14px; color:rgba(0,15,71,.6); margin-top:2px; }
.dossier-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; }
.dossier-chips li{ font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px; background:rgba(0,15,71,.06); border:1px solid rgba(0,15,71,.12); }
.dossier-quote{ font-family:var(--serif); font-size:clamp(16px,1.5vw,18px); line-height:1.62; color:#1a2450; }
.dossier-quote p{ margin-bottom:14px; }
.dossier-quote .pull-quote{ font-size:clamp(20px,2vw,26px); font-weight:600; line-height:1.3; color:var(--ink); border-left:3px solid var(--gold); padding-left:18px; margin:22px 0; }
.dossier-quote .emph{ color:var(--ink); font-weight:600; }
.dossier-foot{ margin-top:24px; padding-top:18px; border-top:1px solid rgba(0,15,71,.12); font-size:14px; color:rgba(0,15,71,.7); font-style:italic; }

/* ============================================================
   VIEWPORT NOTICE (< 1280px)
   ============================================================ */
.viewport-notice{ display:none; }
@media (max-width:1279px){
  .viewport-notice{ display:block; position:relative; z-index:90; background:var(--ink); color:#EAF1FF; padding:16px var(--m); text-align:center; font-size:14px; }
  .viewport-notice strong{ color:var(--gold); }
}

/* ============================================================
   STATIC / FALLBACK (reduced-motion or < 1280px)
   ============================================================ */
body.static{ background:var(--dark); }
body.static .field, body.static .rail, body.static .scroll-track, body.static .scroll-cue, body.static .bars-chart, body.static .ring-label, body.static .bar-baseline{ display:none; }
body.static .stage{ position:static; }
body.static .scene{ position:relative; inset:auto; min-height:auto; padding:clamp(48px,8vw,110px) var(--m); border-top:1px solid rgba(255,255,255,.08); display:block; }
body.static .scene *{ opacity:1 !important; transform:none !important; }
body.static .scene-dark, body.static .scene-epilogue{ background:var(--dark); }
body.static .scene-light{ background:var(--sky); color:var(--ink); }
body.static .scene-cream{ background:var(--cream); color:var(--ink); }
body.static .bars-legend{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; margin:14px 0; }
body.static .bars-legend .bl-name{ font-family:var(--serif); }
/* un-position absolutely-placed copy so it flows */
body.static .scene-logos, body.static .act0-center, body.static .amal-callout,
body.static .act1-stat, body.static .act1-row, body.static .act2-label, body.static .act2-text,
body.static .beat, body.static .neet-label, body.static .footnote, body.static .bridge-line,
body.static .extract-lockup, body.static .burst-stat, body.static .return-lines,
body.static .terrace-card, body.static .mult-amal, body.static .mult-summit, body.static .mult-flywheel,
body.static .dossier-cta, body.static .epi-center, body.static .epi-footer{
  position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto; transform:none; text-align:left; margin:0 0 18px; max-width:none; width:auto;
}
body.static .beat{ margin-bottom:22px; }
body.static .neet-label{ display:inline-block; margin:0 24px 12px 0; }
body.static .terrace-card{ display:inline-block; width:auto; margin:0 12px 12px 0; vertical-align:top; }
body.static .dossier-cta{ display:inline-block; pointer-events:auto; margin-top:10px; }
body.static .epi-cta{ justify-content:flex-start; }
body.static .card-promise{ font-size:clamp(24px,3vw,38px); }
body.static .scene-card{ display:block; text-align:left; }

@media (prefers-reduced-motion: reduce){ .scroll-cue i{ animation:none; } }

/* ============ PASSPHRASE GATE (confidential-demo landing) ============ */
/* Lock scroll until authed; the head script adds .gate-authed pre-paint for
   returning visitors so they never see the gate or a scroll jump. */
html:not(.gate-authed){ overflow:hidden; }

.gate{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 24px;
  background:var(--dark); color:#EAF1FF;
  font-family:var(--sans); text-align:center;
  opacity:1; transition:opacity .55s ease;
}
html.gate-authed .gate{ display:none; }
.gate--out{ opacity:0; pointer-events:none; }

.gate::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(130,185,255,.16), transparent 60%),
    radial-gradient(90% 70% at 50% 122%, rgba(255,192,0,.10), transparent 55%);
}

.gate-card{
  position:relative; z-index:1;
  width:min(440px, 92vw);
  display:flex; flex-direction:column; align-items:center;
}
.gate-eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); line-height:1.7; margin:0 0 22px;
}
.gate-mark{
  font-family:var(--serif); font-weight:600; letter-spacing:-.012em;
  font-size:clamp(56px, 9vw, 96px); line-height:1; color:#fff; margin:0 0 18px;
}
.gate-sub{
  font-size:clamp(15px,1.3vw,17px); line-height:1.55; color:var(--sky-75);
  max-width:34ch; margin:0 0 30px;
}
.gate-form{ display:flex; width:100%; gap:10px; }
.gate-input{
  flex:1 1 auto; min-width:0;
  font-family:var(--sans); font-size:16px; color:#EAF1FF;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(206,235,255,.28); border-radius:10px;
  padding:14px 16px; outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.gate-input::placeholder{ color:rgba(206,235,255,.45); }
.gate-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,192,0,.22);
  background:rgba(255,255,255,.08);
}
.gate-btn{
  flex:0 0 auto;
  font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:.01em;
  color:var(--ink); background:var(--gold);
  border:none; border-radius:10px; padding:14px 26px; cursor:pointer;
  transition:transform .12s ease, filter .18s ease;
}
.gate-btn:hover{ filter:brightness(1.06); }
.gate-btn:active{ transform:translateY(1px); }
.gate-error{ margin:16px 0 0; font-size:13.5px; color:#FFD1D1; min-height:1em; }
.gate-foot{
  position:absolute; left:0; right:0; bottom:28px; z-index:1;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(206,235,255,.4);
}
@keyframes gate-shake{
  10%,90%{ transform:translateX(-1px); }
  20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-5px); }
  40%,60%{ transform:translateX(5px); }
}
.gate--shake{ animation:gate-shake .5s ease; }
@media (max-width:420px){
  .gate-form{ flex-direction:column; }
  .gate-btn{ padding:14px; }
}
@media (prefers-reduced-motion: reduce){
  .gate, .gate--shake{ transition:none; animation:none; }
}