/* ============================================================
   ALKALINE  -  New Rules London  -  OVO Arena Wembley
   Friday 26 March 2027.  Ticket sign-up.  alkalinelive.co.uk

   Built from the client's own poster, which is a paste-up: a
   halftone-printed paper ground, strips of torn black tape with
   mustard tape behind them, and a royal-blue label chip. The page
   is the same paste-up at a larger size:

     ground  - the client's halftone plate (background.png), full bleed
     poster  - the flat artwork, whole, pasted on the ground
     panel   - a strip of the black tape, torn top and bottom, with
               the mustard strip showing behind it at an angle
     eyebrow - the blue "PERFORMING LIVE" chip

   Every colour below is sampled from literal pixels of
   full_artwork.png (7x7 averages), not guessed.
   ============================================================ */

/* Archivo Expanded (OFL) - the poster's "FRIDAY 26 MARCH" is a heavy
   expanded grotesque; this is the free face closest to it. */
@font-face {
  font-family: "Archivo Exp";
  src: url("/assets/fonts/ArchivoExp.woff2?v=20260928-4") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
/* Archivo (OFL): one variable file covers the whole body/UI range. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260928-4") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* --- sampled from the artwork --- */
  --paper:    #E6E7E4;   /* the halftone ground */
  --tape:     #222021;   /* the torn black tape behind ALKALINE */
  --ink:      #000000;   /* the date line - the poster's type is true black */
  --blue:     #204DB9;   /* the PERFORMING LIVE chip; white on it is 7.3:1 */
  --mustard:  #E6A94F;   /* the tape behind the tape; 8.0:1 on --tape */
  --white:    #FFFFFF;

  --muted:    rgba(255, 255, 255, 0.72);
  --err:      #FF9C8C;

  /* Opaque on purpose. The Chrome autofill box-shadow cannot be translucent,
     so the field is simply this hex and the override matches it exactly. */
  --field:    #333132;
  --line:     rgba(255, 255, 255, 0.16);

  --torn: polygon(0.0% 1px, 4.0% 1px, 5.6% 5px, 9.3% 2px, 11.9% 5px, 15.1% 4px, 17.4% 9px, 19.2% 5px, 21.6% 4px, 25.7% 4px, 28.4% 3px, 30.4% 5px, 34.2% 3px, 36.8% 6px, 38.9% 7px, 41.4% 5px, 44.6% 1px, 48.2% 3px, 52.1% 0px, 54.5% 4px, 57.5% 4px, 61.6% 6px, 64.2% 1px, 67.8% 4px, 70.9% 1px, 74.6% 9px, 77.7% 8px, 80.4% 7px, 82.6% 0px, 84.5% 9px, 87.7% 8px, 91.0% 8px, 92.7% 1px, 95.9% 5px, 98.7% 2px, 100% 5px, 100.0% calc(100% - 5px), 97.1% calc(100% - 8px), 94.5% calc(100% - 7px), 91.7% calc(100% - 6px), 88.9% calc(100% - 7px), 86.6% calc(100% - 9px), 84.9% calc(100% - 4px), 80.8% calc(100% - 9px), 77.7% calc(100% - 3px), 75.2% calc(100% - 3px), 73.3% calc(100% - 1px), 70.9% calc(100% - 6px), 69.0% calc(100% - 4px), 66.2% calc(100% - 2px), 62.0% calc(100% - 9px), 59.3% calc(100% - 5px), 57.1% calc(100% - 9px), 54.1% calc(100% - 8px), 50.3% calc(100% - 3px), 47.5% calc(100% - 4px), 43.6% calc(100% - 2px), 41.0% calc(100% - 4px), 38.9% calc(100% - 5px), 35.0% calc(100% - 3px), 31.8% calc(100% - 4px), 28.5% calc(100% - 4px), 26.4% calc(100% - 1px), 24.5% calc(100% - 4px), 21.8% calc(100% - 0px), 19.0% calc(100% - 2px), 17.4% calc(100% - 9px), 15.2% calc(100% - 9px), 11.4% calc(100% - 8px), 8.7% calc(100% - 1px), 5.7% calc(100% - 6px), 3.4% calc(100% - 1px), 0% calc(100% - 6px));

  --font:      "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-disp: "Archivo Exp", "Archivo", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--white);
  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(--paper); }
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 is still a live
   autofill target in Chrome/Edge, which silently blocks real signups. */
.hp-row { display: none !important; }

