/* ============================================================
   VOLTAGE presents COME RAVE WITH ME - Phonox, London
   Presale sign-up page.

   Visual language taken straight off the client artwork: a
   photocopied zine flyer. Cow-print border, white bubble
   lettering with a black outline and a periwinkle 3D extrusion.

   Signature: the extruded bubble headline, rebuilt in live text
   (paper face, ink stroke, periwinkle depth) rather than baked
   into an image, so it scales and stays selectable. Used once,
   on the panel title, and nowhere else.

   The artwork itself carries the cow print, so no second
   decorative motif is added anywhere on the page.
   ============================================================ */

/* Lilita One (OFL) - rounded bubble caps, the closest free match to the
   artwork's COME RAVE WITH ME lettering */
@font-face {
  font-family: "Lilita One";
  src: url("/assets/fonts/LilitaOne-400.woff2?v=20260727-7") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Archivo (OFL) - one variable file covers the whole weight range. Heavy caps
   stand in for the artwork's marker-pen caption lettering. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260727-7") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* every value sampled from the artwork, not guessed */
  --ink:       #0B0B0B;   /* the cow-print black */
  --ink-soft:  #16161A;
  --paper:     #F4F3EF;   /* the caption-box white */
  --peri:      #8FA8DF;   /* bubble-letter fill blue */
  --peri-hi:   #B3C4EC;
  --peri-deep: #5C74B8;   /* letter shade side */
  --meat:      #E4564F;   /* apron red - errors only */
  --muted:     rgba(244, 243, 239, 0.70);
  --muted-dim: rgba(244, 243, 239, 0.44);

  --panel-bg:  rgba(11, 11, 11, 0.90);

  --font:      "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-disp: "Lilita One", "Archivo", Impact, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--paper);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* html carries the base colour; body stays transparent so it can never
   paint over the z-index:-1 background layer */
html { background: var(--ink); }
body {
  position: relative;
  background: transparent;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.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, which silently blocks real signups. */
.hp-row { display: none !important; }

/* ============================================================
   BACKGROUND - the artwork, blurred to abstraction
   The poster is the only sharp thing on the page; the same image
   blurred behind it gives the palette without competing.
   ============================================================ */
/* PORTRAIT: absolute (not fixed) so it scrolls with the page rather than
   parking a frozen crop under scrolling content. */
.bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 122svh;
  z-index: -1;
  background: url("/assets/images/bg-mobile.webp?v=20260727-7") center top / cover no-repeat,
              var(--ink);
}
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 11, 11, 0.34) 0%,
    rgba(11, 11, 11, 0.52) 40%,
    rgba(11, 11, 11, 0.80) 72%,
    var(--ink) 100%);
}
@media (max-aspect-ratio: 7/10) and (max-width: 500px) {
  .bg { background-image: url("/assets/images/bg-mobile-sm.webp?v=20260727-7"); }
}

/* Landscape: keyed on aspect ratio ALONE, deliberately. Gating on min-width
   too would strand landscape phones (667x375) on the tall portrait crop. */
@media (min-aspect-ratio: 7/10) {
  .bg {
    position: fixed;
    inset: 0;
    height: auto;
    background: url("/assets/images/bg-desktop.webp?v=20260727-7") center center / cover no-repeat,
                var(--ink);
  }
  /* leans right, where the panel sits: the poster side stays lighter so the
     blurred colour still reads behind it */
  .bg::after {
    background:
      linear-gradient(90deg, rgba(11, 11, 11, 0.42) 0%, rgba(11, 11, 11, 0.30) 34%, rgba(11, 11, 11, 0.74) 100%),
      linear-gradient(180deg, rgba(11, 11, 11, 0.28) 0%, rgba(11, 11, 11, 0.10) 40%, rgba(11, 11, 11, 0.60) 100%);
  }
}
@media (min-aspect-ratio: 7/10) and (max-width: 1500px) {
  .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20260727-7"); }
}

/* ============================================================
   SHEET / STAGE
   ============================================================ */
