/* ============================================================
   DISRUPTA - XOYO, London - Sat 24 October 2026
   Presale sign-up.

   Visual language is lifted wholesale from the supplied artwork,
   which is a die-cut sticker: BLACK fill, then a MAGENTA ring,
   then a WHITE ring. Every surface on this page is built the same
   way, so the form reads as another sticker slapped on the same
   acid-green flat rather than a UI bolted onto a poster.

   Signature: the twin marquee rails. The client shipped the two
   strips as separate transparent PNGs, so they run as real
   infinite marquees (top scrolls left, bottom scrolls right)
   framing the page like a HUD.

   Contrast rule that governs everything: white on #07F300 is
   1.5:1 and unusable, black on #07F300 is 13.8:1. So NOTHING
   white ever sits on the green - white lives only inside the
   black sticker panels (21:1). Magenta on black is 6.4:1.
   ============================================================ */

/* Kanit (OFL) - the heavy oblique carries the same forward lean and
   2000s sportswear weight as the chrome bubble logotype. Latin subset. */
@font-face {
  font-family: "Kanit";
  src: url("/assets/fonts/Kanit-800-italic.woff2?v=20260824-3") format("woff2");
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Kanit";
  src: url("/assets/fonts/Kanit-800.woff2?v=20260824-3") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kanit";
  src: url("/assets/fonts/Kanit-600.woff2?v=20260824-3") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
/* Archivo (OFL) - one variable file. Neutral by design: the page is loud
   enough that the form itself has to stay quiet and readable. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260824-3") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Sampled from the artwork, not guessed: the flat is #07F300 and the
     logotype/marquee magenta is #FA00FA. */
  --acid:     #07F300;
  --mag:      #FA00FA;
  --mag-hi:   #FF6BFF;
  --ink:      #000000;
  --paper:    #FFFFFF;
  --ash:      rgba(255, 255, 255, 0.68);
  --ash-dim:  rgba(255, 255, 255, 0.42);
  --err:      #FF7A7A;

  /* Field fill inside the black panel. Flattened opaque equivalent is
     #121212 - that exact value is what the :-webkit-autofill shadow uses. */
  --field:      rgba(255, 255, 255, 0.07);
  --field-flat: #121212;
  --field-line: rgba(255, 255, 255, 0.22);

  --ring-mag: 6px;
  --ring-pap: 13px;
  --radius:   4px;

  /* Sticker tilt. Two flat objects slapped at slightly different angles read
     as stickers; one tilted and one square reads as a mistake. Kept small -
     at a 320px viewport a taller box's corners swing out by ~8px per degree
     of tilt, and the stage padding has to absorb that plus the 13px ring. */
  --tilt-panel:  1.2deg;
  --tilt-plate: -0.9deg;

  --font:      "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-disp: "Kanit", "Archivo", Helvetica, Arial, sans-serif;

  /* Rail geometry. The tile is ONE TRUE PERIOD of the client strip (1034 x 80,
     cut from 1719 x 133 of the original) and --rail-tile must stay locked to
     --rail-h at that 12.925 aspect, because the marquee keyframe translates the
     background by exactly one tile.

     ⚠️ Do not tile the client's full-width strip. It is 3508px wide but the
     artwork repeats every 1719px - 2.04 periods, not 2 - so every tile join
     duplicated ~70px of artwork: a doubled R in DISRUPTA, a doubled N in
     LONDON, and visible overlap once per screen. Verified by autocorrelation
     (score 1.0000 at lag 1719, 0 mismatching pixels) and by proving two
     consecutive one-period windows of the tiled rail are pixel-identical.
     Client-reported 2026-08-24. */
  --rail-h:    30px;
  --rail-tile: 387.75px;
}

* { box-sizing: border-box; }

/* The base colour lives on html, never on body: an opaque body would paint
   over any negative-z layer added later. */
html {
  background: var(--acid);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot. display:none ONLY - off-screen positioning gets autofilled by
   Chrome/Edge and silently blocks real signups. */
.hp-row { display: none !important; }

/* ============================================================
   MARQUEE RAILS - the signature
   ============================================================ */
.rail {
  flex: 0 0 auto;
  height: var(--rail-h);
  background-repeat: repeat-x;
  background-size: var(--rail-tile) 100%;
  background-position: 0 50%;
}
.rail--top {
  background-image: url("/assets/images/rail-a.png?v=20260824-3");
  animation: rail-left 26s linear infinite;
}
.rail--bot {
  background-image: url("/assets/images/rail-b.png?v=20260824-3");
  animation: rail-right 30s linear infinite;
}
@keyframes rail-left  { to { background-position-x: calc(var(--rail-tile) * -1); } }
@keyframes rail-right { to { background-position-x: var(--rail-tile); } }

/* ============================================================
   STAGE
   ============================================================ */
.stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 40px) clamp(22px, 4vw, 40px);
}
.stage__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 4vw, 34px);
}

