/* ============================================================
   BORN ON ROAD - LONDON
   Teaser signup page.

   ⚠️ This file is served publicly. The event name, venue, date and
   show times are EMBARGOED (client, 2026-08-07) - keep them out of
   these comments as well as out of the markup. The announce build
   is parked at /index2.html and may be restored at announce.

   Visual language derived from the client artwork: white lettering
   bleeding a green halo, laser green on smoke.

   Signature: the lit screen. The page is treated as a display that
   has been switched on - a faint scanline pitch over the whole
   field, a bloom on the hero, a lit top edge on the panel. Used
   there and nowhere else.
   ============================================================ */

:root {
  /* Every value sampled from the artwork, not guessed:
     #05CD55 the chip/logo laser, #E8FDFB the title white,
     #0E674D the mid bottle green, #032017 the smoke black. */
  --laser:     #05CD55;
  --laser-hot: #3BFF88;
  --laser-deep:#03A544;                    /* the shaded foot of a lit button */
  --jade:      #0E674D;
  --jade-line: rgba(5, 205, 85, 0.34);
  --mint:      #E8FDFB;
  --haze:      #B1D4B6;
  --ink:       #04120C;                    /* green-black, never neutral */
  --muted:     rgba(232, 253, 251, 0.66);
  --err:       #FF8A78;

  --panel-bg:  rgba(4, 18, 12, 0.80);      /* translucent: the haze blurs through */
  /* Flattened opaque equivalent of field-over-panel-over-scene.
     Chrome's :-webkit-autofill ignores background, so the inset
     box-shadow has to be a single solid colour that matches. */
  --field-flat: #132320;

  --font:      "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-cond: "Barlow Condensed", "Barlow", Helvetica, Arial, sans-serif;
  --font-disp: "Archivo Black", "Barlow", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--mint);
  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 back into pure atmosphere,
   plus the scanline pitch that makes the page read as a screen
   ============================================================ */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/assets/images/bg-mobile.webp?v=20260807-1") center center / cover no-repeat,
              var(--ink);
}
@media (max-aspect-ratio: 7/10) and (max-width: 500px) {
  .bg { background-image: url("/assets/images/bg-mobile-sm.webp?v=20260807-1"); }
}
@media (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20260807-1"); }
}
@media (min-aspect-ratio: 7/10) and (max-width: 1500px) {
  .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20260807-1"); }
}
/* The LED pitch. 3px, barely there - at full strength it moires against the
   poster; this reads as texture, not as stripes. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg,
      rgba(5, 205, 85, 0.055) 0px, rgba(5, 205, 85, 0.055) 1px,
      rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3px),
    linear-gradient(180deg,
      rgba(4, 18, 12, 0.30) 0%,
      rgba(4, 18, 12, 0.10) 34%,
      rgba(4, 18, 12, 0.52) 100%);
}

/* ============================================================
   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: 1240px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 52px) clamp(16px, 4.5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3.6vw, 40px);
}

/* ============================================================
   ART COLUMN - the poster, framed and bloomed like a lit panel
   ============================================================ */
.art { text-align: center; }
.art__frame {
  position: relative;
  display: block;
  width: min(94vw, 560px);
  margin: 0 auto;
  /* No border or edge ring: the artwork bleeds straight into the haze and the
     bloom alone lifts it off the page, the way a lit screen actually reads. */
  box-shadow:
    0 22px 64px -18px rgba(0, 0, 0, 0.9),
    0 0 100px -18px rgba(5, 205, 85, 0.46);
}
.art__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* The facts as selectable text. The poster prints them too, but it prints
   them small and inside a busy image - at phone size they stop being
   readable, and a screen reader never had them at all. */
.art__facts {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px clamp(10px, 1.4vw, 16px);
  margin: clamp(14px, 2vw, 20px) 0 0;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
  text-shadow: 0 2px 14px rgba(4, 18, 12, 0.9);
}
.art__facts span { white-space: nowrap; }
.art__facts .art__sep {
  width: 4px; height: 4px;
  transform: rotate(45deg);            /* the diamond from the Born on Road mark */
  background: var(--laser);
}
.art__powered {
  margin: clamp(9px, 1.2vw, 12px) 0 0;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: clamp(11.5px, 1.2vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laser);
  text-shadow: 0 2px 14px rgba(4, 18, 12, 0.9);
}

