/* ============================================================
   MHITR AUS / NZ - early access sign-up
   mhitrdownunder.com

   Design thesis: the sign-up board is drawn by the same hand that
   drew the scene. Not "a form styled to match the artwork" but an
   object built to the illustration's own rules - the esky's cream
   body, tonal keylines, flat offset shadows, rounded and slightly
   uneven corners, and the halftone screen every surface carries.
   Its labels are the little dark signplates screwed to the esky.
   Every colour AND every technique below is sampled from the
   artwork, never invented. See the palette note further down.
   ============================================================ */

/* ---------- Type ------------------------------------------------
   Protipo Compact Black is the client's TITLE face and nothing else -
   it comes from their Adobe kit, loaded in the document head. Every
   rule that reaches for --font-disp states font-weight: 900
   explicitly; the kit ships Compact at 300-900, so an unstated weight
   silently picks the wrong cut.

   Anton is self-hosted purely as the outage net: if use.typekit.net
   is slow or blocked, headings still land as heavy condensed caps
   instead of collapsing to Arial and reflowing the whole panel. It is
   never the intended face.

   Body is Bricolage Grotesque, self-hosted: a warm grotesque with
   just enough irregularity to sit under the artwork's hand-drawn
   line, and sturdy enough to stay legible at 13px on a busy scene. */
@font-face {
  font-family: "Anton Fallback";
  src: url("/assets/fonts/Anton-400.woff2?v=20260813-5") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-v9-latin-regular.woff2?v=20260813-5") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-v9-latin-600.woff2?v=20260813-5") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-v9-latin-700.woff2?v=20260813-5") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Palette + drawing language --------------------------
   Every value below was sampled out of the client's illustration,
   and so was the TECHNIQUE. Three rules the illustrator follows,
   which this stylesheet now follows too:

   1. Keylines are TONAL, never black - the deck is outlined in
      #392F16, the esky in a dark navy: each is a much darker version
      of the local colour. A black stroke reads as a different hand.
   2. There is not one blurred shadow in the entire scene. Every
      shadow is a flat shape in a solid darker colour, offset. So
      there is no blur radius anywhere below.
   3. Everything carries a halftone dot screen and paper speckle.
      Perfectly clean fills are the main reason a panel reads as
      digital furniture sitting ON the artwork instead of IN it.

   The board's cream is #F6EDDC, which is both the esky's white body
   and the AUS / NZ lettering, so the panel is built from a material
   that already exists in the scene rather than an invented off-white. */
:root {
  --sky:        #1998FF;   /* sky */
  --sky-shade:  #1C70B7;   /* esky's shaded blue - the flat cast shadow */
  --sky-deep:   #0A5DA8;   /* focus rings */
  --sun:        #F7DB0C;   /* deck */
  --turf:       #C8D40C;   /* the logo's grass */
  --orange:     #E56F10;   /* the AUS / NZ sign face */
  --orange-dk:  #C85A0D;   /* the sign in shade - cel-shaded lower half */
  --orange-ink: #B35711;   /* sign timber - passes AA on cream as text */
  --plate:      #2B2B29;   /* the BBQ body + the CLICK CLICK CLICK plate */
  --line:       #392F16;   /* THE keyline - sampled off a deck plank */
  --timber:     #5B300F;   /* the logo's cut timber */
  --ink:        #2A1E15;   /* body text */
  --cream:      #F6EDDC;   /* esky white = AUS / NZ lettering = board face */
  --bone:       #F6EDDC;   /* alias: the board face */
  --field:      #FFFFFF;   /* form fields - opaque, see the autofill rule */
  --rule:       rgba(57, 47, 22, .30);
  --muted:      rgba(42, 30, 21, .74);

  --font-disp: "protipo-compact", "Anton Fallback", "Arial Narrow", Impact, sans-serif;
  --font-body: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

/* html carries the base colour; body stays transparent so it cannot
   paint over the fixed .bg layer below it. */
html { background: var(--sky); }

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

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, never off-screen positioning - Chrome and
   Edge autofill off-screen fields and silently block real sign-ups. */
.hp-row { display: none !important; }

/* ============================================================
   BACKGROUND SCENE
   ============================================================ */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("/assets/images/bg-mobile-sm.webp?v=20260813-5");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media (max-aspect-ratio: 7/10) and (min-width: 501px) {
  .bg { background-image: url("/assets/images/bg-mobile.webp?v=20260813-5"); }
}
/* Landscape-ish shapes get the wide scene. Pulled left of centre so the
   barbecue sits under the panel's right edge rather than dead behind it. */
@media (min-aspect-ratio: 7/10) {
  .bg {
    background-image: url("/assets/images/bg-desktop-sm.webp?v=20260813-5");
    background-position: 32% center;
  }
}
@media (min-aspect-ratio: 7/10) and (min-width: 1501px) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20260813-5"); }
}