/* ============================================================
   BRAND COLUMN - the sticker, the date stamp, the clock
   ============================================================ */
.brand {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.brand__art {
  width: 100%;
  height: auto;
  animation: slap 620ms cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes slap {
  from { opacity: 0; transform: scale(1.06) rotate(1.4deg); }
  to   { opacity: 1; transform: none; }
}

/* The artwork's own star dingbat, drawn rather than typed. It is the only
   ornament on the page and it appears in exactly two places: the plate's
   venue line and the panel eyebrow. Always magenta on black - on the green
   flat it would be 2.2:1. */
.star {
  width: 0.8em; height: 0.8em;
  flex: 0 0 auto;
  background: var(--mag);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ============================================================
   PLATE - when and where.

   The date stamp used to sit loose on the green, which left the flat holding
   three unrelated things. As a die-cut plate it matches the sign-up panel
   opposite, so the two columns read as a pair of stickers.
   ============================================================ */
.plate {
  width: 100%;
  max-width: 430px;
  margin: 2px auto 0;
  padding: clamp(15px, 3.4vw, 20px) clamp(15px, 4vw, 22px) clamp(15px, 3.4vw, 19px);
  background: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 0 0 5px var(--mag),
              0 0 0 11px var(--paper),
              11px 11px 0 11px rgba(0, 0, 0, 0.34);
  transform: rotate(var(--tilt-plate));
  text-align: center;
}
.plate__when {
  margin: 0 0 7px;
  font-family: var(--font-disp);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(22px, 6.2vw, 30px);
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--paper);
}
.plate__where {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(11px, 3vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mag);
}

/* ============================================================
   COUNTDOWN - inside the sign-up panel, above the form.

   It sits between the pitch and the fields: what this is, how long you have,
   then the form. Inside the panel it needs no box of its own, so it is ruled
   off with hairlines instead - one less container on a page that already has
   plenty. The chips are flat magenta with black numerals (6.4:1, which
   clears AA for normal text, not just large) and they are the same magenta
   as the submit button below, so the eye reads the clock as the thing that
   turns into the button.
   ============================================================ */
.clock {
  margin: 0 0 19px;
  padding: 14px 0 15px;
  border-top: 2px solid rgba(255, 255, 255, 0.14);
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
  text-align: center;
}
.clock__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 10px;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash);
}

/* Wells are separated by gap, never by butted borders - butted borders
   double into a 2px seam and read as a rendering fault. */
.clock__wells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.clock__well {
  padding: 8px 2px 7px;
  background: var(--mag);
  border-radius: 3px;
}
.clock__num {
  display: block;
  font-family: var(--font-disp);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(25px, 6.6vw, 33px);
  line-height: 0.94;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.clock__unit {
  display: block;
  margin-top: 3px;
  font-family: var(--font-disp);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.72;
}
.clock__live {
  margin: 0;
  font-family: var(--font-disp);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(18px, 4.8vw, 22px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--mag);
}
.clock__live span {
  display: block;
  margin-top: 7px;
  font-family: var(--font);
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ash);
}
.clock[data-clock-state="live"] .clock__wells,
.clock[data-clock-state="live"] .clock__label { display: none; }

/* ============================================================
   SIGN-UP PANEL - the same die-cut sticker as the artwork
   ============================================================ */
.signup {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  /* Tilt lives here, not on .panel: .panel runs the `slap` entry animation
     and its `to { transform: none }` would wipe the rotation on landing. */
  transform: rotate(var(--tilt-panel));
}
.panel {
  /* isolate + explicit stacking, or the intl-tel-input dropdown ends up
     underneath the panel's own decoration */
  isolation: isolate;
  position: relative;
  padding: clamp(24px, 5vw, 34px) clamp(20px, 4.4vw, 30px) clamp(26px, 5vw, 32px);
  background: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 0 0 var(--ring-mag) var(--mag),
              0 0 0 var(--ring-pap) var(--paper),
              14px 14px 0 var(--ring-pap) rgba(0, 0, 0, 0.34);
  animation: slap 620ms 90ms cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.panel__inner { position: relative; z-index: 1; }

/* State machine: exactly one wrapper visible. Each carries its own full
   eyebrow + title + lede, so states never stack. */
.panel__state { display: none; }
.panel[data-form-state="idle"]    .panel__idle    { display: block; }
.panel[data-form-state="success"] .panel__success { display: block; }

.panel__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mag);
}
.panel__eyebrow .star { width: 13px; height: 13px; }

