/* ============================================================
   Morgan Seatree, London - V2 ARTWORK (Village Underground poster)
   Used by indexv2.html and gensale.html. style.css stays untouched
   because the live index.html and privacy.html still load it, and
   assets here are served immutable.

   Same layout as style.css. What changed:
   - The print is the client's finished 3:4 poster (1080x1440). The
     name, venue and date are IN the artwork, so the traced logo
     plate is gone and the h1 is visually hidden text instead.
   - The background plates are the same poster with the yellow type
     removed and blurred offline, so the ground is the poster's own
     blue gradient.
   - Palette sampled from the poster pixels:
       #F7C428  poster yellow (20.5% of frame) - accent AND cta
       #1853D6  deep blue,  #45C9D6  cyan
     --pitch / --felt / --field are that deep blue taken dark enough
     to carry text; they are derived, not literal pixels.
   ============================================================ */

@font-face {
  font-family: "Archivo Exp";
  src: url("/assets/fonts/ArchivoExp.woff2?v=20260908-9") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260908-9") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --pitch:      #071335;   /* page ground: poster deep blue #1853D6, darkened */
  --felt:       #0B1D4A;   /* panel base, same hue */
  --field:      #13295E;   /* form field - OPAQUE on purpose, see autofill note */
  --net:        #F7C428;   /* the poster yellow - accent AND cta */
  --net-deep:   #B38C12;   /* deepened yellow - structure and completed steps */
  --sky:        #45C9D6;   /* the poster cyan - cool relief */
  --chrome:     #EEF3FA;   /* primary copy */
  --chrome-dim: #A9B9D6;   /* secondary copy */
  --danger:     #FF9AA5;
  --whatsapp:   #25D366;

  --display: "Archivo Exp", "Helvetica Neue", Arial, sans-serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute is only display:none in the UA stylesheet, the weakest
   layer of the cascade, so ANY author rule that sets display beats it and the
   element stays on screen with no error anywhere. Keep this rule ABOVE
   everything that sets display, and never remove it. */
[hidden] { display: none !important; }

/* Ground colour lives on html, NOT body: an opaque body background paints over
   the z-index:-2 .bg layer and the artwork disappears. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--pitch);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--body);
  color: var(--chrome-dim);
  background: transparent;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- the artwork, rebuilt as the page ground ----------
   Four plates, chosen by aspect ratio rather than width alone: width-only
   breakpoints leave a gap at squarish window shapes where neither the phone
   nor the desktop plate applies. The <link rel=preload> conditions in the
   head mirror these four rules exactly, so nothing preloads unused. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--pitch);
  background-image: url("/assets/images/v2-bg-mobile-sm.webp?v=20260915-2");
  background-position: center;
  background-size: cover;
}
@media (max-aspect-ratio: 7/10) and (min-width: 501px) {
  .bg { background-image: url("/assets/images/v2-bg-mobile.webp?v=20260915-2"); }
}
@media (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/v2-bg-desktop-sm.webp?v=20260915-2"); }
}
@media (min-aspect-ratio: 7/10) and (min-width: 1501px) {
  .bg { background-image: url("/assets/images/v2-bg-desktop.webp?v=20260915-2"); }
}

/* Scrim. ONE gradient, weighted to the centre where the content sits: the net
   is meant to stay legible at the edges, so this only has to sink the middle
   far enough that silver type and a dark panel read cleanly over it. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 82% at 50% 50%,
      rgba(7,19,53,.30) 0%, rgba(7,19,53,.16) 46%, rgba(7,19,53,0) 100%);
}

/* Dither. Functional: the felt is a scanned paper texture and WebP bands
   visibly across its flat areas without a little tooth on top. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   STAGE
   ============================================================ */
.stage {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;                 /* auto at EVERY breakpoint - never plain 0 */
  padding: clamp(22px, 4vw, 54px) clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
}
.stage__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: center;
}

/* ---------- the print: the photograph mounted and framed ----------
   The client asked for the hero image in a frame over a blurred colourway.
   The colourway behind is the SAME photograph, scaled and blurred offline
   (not a CSS filter - a fixed full-viewport blur layer is expensive on
   phones), so the sharp print floats inside its own out-of-focus field and
   the two can never disagree on colour.

   The mount is a real mount: generous inner margin, one hairline, and a
   large soft shadow so the print sits off the page rather than on it. The
   artist's wordmark sits under the image like the plate on a gallery mount,
   which is why it is the h1 and why it needs no separate heading. */