/* ============================================================
   BACKGROUND - the client's halftone plate, mirror-tiled offline
   so the dot screen stays at native scale
   ============================================================ */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/assets/images/bg-mobile.webp?v=20260928-4") center top / cover no-repeat,
              var(--paper);
}
@media (max-aspect-ratio: 7/10) and (max-width: 500px) {
  .bg { background-image: url("/assets/images/bg-mobile-sm.webp?v=20260928-4"); }
}
@media (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20260928-4"); background-position: center; }
}
@media (min-aspect-ratio: 7/10) and (max-width: 1500px) {
  .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20260928-4"); }
}

/* ============================================================
   SHEET / STAGE
   ============================================================ */
.sheet {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  /* the mustard strip is rotated and pokes past the panel on phones; clip
     (not hidden) so no scroll container is created and nothing else clips */
  overflow-x: clip;
}
.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, 54px) clamp(16px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 5vw, 48px);
}

/* ============================================================
   ART COLUMN - the client poster, pasted on the ground
   ============================================================ */
.art { text-align: center; }
.art__poster {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
  /* the poster shares the page's paper, so it needs an edge: a hairline and
     the lift of a sheet pasted on a wall. No radius - it is paper. */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.14),
    0 22px 44px -20px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   PANEL - a strip of black tape over a strip of mustard tape.
   Both strips are decorative layers BEHIND the content. The panel
   itself is never clipped, so the country dropdown can never be
   cut off by the torn edge.
   ============================================================ */
.panel {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.panel__backing,
.panel__tape {
  position: absolute;
  pointer-events: none;
  clip-path: var(--torn);
}
.panel__backing {
  z-index: -2;
  inset: -12px -10px -12px -8px;
  background: var(--mustard);
  transform: rotate(-1.8deg);
}
.panel__tape {
  z-index: -1;
  inset: -9px 0;
  background: var(--tape);
}
.panel__inner {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 3.4vw, 34px) clamp(20px, 3.2vw, 34px) clamp(24px, 3.4vw, 32px);
}

/* --- 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 --- */
/* The poster's "PERFORMING LIVE" chip: white expanded caps on royal blue,
   set slightly off the square the way the tape is laid. */
.panel__eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 12px 5px;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-disp);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  transform-origin: left center;
}
.panel__title {
  margin: 0 0 14px;
  font-family: var(--font-disp);
  font-size: clamp(28px, 3.7vw, 40px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.panel__title em {
  font-style: normal;               /* the mustard IS the emphasis */
  color: var(--mustard);
}
/* 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(--muted);
  font-size: 15px;
}
.panel__lede strong { color: var(--white); font-weight: 600; }
.panel__success-note {
  margin: 0 0 12px;
  color: var(--mustard);
  font-size: 15px;
}

/* ============================================================
   ON-SALE COUNTDOWN - Wednesday 7 October 2026, 10am BST
   ============================================================ */
.onsale {
  margin: 0 0 18px;
  padding: 13px 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.onsale__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}
/* The only moving thing on a still page: a slow pulse so the strip reads as
   live. The global prefers-reduced-motion block stops it. */
.onsale__dot {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mustard);
  animation: onsale-pulse 2.4s ease-in-out infinite;
}
@keyframes onsale-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }

.onsale__clock {
  display: flex;
  align-items: flex-start;
  gap: clamp(4px, 1.4vw, 10px);
}
.onsale__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  gap: 5px;
}
.onsale__unit b {
  font-family: var(--font-disp);
  font-weight: 900;
  /* tabular figures, or the glyph widths change every second and the row jitters */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: clamp(24px, 6.4vw, 34px);
  line-height: 1;
  color: var(--white);
}
.onsale__unit i {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.onsale__sep {
  flex: 0 0 auto;
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: clamp(24px, 6.4vw, 34px);
  line-height: 1;
  color: var(--mustard);
}
.onsale__live {
  margin: 0 0 10px;
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: clamp(17px, 4vw, 21px);
  text-transform: uppercase;
  color: var(--mustard);
}
.onsale__when {
  margin: 11px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.onsale__when time {
  margin-left: auto;
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  color: var(--white);
}

/* ============================================================
   FORM
   ============================================================ */
.form { margin: 0; }
.form__row { margin: 0 0 14px; }
.form__label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.form__input {
  display: block;
  width: 100%;
  padding: 13px 14px;
  background: var(--field);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;                  /* >=16px stops iOS zoom-on-focus */
  line-height: 1.3;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form__input::placeholder { color: rgba(255, 255, 255, 0.45); }
.form__input:focus {
  outline: none;
  border-color: var(--mustard);
  box-shadow: inset 0 0 0 1px var(--mustard);
}

/* MANDATORY (build-contract): Chrome paints autofilled fields pale lavender
   and ignores `background` on :-webkit-autofill. The only reliable override
   is a huge inset box-shadow, and its colour must be the flattened OPAQUE
   field colour. Ours is opaque already, so it is var(--field) exactly. The
   9999s transition stops the lavender flashing in first. */
.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(--white) !important;
  caret-color: var(--white);
  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(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.form__check input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--mustard);
  cursor: pointer;
}
.form__check a { color: var(--mustard); text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { color: var(--white); }

.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;
  width: 100%;
  margin: 18px 0 0;
  padding: 15px 18px;
  border: 0;
  border-radius: 0;
  font-family: var(--font-disp);
  font-weight: 900;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* Black on mustard is the poster's own "AND SPECIAL GUEST" pairing, 10.4:1. */
.btn--primary {
  background: var(--mustard);
  color: var(--ink);
  /* shrink type before it can wrap - never let a CTA break to two lines */
  white-space: nowrap;
  font-size: clamp(0.9rem, 3.6vw, 1.05rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.btn--primary:hover:not(:disabled) { background: var(--white); }
.btn--primary:disabled { opacity: 0.6; cursor: wait; }

/* ============================================================
   intl-tel-input - tape 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(--white); }
.iti__selected-country:hover { background: rgba(255, 255, 255, 0.06); }
.iti__selected-dial-code { color: var(--muted); font-size: 15px; }
.iti__arrow { border-top-color: var(--mustard); }
.iti__arrow--up { border-bottom-color: var(--mustard); }

.iti__dropdown-content {
  background: #1A1819;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  color: var(--white);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
/* The search box. NOTE the horizontal padding: the vendor reserves 30px left
   and 28px right for the absolutely-positioned magnifier and clear button.
   A `padding` SHORTHAND wipes that reservation and drops the magnifier on top
   of the word "Search" (client-reported on djagonline.com, 2026-08-03), so the
   vertical value is set while the horizontal reservation is kept. */
.iti__search-input {
  width: 100%;
  padding: 11px 30px 11px 32px;
  background: var(--field);
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-family: var(--font);
  font-size: 15px;
}
.iti__search-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.iti__search-input:focus { outline: none; border-bottom-color: var(--mustard); }
.iti__search-icon { color: var(--muted); }

.iti__country-list { background: transparent; scrollbar-color: #5A5758 #1A1819; }
.iti__country { padding: 9px 14px; font-size: 14.5px; }
.iti__country.iti__highlight { background: rgba(230, 169, 79, 0.22); }
.iti__country:hover { background: rgba(230, 169, 79, 0.12); }
.iti__dial-code { color: var(--muted); }
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* The 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, a band of the black tape
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 16px clamp(16px, 4vw, 40px) 20px;
  background: var(--tape);
  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(--mustard); }
.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(255, 255, 255, 0.18);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--mustard); color: var(--white); }
.site-built img { display: block; opacity: 0.9; }
/* Stack and centre on phones rather than relying on wrap, which reads as
   left-aligned at ~390px. */
@media (max-width: 480px) {
  .foot, .foot__left { flex-direction: column; justify-content: center; text-align: center; }
  .foot { gap: 10px; }
  .foot__left { gap: 10px; }
}

/* ============================================================
   LAYOUT - artwork left, sign-up right.
   Aspect-ratio thresholds, not width alone: width-only breakpoints
   leave gaps at squarish window shapes where neither applies.
   ============================================================ */
@media (min-width: 860px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
    align-items: center;
    gap: clamp(36px, 5vw, 80px);
  }
  .art { text-align: left; }
  .art__poster { margin: 0; max-width: min(42vw, 520px); }
  /* margin-left stays auto - never margin:0, which is what left-shifts the
     panel at a single breakpoint */
  .panel { margin-left: auto; margin-right: 0; }
}

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

/* Phones: panel runs the frame width, leaving room for the mustard strip */
@media (max-width: 767px) {
  .stage__inner { padding-left: 18px; padding-right: 18px; }
  .panel { max-width: none; }
  .art__poster { max-width: min(86vw, 400px); }
}

/* Landscape phones are a first-class layout: 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.72fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(20px, 3.4vw, 34px);
    padding: 18px clamp(16px, 3vw, 30px);
    min-height: 0;
  }
  /* the panel is taller than the screen here, so the poster rides at the
     top and stays in view while the form scrolls */
  .art { text-align: left; align-self: start; position: sticky; top: 18px; }
  .art__poster {
    margin: 0;
    width: auto;
    max-width: 100%;               /* load-bearing next to width:auto (gotcha 38) */
    max-height: calc(100svh - 108px);
    object-fit: contain;
  }
  .panel__inner { padding: 13px 16px 15px; }
  .panel__eyebrow { margin-bottom: 8px; font-size: 9.5px; padding: 4px 9px 3px; }
  .panel__title { font-size: clamp(18px, 2.4vw, 23px); margin-bottom: 6px; }
  .panel__lede { margin-bottom: 9px; font-size: 12.5px; }
  .onsale { margin-bottom: 9px; padding: 7px 0 6px; }
  .onsale__label { font-size: 10.5px; margin-bottom: 4px; }
  .onsale__unit b, .onsale__sep { font-size: 20px; }
  .onsale__unit { gap: 2px; }
  .onsale__unit i { font-size: 9px; }
  .onsale__live { font-size: 15px; margin-bottom: 6px; }
  .onsale__when { margin-top: 6px; padding-top: 6px; font-size: 11.5px; }
  .form__row { margin-bottom: 8px; }
  .form__label { font-size: 11px; margin-bottom: 3px; }
  .form__input { padding: 9px 12px; }
  .form__check { font-size: 11.5px; line-height: 1.4; }
  .form__row--check { margin-top: 8px; }
  .btn { margin-top: 10px; padding: 10px 14px; }
  .foot { padding: 8px 20px 10px; }
}

/* ============================================================
   MOTION - one orchestrated page-load: the poster lands, then the
   tape is laid over it. Nothing else moves.
   ============================================================ */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lay {
  from { opacity: 0; transform: translateY(10px) rotate(1.2deg); }
  to   { opacity: 1; transform: none; }
}
.art    { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.signup { animation: lay 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both; }

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

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

/* ============================================================
   LEGAL / PRIVACY
   A clean white sheet pasted on the halftone ground: a long policy
   wants plain black-on-white, and the blue carries the headings
   (8.1:1 on white).
   ============================================================ */
body.legal-wrap {
  display: block;
  padding: clamp(20px, 5vw, 56px) clamp(14px, 4vw, 40px);
  color: var(--ink);
  background: url("/assets/images/bg-desktop-sm.webp?v=20260928-4") center top / cover fixed,
              var(--paper);
}
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px) clamp(20px, 4.5vw, 56px) clamp(30px, 5vw, 56px);
  background: var(--white);
  color: var(--ink);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 26px 60px -24px rgba(0, 0, 0, 0.4);
}
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 7px 14px 7px 10px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  text-decoration: none;
  color: #3A3A3A;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.legal__back:hover { border-color: var(--blue); color: var(--ink); }