.panel__title {
  margin: 0 0 12px;
  font-family: var(--font-disp);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(34px, 8.4vw, 50px);
  line-height: 0.94;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--paper);
  text-wrap: balance;
}
.panel__title em { font-style: italic; color: var(--mag); }

.panel__lede {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ash);
}
.panel__lede strong { color: var(--paper); font-weight: 600; }

/* ============================================================
   FORM
   ============================================================ */
.form__row { margin: 0 0 13px; }
.form__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.form__input {
  width: 100%;
  padding: 13px 14px;
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 2px;
  color: var(--paper);
  font-family: var(--font);
  font-size: 16px;              /* 16px minimum, or iOS zooms the page on focus */
  line-height: 1.3;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.form__input::placeholder { color: rgba(255, 255, 255, 0.34); }
.form__input:focus {
  outline: none;
  border-color: var(--mag);
  background: rgba(255, 255, 255, 0.1);
}

/* Chrome paints autofilled fields pale lavender and ignores background /
   background-color on :-webkit-autofill. The only reliable override is a huge
   inset shadow, and its colour has to be the FLATTENED opaque equivalent of
   the field stack (7% white over solid black = #121212), not the field's own
   rgba value - otherwise an autofilled field will not match the empty one
   next to it. The 9999s transition stops Chrome flashing lavender first. */
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus,
.form__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--field-flat) inset !important;
          box-shadow: 0 0 0 1000px var(--field-flat) inset !important;
  -webkit-text-fill-color: var(--paper) !important;
  caret-color: var(--paper);
  transition: background-color 9999s ease-in-out 0s;
}

.form__error {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--err);
}
.form__error--global { margin-top: 12px; }

.form__row--check { margin: 16px 0 18px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ash);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: 1px 0 0;
  accent-color: var(--mag);
  cursor: pointer;
}
.form__check a { color: var(--mag); text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { color: var(--mag-hi); }

/* ============================================================
   BUTTONS - the sticker construction, used once more and no further
   ============================================================ */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  border-radius: 3px;
  background: var(--mag);
  color: var(--ink);
  font-family: var(--font-disp);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  /* Long uppercase labels wrap to two lines on a 320px viewport. Shrink the
     type and the tracking before that can happen; never let it wrap. */
  white-space: nowrap;
  font-size: clamp(15px, 4.4vw, 19px);
  letter-spacing: clamp(0.02em, 0.4vw, 0.06em);
  box-shadow: 0 0 0 3px var(--paper), 5px 5px 0 3px rgba(0, 0, 0, 0.55);
  transition: transform 100ms ease, background-color 140ms ease, box-shadow 100ms ease;
}
.btn:hover { background: var(--mag-hi); }
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 3px var(--paper), 2px 2px 0 3px rgba(0, 0, 0, 0.55);
}
.btn:disabled { opacity: 0.6; cursor: default; transform: none; }

/* ============================================================
   SUCCESS STATE
   ============================================================ */
/* State-scoped p rules out-specify .panel__eyebrow, which then loses its
   size and weight. Exclude it explicitly. */
.panel__success p:not(.panel__eyebrow) {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ash);
}
.panel__success-note {
  margin: 0 0 12px;
  padding: 11px 13px;
  background: rgba(250, 0, 250, 0.13);
  border-left: 3px solid var(--mag);
  border-radius: 2px;
  color: var(--paper) !important;
}

/* ============================================================
   INTL-TEL-INPUT
   ============================================================ */
.iti { width: 100%; display: block; }
/* Baseline only - app.js re-measures the country trigger and re-applies this
   once the webfont has settled. Anything at or above ~80px breaks 320px. */
.iti input.form__input { padding-left: calc(52px + 0.7rem); }
.iti__selected-country { background: transparent; color: var(--paper); }
.iti__selected-country:hover { background: rgba(255, 255, 255, 0.08); }
.iti__selected-dial-code { color: var(--ash); font-size: 15px; }
.iti__arrow { border-top-color: var(--mag); }
.iti__arrow--up { border-bottom-color: var(--mag); }

