/* ============================================================
   CARL COX - DREAMLAND, MARGATE
   Bank Holiday Sunday 2 May 2027, 5pm-10.30pm. "First dance of the summer."
   Sign-up. Client: Louder Entertainment.

   DIRECTION
   The client supplied the poster as LAYERS (sky plate, Carl inside the
   yellow C, wordmark + billing lockup), so the poster is rebuilt as the
   page rather than boxed. Left: the live sky plate, the poster's spaced
   tagline across the top, Carl, then the lockup as the <h1>. Right: the
   sign-up is not a box but a full-height SHEET in the C ring's yellow.
   Its leading edge is a great arc (the outside of the C), it throws a
   shadow onto the sky, and it carries the artwork's thin broken amber
   rings, turning slowly like a record. On phones the arc becomes a dome
   rising out of the clouds. The form sits straight on the yellow.

   COLOUR - literal pixels from the supplied layers:
     #57A0A6  sky        (background.png, 2% down)
     #FCDC08  C yellow   (cc.png ring, most common)
     #F8B808  ring amber (cc.png thin rings)
     #050708  ink        (logos.png wordmark)
     #0E4C55  deep sky   (the sky hue taken down to carry text: 7.04:1 on yellow)
   Ink on yellow 14.78:1. Soft ink #3B3A2A on yellow 8.43:1. Error
   #8A1500 on yellow 7.03:1. Placeholder #6B6A5E on white 5.46:1.
   Yellow on sky is only 2.2:1, so the tagline is decorative
   (aria-hidden) and the phrase is repeated as real text in the lede.

   TYPE - Unbounded (OFL): wide, round, heavy, after the wordmark's round
   bowls and cut terminals. Body is the Helvetica stack, which is the
   poster's own billing face.

   MOTION - one entrance: Carl rises from behind the clouds. One ambient:
   the rings turn (120s a revolution). Both off under reduced motion.
   ============================================================ */

@font-face {
  font-family: "Unbounded";
  src: url("/assets/fonts/Unbounded-var.woff2?v=20261002-1") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --sky:       #57A0A6;
  --yellow:    #FCDC08;
  --amber:     #F8B808;
  --ink:       #050708;
  --ink-soft:  #3B3A2A;
  --deep:      #0E4C55;
  --field:     #FFFFFF;    /* OPAQUE on purpose, see the autofill rule */
  --hint:      #6B6A5E;
  --danger:    #8A1500;
  --whatsapp:  #25D366;

  --display: "Unbounded", "Arial Black", Arial, sans-serif;
  --body:    "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", "Liberation Sans", sans-serif;

  --gutter: 16px;
}

*, *::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(--sky);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--body);
  color: var(--ink);
  background: transparent;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- the sky plate ----------
   Four plates chosen by aspect ratio, not width alone (no gaps at squarish
   windows). The <link rel=preload> conditions in the head mirror these four
   rules exactly. The baked tagline was erased from the plate offline so the
   portrait crop never cuts it; the tagline is live type instead. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--sky);
  background-image: url("/assets/images/bg-mobile-sm.webp?v=20261002-2");
  background-position: center top;
  background-size: cover;
}
@media (max-aspect-ratio: 7/10) and (min-width: 501px) {
  .bg { background-image: url("/assets/images/bg-mobile.webp?v=20261002-2"); }
}
@media (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20261002-2"); background-position: center bottom; }
}
@media (min-aspect-ratio: 7/10) and (min-width: 1501px) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20261002-2"); }
}

/* ============================================================
   PAGE (stacked by default: phones, portrait tablets, squarish windows)
   ============================================================ */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ---------- the art ---------- */