.print {
  justify-self: center;
  width: 100%;
  /* V2: 3:4 poster, so height == width * 4/3, and no logo plate under it. Deriving the cap from the viewport
     height keeps the print and the top of the form on screen together at
     in-between window shapes (792x720 etc), where neither the two-column rule
     (min-width 900) nor the landscape rule (max-height 520) applies and the
     art would otherwise take the whole fold. */
  max-width: min(520px, calc((100svh - 220px) * 0.75));
}
.print__mount {
  background: linear-gradient(180deg, rgba(11,29,74,.82), rgba(7,19,53,.90));
  border: 1px solid rgba(238,243,250,.14);
  border-radius: 3px;
  padding: clamp(13px, 1.7vw, 19px);
  box-shadow:
    0 44px 96px -36px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(238,243,250,.06);
  animation: riseIn .85s cubic-bezier(.16,.84,.36,1) both;
}
.print__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1px;
}
.print__plate { margin-top: clamp(13px, 1.7vw, 18px); }
/* h1 wraps the wordmark; line-height:0 stops the inline box adding a gap
   under the svg. The alt text carries the name for screen readers. */
.print__h1 { margin: 0; line-height: 0; }
.print__logo {
  display: block;
  width: min(70%, 244px);
  height: auto;
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   SIGNUP PANEL
   ============================================================ */
.signup { justify-self: center; width: 100%; max-width: 500px; }
.panel {
  width: 100%;
  position: relative;
  isolation: isolate;             /* keeps the country dropdown above the top rule */
  background: linear-gradient(180deg, rgba(11,29,74,.90), rgba(7,19,53,.95));
  border: 1px solid rgba(238,243,250,.16);
  border-radius: 3px;
  box-shadow: 0 34px 74px -30px rgba(0,0,0,.92);
  animation: riseIn .85s .12s cubic-bezier(.16,.84,.36,1) both;
  overflow: visible;
}
/* the crack pink drawn as the panel's top edge - the one place the accent
   touches the panel outline, so the card reads as a shard of the poster */
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg,
    rgba(247,196,40,0), var(--net-deep) 26%, var(--net) 58%, rgba(247,196,40,0));
  z-index: 0;
}
.panel__inner { position: relative; z-index: 1; padding: clamp(24px, 3.2vw, 36px); }

/* --- state machine (app.js flips data-form-state on .panel) --- */
.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; }

/* ============================================================
   STEP SPINE - the signature element
   Three cells, hairlines in the crack pink, driven by the same
   data-form-state the form logic already sets. Sits OUTSIDE the
   state wrappers because it is panel chrome, not state content.
   ============================================================ */
.spine {
  display: flex;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border: 1px solid rgba(238,243,250,.18);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(7,19,53,.52);
}
.spine__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  transition: color .25s ease, background-color .25s ease;
}
.spine__step + .spine__step { border-left: 1px solid rgba(238,243,250,.14); }
.spine__n {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0;
}
.spine__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* current step */
.panel[data-form-state="idle"]    .spine__step:nth-child(1),
.panel[data-form-state="otp"]     .spine__step:nth-child(2),
.panel[data-form-state="success"] .spine__step:nth-child(3) {
  color: var(--net);
  background: rgba(247,196,40,.10);
}
.panel[data-form-state="idle"]    .spine__step:nth-child(1) .spine__n,
.panel[data-form-state="otp"]     .spine__step:nth-child(2) .spine__n,
.panel[data-form-state="success"] .spine__step:nth-child(3) .spine__n {
  background: var(--net);
  border-color: var(--net);
  color: var(--felt);
}
/* completed steps: the numeral is replaced by a tick */
.panel[data-form-state="otp"]     .spine__step:nth-child(1),
.panel[data-form-state="success"] .spine__step:nth-child(1),
.panel[data-form-state="success"] .spine__step:nth-child(2) {
  color: var(--net-deep);
}
.panel[data-form-state="otp"]     .spine__step:nth-child(1) .spine__n,
.panel[data-form-state="success"] .spine__step:nth-child(1) .spine__n,
.panel[data-form-state="success"] .spine__step:nth-child(2) .spine__n {
  font-size: 0;                    /* hide the digit, keep the ring */
  border-color: var(--net-deep);
  background: rgba(247,196,40,.16);
}
.panel[data-form-state="otp"]     .spine__step:nth-child(1) .spine__n::after,
.panel[data-form-state="success"] .spine__step:nth-child(1) .spine__n::after,
.panel[data-form-state="success"] .spine__step:nth-child(2) .spine__n::after {
  content: "";
  width: 7px; height: 4px;
  border: 1.5px solid var(--net);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
@media (max-width: 400px) {
  .spine__step { font-size: 9px; letter-spacing: .04em; gap: 5px; padding: 8px 3px 7px; }
  .spine__n { width: 14px; height: 14px; }
}

/* ============================================================
   PANEL COPY
   ============================================================ */
.panel__title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.32rem, 3.4vw, 1.62rem);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--chrome);
  text-wrap: balance;
}
/* House pattern across the fleet: the second line of the title carries the
   accent. <em> is used for the hook rather than a span so the emphasis is in
   the markup, not only the paint - it is reset from italic because the face
   has no true italic. */
.panel__title em { font-style: normal; color: var(--net); }
.panel__lede {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--chrome-dim);
  max-width: 46ch;
}
.panel__lede--last { margin-bottom: 20px; }
.panel__lede strong { color: var(--chrome); font-weight: 600; }
.panel__success-note { margin: 0 0 12px; color: var(--sky); font-size: 14.5px; }

/* ============================================================
   FORM
   ============================================================ */
.form__row { margin: 0 0 13px; }
/* labels stay for screen readers; placeholders carry the meaning visually */
.form__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.form__input {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--body);
  font-size: 16px;                /* 16px minimum or iOS zooms the page on focus */
  color: var(--chrome);
  background: var(--field);       /* OPAQUE - see the autofill rule below */
  border: 1px solid rgba(238,243,250,.15);
  border-radius: 2px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: #8D9DC0; }
.form__input:focus {
  outline: none;
  border-color: var(--net);
  box-shadow: 0 0 0 3px rgba(247,196,40,.18);
}
.form__input--otp {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .42em;
  text-align: center;
  text-indent: .42em;             /* re-centres text that tracking pushes left */
}

/* Chrome paints autofilled inputs pale lavender and IGNORES background /
   background-color on :-webkit-autofill - a huge inset box-shadow is the only
   reliable override. A box-shadow cannot be semi-transparent, so the colour
   must be the FLATTENED OPAQUE equivalent of the field's rendered stack. That
   is trivially --field here because the field was made opaque on purpose; keep
   it opaque, or this value has to be recomputed by compositing field over
   panel over the background plate. */
.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) inset !important;
          box-shadow: 0 0 0 1000px var(--field) inset !important;
  -webkit-text-fill-color: var(--chrome) !important;
  caret-color: var(--chrome);
  transition: background-color 9999s ease-in-out 0s;   /* stops the lavender flashing in */
}

.form__error { margin: 7px 0 0; font-size: 13px; color: var(--danger); }
.form__error--global { margin-top: 14px; }

/* Honeypot. display:none ONLY - off-screen positioning stays an autofill
   target in Chrome/Edge, which fills it and silently blocks real signups. */
.hp-row { display: none !important; }

.form__row--check { margin: 17px 0 19px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--chrome-dim);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: 1px 0 0;
  accent-color: var(--net);
  cursor: pointer;
}
.form__check a { color: var(--chrome); text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { color: var(--net); }

.form__resend {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--chrome-dim);
  text-align: center;
}
.form__resend-btn {
  font: inherit;
  color: var(--net);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.form__resend-btn:disabled { color: var(--chrome-dim); cursor: default; text-decoration: none; }

/* ---------- buttons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.8rem, 2.9vw, .92rem);
  letter-spacing: clamp(.05em, .4vw, .1em);
  text-transform: uppercase;
  white-space: nowrap;            /* shrink the type before it can ever wrap */
  text-align: center;
  text-decoration: none;          /* <a class="btn"> needs this, <button> doesn't */
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: transform .12s ease, filter .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
/* Dark type on the pink: 9.28:1. Silver here would be 1.9:1. */
.btn--primary {
  color: var(--felt);
  background: var(--net);
  box-shadow: 0 12px 28px -14px rgba(247,196,40,.40);
}
.btn--primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn--whatsapp {
  color: #06301A;
  background: var(--whatsapp);
  margin-top: 4px;
}
.btn--whatsapp:hover { filter: brightness(1.06); }
.btn__icon { flex: 0 0 auto; width: 19px; height: 19px; }

.wa-hook { margin: 18px 0 12px; font-size: 13.5px; color: var(--chrome-dim); }
.wa-hook strong { color: var(--chrome); font-weight: 600; }

/* ============================================================
   intl-tel-input v25
   ============================================================ */
.iti { width: 100%; display: block; }
/* app.js re-measures and sets padding-left inline; this is the sane default
   before it runs. Anything >= 80px breaks 320-390px viewports. */
.iti input.form__input { padding-left: calc(52px + 0.7rem); }
.iti__country-container { z-index: 3; }
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* Until the vendor stylesheet loads, the hidden state does not exist and the
   whole list plus search box flashes open on first paint. */
.iti__dropdown-content.iti__hide { display: none !important; }

.iti__dropdown-content {
  background: var(--felt);
  border: 1px solid rgba(238,243,250,.22);
  border-radius: 3px;
  box-shadow: 0 26px 56px -18px rgba(0,0,0,.94);
  overflow: hidden;
}
.iti__search-input {
  /* Keep the vendor's horizontal padding reservation: 30px left clears the
     absolutely positioned search icon, 28px right clears the clear button. A
     padding SHORTHAND that drops them puts the magnifier on top of the
     placeholder text. Set the vertical values, keep the horizontal ones. */
  padding: 10px 30px 10px 32px;
  width: 100%;
  font-family: var(--body);
  font-size: 14px;
  color: var(--chrome);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid rgba(238,243,250,.16);
}
.iti__search-input::placeholder { color: #8D9DC0; }
.iti__search-input:focus { outline: none; background: #1A3370; }
.iti__country-list { background: var(--felt); max-height: 240px; }
.iti__country {
  padding: 9px 12px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--chrome);
}
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(247,196,40,.14); }
.iti__dial-code { color: var(--chrome-dim); }
.iti__country-name { color: var(--chrome); }
.iti__selected-country { border-radius: 2px 0 0 2px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(247,196,40,.10); }
.iti__selected-dial-code { color: var(--chrome); font-family: var(--body); font-size: 15px; }
.iti__arrow { border-top-color: var(--chrome-dim); }
.iti__arrow--up { border-bottom-color: var(--chrome-dim); }

/* ============================================================
   FOOTER - standard fleet band (basslayerz pattern)
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px clamp(16px, 4vw, 40px) 26px;
  background: rgba(7,19,53,.72);
  border-top: 1px solid rgba(238,243,250,.14);
  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(--chrome-dim); letter-spacing: .02em; }
.foot__legal a { color: var(--chrome-dim); text-decoration: none; }
.foot__legal a:hover { color: var(--net); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--chrome-dim);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid rgba(238,243,250,.16);
  border-radius: 999px;
  transition: border-color .18s ease, color .18s ease;
}
.site-built a:hover { border-color: var(--net); color: var(--chrome); }
.site-built img { display: block; opacity: .82; }

/* ============================================================
   RESPONSIVE
   Aspect-ratio thresholds, not width alone.
   ============================================================ */

/* --- two column: bill left, panel right --- */
@media (min-width: 900px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: clamp(36px, 4.5vw, 64px);
    align-items: center;
  }
  .print  { justify-self: end; max-width: 500px; }
  .signup { justify-self: start; }
  .foot   { justify-content: space-between; }
}

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