.iti__dropdown-content {
  background: #0B0B0B;
  border: 2px solid var(--mag);
  border-radius: 3px;
  color: var(--paper);
  box-shadow: 0 0 0 3px var(--paper), 0 22px 44px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
/* Keep the vendor's reserved horizontal padding: 30px left clears the
   absolutely positioned search icon, 28px right clears the clear button.
   A padding SHORTHAND wipes both and the magnifier lands on the word. */
.iti__search-input {
  padding: 11px 30px 11px 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-bottom: 2px solid var(--mag);
  color: var(--paper);
  font-family: var(--font);
  font-size: 15px;
}
.iti__search-input::placeholder { color: rgba(255, 255, 255, 0.36); }
.iti__search-input:focus { outline: none; background: rgba(255, 255, 255, 0.1); }
.iti__country-list { background: transparent; max-height: 232px; }
.iti__country { padding: 9px 13px; font-size: 14.5px; }
.iti__country.iti__highlight { background: rgba(250, 0, 250, 0.24); }
.iti__country:hover { background: rgba(250, 0, 250, 0.16); }
.iti__dial-code { color: var(--ash-dim); }
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* The hidden state lives in the vendor stylesheet; until that loads the whole
   country list flashes open on first paint. */
.iti__dropdown-content.iti__hide { display: none !important; }

/* ============================================================
   FOOTER - basslayerz pattern, full width
   ============================================================ */
.foot {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 14px clamp(16px, 4vw, 40px) 18px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.foot__left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot__legal { margin: 0; font-size: 12px; color: var(--ash); letter-spacing: 0.02em; }
.foot__legal a { color: var(--ash); text-decoration: none; }
.foot__legal a:hover { color: var(--mag); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ash);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--mag); color: var(--paper); }
.site-built img { display: block; opacity: 0.9; }

@media (max-width: 700px) {
  .foot { justify-content: center; text-align: center; }
  .foot__left { justify-content: center; }
}

/* ============================================================
   WIDE / DESKTOP - two columns.

   Gated on ASPECT RATIO as well as width. Width-only breakpoints leave a gap
   at squarish window shapes (~570-900px) where neither the phone nor the
   desktop treatment applies and the layout visibly breaks.
   ============================================================ */
@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  :root {
    --rail-h: 40px; --rail-tile: 517px;
    --tilt-panel: 1.7deg; --tilt-plate: -1.2deg;
  }

  .stage__inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 4.5vw, 56px);
  }
  .brand {
    flex: 1 1 46%;
    max-width: 480px;
    margin: 0 auto;
  }
  .signup {
    flex: 1 1 46%;
    max-width: 460px;
    margin: 0 auto;
  }
  .brand__art { max-height: 60svh; width: auto; margin: 0 auto; }
}

@media (min-width: 1080px) and (min-aspect-ratio: 7/10) {
  .brand__art { max-height: 66svh; }
}

/* ============================================================
   LANDSCAPE PHONE - first-class layout, not an afterthought.

   A rotated phone (844x390, 932x430, 667x375) passes the width and aspect
   conditions above but has almost no height, so the desktop art sizing
   renders oversized and the panel is cut off. Placed AFTER the desktop
   blocks so it wins at equal specificity.
   ============================================================ */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  :root {
    --rail-h: 24px; --rail-tile: 310.2px;
    /* no height to spare for a tilt swing here */
    --tilt-panel: 0deg; --tilt-plate: 0deg;
  }

  .stage { padding: 12px clamp(12px, 3vw, 24px); align-items: flex-start; }
  .stage__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(16px, 3vw, 28px);
    min-height: 0;
  }
  .brand {
    flex: 0 1 auto;
    max-width: 300px;
    gap: 10px;
    min-height: 0;
  }
  .brand__art { max-height: calc(100svh - 132px); width: auto; }
  .plate { padding: 11px 12px 12px; max-width: 300px; }
  .plate__when { font-size: 19px; margin-bottom: 5px; }
  .plate__where { font-size: 10px; gap: 7px; letter-spacing: 0.16em; }
  .clock { margin-bottom: 12px; padding: 10px 0 11px; }
  .clock__label { margin-bottom: 7px; font-size: 9.5px; letter-spacing: 0.16em; }
  .clock__wells { gap: 6px; }
  .clock__well { padding: 5px 2px 5px; }
  .clock__num { font-size: 21px; }
  .clock__unit { font-size: 8.5px; }
  .clock__live { font-size: 16px; }

  .signup { flex: 1 1 auto; max-width: 420px; }
  .panel { padding: 18px 20px 20px; }
  .panel__title { font-size: clamp(24px, 3.4vw, 30px); margin-bottom: 8px; }
  .panel__lede { margin-bottom: 13px; font-size: 13px; }
  .form__row { margin-bottom: 9px; }
  .form__input { padding: 10px 12px; }
  .form__row--check { margin: 11px 0 13px; }
  .btn { padding: 12px 14px; }
  .foot { padding: 8px 16px 10px; }
  .foot__legal { font-size: 11px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.iti__selected-country:focus-visible {
  outline: 3px solid var(--mag);
  outline-offset: 3px;
}
.form__check input:focus-visible { outline-offset: 2px; }
/* On the green flat a magenta outline is only 2.2:1 - black is the only
   focus ring that reads out there. */
.brand a:focus-visible { outline-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}