.art {
  padding: 16px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* The poster's own device: five spaced words. Centred with a fixed gap, not
   spread edge to edge (Adam 2026-10-02: "too far apart"). */
.tagline {
  width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4em 1.6em;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;            /* enlarged 3 Oct (Adam) */
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--yellow);
}
.art__group {
  width: min(100%, 440px);
  margin: 18px auto 0;
}
.art__carl {
  display: block;
  width: 78%;                      /* the C ring is ~78% of the wordmark width on the poster */
  height: auto;
  margin: 0 auto;
  animation: rise 1.3s cubic-bezier(.2,.7,.2,1) both;
}
.art__h1 { margin: 0; font-weight: inherit; position: relative; }
.art__lockup {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 2.5%;
}
/* The one entrance: Carl rises over the cloud line, like the sun in "first
   dance of the summer". The lockup is later in the DOM so it paints over. */
@keyframes rise {
  0%   { opacity: 0; transform: translateY(9%); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* ---------- the sheet ---------- */
.sheet {
  --dome: 60px;
  position: relative;
  isolation: isolate;
  margin-top: 26px;
  padding: calc(var(--dome) + 4px) var(--gutter) 0;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
.sheet__ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--yellow);
  /* phones: a dome rising out of the clouds */
  border-radius: 50% 50% 0 0 / var(--dome) var(--dome) 0 0;
  box-shadow: 0 -22px 50px -24px rgba(5,7,8,.55);
}
/* printed grain, so the yellow reads as ink on paper like the plate */
.sheet__ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .16;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* The thin broken rings. Phones: centred on the top of the dome, so they
   read as rings rising with it. Wide: centred out to the LEFT of the sheet,
   so they sweep across it parallel to its arc edge. */
.rings {
  position: absolute;
  width: 190%;
  aspect-ratio: 1;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5px;
  pointer-events: none;
}
.rings circle { vector-effect: non-scaling-stroke; }
.rings .rings__bold { stroke-width: 3.5px; }
.rings__spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: spin 120s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   SIGN-UP (sits straight on the sheet - no box)
   ============================================================ */
.signup {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.panel {
  position: relative;
  isolation: isolate;             /* keeps the country dropdown above the rings */
}

/* --- 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
   Numbered because it genuinely is a sequence: form -> SMS code ->
   email confirm. Driven by the same data-form-state as the form.
   ============================================================ */
.spine {
  display: flex;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.28);
}
.spine__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 6px 7px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--ink-soft);
  transition: color .25s ease, background-color .25s ease;
}
.spine__step + .spine__step { border-left: 1.5px solid var(--ink); }
.spine__n {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
}
.spine__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* current step: ink cell, yellow type */
.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(--yellow);
  background: var(--ink);
}
/* completed steps: the numeral becomes 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(--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; }
.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 currentColor;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
@media (max-width: 400px) {
  .spine__step { font-size: 9px; gap: 5px; padding: 7px 3px 6px; }
  .spine__n { width: 15px; height: 15px; }
}

/* ============================================================
   PANEL COPY
   ============================================================ */
.panel__title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.45rem, 6.4vw, 1.95rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
/* House pattern: the second line carries the accent. Deep sky, 7.04:1. */
.panel__title em { font-style: normal; color: var(--deep); }
.panel__lede {
  margin: 0 0 10px;
  font-size: 15.5px;
  color: var(--ink-soft);
  max-width: 46ch;
}
.panel__lede--last { margin-bottom: 20px; }
.panel__lede strong { color: var(--ink); font-weight: 700; }
.panel__success-note { margin: 0 0 12px; color: var(--deep); font-size: 14.5px; font-weight: 700; }

/* ============================================================
   FORM
   ============================================================ */
.form__row { margin: 0 0 12px; }
/* 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: 14px 16px;
  font-family: var(--body);
  font-size: 16px;                /* 16px minimum or iOS zooms the page on focus */
  color: var(--ink);
  background: var(--field);       /* OPAQUE - see the autofill rule below */
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 3px 0 rgba(5,7,8,.14);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: var(--hint); opacity: 1; }
.form__input:focus {
  outline: none;
  border-color: var(--deep);
  box-shadow: 0 0 0 3px rgba(14,76,85,.32);
}
.form__input--otp {
  font-family: var(--display);
  font-weight: 700;
  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. It must be the field's FLATTENED OPAQUE colour, which is
   trivially --field here because the field is opaque white on purpose. */
.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(--ink) !important;
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;   /* stops the lavender flashing in */
}