/* ============================================================
   SHELL
   ============================================================ */
.sheet {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.stage {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 44px) clamp(16px, 4vw, 40px);
}

.stage__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3.5vw, 34px);
}

/* ============================================================
   BRAND LOCKUP
   ============================================================ */
.brand {
  width: 100%;
  display: flex;
  justify-content: center;
}
/* width:auto (not 100%) so the box is the image, not a letterboxed frame -
   otherwise max-height leaves dead space either side and the lockup reads
   as off-centre against the panel below it. */
.brand__lockup {
  width: auto;
  max-width: min(100%, 460px);
  height: auto;
  max-height: 46svh;
}

/* ============================================================
   THE BOARD - signup panel
   ============================================================ */
.signup {
  width: 100%;
  max-width: 470px;
  margin: 0 auto;
}

/* The board is drawn the way the esky is drawn: a cream body, a tonal
   keyline, corner radii that are round and very slightly uneven (the
   illustrator's corners are not machined), and a cast shadow that is a
   FLAT offset shape in the scene's shade-blue with zero blur. */
.panel {
  position: relative;
  isolation: isolate;            /* keeps the country dropdown clickable */
  background: var(--cream);
  border: 4px solid var(--line);
  border-radius: 26px 22px 25px 23px;
  /* The esky's shadow on the grass is a MUCH darker green than the grass.
     Same logic here: a deep navy against the sky, not a tint of it, or the
     board looks like it is lying flat on the page instead of standing on
     the deck. */
  box-shadow: 10px 12px 0 #0B4A79;
}

/* Halftone dot screen + paper speckle, the two textures every surface in
   the illustration carries. Kept under the content (the inner wrapper
   lifts itself to z-index 1) rather than over it, so it can never sit
   above the country dropdown - the classic way a decorative pseudo
   element breaks this form. */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    radial-gradient(circle at center, rgba(57, 47, 22, .34) 0.6px, transparent 0.7px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 4px 4px, 140px 140px;
  opacity: .62;
  mix-blend-mode: multiply;
}

.panel__inner {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 4.4vw, 30px) clamp(18px, 4.4vw, 30px) clamp(22px, 4.4vw, 28px);
}

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

/* The eyebrow is the hanging AUS / NZ sign: orange face, tonal keyline,
   cream caps, flat offset shadow. Same object, smaller. */
.panel__eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 12px 5px;
  background: var(--orange);
  border: 2.5px solid var(--line);
  border-radius: 9px 8px 9px 7px;
  box-shadow: 3px 4px 0 var(--line);
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
}

.panel__title {
  margin: 0 0 10px;
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: clamp(2rem, 6.4vw, 2.7rem);
  line-height: .94;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}
.panel__title em { font-style: normal; color: var(--orange-dk); }

/* :not(.panel__eyebrow) so a state-scoped paragraph rule can never
   out-specify the eyebrow and resize it. */
.panel__lede,
.panel__state p:not(.panel__eyebrow):not(.form__error):not(.panel__junk):not(.form__resend) {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.panel__lede strong { color: var(--ink); font-weight: 700; }

/* A note pinned to the board - deck-yellow face, same keyline as everything
   else, flat offset shadow. */
.panel__junk {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 2.5px solid var(--line);
  border-radius: 13px 11px 13px 10px;
  box-shadow: 3px 4px 0 var(--line);
  background: rgba(247, 219, 12, .42);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}
.panel__junk strong { font-weight: 700; }

.panel__success-note {
  margin: 0 0 14px !important;
  font-size: 14px !important;
  color: var(--ink) !important;
}

/* ============================================================
   FORM
   ============================================================ */
.form__row { margin: 0 0 14px; }

/* SIGNATURE: every field label is one of the little dark signplates the
   illustrator screwed onto the esky - the "CLICK CLICK CLICK" and "HEDEX"
   plates. #2B2B29 is that plate's exact fill, lifted straight from the
   artwork, and the cream caps are its lettering. It is the one motif this
   page borrows wholesale, which is why nothing else on the board shouts. */
.form__label {
  display: inline-block;
  margin: 0 0 7px;
  padding: 5px 10px 4px;
  background: var(--plate);
  border-radius: 7px 6px 7px 5px;
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
}

.form__input {
  width: 100%;
  padding: 12px 14px;
  background: var(--field);
  border: 2.5px solid var(--line);
  border-radius: 12px 11px 12px 10px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;              /* 16px stops iOS zooming the page on focus */
  line-height: 1.3;
  transition: box-shadow .14s ease, background-color .14s ease;
}
.form__input::placeholder { color: rgba(42, 30, 21, .45); }
/* Flat inset offset, no blur - the same shading logic as the scene. */
.form__input:focus {
  outline: none;
  box-shadow: 3px 4px 0 var(--orange);
}
.form__input--otp {
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .34em;
  text-align: center;
}

/* Chrome paints autofilled inputs pale lavender, which would blow a hole
   in the board. :-webkit-autofill ignores background/background-color, so
   the only reliable override is a huge inset shadow. Our fields are
   OPAQUE white on the panel, so the flattened colour is simply #FFFFFF -
   no compositing needed. The 9999s transition stops Chrome flashing the
   lavender in before the shadow paints. */
.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 #FFFFFF inset !important;
          box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  -webkit-text-fill-color: #2A1E15 !important;
  caret-color: #2A1E15;
  transition: background-color 9999s ease-in-out 0s;
}

.form__error {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: #A32611;
  font-weight: 700;
}
.form__error--global { margin-top: 12px; }

/* ---- consent ---- */
.form__row--check { margin: 16px 0 18px; }
.form__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.42;
  color: var(--muted);
  cursor: pointer;
}
/* The default control is a flat system square, which is the one element that
   gives away that this is a web form pasted onto a drawing. Redrawn to the
   same rules as everything else: cream face, tonal keyline, uneven radius,
   and it fills with the sign orange and a cream tick when ticked. */
.form__check input {
  flex: 0 0 auto;
  -webkit-appearance: none;
          appearance: none;
  position: relative;
  width: 21px; height: 21px;
  margin: 1px 0 0;
  background: var(--field);
  border: 2.5px solid var(--line);
  border-radius: 7px 6px 7px 5px;
  cursor: pointer;
  transition: background-color .12s ease;
}
.form__check input:checked { background: var(--orange); }
.form__check input:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--cream);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.form__check a { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { color: var(--ink); }

/* ---- resend (OTP state) ---- */
.form__resend { margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.form__resend-btn {
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: 700;
  color: var(--orange-ink); text-decoration: underline; cursor: pointer;
}
.form__resend-btn[disabled] { opacity: .55; cursor: default; }

/* ============================================================
   CITY PICKER - the signature element

   Five cities, so they stay on the board rather than hiding inside a
   dropdown: one tap each, no stacking contest with the country list,
   and no state the user has to open to check. Each city is a little
   painted sign; selecting one "paints" it in the AUS / NZ sign
   colour. The AUS / NZ split is real information, not decoration -
   it is the same division the logo makes.
   ============================================================ */
/* No box around the tags. The chips already carry the keyline language, so
   a bordered fieldset around them was a box inside a box inside the board -
   three nested frames for one question. The signplate label and the AUS / NZ
   gutter do the grouping instead. */
.cities {
  /* A fieldset defaults to min-inline-size: min-content, which stops it
     shrinking inside the grid column and pushes the panel wide. */
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: none;
}
/* A legend ignores normal block layout and would stretch the dark plate to
   the full row, clipping its own text. Floating it forces ordinary flow;
   width MUST stay auto so the plate hugs the words. */
.cities > .form__label {
  float: left;
  width: auto;
  margin: 0 0 10px;
}
.cities__group:first-of-type { clear: both; }

.cities__group { display: flex; align-items: flex-start; gap: 10px; }
.cities__group + .cities__group { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); }

.cities__country {
  flex: 0 0 auto;
  min-width: 26px;
  padding-top: 10px;
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--orange-ink);
}

.cities__row { display: flex; flex-wrap: wrap; gap: 8px; }

/* position:relative so the visually-hidden input stays inside its own label.
   Without it the input escapes to .panel (the nearest positioned ancestor)
   and keyboard focus jumps the scroll to the top of the board. */
.city { position: relative; display: inline-flex; cursor: pointer; }
/* The input stays in the accessibility tree and keeps native checkbox
   semantics and keyboard behaviour; only its painted box is hidden. */
.city input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
/* Each city is a little painted tag: cream face, tonal keyline, flat
   offset shadow. Selecting one paints it in the AUS / NZ sign orange,
   cel-shaded top-to-bottom exactly like the sign in the lockup. */
.city__face {
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  background: var(--field);
  border: 2.5px solid var(--line);
  border-radius: 11px 10px 11px 9px;
  box-shadow: 3px 3px 0 var(--line);
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background .13s ease, color .13s ease, transform .1s ease, box-shadow .1s ease;
}
.city:hover .city__face { background: #FFF6E4; }
.city input:checked + .city__face {
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange) 52%, var(--orange-dk) 52%, var(--orange-dk) 100%);
  color: var(--cream);
}
/* A tick as well as the colour change - selection must not rely on hue alone. */
.city input:checked + .city__face::before {
  content: "\2713";
  margin-right: 6px;
  font-size: 13px;
  line-height: 1;
}
.city input:active + .city__face { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--line); }
.city input:focus-visible + .city__face {
  outline: 3px solid var(--sky-deep);
  outline-offset: 2px;
}
.cities.is-invalid { border-color: #A32611; }

/* ============================================================
   BUTTON
   ============================================================ */
/* The button IS the hanging AUS / NZ sign: orange face cel-shaded into
   its own shade colour at the halfway line, tonal keyline, flat offset
   shadow that collapses when you press it. */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 18px;
  border: 3px solid var(--line);
  border-radius: 15px 13px 15px 12px;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange) 52%, var(--orange-dk) 52%, var(--orange-dk) 100%);
  box-shadow: 5px 6px 0 var(--line);
  color: var(--cream);
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .14s ease, transform .1s ease, box-shadow .1s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translate(5px, 6px); box-shadow: 0 0 0 var(--line); }
.btn[disabled] { opacity: .62; cursor: default; transform: none; box-shadow: 5px 6px 0 var(--line); }

/* ============================================================
   intl-tel-input v25 - dropdown + search box
   ============================================================ */
.iti { width: 100%; }
.iti input.form__input { padding-left: calc(52px + .7rem); }   /* app.js re-measures this */

/* Until the vendor stylesheet lands, its hidden state does not exist and
   the whole country list flashes open on first paint. */
.iti__dropdown-content.iti__hide { display: none !important; }