.legal__back-arrow {
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  transition: transform 0.16s ease;
}
.legal__back:hover .legal__back-arrow { transform: translateX(-3px); }
.legal__back-arrow svg { width: 13px; height: 13px; display: block; }
.legal__back-label { display: flex; flex-direction: column; line-height: 1.15; }
.legal__back-text { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.legal__back-brand {
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--ink);
}
.legal h1 {
  margin: 0 0 26px;
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.12;
  text-wrap: balance;
}
.legal h2 {
  margin: 34px 0 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--blue);
}
.legal h3 { margin: 24px 0 8px; font-weight: 700; font-size: 1.1rem; }
.legal h4 { margin: 18px 0 6px; font-weight: 700; font-size: 0.98rem; color: #3A3A3A; }
.legal p, .legal li { font-size: 15px; line-height: 1.65; color: #2B2B2B; margin: 0 0 0.85rem; }
.legal ul { padding-left: 1.15rem; margin: 0.5rem 0 1rem; }
.legal li { margin-bottom: 0.45rem; }
.legal li::marker { color: var(--blue); }
.legal a:not(.legal__back) {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal a:not(.legal__back):hover { color: var(--ink); }
.legal strong { color: var(--ink); font-weight: 700; }
.legal__meta {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 13px;
  color: #555;
}