/* ============================================================
   D.O.D - OUTERNET LIVE, LONDON
   Saturday 27 February 2027, 22:00 - 04:00. Sign-up.
   Client: Louder Entertainment, with Broadwick Live.

   DIRECTION
   The artwork is liquid colour (violet and coral, swirled like oil on
   water) under a grainy dust texture, with heavy EXPANDED grotesk type
   stacked and repeated: D.O.D x7, LONDON x3. Adam (2026-10-27): artwork
   as the background with the text over it, NOT a boxed poster.

   So the artwork is rebuilt as the page. .bg is the poster's liquid at
   full bleed: the lettering was inpainted out of the client's 34.jpg
   (OpenCV Telea, masks from the PSD's own type-layer alphas), lightly
   darkened toward ink, grain laid back on. The lettering returns on top
   as the h1 lockup, built from those same PSD layers and recoloured to
   the poster's coral (LONDON in paper, so it reads off the coral band).
   A CSS shade (.bg::after) sits behind the lettering and the panel.

   COLOUR - literal pixels of 45.jpg:
     #1A0330  ink          page ground, text on coral
     #2D054F  deep violet  the poster's darkest liquid
     #6606D8  violet       structure lines
     #E86465  coral        accent + CTA (the poster's type colour)
     #F2A39C  coral light  hover lift
     #E7D6F7  lilac        reading copy
   Coral on the panel: 5.56:1. Ink on coral button: 5.86:1.
   Lilac on the panel: 13.25:1. Placeholder lilac on the field: 6.82:1.

   TYPE - the artwork's face is a heavy, very wide grotesk. Archivo at
   wdth 125 / wght 900 carries it on the titles; body copy is Archivo at
   normal width so it stays readable at 13-15px.

   MOTION - one moment: the lettering lands on the liquid. Off under
   prefers-reduced-motion.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-wdth.woff2?v=20261027-5") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --void:     #1A0330;   /* page ground */
  --ink:      #1A0330;   /* text on coral */
  --panel:    #22053E;   /* panel base / dropdown */
  --field:    #2A0A4A;   /* form field - OPAQUE on purpose, see autofill note */
  --violet:   #6606D8;
  --ice:      #E86465;   /* accent (name kept from the engine: every rule below reads it) */
  --frost:    #F2A39C;   /* hover lift */
  --paper:    #FFF4F1;
  --mist:     #E7D6F7;   /* reading copy */
  --mist-dim: #B49ACF;   /* secondary copy + placeholders */
  --danger:   #FFB3B3;
  --whatsapp: #25D366;
  --line:     rgba(190,140,255,.28);

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

  --maxw: 1440px;
  --gutter: clamp(16px, 4vw, 40px);
  --panel-w: 440px;
}

*, *::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. 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 would paint
   over the fixed .bg layer (gotcha 16). */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--void);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font);
  color: var(--mist);
  background: transparent;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The liquid plate: fixed, full-bleed, behind everything. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--void) url("/assets/images/bg-mobile.webp?v=20261027-13") center top / cover no-repeat;
}
/* Shade for legibility: portrait darkens the top, where the lettering sits. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,3,48,.62) 0%, rgba(26,3,48,.30) 38%, rgba(26,3,48,.10) 60%, rgba(26,3,48,.35) 100%);
}

/* clip, not hidden: hidden on one axis forces the other to auto and would
   clip the country dropdown. */
.page {
  flex: 1 0 auto;
  display: flex;
  width: 100%;
  overflow-x: clip;
}

/* ============================================================
   STAGE
   ============================================================ */
.stage {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;                 /* auto at EVERY breakpoint - never plain 0 */
  padding: clamp(18px, 3.5vw, 40px) var(--gutter);
  display: flex;
  align-items: center;
}
.stage__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "bill" "signup" "presents";
  gap: clamp(20px, 4vw, 40px);
  align-items: center;
}

/* ============================================================
   THE LETTERING
   ============================================================ */