.iti__dropdown-content {
  background: var(--cream);
  border: 2.5px solid var(--line);
  border-radius: 14px 12px 14px 11px;
  box-shadow: 5px 6px 0 rgba(28, 112, 183, .58);   /* flat offset, no blur */
  overflow: hidden;
}
.iti__search-input {
  /* Keep the vendor's horizontal reservation: 30px right and 32px left clear
     the absolutely positioned magnifier and clear button. A padding
     SHORTHAND that drops them puts the glass on top of the word "Search". */
  padding: 10px 30px 10px 32px;
  width: 100%;
  background: var(--field);
  border: 0;
  border-bottom: 2px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
}
.iti__search-input::placeholder { color: rgba(42, 30, 21, .45); }
.iti__search-input:focus { outline: none; border-bottom-color: var(--orange); }
.iti__country-list { max-height: 232px; background: var(--cream); }
.iti__country {
  padding: 9px 12px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14.5px;
}
.iti__country + .iti__country { border-top: 1px solid rgba(57, 47, 22, .16); }
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(229, 111, 16, .18); }
.iti__dial-code { color: var(--muted); }
.iti__country-name { color: var(--ink); }
.iti__selected-country { border-radius: 3px 0 0 3px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(57, 47, 22, .10); }
.iti__selected-dial-code { color: var(--ink); font-family: var(--font-body); font-size: 15px; }

/* ============================================================
   FOOTER - full width, basslayerz pattern
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 16px clamp(16px, 4vw, 40px) 22px;
  background: rgba(11, 46, 78, .68);
  border-top: 2px solid rgba(255, 255, 255, .18);
  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: rgba(255, 255, 255, .82); letter-spacing: .02em; }
.foot__legal a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.foot__legal a:hover { color: var(--sun); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 3px;
}
.site-built a:hover { border-color: var(--sun); color: #fff; }
.site-built img { display: block; opacity: .9; }

/* ============================================================
   TWO COLUMNS

   Threshold is an aspect ratio, not a width alone: width-only
   breakpoints leave a gap at squarish window shapes (~570-900px)
   where neither the phone nor the desktop treatment applies.
   ============================================================ */
@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  .stage { padding: clamp(24px, 3vw, 52px) clamp(24px, 4vw, 56px); }

  .stage__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 452px);
    align-items: center;
    gap: clamp(24px, 4vw, 60px);
  }

  .brand { justify-content: flex-start; }
  .brand__lockup {
    max-width: 100%;
    max-height: min(76svh, 720px);
  }

  .signup { max-width: none; margin: 0; }
}

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

   A rotated phone (844x390, 932x430, 667x375) satisfies the
   width and aspect conditions above but has almost no height, so
   the desktop grid's viewport-capped art and roomy panel padding
   render cramped. This block sits AFTER the desktop rules so it
   wins at equal specificity.
   ============================================================ */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage { padding: 14px 18px; align-items: flex-start; }

  .stage__inner {
    display: grid;
    grid-template-columns: auto minmax(300px, 388px);
    align-items: start;
    gap: 18px;
    min-height: 0;
  }

  .brand { min-height: 0; }
  .brand__lockup { max-height: calc(100svh - 96px); width: auto; max-width: 100%; }

  .signup { max-width: none; }
  .panel { border-radius: 20px 17px 19px 18px; box-shadow: 6px 7px 0 rgba(28, 112, 183, .58); }
  .panel__inner { padding: 14px 16px 16px; }
  .panel__eyebrow { margin-bottom: 5px; font-size: 10.5px; }
  .panel__title { font-size: 1.5rem; margin-bottom: 6px; }
  .panel__lede,
  .panel__state p:not(.panel__eyebrow):not(.form__error):not(.panel__junk):not(.form__resend) {
    margin-bottom: 12px; font-size: 13px;
  }
  .cities { margin-bottom: 12px; padding: 10px 10px 8px; }
  .city__face { padding: 7px 10px; font-size: 12.5px; }
  .form__row { margin-bottom: 10px; }
  .form__input { padding: 9px 12px; }
  .form__row--check { margin: 12px 0 14px; }
  .form__check { font-size: 12px; }
  .btn { padding: 12px 16px; }
  .iti__country-list { max-height: 168px; }
}

/* Very small phones: the city signs get their own line under the
   country label rather than squeezing to two words per row. */
@media (max-width: 360px) {
  .cities__group { flex-direction: column; gap: 4px; }
  .cities__country { padding-top: 0; }
  .city__face { font-size: 13px; padding: 8px 11px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.form__check input:focus-visible {
  outline: 3px solid var(--sky-deep);
  outline-offset: 2px;
}
.form__input:focus-visible { outline-offset: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}