.sheet {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.stage {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.stage__inner {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 52px) clamp(16px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4vw, 44px);
}

/* ============================================================
   POSTER
   ============================================================ */
.brand { text-align: center; }

.brand__poster {
  display: block;
  width: min(86vw, 540px);
  margin: 0 auto;
}
.brand__poster img {
  display: block;
  width: 100%;
  height: auto;
  /* opaque image, so a plain box-shadow is safe - no drop-shadow filter,
     which computes a dark halo from aliased alpha on cutouts */
  box-shadow: 0 0 0 3px rgba(244, 243, 239, 0.92),
              0 26px 64px -20px rgba(0, 0, 0, 0.9);
}

/* Venue, date and time are legible on the artwork itself, so they are not
   repeated in live text (Adam, 2026-07-27). They stay in the sr-only h1, the
   poster alt text, the JSON-LD and llms.txt, so accessibility and SEO keep
   them without the page saying it twice. */
/* The info strap: three stacked caption lines, set like the artwork's
   marker-pen boxes. Uppercased in CSS, not typed in caps, so screen readers
   read words instead of spelling out letters. */
.brand__strap {
  margin: clamp(18px, 2.6vw, 26px) 0 0;
  font-weight: 800;
  font-size: clamp(13px, 1.7vw, 16px);
  line-height: 1.42;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 2px 12px rgba(11, 11, 11, 0.95);
}
/* Sentence case, body face: at 85 characters this is a caption, not a
   headline, and display caps would turn it into an unreadable block. */
.brand__line {
  margin: clamp(11px, 1.7vw, 17px) auto 0;
  max-width: 42ch;
  font-size: clamp(14px, 1.6vw, 16.5px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--peri);
  text-shadow: 0 2px 14px rgba(11, 11, 11, 0.9);
  text-wrap: pretty;
}

/* ============================================================
   PANEL - a flyer taped to a dark wall: paper hairline, hard
   un-blurred offset shadow, zero radius. No clip-path anywhere,
   so the intl-tel-input dropdown can never be amputated.
   ============================================================ */
.panel {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: var(--panel-bg);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 3px solid var(--paper);
  box-shadow: 10px 10px 0 var(--peri);
}
.panel__inner {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 3.6vw, 36px) clamp(18px, 3.2vw, 32px) clamp(26px, 3.6vw, 34px);
}

/* --- state machine: exactly one state visible --- */
.panel__state { display: none; }
.panel[data-form-state="idle"]    .panel__idle    { display: block; }
.panel[data-form-state="otp"]     .panel__otp     { display: block; }
.panel[data-form-state="success"] .panel__success { display: block; }

/* --- panel type --- */
.panel__eyebrow {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--peri);
}

/* THE SIGNATURE. Paper face, ink stroke, periwinkle depth stepping down to a
   second ink step - the artwork's own lettering, rebuilt in live text.
   paint-order puts the stroke behind the fill so a 2px outline doesn't eat
   into the letterform. */
.panel__title {
  margin: 0 0 14px;
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 56px);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--paper);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 var(--peri), 5px 6px 0 var(--ink);
  text-wrap: balance;
}
.panel__title em {
  font-style: normal;
  color: var(--peri);          /* the blue IS the emphasis, as on the poster */
  text-shadow: 3px 4px 0 var(--peri-deep), 5px 6px 0 var(--ink);
}

/* Class-based only. A state-scoped element rule (.panel__success p {...})
   would out-specify .panel__eyebrow and silently restyle it. */
.panel__lede {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 15px;
}
.panel__lede--fine { margin-bottom: 0; font-size: 13px; color: var(--muted-dim); }
.panel__success-note {
  margin: 0 0 12px;
  color: var(--peri);
  font-size: 15px;
}

/* ============================================================
   COUNTDOWN + SALE DATES
   The outlined white box is the artwork's device for hard facts.
   The presale and general sale dates are NOT on the artwork, so
   unlike the venue and date they earn the treatment here.
   ============================================================ */
.cd { margin: 0 0 16px; }
.cd__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cd__unit {
  padding: 9px 3px 7px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  text-align: center;
}
.cd__num {
  display: block;
  font-family: var(--font-disp);
  font-size: clamp(21px, 5.2vw, 30px);
  line-height: 1;
  color: var(--ink);
  /* tabular figures stop the digits jittering the box width every second */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.cd__lab {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11, 11, 11, 0.58);
}
.cd__live {
  margin: 0;
  padding: 11px 12px;
  background: var(--peri);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  font-family: var(--font-disp);
  font-size: clamp(15px, 3.4vw, 19px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

.sale {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sale__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
}
.sale__tag {
  flex: 0 0 auto;
  min-width: 92px;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--peri);
}
.sale__when { color: var(--paper); font-weight: 600; }
.sale__note {
  margin: 7px 0 20px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted-dim);
}

/* ============================================================
   FORM - white caption boxes, straight off the artwork
   ============================================================ */
.form { margin: 0; }
.form__row { margin: 0 0 15px; }
.form__label {
  display: block;
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--peri);
}
.form__input {
  display: block;
  width: 100%;
  padding: 13px 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;            /* >=16px stops iOS zoom-on-focus */
  line-height: 1.3;
  box-shadow: 3px 3px 0 var(--ink);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.form__input::placeholder { color: rgba(11, 11, 11, 0.42); font-weight: 400; }
.form__input:focus {
  outline: none;
  box-shadow: 3px 3px 0 var(--peri-deep);
}
.form__input--otp {
  letter-spacing: 0.42em;
  font-family: var(--font-disp);
  font-size: 22px;
  text-align: center;
}

.form__row--check { margin-top: 18px; }
.form__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.form__check input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: 2px 0 0;
  accent-color: var(--peri);
  cursor: pointer;
}
.form__check a { color: var(--peri); text-decoration: underline; }
.form__check a:hover { color: var(--peri-hi); }