/* ============================================================
   TEASER HERO - client wordmark + the machine printing the message.
   (The .art__frame / .art__facts / .art__powered rules above are still
   load-bearing for the parked announce build at /index2.html - do not
   delete them just because the teaser homepage stopped using them.)
   ============================================================ */
.brandmark {
  display: block;
  /* Source is 439px wide, so it is deliberately never shown much above that:
     past ~360 CSS px it starts to soften on 2x screens. */
  width: min(82vw, 340px);
  height: auto;
  margin: 0 auto;
  /* The wordmark already carries its own green bloom. This only lifts it off
     the haze - adding a second green glow here doubles up and goes muddy. */
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.75));
}

.term {
  margin: clamp(20px, 3vw, 32px) auto 0;
  width: fit-content;
  max-width: 100%;
  text-align: left;        /* lines align on the prompt, like a real console */
}
.term__line {
  margin: 0 0 clamp(6px, 0.9vw, 10px);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: clamp(13px, 1.55vw, 19px);
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mint);
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(5, 205, 85, 0.35), 0 2px 12px rgba(4, 18, 12, 0.9);
}
.term__line:last-child { margin-bottom: 0; }
/* The console prompt. Held at opacity 0 rather than display:none so the line
   box is measured with it present from the first frame and nothing shifts
   sideways when it appears. */
.term__line::before {
  content: ">";
  margin-right: 0.7em;
  color: var(--laser);
}
/* Prompts only hide once JS has armed the block, so a visitor with JS off
   still gets four complete, correctly prefixed lines instead of blank rows. */
.term.is-armed .term__line::before { opacity: 0; }
.term.is-armed .term__line.is-active::before,
.term.is-armed .term__line.is-typed::before { opacity: 1; }
.term__line--cta {
  color: var(--laser-hot);
  text-shadow: 0 0 20px rgba(59, 255, 136, 0.55), 0 2px 12px rgba(4, 18, 12, 0.9);
}

/* Characters hide with `visibility`, never `display`: the full line is laid
   out on the first frame, so revealing a character can never reflow the block
   or nudge the sign-up panel sitting next to it. */
.term__ch { visibility: hidden; }
.term__ch.is-on { visibility: visible; }

/* Block cursor. The left and right margins cancel to zero net width, so
   moving it between characters never shifts the hidden ones after it. */
.term__caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.1em;
  margin-right: -0.65em;
  vertical-align: -0.18em;
  background: var(--laser-hot);
  box-shadow: 0 0 12px rgba(59, 255, 136, 0.85);
  animation: caretblink 1.05s steps(1) infinite;
}
@keyframes caretblink { 50% { opacity: 0; } }

/* ============================================================
   PANEL - dark glass on the haze, hairline laser edge
   ============================================================ */
.panel {
  position: relative;
  isolation: isolate;                  /* keeps the country dropdown clickable */
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  /* Not a flat fill: the glass is lit from the top edge and falls off toward
     the foot, so the panel has a direction of light like everything else here. */
  background:
    linear-gradient(180deg, rgba(5, 205, 85, 0.07) 0%, rgba(5, 205, 85, 0) 42%),
    var(--panel-bg);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    inset 0 0 0 1px var(--jade-line),
    0 24px 64px -24px rgba(0, 0, 0, 0.85),
    0 0 70px -28px rgba(5, 205, 85, 0.34);
}
/* Light spilling along the top edge, brightest at the centre and fading out to
   the corners - a uniform 1px inset line reads as a border, this reads as a
   lit edge. z-index 0 + pointer-events:none so it can never sit over the form
   or swallow clicks on the country dropdown. */
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(59, 255, 136, 0) 0%,
    rgba(59, 255, 136, 0.75) 50%,
    rgba(59, 255, 136, 0) 100%);
}
.panel__inner {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 3.6vw, 36px) clamp(19px, 3.2vw, 32px) clamp(26px, 3.6vw, 36px);
}

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

/* --- panel type --- */
.panel__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 13px;
  font-family: var(--font-cond);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--laser);
}
.panel__eyebrow-hair {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--jade-line), rgba(5, 205, 85, 0));
}
.panel__eyebrow-hair:first-child {
  background: linear-gradient(270deg, var(--jade-line), rgba(5, 205, 85, 0));
}
.panel__title {
  margin: 0 0 12px;
  font-family: var(--font-disp);
  font-weight: 400;                    /* Archivo Black has one weight */
  font-size: clamp(27px, 3.7vw, 37px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  /* The artwork's own title is white type bleeding a green halo, because the
     wall behind it is lit. Same logic here: a tight white core, then green at
     three widening radii so the falloff is a real bloom and not one flat blur. */
  text-shadow:
    0 0 2px rgba(232, 253, 251, 0.55),
    0 0 14px rgba(5, 205, 85, 0.5),
    0 0 34px rgba(5, 205, 85, 0.34),
    0 0 68px rgba(5, 205, 85, 0.2);
}
.panel__title em {
  font-style: normal;                  /* the laser IS the emphasis */
  /* the hot green, not the base laser: on this panel it reads as a lit tube
     rather than green ink, and it measures 12.5:1 against the glass */
  color: var(--laser-hot);
  text-shadow:
    0 0 8px rgba(59, 255, 136, 0.7),
    0 0 22px rgba(5, 205, 85, 0.6),
    0 0 52px rgba(5, 205, 85, 0.4);
}
/* 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(--haze);
  font-size: 15px;
}
.panel__lede strong { color: var(--mint); font-weight: 600; }
.panel__success-note {
  margin: 0 0 12px;
  color: var(--laser);
  font-size: 15px;
}

/* ============================================================
   FORM
   ============================================================ */
.form { margin: 0; }
.form__row { margin: 0 0 16px; }
.form__label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-cond);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--laser);
}
/* Fields read as recessed slots with a light bar along the foot, which lights
   up when the field is active. The bar is an inset shadow rather than a real
   border-bottom: changing a border WIDTH on focus reflows the field by a pixel
   and the whole form twitches as you tab through it. */
.form__input {
  display: block;
  width: 100%;
  padding: 14px 14px 13px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(232, 253, 251, 0.07) 100%);
  border: 1px solid rgba(232, 253, 251, 0.14);
  border-radius: 0;
  color: var(--mint);
  font-family: var(--font);
  font-size: 16px;                     /* >=16px stops iOS zoom-on-focus */
  line-height: 1.3;
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, 0.42),   /* the recess */
    inset 0 -2px 0 0 rgba(5, 205, 85, 0.34); /* the light bar, dimmed at rest */
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.form__input::placeholder { color: rgba(232, 253, 251, 0.34); }
.form__input:hover:not(:focus) {
  border-color: rgba(232, 253, 251, 0.22);
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, 0.42),
    inset 0 -2px 0 0 rgba(5, 205, 85, 0.55);
}
.form__input:focus {
  outline: none;
  border-color: rgba(5, 205, 85, 0.55);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(232, 253, 251, 0.1) 100%);
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, 0.34),
    inset 0 -2px 0 0 var(--laser),       /* bar at full strength */
    0 0 0 3px rgba(5, 205, 85, 0.13),    /* soft halo, not a hard ring */
    0 6px 26px -8px rgba(5, 205, 85, 0.55);
}
/* Chrome paints autofilled fields pale lavender, which would blow a hole in
   this panel. :-webkit-autofill ignores background/background-color, so the
   only reliable override is a huge inset shadow - and it has to be the
   FLATTENED opaque colour of field-over-panel-over-scene, not the field's
   own rgba, or an autofilled row will not match the empty one beside it.

   The light bar has to be re-declared here too: this rule is !important and
   box-shadow is a single property, so without it an autofilled field would
   lose its bar and stop matching the empty field next to it. */