.form__error { margin: 7px 0 0; font-size: 13.5px; font-weight: 700; 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: 16px 0 18px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  margin: 1px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.form__check a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { color: var(--deep); }

.form__resend {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: center;
}
.form__resend-btn {
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.form__resend-btn:disabled { color: var(--hint); cursor: default; text-decoration: none; }

/* ---------- buttons: pills, after the wordmark's round strokes ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.8rem, 3.4vw, .92rem);
  letter-spacing: .04em;
  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: 999px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:disabled { opacity: .65; cursor: default; }
/* Yellow on ink: 14.78:1. A printed offset under it, which closes on press. */
.btn--primary {
  color: var(--yellow);
  background: var(--ink);
  box-shadow: 0 5px 0 var(--deep);
}
.btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 0 var(--deep); }
.btn--primary:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--deep); }
.btn--whatsapp {
  color: #06301A;                 /* 7.33:1 on the WhatsApp green */
  background: var(--whatsapp);
  box-shadow: 0 5px 0 #0B7A3B;
  margin-top: 4px;
}
.btn--whatsapp:hover { filter: brightness(1.05); }
.btn--whatsapp:active { transform: translateY(4px); box-shadow: 0 1px 0 #0B7A3B; }
.btn__icon { flex: 0 0 auto; width: 19px; height: 19px; }

.wa-hook { margin: 18px 0 12px; font-size: 14px; color: var(--ink-soft); }
.wa-hook strong { color: var(--ink); font-weight: 700; }

/* ============================================================
   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: #FFFFFF;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 22px 44px -16px rgba(5,7,8,.55);
  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: 15px;
  color: var(--ink);
  background: #FFFBE0;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
}
.iti__search-input::placeholder { color: var(--hint); }
.iti__search-input:focus { outline: none; background: #FFF6BF; }
.iti__country-list { background: #FFFFFF; max-height: 240px; }
.iti__country {
  padding: 9px 12px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
}
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(252,220,8,.45); }
.iti__dial-code { color: var(--hint); }
.iti__country-name { color: var(--ink); }
.iti__selected-country { border-radius: 12px 0 0 12px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(252,220,8,.35); }
.iti__selected-dial-code { color: var(--ink); font-family: var(--body); font-size: 16px; }
.iti__arrow { border-top-color: var(--ink-soft); }
.iti__arrow--up { border-bottom-color: var(--ink-soft); }

/* ============================================================
   FOOTER - house footer, credit in a pill. Sits on the yellow, so
   the credit logo (white wordmark + teal roundel, drawn for dark bands)
   is darkened and saturated, never invert()ed (that turns the teal red).
   ============================================================ */
.foot {
  margin-top: 30px;
  padding: 16px 0 22px;
  border-top: 1.5px solid rgba(5,7,8,.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.foot__legal { margin: 0; font-size: 12px; color: var(--ink-soft); letter-spacing: .01em; }
.foot__legal a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.foot__legal a:hover { color: var(--ink); }
/* privacy + T&Cs of entry side by side, wrapping onto two centred lines on narrow phones */
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(5,7,8,.28);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.site-built a:hover { color: var(--ink); border-color: var(--ink); }
.site-built img { display: block; filter: brightness(.36) saturate(1.45); }

/* ============================================================
   WIDE: art left, sheet right, both full height.
   Aspect-ratio threshold, not width alone.
   ============================================================ */
@media (min-width: 900px) and (min-aspect-ratio: 7/10) {
  /* on :root, NOT .page: .bg sits OUTSIDE .page and reads both. Scoped to
     .page they were undefined there, the calc went invalid, right fell back
     to auto and the empty fixed layer collapsed to zero width - no plate. */
  :root {
    --sheet-w: clamp(440px, 37vw, 620px);
    --arc: clamp(96px, 8.5vw, 160px);
  }
  .page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sheet-w);
    align-items: stretch;
  }
  /* the plate fills the art area PLUS the sheet's arc, so the corners the
     arc cuts away show sky and coaster, not bare ground */
  .bg { right: calc(var(--sheet-w) - var(--arc) - 4px); }

  .art {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    /* bottom padding keeps the lockup clear of the coaster on the plate's bottom edge */
    padding: clamp(18px, 3.4vh, 36px) clamp(28px, 4vw, 64px) clamp(56px, 10vh, 110px);
    justify-content: flex-start;
  }
  .tagline { font-size: clamp(15px, 1.4vw, 22px); }
  /* sized off the HEIGHT budget: Carl (0.78 x 1.107) + lockup (0.398) + gap
     = 1.29 x the group width */
  .art__group {
    width: min(100%, 680px, calc((100svh - 190px) / 1.29));
    margin: auto;
  }

  .sheet {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(26px, 5vh, 60px) clamp(28px, 3.2vw, 56px) 0 calc(var(--arc) * .55 + clamp(26px, 2.6vw, 44px));
  }
  /* the great arc: an elliptical left edge, full height */
  .sheet__ground {
    border-radius: var(--arc) 0 0 var(--arc) / 50% 0 0 50%;
    box-shadow: -28px 0 60px -26px rgba(5,7,8,.6);
  }
  .rings {
    width: 230%;
    left: -140%;                    /* centre ~25% of the sheet width to its LEFT */
    top: 50%;
    transform: translateY(-50%);
  }
  .signup { margin: auto; }
  .panel__title { font-size: clamp(1.6rem, 2.3vw, 2.3rem); }
  .foot {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
  }
}

/* ---------- small phones ---------- */
@media (max-width: 400px) {
  .sheet { --dome: 48px; }
  .panel__lede { font-size: 15px; }
}

/* --- landscape phones are a first-class layout (gotcha 27) ---
   844x390, 932x430, 667x375: wide but almost no height. Compact
   side-by-side; the art column is height-capped and sticky, the sheet
   scrolls. Placed AFTER the wide block so it wins at equal specificity. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  :root { --sheet-w: 54vw; --arc: 64px; }
  .page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sheet-w);
  }
  .bg { right: calc(var(--sheet-w) - var(--arc) - 4px); }
  .art {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding: 12px 18px;
  }
  .tagline { font-size: 12px; }
  .art__group {
    width: min(100%, calc((100svh - 50px) / 1.29));
    margin: auto;
  }
  .sheet {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    padding: 16px 20px 0 calc(var(--arc) * .55 + 16px);
  }
  .sheet__ground {
    border-radius: var(--arc) 0 0 var(--arc) / 50% 0 0 50%;
    box-shadow: -20px 0 40px -20px rgba(5,7,8,.6);
  }
  .rings { width: 230%; left: -140%; top: 50%; transform: translateY(-50%); }
  .signup { max-width: none; margin: auto; }
  .spine { margin-bottom: 12px; }
  .spine__step { padding: 6px 4px 5px; }
  .panel__title { font-size: 1.2rem; margin-bottom: 8px; }
  .panel__lede { font-size: 13px; margin-bottom: 6px; }
  .panel__lede--last { margin-bottom: 12px; }
  .form__row { margin-bottom: 9px; }
  .form__input { padding: 10px 14px; }
  .form__row--check { margin: 10px 0 13px; }
  .btn { padding: 12px 16px; }
  .iti__country-list { max-height: 150px; }
  .foot { margin-top: 16px; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding: 12px 0 14px; }
}

/* ============================================================
   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: 2.5px solid var(--ink);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Privacy line under the marketing tick box (kept out of the consent box itself). */
.form__note { margin: 10px 0 0 30px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.form__note a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }