/* ============================================================
   CLOCKSTOCK 2027 - Saturday 29 May 2027
   Sign-up page.

   Visual language taken straight from the supplied artwork: a
   heart-eyed white dove perched on a black 12" single, against a
   sunrise sky of flat orange-to-yellow cartoon clouds. That artwork
   is a deliberate nod to the 1969 Woodstock bill (dove on a guitar
   neck, orange field) - so the page reads as a festival poster, not
   a SaaS form.

   Palette is sampled, never guessed: sky #FFA006 -> #FFE749 from
   the backgrounds, ink #171717 from the vinyl, orange #FF6801 from
   the record label, white from the dove.

   Signature: the record keeps turning. A specular sheen rotates
   around the black ring - the light catching a spinning record -
   while the orange label and the wordmark stay dead still. Geometry
   is measured inside the lockup PNG itself, not eyeballed.

   Structure: the artwork contains no straight corner anywhere -
   clouds, dove, disc are all curves - so every corner on this page
   is round and every button is a pill. That is the artwork setting
   the rule, not a house default.
   ============================================================ */

/* Lilita One (OFL) - a single-weight poster face with the warmth of a
   printed festival bill; carries the display roles and nothing else. */
@font-face {
  font-family: "Lilita One";
  src: url("/assets/fonts/LilitaOne-400.woff2?v=20260805-1") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Figtree (OFL) - one variable file covers the whole body range. */
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/Figtree-var.woff2?v=20260805-1") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}

:root {
  --sky:       #FFA006;                  /* sampled: top of both backgrounds */
  --sky-warm:  #FFB816;
  --cloud:     #FFCF26;
  --cloud-hi:  #FFE749;
  --ink:       #171717;                  /* the vinyl */
  --ink-soft:  rgba(23, 23, 23, 0.66);
  --ink-line:  rgba(23, 23, 23, 0.14);
  --orange:    #FF6801;                  /* the record label */
  --orange-dk: #D95500;                  /* label orange, darkened for text on white (AA) */
  --white:     #FFFFFF;
  --err:       #C42A00;

  /* Fields are deliberately OPAQUE. A translucent field would force the
     :-webkit-autofill inset-shadow colour to be computed by flattening the
     whole stack; opaque means the shadow is simply this value and an
     autofilled field is pixel-identical to an empty one beside it. */
  --field:     #FFF4E4;

  --r-card:    28px;
  --r-field:   14px;

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

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  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(--sky); }
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 client's cloud sky, unretouched
   The art is flat vector, so it needs no scrim: the ink text and the
   white card carry their own contrast against it.
   ============================================================ */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/assets/images/bg-mobile.webp?v=20260805-1") center top / cover no-repeat,
              var(--sky);
}
@media (max-aspect-ratio: 7/10) and (max-width: 500px) {
  .bg { background-image: url("/assets/images/bg-mobile-sm.webp?v=20260805-1"); }
}
/* Landscape: the wide sky. Keyed on aspect ratio ALONE - gating on width too
   would strand landscape phones (667x375) on the tall portrait artwork. */
@media (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20260805-1"); background-position: center bottom; }
}
@media (min-aspect-ratio: 7/10) and (max-width: 1500px) {
  .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20260805-1"); }
}

/* ============================================================
   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(22px, 4vw, 52px) clamp(16px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.5vw, 40px);
}

/* ============================================================
   BRAND - the supplied lockup over the sky, plus the date
   ============================================================ */
.brand { width: 100%; text-align: center; }
/* Locked to the PNG's own aspect ratio: the sheen below is positioned in
   percentages of this box, so if the box ever stopped matching the image the
   ring would drift off the record. */
.brand__art {
  position: relative;
  width: min(66vw, 300px);
  aspect-ratio: 996 / 1642;
  margin: 0 auto;
}
.brand__lockup {
  display: block;
  width: 100%;
  height: auto;                  /* width:100% + height:auto - never CSS aspect-ratio
                                    alone, which loses to the intrinsic ratio */
}

/* --- SIGNATURE: the record turns -----------------------------
   Geometry measured inside the lockup PNG itself, not eyeballed: the disc
   is centred at (497.5, 1144) with radius 497.5 in a 996x1642 frame, so it
   runs edge to edge horizontally. The label is 71.26% of the disc radius,
   and the mask's transparent core clears it - so the orange label and the
   CLOCKSTOCK wordmark stay perfectly still while the black ring turns. A
   record whose label span round would be unreadable, and wrong.

   Inset percentages rather than left/top + a centring translate: translate()
   and the spin would otherwise be fighting over the same `transform`. */
.brand__sheen {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 39.373%;
  width: 99.9%;
  height: 60.597%;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0)    0deg,
    rgba(255, 255, 255, 0.32) 24deg,
    rgba(255, 255, 255, 0)    58deg,
    rgba(255, 255, 255, 0)    172deg,
    rgba(255, 255, 255, 0.22) 200deg,
    rgba(255, 255, 255, 0)    236deg,
    rgba(255, 255, 255, 0)    360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 0 71.3%, #000 73.4% 100%);
          mask: radial-gradient(closest-side, transparent 0 71.3%, #000 73.4% 100%);
  animation: spin 16s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* PARKED, not in use. London was added above the date on 2026-08-06 and pulled
   by the client the same day. The rule is kept because reinstating it is then
   just <p class="brand__place">London</p> above .brand__date in index.html.
   Delete this block if the city is settled as never appearing.

   The city. Sits above the date and is deliberately the quieter of the two -
   the date is what this signup trades on until a venue is announced. Wide
   tracking is what makes a single short word read as a location plate rather
   than a stray label; text-indent is HALF that tracking, because the trailing
   letter-space after the final N would otherwise pull the centred word left. */
.brand__place {
  margin: clamp(12px, 2vw, 20px) 0 0;
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(15px, 4.2vw, 23px);
  line-height: 1.05;
  letter-spacing: 0.22em;
  text-indent: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
}

/* The date: live text, so it scales with the column, stays selectable and
   gets indexed. Set in the display face at poster weight - under the artwork
   it has to read as part of the bill, not as a caption. */
.brand__date {
  margin: clamp(12px, 2vw, 20px) 0 0;
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(21px, 6.2vw, 34px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Only the weekday may drop to its own line, so the narrowest phones get a
   deliberate two-line date rather than a broken "29 MAY / 2027". */
.brand__date > span { white-space: nowrap; }
/* With a city line above it the date tucks up close: the two read as one
   block hanging off the artwork, not as two separate captions. Written as an
   adjacent-sibling rule so the standalone date keeps its original spacing. */
.brand__place + .brand__date { margin-top: clamp(3px, 0.6vw, 7px); }

/* ============================================================
   PANEL - a white card, the same white as the dove. Big radius,
   because nothing in this artwork has a corner.
   ============================================================ */
/* --panel-max is the card's width, declared ONCE per breakpoint here and read
   by both .panel and .social. They have to stay identical or the icon row stops
   sitting under the card - see the note on .social below. Change the width at a
   breakpoint by overriding this variable, never by setting .panel's max-width. */
.signup { width: 100%; display: flex; flex-direction: column; align-items: center; --panel-max: 500px; }
.panel {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: var(--panel-max);
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: 0 22px 54px -22px rgba(23, 23, 23, 0.45);
}
.panel__inner { position: relative; z-index: 1; padding: clamp(24px, 3.6vw, 34px) clamp(20px, 3.2vw, 32px) clamp(26px, 3.6vw, 34px); }

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

/* --- panel type --- */
.panel__eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-disp);
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.25;
}
.panel__title {
  margin: 0 0 11px;
  font-family: var(--font-disp);
  font-size: clamp(31px, 4.3vw, 44px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0.004em;
  text-wrap: balance;
}
.panel__title em { font-style: normal; color: var(--orange-dk); }
/* 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 20px;
  color: var(--ink-soft);
  font-size: 15px;
}
.panel__lede strong { color: var(--ink); font-weight: 700; }
.panel__success-note { margin: 0 0 12px; color: var(--orange-dk); font-size: 15px; font-weight: 600; }

/* --- socials: centred under the card -----------------------------------
   Ink on the sky, like the date over the artwork, so it reads as page
   furniture and not a second call to action - the form is the only real
   action on this page.

   ⚠️ Centring is NOT just align-items on .signup. At the desktop breakpoint
   .signup switches to align-items:stretch and the card is pinned LEFT
   (margin-right:auto), so a plain centred row would centre on the column and
   float off to the right of the card. Instead this row takes the card's own
   width (--panel-max) and centres its icons INSIDE that, so it tracks the card
   at every breakpoint, including the left-pinned one. */
.social {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: var(--panel-max);
  margin: clamp(14px, 1.8vw, 20px) auto 0;
  padding: 0;
  list-style: none;
}
.social__link {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  color: var(--ink);
  opacity: 0.72;
  transition: opacity 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.social__link svg { display: block; width: 28px; height: 28px; }
.social__link:hover,
.social__link:focus-visible {
  opacity: 1;
  color: var(--orange);
  background: rgba(255, 255, 255, 0.55);
}
/* No prefers-reduced-motion rule needed here: the global block in the
   ACCESSIBILITY section already kills every transition with !important. */

/* ============================================================
   FORM
   ============================================================ */
.form { margin: 0; }
.form__row { margin: 0 0 14px; }
.form__label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-disp);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
}
.form__input {
  display: block;
  width: 100%;
  padding: 13px 15px;
  background: var(--field);
  border: 1.5px solid var(--ink-line);
  border-radius: var(--r-field);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;            /* >=16px stops iOS zoom-on-focus */
  line-height: 1.3;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.form__input::placeholder { color: rgba(23, 23, 23, 0.38); }
.form__input:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--white);
}
.form__input--otp {
  letter-spacing: 0.4em;
  font-family: var(--font-disp);
  font-size: 22px;
  text-align: center;
}

/* Chrome paints autofilled inputs pale lavender; :-webkit-autofill ignores
   `background` entirely, so a huge inset shadow is the only override. The
   field is opaque (--field), so this is exactly that colour - no flattening
   of a translucent stack required. Without the 9999s transition Chrome
   flashes 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 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;
}

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

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

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

/* --- buttons: pills, because the artwork has no corners --- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 18px 0 0;
  padding: 15px 18px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-disp);
  font-weight: 400;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.btn--primary {
  background: var(--ink);
  color: var(--white);
  /* shrink type before it can wrap - never let a CTA break to two lines */
  white-space: nowrap;
  font-size: clamp(0.92rem, 3.4vw, 1.1rem);
  letter-spacing: clamp(0.05em, 0.5vw, 0.1em);
  text-transform: uppercase;
}
/* the record label lighting up */
.btn--primary:hover:not(:disabled) { background: var(--orange); }
.btn--primary:disabled { opacity: 0.6; cursor: wait; }
.btn--whatsapp {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ink-line);
  color: var(--ink);
  white-space: nowrap;
  font-size: clamp(0.85rem, 3.2vw, 1rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.btn--whatsapp:hover { background: var(--field); box-shadow: inset 0 0 0 2px var(--ink); }
.btn__icon { width: 20px; height: 20px; flex: 0 0 auto; }

/* ============================================================
   intl-tel-input - light 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(--ink); border-radius: var(--r-field) 0 0 var(--r-field); }
.iti__selected-country:hover { background: rgba(23, 23, 23, 0.05); }
.iti__selected-dial-code { color: var(--ink-soft); font-size: 15px; }
.iti__arrow { border-top-color: var(--ink-soft); }
.iti__arrow--up { border-bottom-color: var(--ink-soft); }

.iti__dropdown-content {
  background: var(--white);
  border: 1.5px solid var(--ink-line);
  border-radius: 18px;
  overflow: hidden;
  color: var(--ink);
  box-shadow: 0 24px 52px -18px rgba(23, 23, 23, 0.42);
}
/* The vendor reserves padding-left:30px / padding-right:28px for the absolutely
   positioned search icon and clear button. A padding SHORTHAND wipes that and
   drops the magnifier on top of the word "Search" - set the vertical padding
   but keep the horizontal reservation. (djagonline.com, 2026-08-03.) */
.iti__search-input {
  padding: 12px 30px 12px 32px;
  background: var(--field);
  border: none;
  border-bottom: 1.5px solid var(--ink-line);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
}
.iti__search-input::placeholder { color: rgba(23, 23, 23, 0.4); }
.iti__search-input:focus { outline: none; border-bottom-color: var(--orange); background: var(--white); }
.iti__country-list { background: transparent; }
.iti__country { padding: 10px 14px; font-size: 14.5px; }
.iti__country.iti__highlight { background: rgba(255, 104, 1, 0.14); }
.iti__country:hover { background: rgba(23, 23, 23, 0.05); }
.iti__dial-code { color: var(--ink-soft); }
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* hidden state must not wait on the vendor stylesheet, or the country list
   flashes open 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 rgba(23, 23, 23, 0.16);
  background: rgba(255, 255, 255, 0.4);
  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(--ink-soft); letter-spacing: 0.02em; }
.foot__legal a { color: var(--ink-soft); text-decoration: none; }
.foot__legal a:hover { color: var(--ink); text-decoration: underline; }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid rgba(23, 23, 23, 0.18);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--ink); color: var(--ink); }
.site-built img { display: block; opacity: 0.85; }
@media (max-width: 640px) {
  .foot { justify-content: center; text-align: center; }
  .foot__left { justify-content: center; }
}

/* ============================================================
   LAYOUT - film 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: auto minmax(0, 1fr);   /* the film takes exactly what
                                                     its 9:16 needs; the form gets
                                                     the rest */
    align-items: center;
    gap: clamp(28px, 4.5vw, 68px);
  }
  .brand { text-align: left; }
  .brand__art { margin: 0; width: min(34vw, 380px); }
  /* Re-clamp against the COLUMN, not the viewport: this column is ~40% of the
     window, so the base 6.2vw would overflow it and force a two-line date at
     squarish window shapes. */
  /* text-indent goes back to 0 the moment .brand turns left-aligned, or the
     optical-centring nudge would push LONDON off the date's left edge. */
  .brand__place { font-size: clamp(15px, 2.2vw, 24px); text-indent: 0; }
  .brand__date { font-size: clamp(22px, 3.2vw, 36px); }
  .signup { align-items: stretch; --panel-max: 480px; }
  /* margin-left stays auto - never margin:0, which is what left-shifts a panel
     at a single breakpoint. The icon row is pinned left WITH the card, and
     centres its icons within the card's width rather than the column's. */
  .panel,
  .social { margin-left: 0; margin-right: auto; }
}

/* Portrait tablets: single column, scaled up */
@media (min-width: 768px) and (max-aspect-ratio: 7/10) {
  .brand__art { width: min(52vw, 400px); }
  .signup { --panel-max: 540px; }
}

/* Phones */
@media (max-width: 767px) {
  .stage__inner { padding-left: 14px; padding-right: 14px; padding-top: 18px; gap: 16px; }
  .signup { --panel-max: none; }
  .brand__art { width: min(54vw, 238px); }
  .brand__place { font-size: clamp(13px, 3.7vw, 18px); margin-top: 10px; }
  .brand__date { font-size: clamp(19px, 5.4vw, 26px); margin-top: 10px; }
  .brand__place + .brand__date { margin-top: 4px; }
}

/* 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: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(16px, 3vw, 30px);
    padding: 12px clamp(14px, 3vw, 26px);
    min-height: 0;
  }
  .brand { text-align: left; align-self: center; }
  .brand__art { margin: 0; width: min(22vw, 170px); }
  .brand__place { font-size: clamp(11px, 1.8vw, 15px); margin-top: 8px; text-indent: 0; }
  .brand__date { font-size: clamp(15px, 2.5vw, 21px); margin-top: 8px; }
  .brand__place + .brand__date { margin-top: 3px; }
  .panel__inner { padding: 13px 15px 15px; }
  .panel__title { font-size: clamp(19px, 2.6vw, 25px); margin-bottom: 6px; }
  .panel__lede { margin-bottom: 10px; font-size: 12.5px; }
  .panel__eyebrow { margin-bottom: 7px; font-size: 10.5px; padding: 4px 10px; }
  .form__row { margin-bottom: 8px; }
  .form__label { font-size: 10.5px; margin-bottom: 3px; }
  .form__input { padding: 9px 13px; }
  .form__check { font-size: 11.5px; line-height: 1.35; }
  .form__row--check { margin-top: 9px; }
  .btn { margin-top: 10px; padding: 10px 16px; }
  /* The social row costs 48px + margin, which is real estate a rotated phone
     does not have. Shrunk in step with everything else in this block, but kept
     clearly visible rather than token. */
  .social { margin-top: 9px; }
  .social__link { width: 40px; height: 40px; }
  .social__link svg { width: 24px; height: 24px; }
  .foot { padding: 8px 20px 10px; }
}

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

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

/* Kills the page-load reveal AND the spinning record. app.js additionally
   declines to autoplay the film, so the frame rests on its poster. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}