.form__error {
  margin: 6px 0 0;
  color: var(--meat);
  font-size: 13px;
  font-weight: 500;
}
.form__error--global { margin-top: 12px; }

.form__resend {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.form__resend-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--peri);
  font-family: var(--font);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.form__resend-btn:disabled { opacity: 0.5; cursor: default; }

/* --- button: a sticker you can physically press --------------
   The one motion moment on the page. Hover shifts it halfway into its own
   shadow, active takes it all the way down to flush. */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 20px 0 0;
  padding: 15px 18px;
  border: 2px solid var(--ink);
  border-radius: 0;
  font-family: var(--font-disp);
  font-weight: 400;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;
}
.btn--primary {
  background: var(--peri);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--paper);
  /* shrink type before it can wrap - never let a CTA break to two lines */
  white-space: nowrap;
  font-size: clamp(1rem, 4vw, 1.32rem);
  letter-spacing: clamp(0.03em, 0.4vw, 0.09em);
  text-transform: uppercase;
}
.btn--primary:hover:not(:disabled) {
  background: var(--peri-hi);
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--paper);
}
.btn--primary:active:not(:disabled) {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--paper);
}
.btn--primary:disabled { opacity: 0.6; cursor: wait; }

/* ============================================================
   intl-tel-input - light field, ink-outlined searchable dropdown
   styled to match the artwork's caption boxes
   ============================================================ */
.iti { width: 100%; }
/* repadPhone() in app.js re-measures this once fonts settle; this is the
   pre-measure default. Anything >=80px breaks 320-390px viewports. */
.iti input.form__input { padding-left: calc(52px + 0.7rem); }

.iti__selected-country { background: transparent; color: var(--ink); border-radius: 0; }
.iti__selected-country:hover { background: rgba(11, 11, 11, 0.06); }
.iti__selected-dial-code { color: rgba(11, 11, 11, 0.62); font-size: 15px; font-weight: 500; }
.iti__arrow { border-top-color: var(--ink); }
.iti__arrow--up { border-bottom-color: var(--ink); }

.iti__dropdown-content {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--peri);
  overflow: hidden;
}
.iti__search-input {
  width: 100%;
  padding: 12px 13px;
  background: var(--paper);
  border: none;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 15px;
}
.iti__search-input::placeholder { color: rgba(11, 11, 11, 0.42); font-weight: 400; }
.iti__search-input:focus { outline: none; background: #FFF; }
.iti__country-list { background: transparent; }
.iti__country {
  padding: 9px 13px;
  font-size: 14.5px;
  color: var(--ink);
}
.iti__country.iti__highlight { background: var(--peri); }
.iti__country:hover { background: var(--peri-hi); }
.iti__dial-code { color: rgba(11, 11, 11, 0.58); }
/* dropdown must clear the panel's stacking context */
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* the hidden state must not wait on the vendor stylesheet, or the country list
   flashes open (search box + full list) on first paint */
.iti__dropdown-content.iti__hide { display: none !important; }

/* ============================================================
   FOOTER - basslayerz pattern, full width
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 16px clamp(16px, 4vw, 40px) 20px;
  border-top: 2px solid rgba(244, 243, 239, 0.24);
  background: rgba(11, 11, 11, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  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(--muted); letter-spacing: 0.02em; }
.foot__legal a { color: var(--muted); text-decoration: none; }
.foot__legal a:hover { color: var(--peri); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid rgba(244, 243, 239, 0.2);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--peri); color: var(--paper); }
.site-built img { display: block; opacity: 0.9; }
@media (max-width: 640px) {
  .foot { justify-content: center; text-align: center; }
  .foot__left { justify-content: center; }
}

/* ============================================================
   LAYOUT - two columns in landscape, stacked in portrait.
   Aspect-ratio thresholds, not width alone: width-only breakpoints
   leave gaps at squarish window shapes (roughly 570-900px) where
   neither treatment applies.
   ============================================================ */
@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(30px, 5vw, 64px);
  }
  .brand { text-align: left; }
  .brand__poster { margin: 0; width: min(42vw, 480px); }
  /* max-width + auto margins would keep this centred despite text-align:left */
  .brand__line { margin-left: 0; margin-right: 0; max-width: 40ch; }
  /* margin-left auto, never margin:0 - that is what left-shifts the panel at
     a single breakpoint */
  .panel { margin-left: auto; margin-right: 0; }
}