/* Phones: stack the footer rather than relying on the flex row wrapping.
   Around 390px the copyright + "built by" row is JUST wide enough to fill the
   band, so centring it is indistinguishable from it running edge to edge - it
   reads as left-aligned even though justify-content is centre. Below 480px,
   force a centred column so every width stacks the same way instead of
   flipping at whatever width the text happens to overflow. */
@media (max-width: 480px) {
  .foot {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-bottom: 22px;
  }
  .foot__left {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  /* Portrait phones: hold the lockup back so the form clears the fold. It is
     nearly square, so every 10vw of width costs ~10vw of height too - measured
     at 390x844, this and the tighter gap lift the sign-up button ~90px. */
  .print { max-width: min(320px, 70vw); }
  .stage { padding-top: clamp(16px, 3vw, 54px); }
  .stage__inner { gap: 22px; }
}

/* --- landscape phones are a first-class layout ---
   A rotated phone (844x390, 932x430, 667x375) satisfies both conditions above
   while having almost no height, so the lockup and panel would render cramped
   and the page would scroll badly. Compact side-by-side, lockup height-capped,
   tighter type. Placed AFTER the desktop block so it wins at equal specificity. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage { padding: 10px clamp(12px, 3vw, 26px); align-items: flex-start; }
  .stage__inner {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  /* Width derived from the height budget rather than height-capping the img:
     a height-capped image keeps its full intrinsic max-content width, so a
     fit-content mount does not shrink and renders empty beside the photo. */
  .print { justify-self: center; min-height: 0;
           max-width: calc((100svh - 90px) * 0.75); }
  .print__mount { padding: 8px; }
  .print__img { width: 100%; max-width: 100%; height: auto; }
  .print__plate { margin-top: 8px; }
  .print__logo { width: min(78%, 146px); }
  .signup { justify-self: stretch; max-width: none; min-height: 0; }
  .panel__inner { padding: 13px 15px; }
  .spine { margin-bottom: 10px; }
  .spine__step { padding: 7px 5px 6px; }
  .panel__title { font-size: 1.02rem; margin-bottom: 6px; }
  .panel__lede { font-size: 12px; margin-bottom: 5px; }
  .panel__lede--last { margin-bottom: 9px; }
  .form__row { margin-bottom: 7px; }
  .form__input { padding: 8px 12px; }
  .form__row--check { margin: 9px 0 10px; }
  .form__check { font-size: 11.5px; }
  .btn { padding: 10px 16px; }
  .iti__country-list { max-height: 150px; }
}

/* --- small phones --- */
@media (max-width: 400px) {
  .panel__inner { padding: 22px 18px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--net);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}