.bill {
  grid-area: bill;
  display: grid;
  justify-items: center;
  min-width: 0;
}
.bill__h1 { margin: 0; font-weight: inherit; line-height: 0; width: 100%; display: grid; justify-items: center; }
/* picture must be a full-width block: left as a shrink-to-fit grid item, the
   lockup's percentage max-width resolves against itself and the image hugs the
   left edge on phones (Adam, 27 Oct). Centred with auto margins. */
.bill__h1 picture { display: block; width: 100%; }
.bill__lockup {
  display: block;
  width: 100%;
  max-width: min(440px, 100%);
  height: auto;
  margin: 0 auto;
  animation: land .9s cubic-bezier(.2,.7,.2,1) both;
}
/* Presenter logos. Heights keep the PSD's ratio (Broadwick text = .59 of the
   Louder mark) and bottoms align, as on the poster. */
.bill__presents {
  --logo-h: clamp(36px, 9vw, 46px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--logo-h) * .6);
  margin: 12px 0 0;
  line-height: 0;
  animation: land .9s .3s cubic-bezier(.2,.7,.2,1) both;
}
.bill__presents picture { display: block; }
.bill__logo { display: block; width: auto; }
.bill__logo--louder { height: var(--logo-h); }
.bill__logo--broadwick { height: calc(var(--logo-h) * .59); }
/* Single column (phones): logos sit below the sign-up, not under the
   lettering. The two-column blocks below swap the copies back. */
.bill__presents--top { display: none; }
.bill__presents--foot { grid-area: presents; margin: 0; }
/* The one load moment: the lettering lands on the liquid. */
@keyframes land {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   SIGNUP PANEL
   ============================================================ */
.signup {
  grid-area: signup;
  justify-self: center;
  width: 100%;
  max-width: var(--panel-w);
  position: relative;
  z-index: 2;                      /* dropdown stays above the lettering */
}
.panel {
  width: 100%;
  position: relative;
  isolation: isolate;              /* keeps the country dropdown above the panel chrome */
  background: rgba(26,3,48,.84);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 40px 90px -30px rgba(10,0,20,.95);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
.panel__inner { position: relative; z-index: 1; padding: clamp(24px, 3vw, 34px); }

/* --- 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 IS a sequence:
   form -> SMS code -> email confirm.
   ============================================================ */
.spine {
  display: flex;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(10,0,20,.35);
}
.spine__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px 8px;
  font-weight: 650;
  font-size: 12px;
  letter-spacing: -.005em;
  color: var(--mist-dim);
  transition: color .25s ease, background-color .25s ease;
}
.spine__step + .spine__step { border-left: 1px solid var(--line); }
.spine__n {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
}
.spine__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.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(--paper);
  background: rgba(232,100,101,.14);
}
.panel[data-form-state="idle"]    .spine__step:nth-child(1) .spine__n,
.panel[data-form-state="otp"]     .spine__step:nth-child(2) .spine__n,
.panel[data-form-state="success"] .spine__step:nth-child(3) .spine__n {
  background: var(--ice);
  border-color: var(--ice);
  color: var(--ink);
}
.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(--ice);
}
.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;                    /* hide the digit, keep the ring */
  border-color: var(--ice);
}
.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 var(--ice);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
@media (max-width: 400px) {
  .spine__step { font-size: 11px; gap: 5px; padding: 8px 3px 7px; }
  .spine__n { width: 15px; height: 15px; }
}

/* ============================================================
   PANEL COPY
   ============================================================ */
.panel__title {
  margin: 0 0 12px;
  font-weight: 900;
  font-stretch: 125%;              /* the poster's wide grotesk */
  font-size: clamp(1.6rem, 4.4vw, 2.05rem);
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: uppercase;       /* as the poster sets every word */
  color: var(--paper);
  text-wrap: balance;
}
/* House pattern: the second line carries the accent, in the poster's coral. */
.panel__title em { font-style: normal; color: var(--ice); }
.panel__lede {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--mist);
  max-width: 46ch;
}
.panel__lede--last { margin-bottom: 20px; }
.panel__lede strong { color: var(--paper); font-weight: 650; }
.panel__success-note { margin: 0 0 12px; color: var(--ice); font-size: 14.5px; }

/* ============================================================
   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: 13px 14px;
  font-family: var(--font);
  font-size: 16px;                 /* 16px minimum or iOS zooms on focus */
  color: var(--paper);
  background: var(--field);        /* OPAQUE - see the autofill rule below */
  border: 1px solid rgba(190,140,255,.34);
  border-radius: 2px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: var(--mist-dim); opacity: 1; }
.form__input:focus {
  outline: none;
  border-color: var(--ice);
  box-shadow: 0 0 0 3px rgba(232,100,101,.25);
}
.form__input--otp {
  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 on
   :-webkit-autofill - a huge inset box-shadow is the only reliable override.
   It must be the flattened OPAQUE colour of the field, which is simply --field
   because the field is opaque on purpose. Keep it opaque. */
.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(--paper) !important;
  caret-color: var(--paper);
  transition: background-color 9999s ease-in-out 0s;   /* stops the lavender flashing in */
}

.form__error { margin: 7px 0 0; font-size: 13px; 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(--mist);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--ice);
  cursor: pointer;
}
.form__check a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { color: var(--frost); }

.form__resend {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--mist-dim);
  text-align: center;
}
.form__resend-btn {
  font: inherit;
  color: var(--ice);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.form__resend-btn:disabled { color: var(--mist-dim); cursor: default; text-decoration: none; }

/* ---------- buttons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(1rem, 3.6vw, 1.08rem);
  letter-spacing: -.02em;
  white-space: nowrap;             /* shrink the type before it can ever wrap */
  text-align: center;
  text-decoration: none;           /* <a class="btn"> needs this */
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: transform .12s ease, background-color .18s ease, filter .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
.btn--primary { color: var(--ink); background: var(--ice); font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
.btn--primary:hover:not(:disabled) { background: var(--frost); }
.btn--whatsapp {
  color: #06301A;                  /* 7.33:1 on the WhatsApp green */
  background: var(--whatsapp);
  margin-top: 4px;
}
.btn--whatsapp:hover { filter: brightness(1.06); }
.btn__icon { flex: 0 0 auto; width: 19px; height: 19px; }

.wa-hook { margin: 18px 0 12px; font-size: 13.5px; color: var(--mist); }
.wa-hook strong { color: var(--paper); font-weight: 650; }

/* ============================================================
   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: var(--panel);
  border: 1px solid rgba(190,140,255,.5);
  border-radius: 2px;
  box-shadow: 0 26px 56px -18px rgba(10,0,20,.94);
  overflow: hidden;
}
.iti__search-input {
  /* Keep the vendor's horizontal padding reservation (30px left for the search
     icon, 28px right for the clear button). A padding SHORTHAND that drops them
     puts the magnifier on top of the placeholder. */
  padding: 10px 30px 10px 32px;
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--paper);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid rgba(190,140,255,.34);
}
.iti__search-input::placeholder { color: var(--mist-dim); }
.iti__search-input:focus { outline: none; background: #33105A; }
.iti__country-list { background: var(--panel); max-height: 240px; }
.iti__country {
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--paper);
}
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(232,100,101,.18); }
.iti__dial-code { color: var(--mist-dim); }
.iti__country-name { color: var(--paper); }
.iti__selected-country { border-radius: 2px 0 0 2px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(232,100,101,.14); }
.iti__selected-dial-code { color: var(--paper); font-family: var(--font); font-size: 15px; }
.iti__arrow { border-top-color: var(--mist-dim); }
.iti__arrow--up { border-bottom-color: var(--mist-dim); }

/* ============================================================
   FOOTER - standard fleet band (basslayerz pattern), credit in a pill.
   position + z-index keep it above the fixed plate.
   ============================================================ */
.foot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px clamp(16px, 4vw, 40px) 26px;
  background: rgba(14,1,26,.88);
  border-top: 1px solid var(--line);
  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(--mist-dim); }
.foot__legal a { color: var(--mist-dim); text-decoration: none; }
.foot__legal a:hover { color: var(--ice); }
/* louder-consent.js drops "Cookie settings" in right after the privacy link
   with only a text space between them; give it a real gap and a divider. */
.foot__legal [data-louder-consent-open] {
  margin-left: .75em;
  padding-left: .85em;
  border-left: 1px solid rgba(190,140,255,.4);
}
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  font-size: 12px;
  color: var(--mist-dim);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.site-built a:hover { color: var(--paper); border-color: var(--ice); }
/* the credit logo is teal-on-dark artwork: dark band, so a bare opacity only */
.site-built img { display: block; opacity: .9; }

@media (max-width: 899px) {
  .foot { justify-content: center; text-align: center; }
  .foot__left { justify-content: center; }
}
/* Phones: stack the footer rather than relying on the row wrapping. */
@media (max-width: 480px) {
  .foot { flex-direction: column; align-items: center; gap: 10px; padding-bottom: 22px; }
  .foot__left { flex-direction: column; align-items: center; gap: 10px; }
}

/* ============================================================
   RESPONSIVE - aspect-ratio thresholds, not width alone.
   ============================================================ */

/* Wide plate whenever the window is wider than portrait; the shade moves to
   the left (lettering) and right (panel) edges. */
@media (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20261027-12"); background-position: center; }
  .bg::after {
    background: linear-gradient(90deg, rgba(26,3,48,.60) 0%, rgba(26,3,48,.36) 34%, rgba(26,3,48,0) 58%, rgba(26,3,48,.30) 100%);
  }
}

/* --- two column: lettering left, panel right ---
   The panel track is DEFINITE (never auto) so the 1fr track has a real width.
   The lockup is capped by its column AND by the screen height (its ratio is
   1280/926 = 1.38); width:auto is never used, so gotcha 38 cannot happen. */
@media (min-width: 900px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
    grid-template-areas: "bill signup";
    column-gap: clamp(32px, 5vw, 96px);
  }
  .bill, .bill__h1 { justify-items: start; }
  .bill__lockup { max-width: min(680px, 100%, calc((100svh - 230px) * 1.38)); margin-left: 0; }
  .bill__presents { justify-content: flex-start; --logo-h: 50px; margin-top: 16px; }
  .bill__presents--top { display: flex; }
  .bill__presents--foot { display: none; }
  .signup { justify-self: end; }
}

/* --- landscape phones are a first-class layout ---
   844x390, 932x430, 667x375: the lettering fits the screen height on the left,
   the panel scrolls on the right. AFTER the desktop block so it wins. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage { padding: 12px clamp(12px, 3vw, 26px); align-items: flex-start; }
  .stage__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    grid-template-areas: "bill signup";
    column-gap: 22px;
    align-items: start;
  }
  .bill { position: sticky; top: 12px; align-self: center; }
  .bill, .bill__h1 { justify-items: start; }
  .bill__lockup { max-width: min(100%, calc((100svh - 70px) * 1.38)); margin-left: 0; }
  .bill__presents { justify-content: flex-start; --logo-h: 28px; margin-top: 8px; }
  .bill__presents--top { display: flex; }
  .bill__presents--foot { display: none; }
  .signup { justify-self: stretch; max-width: none; }
  .panel__inner { padding: 16px 20px; }
  .spine { margin-bottom: 13px; }
  .panel__title { font-size: 1.35rem; margin-bottom: 8px; }
  .panel__lede { font-size: 13px; margin-bottom: 7px; }
  .panel__lede--last { margin-bottom: 12px; }
  .form__row { margin-bottom: 10px; }
  .form__input { padding: 10px 13px; }
  .form__row--check { margin: 12px 0 13px; }
  .btn { padding: 12px 16px; }
  .iti__country-list { max-height: 150px; }
}

/* --- phones --- */
@media (max-width: 599px) {
  .stage { padding-top: 22px; }
  .bill__lockup { max-width: min(400px, 92%); }
}
@media (max-width: 400px) {
  .panel__inner { padding: 22px 18px; }
}

/* ============================================================
   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: 2px solid var(--ice);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !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 29px; font-size: 12px; line-height: 1.5; color: var(--mist); }
.form__note a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.form__note a:hover { color: var(--frost); }