/* Portrait tablets: single column, scaled up */
@media (min-width: 768px) and (max-aspect-ratio: 7/10) {
  .brand__poster { width: min(62vw, 520px); }
  .panel { max-width: 560px; }
}

/* Phones: panel runs the full frame width */
@media (max-width: 767px) {
  .stage__inner { padding-left: 14px; padding-right: 14px; }
  .panel { max-width: none; }
  /* 10px of hard offset would push the panel off a 320px viewport */
  .panel { box-shadow: 6px 6px 0 var(--peri); }
  .brand__line { display: none; }
}

/* Landscape phones are a first-class layout, not an afterthought: a rotated
   phone satisfies the desktop width/aspect conditions but has almost no
   height. 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) {
  .stage__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(16px, 3vw, 30px);
    padding: 12px clamp(14px, 3vw, 26px);
    min-height: 0;
  }
  /* start, NOT center: the grid row is as tall as the panel, so centring the
     poster in it pushed the artwork off both the top and bottom edges. */
  .brand { align-self: start; }
  .brand__poster { width: auto; margin: 0; }
  /* max-width:100% is load-bearing: height-capping alone let the poster grow
     wider than its grid column on narrow landscape phones (667x375) and slide
     underneath the panel. Cap BOTH axes and the aspect ratio does the rest. */
  .brand__poster img { width: auto; max-width: 100%; max-height: calc(100svh - 30px); }
  /* the joke line is the first thing to go: on a 390px-tall viewport every
     line it costs is a form field pushed under the fold */
  .brand__line { display: none; }
  .brand__strap { margin-top: 8px; font-size: 9.5px; line-height: 1.3; letter-spacing: 0.07em; }

  .panel { box-shadow: 5px 5px 0 var(--peri); }
  .panel__inner { padding: 11px 13px 13px; }
  .panel__eyebrow { margin-bottom: 4px; font-size: 9px; letter-spacing: 0.16em; }
  .panel__title {
    font-size: clamp(19px, 2.7vw, 25px);
    margin-bottom: 5px;
    /* the full-size extrusion is scaled for 56px type; at 22px the two offset
       copies smear into the letterforms, so step it down and thin the stroke */
    -webkit-text-stroke-width: 1px;
    text-shadow: 2px 2px 0 var(--peri), 3px 3px 0 var(--ink);
  }
  .panel__title em { text-shadow: 2px 2px 0 var(--peri-deep), 3px 3px 0 var(--ink); }
  /* the title's <br> costs a whole 24px line here; one line is plenty at this size */
  .panel__title br { display: none; }
  .panel__title em { margin-left: 0.28em; }
  /* the lede is the single biggest saving (~44px). The title and the countdown
     already say "presale, and it opens soon", which is the whole message. */
  .panel__lede { display: none; }
  .panel__lede--fine { display: none; }

  .cd { margin-bottom: 7px; }
  .cd__grid { gap: 4px; }
  .cd__unit { padding: 4px 2px 3px; box-shadow: 2px 2px 0 var(--ink); }
  .cd__num { font-size: 15px; }
  .cd__lab { margin-top: 1px; font-size: 7.5px; letter-spacing: 0.08em; }
  .cd__live { padding: 6px 9px; font-size: 13px; }

  /* both dates on ONE row: stacked they cost ~34px of a 390px viewport */
  .sale { flex-direction: row; flex-wrap: wrap; gap: 3px 16px; margin-bottom: 7px; }
  .sale__row { font-size: 10.5px; gap: 5px; }
  .sale__tag { min-width: 0; font-size: 8.5px; letter-spacing: 0.1em; }
  .sale__note { display: none; }

  .form__row { margin-bottom: 6px; }
  .form__label { font-size: 9px; margin-bottom: 2px; letter-spacing: 0.14em; }
  /* font-size stays at 16px: anything smaller makes iOS zoom in on focus,
     which throws the whole landscape layout out */
  .form__input { padding: 7px 11px; box-shadow: 2px 2px 0 var(--ink); }
  .form__row--check { margin-top: 7px; }
  .form__check { font-size: 10.5px; line-height: 1.3; gap: 7px; }
  .form__check input { width: 14px; height: 14px; margin-top: 1px; }
  .btn { margin-top: 8px; padding: 8px 12px; }
  .btn--primary { font-size: 15px; box-shadow: 4px 4px 0 var(--paper); }
  .foot { padding: 6px 18px 8px; }
  .foot__legal { font-size: 10.5px; }
  .site-built a { font-size: 9.5px; padding: 3px 8px; }
}

/* ============================================================
   MOTION - one orchestrated page-load reveal, nothing else
   ============================================================ */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.brand  { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.signup { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both; }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.iti__selected-country:focus-visible {
  outline: 3px solid var(--peri);
  outline-offset: 2px;
}

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