.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,
                      inset 0 -2px 0 0 rgba(5, 205, 85, 0.34) !important;
          box-shadow: 0 0 0 1000px var(--field-flat) inset,
                      inset 0 -2px 0 0 rgba(5, 205, 85, 0.34) !important;
  -webkit-text-fill-color: var(--mint) !important;
  caret-color: var(--mint);
  transition: background-color 9999s ease-in-out 0s;
}
.form__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--field-flat) inset,
                      inset 0 -2px 0 0 var(--laser) !important;
          box-shadow: 0 0 0 1000px var(--field-flat) inset,
                      inset 0 -2px 0 0 var(--laser) !important;
}

.form__row--check { margin-top: 18px; }
.form__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  color: var(--haze);
  font-size: 13px;
  line-height: 1.45;
}
/* Custom box: the OS default renders as a flat grey chip that ignores every
   other surface on this panel. Recessed like the fields at rest, and it lights
   when ticked. The tick is an inline SVG background rather than a pseudo
   element, because ::before on a checkbox is unreliable across engines. */
.form__check input {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 19px; height: 19px;
  margin: 1px 0 0;
  border: 1px solid rgba(232, 253, 251, 0.24);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(232, 253, 251, 0.06) 100%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.42);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.18s ease;
}
.form__check input:hover { border-color: rgba(5, 205, 85, 0.6); }
.form__check input:checked {
  border-color: var(--laser);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.7 6.3l2.9 2.9 5.7-6.4' fill='none' stroke='%2304120C' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
    linear-gradient(180deg, var(--laser-hot) 0%, var(--laser) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 16px -2px rgba(5, 205, 85, 0.75);
}
.form__check a { color: var(--laser); text-decoration: underline; }

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

/* --- buttons --- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 20px 0 0;
  padding: 15px 18px;
  border: 0;
  border-radius: 0;
  font-family: var(--font-cond);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.16s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
/* A lit slab, not a flat swatch: gradient down the face, a bright top lip, a
   shaded foot and the same bloom the poster and panel throw. */
.btn--primary {
  /* laser green needs DARK ink on it. Measured against the DARKEST band of the
     gradient (#03A544) it is still 5.98:1; white would be 2.3:1. */
  background: linear-gradient(180deg, var(--laser-hot) 0%, var(--laser) 58%, var(--laser-deep) 100%);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),      /* the lit top lip */
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),           /* the shaded foot */
    0 8px 22px -10px rgba(0, 0, 0, 0.9),
    0 0 38px -10px rgba(5, 205, 85, 0.75);        /* bloom */
  /* shrink type before it can wrap - never let a CTA break to two lines */
  white-space: nowrap;
  font-size: clamp(0.9rem, 3.4vw, 1.1rem);
  letter-spacing: clamp(0.08em, 0.6vw, 0.18em);
  text-transform: uppercase;
}
.btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #6BFFA6 0%, var(--laser-hot) 58%, var(--laser) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 12px 26px -10px rgba(0, 0, 0, 0.9),
    0 0 54px -6px rgba(59, 255, 136, 0.9);
  transform: translateY(-1px);
}
/* press it back down into the panel */
.btn--primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.4),
    0 0 26px -12px rgba(5, 205, 85, 0.7);
}
.btn--primary:disabled {
  opacity: 0.62;
  cursor: wait;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ============================================================
   intl-tel-input - dark laser theme, styled searchable dropdown
   ============================================================ */
.iti { width: 100%; }
.iti input.form__input { padding-left: calc(52px + 0.7rem); } /* repadPhone() re-measures */

.iti__selected-country { background: transparent; color: var(--mint); }
.iti__selected-country:hover { background: rgba(5, 205, 85, 0.1); }
.iti__selected-dial-code { color: var(--haze); font-size: 15px; }
.iti__arrow { border-top-color: var(--laser); }
.iti__arrow--up { border-bottom-color: var(--laser); }

.iti__dropdown-content {
  background: #08201A;
  border: 1px solid var(--jade-line);
  border-radius: 0;
  color: var(--mint);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.7), 0 0 60px -30px rgba(5, 205, 85, 0.5);
}
/* Vertical padding only: the horizontal values are the vendor's reservation
   for the absolutely positioned search icon (left) and clear button (right).
   A padding SHORTHAND here drops the magnifier on top of the placeholder. */
