/* =========================================================================
   COUNTERMOVE AI — private capabilities briefing

   The cinematic reel is the page: it plays fixed behind everything (two
   players, so the loop is a dissolve), the logo + wordmark float above it,
   and all copy and the form are real text in ONE flowing column. Column and
   logo are laid out in a virtual pixel grid per orientation (the grids of the
   original artwork, so the composition is unchanged):

     landscape / desktop  ← 1672 × 941, covering the viewport, pinned top-left
     portrait / phones    ← 940 × 1672, fitted to the width (zoomed on phones);
                            the page scrolls

   app.js measures the viewport and sets on .mock:
     --s   screen px per grid px
     --u   screen px per design unit  = --s × k (k per grid: how large the
           column is relative to the grid; the column is 512 units wide)
     --ax              the column's x in grid px; --band1/--band2 the mark's clearance per screen
     --mx, --my, --mw  the logo mark's box in grid px
   ========================================================================= */

/* Self-hosted fonts (SIL OFL): Latin + Latin-Extended subsets. */
@font-face { font-family: "Oswald"; font-weight: 300; font-display: swap;
  src: local("Oswald Light"), url("assets/fonts/oswald-300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oswald"; font-weight: 300; font-display: swap;
  src: url("assets/fonts/oswald-300-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Oswald"; font-weight: 500; font-display: swap;
  src: local("Oswald Medium"), url("assets/fonts/oswald-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oswald"; font-weight: 500; font-display: swap;
  src: url("assets/fonts/oswald-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Big Shoulders Display"; font-weight: 400; font-display: block;   /* no stand-in font for the headline */
  src: url("assets/fonts/bigshoulders-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Big Shoulders Display"; font-weight: 400; font-display: block;   /* no stand-in font for the headline */
  src: url("assets/fonts/bigshoulders-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --font-display: "Oswald", "Bahnschrift", "Arial Narrow", system-ui, sans-serif;
  /* Non-Latin scripts use the visitor's OS fonts: no downloads, no third parties */
  --f-ar: "Segoe UI", "Noto Naskh Arabic", "Noto Sans Arabic", "Geeza Pro", Arial, sans-serif;
  --f-he: "Segoe UI", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
  --f-ja: "Yu Gothic UI", "Yu Gothic", "Meiryo", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --f-ko: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  --gold:        #c4a05a;
  --gold-bright: #e4c685;
  --gold-deep:   #9a7530;
  --ink:         #ece9e1;
  --ink-dim:     #8f8c86;
  --ink-faint:   #77746e;
  --bg:          #06070a;
  --box-fill:    rgba(3, 5, 9, .82);   /* field fill over the photo */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }   /* the cue glides to the form */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(196, 160, 90, .35); color: #fff; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* -------------------------------------------------------------- Stage ---- */
.stage { position: relative; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; overflow-x: clip; }
.mock  { position: relative; --s: 1; --u: 1; --ax: 68; --mx: 62; --my: 193; --mw: 305; --band1: 120px; --band2: 120px; }

/* The reel: fixed, covering the viewport, beneath everything. Two players;
   the one going off air fades out on top of the one coming on. */
.bg { position: fixed; inset: 0; z-index: 0; background: var(--bg); }
.bg__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
}
.bg__video.is-fading { opacity: 0; transition: opacity 1.2s ease; }
.mock.reel-off .bg__video { display: none; }        /* autoplay refused: the cover is the page */
/* The cover: the reel's first frame, over the players until the reel is really
   running (Safari draws its first frames letterboxed, and shows its own play
   button when Low Power Mode blocks autoplay; the cover hides both). */
.bg__cover {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  object-fit: cover; object-position: center;
  pointer-events: none;
  transition: opacity .25s ease;
}
.mock.reel-on .bg__cover { opacity: 0; }
/* logo + wordmark (position and width in the virtual grid, set by app.js) */
.bg__mark {
  position: fixed; z-index: 2; pointer-events: none;   /* pinned like the reel, above the screens */
  left: calc(var(--mx) * 1px * var(--s)); top: calc(var(--my) * 1px * var(--s));
  width: calc(var(--mw) * 1px * var(--s)); height: auto;
  transition: opacity .3s ease;
}
.mock.mark-hide .bg__mark { opacity: 0; }   /* pinned with the video: steps aside while text passes under it */
.scrim { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* Landscape / desktop: the reel's own framing, pinned top-left like the art. */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 500px) {
  .mock { min-height: 100vh; min-height: 100dvh; }
  .bg__video, .bg__cover { object-position: left top; }
  .scrim { background: linear-gradient(90deg, rgba(3,5,9,.62) 0%, rgba(3,5,9,.42) 24%, rgba(3,5,9,.14) 42%, rgba(3,5,9,0) 56%); }
}

/* Portrait / phones and tablets: the reel is centre-cropped; the page scrolls. */
@media (orientation: portrait), (max-width: 699px), (max-height: 499px) {
  .scrim { background: linear-gradient(180deg, rgba(3,5,9,.55) 0%, rgba(3,5,9,.35) 45%, rgba(3,5,9,.45) 100%); }
}
/* ------------------------------------------------------------ The screens
   Two full-height screens over the pinned reel. Screen one holds the hero
   (centred between the wordmark and the cue), screen two the form column,
   both starting at --ax and never resting under the pinned mark
   (--band1 / --band2 are the mark's clearance, set by app.js). */
.screen {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  line-height: normal;
}
.screen--reel {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--band1) 0 calc(150px * var(--u)) calc(var(--ax) * 1px * var(--s));
}
.screen--form {
  padding: var(--band2) 0 calc(60px * var(--u)) calc(var(--ax) * 1px * var(--s));
  background: linear-gradient(90deg, rgba(3,5,9,.74) 0%, rgba(3,5,9,.52) 36%, rgba(3,5,9,.24) 70%, rgba(3,5,9,.12) 100%);
}
/* The hero and the column keep the artwork's place at the left of the screen in
   every language; right-to-left text mirrors inside them (physical margins,
   not direction-aware ones, so RTL cannot push them to the right edge). */
.hero, .column { margin-left: 0; margin-right: auto; }
.column { width: calc(512px * var(--u)); }
.hero, .column, .cue { visibility: hidden; }        /* revealed once measured (prevents flash) */
.mock.ready :is(.hero, .column, .cue) { visibility: visible; }

/* The cue: names what is below and glides there when clicked */
.cue {
  position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: #e3e1dc; text-decoration: none; white-space: nowrap;   /* the headline's colour */
  font-weight: 500; font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  transition: color .2s ease;
}
.cue__line { width: 1px; height: 36px; background: linear-gradient(180deg, rgba(227,225,220,0), #e3e1dc); }
.cue svg { width: 18px; height: 10px; animation: bob 2.4s ease-in-out infinite; }
.cue:hover { color: #ffffff; }
.cue:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Hero: headline, gold rule, English tagline, rotating translation */
.hero { display: flex; flex-direction: column; align-items: flex-start; width: calc(512px * var(--u)); --hl: 100; }
.headline {
  margin: 0;
  max-width: 100%;
  font-family: "Big Shoulders Display", var(--font-display);   /* measured match to the art */
  font-weight: 400;
  font-size: calc(var(--hl-fit, var(--hl)) * 1px * var(--u));
  line-height: 1.14;              /* a little air between the headline's own lines */
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: start;
  white-space: pre-line;   /* "\n" in the string = line break */
  color: #e3e1dc;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .55);
}
.headline .gold { color: var(--gold); }
.rule {
  display: block;
  margin-top: calc(72px * var(--u));      /* air between the headline and the rest */
  width: calc(67px * var(--u));
  height: calc(2px * var(--u));
  background: linear-gradient(90deg, var(--gold-bright), var(--gold-deep));
}
.tagline {
  margin: calc(34px * var(--u)) 0 0;
  font-weight: 500;
  font-size: calc(18.3px * var(--u));
  letter-spacing: calc(8.7px * var(--u));
  text-transform: uppercase;
  color: #e3e1dc;               /* the headline's colour */
  white-space: nowrap;
}
.rotator {
  margin: calc(34px * var(--u)) 0 0;      /* the tagline's place under the rule */
  width: 100%;
  text-align: start;
  font-weight: 300;
  font-size: calc(24px * var(--u));
  letter-spacing: calc(1.2px * var(--u));
  line-height: 1.25;
  color: rgba(227, 225, 220, .82);   /* the headline's colour, a touch softer */
}
.rotator__text {
  display: inline-block;
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s ease;
}
.rotator__text.is-out { opacity: 0; transform: translateY(-5px); }
.rotator__text.is-in  { transition: none; opacity: 0; transform: translateY(6px); }
.rotator__text.lang-ar { font-size: calc(26px * var(--u)); }
.rotator__text.lang-he { font-size: calc(25px * var(--u)); }

/* Section header above the form */
.section {
  margin: 0;
  font-weight: 500;
  font-size: calc(15.9px * var(--u) * var(--sec-fit, 1));
  letter-spacing: calc(4.9px * var(--u) * var(--sec-fit, 1));
  text-transform: uppercase;
  text-align: start;
  white-space: nowrap;     /* app.js shrinks it to fit instead of wrapping */
  color: #a09c94;
}

/* ------------------------------------------------------------- The form */
.form { display: flex; flex-direction: column; margin: 0; }
.hp {                     /* honeypot — invisible to people and assistive tech */
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.field { display: flex; flex-direction: column; margin-top: calc(14px * var(--u)); }
.hp + .field { margin-top: calc(27px * var(--u)); }   /* section header to first label */
.lbl {
  margin: 0 0 calc(7px * var(--u));
  padding-left: calc(1px * var(--u));
  font-weight: 500;
  text-transform: uppercase;
  text-align: start;
  color: #a09c94;
  letter-spacing: calc(3px * var(--u));
  font-size: calc(19px * var(--u));
  line-height: 1;
}
.box {
  width: 100%;
  height: calc(62px * var(--u));
  background: var(--box-fill);
  border: calc(1.5px * var(--u)) solid rgba(233, 230, 222, 0.18);
  padding: 0 calc(24px * var(--u));
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: max(16px, calc(26px * var(--u)));   /* >= 16px: iOS does not zoom the field */
  letter-spacing: calc(1px * var(--u));
  line-height: 1;
  text-align: start;
  color: var(--ink);
  caret-color: var(--gold);
  outline: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.box:hover { border-color: rgba(233, 230, 222, 0.32); }
.box:focus { border-color: var(--gold); box-shadow: 0 0 0 calc(1px * var(--u)) rgba(196, 160, 90, 0.35); }
.box.is-invalid { border-color: #b5563f; }
.box:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px #050710 inset;
  caret-color: var(--gold);
}

.btn {                    /* submit — the art's gold CTA */
  margin-top: calc(28px * var(--u));
  width: 100%;
  height: calc(70px * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(16px * var(--u));
  padding: 0 calc(30px * var(--u));
  background: rgba(3, 5, 9, .45);
  border: calc(1.5px * var(--u)) solid var(--gold);
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-weight: 500; text-transform: uppercase;
  letter-spacing: calc(6px * var(--u) * var(--btn-fit, 1));
  font-size: calc(19px * var(--u) * var(--btn-fit, 1));
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn__t { overflow: hidden; text-overflow: ellipsis; }
.btn__a { display: inline-flex; flex: none; }
.btn__a svg { width: calc(40px * var(--u)); height: calc(16px * var(--u)); display: block; }
.btn:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #14100a;
  box-shadow: 0 calc(8px * var(--u)) calc(30px * var(--u)) rgba(196, 160, 90, 0.25);
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 calc(2px * var(--u)) var(--bg), 0 0 0 calc(4px * var(--u)) var(--gold); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn.is-sending .btn__t::after {
  content: "";
  display: inline-block;
  width: calc(15px * var(--u)); height: calc(15px * var(--u));
  margin-left: calc(10px * var(--u));
  vertical-align: middle;
  border: calc(2px * var(--u)) solid currentColor;
  border-top-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.note {                   /* "Encrypted" badge under the button */
  margin: calc(28px * var(--u)) 0 0;
  display: flex; gap: calc(9px * var(--u)); align-items: center;
  font-weight: 500;
  font-size: calc(16px * var(--u));
  letter-spacing: calc(3px * var(--u));
  text-transform: uppercase;
  line-height: 1;
  color: #a09c94;
}
.note svg { flex: none; width: calc(15px * var(--u)); height: calc(15px * var(--u)); color: var(--gold); }

/* Turnstile mounts here: empty unless Cloudflare needs the visitor to interact */
.captcha { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 15; line-height: normal; }
.captcha:empty { display: none; }

/* --------------------------------------------- Script-specific typography */
.lang-ar { font-family: var(--f-ar); letter-spacing: 0; }
.lang-he { font-family: var(--f-he); letter-spacing: 0; }
.lang-ja { font-family: var(--f-ja); letter-spacing: 0; }
.lang-ko { font-family: var(--f-ko); letter-spacing: 0; }
.mock[data-lang="ar"] :is(.headline, .section, .lbl, .box, .btn, .note, .veil, .rotator, .cue) { font-family: var(--f-ar); letter-spacing: 0; text-transform: none; }
.mock[data-lang="he"] :is(.headline, .section, .lbl, .box, .btn, .note, .veil, .rotator, .cue) { font-family: var(--f-he); letter-spacing: 0; text-transform: none; }
.mock[data-lang="ja"] :is(.headline, .section, .lbl, .box, .btn, .note, .veil, .rotator, .cue) { font-family: var(--f-ja); letter-spacing: 0; text-transform: none; }
.mock[data-lang="ko"] :is(.headline, .section, .lbl, .box, .btn, .note, .veil, .rotator, .cue) { font-family: var(--f-ko); letter-spacing: 0; text-transform: none; }
.mock[data-lang="ar"] .hero, .mock[data-lang="he"] .hero { --hl: 86; }
.mock[data-lang="ja"] .hero, .mock[data-lang="ko"] .hero { --hl: 78; }
.mock[data-lang="ar"] .headline, .mock[data-lang="he"] .headline,
.mock[data-lang="ja"] .headline, .mock[data-lang="ko"] .headline { font-weight: 700; line-height: 1.22; }
.mock[data-lang="ja"] .section, .mock[data-lang="ko"] .section,
.mock[data-lang="ar"] .section, .mock[data-lang="he"] .section { font-size: calc(19px * var(--u) * var(--sec-fit, 1)); }
.mock[data-lang="ja"] .lbl, .mock[data-lang="ko"] .lbl,
.mock[data-lang="ar"] .lbl, .mock[data-lang="he"] .lbl { font-size: calc(21px * var(--u)); }
.mock[data-lang="ar"] .btn, .mock[data-lang="he"] .btn,
.mock[data-lang="ja"] .btn, .mock[data-lang="ko"] .btn { font-size: calc(22px * var(--u) * var(--btn-fit, 1)); }

/* Right-to-left pages mirror within the column (flex-start and text-align:
   start already follow the direction); the art is unchanged */
.mock[dir="rtl"] .btn__a svg { transform: scaleX(-1); }

/* ------------------------------------------------------ Language switcher */
.lang { position: fixed; top: 16px; right: 16px; z-index: 12; font-family: var(--font-display); line-height: normal; }
.lang__btn {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .85rem;
  background: rgba(6, 7, 10, .55);
  border: 1px solid rgba(236, 233, 225, .18);
  color: var(--ink-dim);
  font: inherit; font-weight: 500; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.lang__btn:hover, .lang__btn[aria-expanded="true"] { color: var(--gold-bright); border-color: rgba(196, 160, 90, .5); background: rgba(6, 7, 10, .8); }
.lang__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); }
.lang__globe { width: 16px; height: 16px; }
.lang__chev  { width: 10px; height: 7px; transition: transform .2s ease; }
.lang__btn[aria-expanded="true"] .lang__chev { transform: rotate(180deg); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 200px; max-height: min(70vh, 480px); overflow: auto;
  margin: 0; padding: .4rem 0; list-style: none;
  background: rgba(8, 9, 11, .96);
  border: 1px solid rgba(236, 233, 225, .14);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lang__menu[hidden] { display: none; }
.lang__item {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: .55rem 1rem;
  color: var(--ink); font-weight: 300; font-size: .95rem; letter-spacing: .02em;
  cursor: pointer; outline: none;
}
.lang__item small { color: var(--ink-faint); font-size: .68rem; letter-spacing: .16em; font-weight: 500; }
.lang__item:hover, .lang__item:focus-visible { color: var(--gold-bright); background: rgba(196, 160, 90, .08); }
.lang__item[aria-selected="true"] { color: var(--gold-bright); }
.lang__item[aria-selected="true"] small { color: var(--gold); }

/* ----------------------------------------------------------- Success veil */
.veil {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  background: rgba(8, 9, 11, 0.96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  line-height: normal;
  animation: fade .4s ease both;
}
.veil[hidden] { display: none; }
.veil__card { text-align: center; max-width: 36ch; }
.veil__title {
  margin: 1.1rem 0 .6rem;
  font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  line-height: 1.15;
  font-size: clamp(1.1rem, 3.4vw, 1.5rem); color: var(--ink);
}
.veil__text {
  margin: 0; font-weight: 300; letter-spacing: .03em; line-height: 1.6;
  font-size: clamp(.85rem, 2.2vw, 1rem); color: var(--ink-dim);
}
.veil__ref { margin: 1.5rem 0 0; line-height: 1.4; }
.veil__ref[hidden] { display: none; }
.veil__reflabel {
  display: block;
  font-weight: 500; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-dim);
}
.veil__refcode {
  display: block; margin: .3rem 0 .4rem;
  font-weight: 500; font-size: clamp(1.3rem, 4vw, 1.7rem); letter-spacing: .16em;
  color: var(--gold-bright);
  -webkit-user-select: all; user-select: all;      /* one tap selects the whole reference */
}
.veil__keep { display: block; font-weight: 300; font-size: .82rem; letter-spacing: .03em; color: var(--ink-faint); }
.veil__btn {
  margin-top: 1.7rem;
  padding: .85rem 2.4rem;
  background: rgba(3, 5, 9, .45);
  border: 1.5px solid var(--gold);
  color: var(--gold-bright);
  font-family: inherit; font-weight: 500; font-size: .86rem; letter-spacing: .28em; text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background .25s ease, color .25s ease;
}
.veil__btn:hover { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #14100a; }
.veil__btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ Toast */
.toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: #14100a; color: #e08b76;
  border: 1px solid rgba(224, 139, 118, .4);
  padding: .7rem 1.1rem;
  font-weight: 300; letter-spacing: .05em; font-size: .9rem; line-height: 1.4;
  opacity: 0; pointer-events: none; z-index: 10; max-width: 90vw; text-align: center;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { color: var(--gold-bright); border-color: rgba(196, 160, 90, .4); }

/* No-JS notice (captcha + validation need JavaScript) */
.nojs {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
  background: #14100a; color: var(--gold-bright); border: 1px solid rgba(196,160,90,.4);
  padding: .8rem 1.2rem; font-size: .9rem; letter-spacing: .04em; line-height: 1.4; max-width: 90vw; text-align: center;
}

@media (max-width: 700px) { .lang { top: 12px; right: 12px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------------- Phones ----
   A compact composition sized to the screen (app.js), not the art's grid.
   Last in the file so it wins over the base rules above. */
@media (max-width: 640px), (max-height: 499px) {
  .hero { --hl: 78; }
  .mock[data-lang="ar"] .hero, .mock[data-lang="he"] .hero { --hl: 68; }
  .mock[data-lang="ja"] .hero, .mock[data-lang="ko"] .hero { --hl: 62; }
  .screen--reel { padding-bottom: 120px; }
  .screen--form { background: linear-gradient(180deg, rgba(3,5,9,.6) 0%, rgba(3,5,9,.52) 100%); }
  .box { min-height: 44px; }                 /* Apple's minimum touch target */
  .btn { min-height: 46px; }
  .cue { font-size: 11px; letter-spacing: .26em; }
  .lang { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
}
/* Phone held sideways: the logo and the reel first, then a swipe to the form */
@media (max-height: 499px) and (orientation: landscape) {
  .hero { --hl: 56; }
  .mock[data-lang="ja"] .hero, .mock[data-lang="ko"] .hero { --hl: 46; }
  .headline { line-height: 1.06; }           /* sideways: keep the cue on screen with Safari's toolbar up */
  .rule { margin-top: 18px; }
  .tagline { margin-top: 12px; }
  .rotator { margin-top: 6px; }
  .screen--reel { padding-bottom: 96px; }
  .cue { bottom: 14px; gap: 8px; }
  .cue__line { height: 22px; }
  /* tighter form spacing so the whole form fits a 390px-tall screen */
  .hp + .field { margin-top: 12px; }
  .field { margin-top: 8px; }
  .btn { margin-top: 10px; }
  .note { margin-top: 8px; }
}

/* ------------------------------------------------------------ Not found ---
   404.html: served by Cloudflare Pages for any address that does not exist. */
.nf { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: var(--bg); }
.nf__mark { width: min(260px, 60vw); height: auto; margin-bottom: 2.4rem; }
.nf__title { margin: 0 0 .8rem; font-family: "Big Shoulders Display", var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 8vw, 4.5rem); line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: #e3e1dc; }
.nf__text { margin: 0 0 2rem; font-weight: 300; letter-spacing: .04em; color: var(--ink-dim); }
.nf__link { display: inline-block; padding: .85rem 2.2rem; border: 1.5px solid var(--gold); color: var(--gold-bright); text-decoration: none; font-weight: 500; font-size: .86rem; letter-spacing: .28em; text-transform: uppercase; transition: background .25s ease, color .25s ease; }
.nf__link:hover { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #14100a; }
.nf__link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); }