.iti__search-input {
  padding: 11px 30px 11px 32px;
  background: rgba(232, 253, 251, 0.05);
  border: none;
  border-bottom: 1px solid var(--jade-line);
  color: var(--mint);
  font-family: var(--font);
  font-size: 15px;
}
.iti__search-input::placeholder { color: rgba(232, 253, 251, 0.36); }
.iti__search-input:focus { outline: none; border-bottom-color: var(--laser); }
.iti__country-list { background: transparent; }
.iti__country { padding: 9px 13px; font-size: 14.5px; }
.iti__country.iti__highlight { background: rgba(5, 205, 85, 0.18); }
.iti__country:hover { background: rgba(5, 205, 85, 0.11); }
.iti__dial-code { color: var(--haze); }
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* hidden state must not wait on the vendor stylesheet, or the country list
   flashes open (search box and all) 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: 1px solid var(--jade-line);
  background: rgba(3, 14, 9, 0.7);
  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(--laser); }
.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(232, 253, 251, 0.16);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--laser); color: var(--mint); }
.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 - poster left, form right in landscape; stacked in portrait.
   Aspect-ratio thresholds, not width alone: width-only breakpoints
   leave gaps at squarish window shapes where neither treatment applies.
   ============================================================ */
@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 4.4vw, 64px);
  }
  .art { text-align: left; }
  .art__frame { margin: 0; width: min(46vw, 560px); }
  .art__facts { justify-content: flex-start; }
  /* width:fit-content + auto margins would re-centre these in a left-aligned
     column, so both get margin-left:0 here */
  .brandmark { margin: 0; width: min(32vw, 340px); }
  .term { margin-left: 0; margin-right: 0; }
  .panel { margin-left: auto; margin-right: 0; }
}

/* Portrait tablets: single column, scaled up */
@media (min-width: 768px) and (max-aspect-ratio: 7/10) {
  .art__frame { width: min(74vw, 520px); }
  .brandmark { width: min(56vw, 380px); }
  .panel { max-width: 540px; }
}

/* Phones */
@media (max-width: 767px) {
  .stage__inner { padding-left: 14px; padding-right: 14px; }
  .art__frame { width: min(100%, 440px); }
  .brandmark { width: min(80vw, 300px); }
  .panel { max-width: 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;
  }
  .art { align-self: center; }
  .art__frame {
    width: auto;
    max-width: 100%;
    max-height: calc(100svh - 96px);
  }
  /* margin:0, not auto: this column is left-aligned here (inherited from the
     two-col block), so centring the image would knock it out of line with the
     facts row underneath it. */
  .art__frame img { max-height: calc(100svh - 98px); width: auto; margin: 0; }
  .art__facts { font-size: 11px; letter-spacing: 0.1em; margin-top: 8px; gap: 4px 8px; }
  .art__powered { display: none; }     /* the poster still prints it */
  .brandmark { margin: 0; width: min(30vw, 230px); }
  .term { margin: 12px 0 0; }
  .term__line { font-size: clamp(11px, 1.4vw, 14px); margin-bottom: 5px; letter-spacing: 0.06em; }
  .panel__inner { padding: 13px 15px 15px; }
  .panel__title { font-size: clamp(17px, 2.4vw, 22px); margin-bottom: 6px; }
  .panel__lede { margin-bottom: 10px; font-size: 12.5px; }
  .panel__eyebrow { margin-bottom: 7px; font-size: 10.5px; letter-spacing: 0.2em; }
  .form__row { margin-bottom: 8px; }
  .form__label { font-size: 10.5px; margin-bottom: 3px; }
  .form__input { padding: 9px 12px; }
  .form__check { font-size: 11.5px; line-height: 1.35; }
  .form__row--check { margin-top: 9px; }
  .btn { margin-top: 10px; padding: 10px 14px; }
  .foot { padding: 8px 20px 10px; }
}

/* ============================================================
   MOTION - one orchestrated page-load reveal, nothing else
   ============================================================ */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.art    { 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: 2px solid var(--laser-hot);
  outline-offset: 2px;
}

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