/* RESTRICTED - Los Angeles teaser sign-up
   restricted.la

   Direction: a print proof, not a lit screen. Near-black ground, hairline
   crop marks, and restrictedtour.com's own red used
   as the ONLY colour on the page.

   The wordmark is the CLIENT'S OWN LOGO, traced to a vector and inlined.
   It is artwork, not type: the real mark has a width-to-cap-height ratio of
   about 3.0, and even a condensed text serif sits above 9, so no webfont
   substitution gets close.
   Text is Archivo (SIL OFL 1.1) - the same face the Restricted Sydney build
   uses. Oswald, also OFL, is kept for ONE line: the tracked LOS ANGELES under
   the wordmark, where a condensed cut is wanted and legibility is not at
   stake. Oswald was tried for the whole form first and was too hard to read
   at field sizes (Adam, 2026-09-01). Nothing commercial ships here.

   Signature: the loading readout under the lockup. It runs ONCE, slowly, to
   100 and rests there. Bar and number share a single JS driver (see app.js)
   so they cannot drift apart, and the resting CSS state is a COMPLETED bar,
   so with no JS it reads finished rather than stuck at zero.
   THE LOGO IS NEVER GATED ON IT: the lockup carries no entrance animation
   and paints on the first frame, every time (Adam, 2026-09-01).

   ---------------------------------------------------------------------
   THE LOCKUP SIZES ITSELF FROM ITS COLUMN, NOT THE VIEWPORT (2026-09-01)
   ---------------------------------------------------------------------
   The first build sized .mark__word with clamp(3.1rem, 8vw, 5.6rem). A vw
   unit cannot know how wide the mark COLUMN is, so on a wide desktop the
   word was handed 89.6px while its column was only ~468px - and the word
   measures ~6.9em, i.e. ~618px. It overflowed and ran under the sign-up
   panel (Adam, 2026-09-01).

   .mark__frame is now a query container and both lockup lines are sized in
   cqw, measured from the actual woff2 advance widths:

     "LOS ANGELES" Oswald 600, 5.242em + .70em tracking = 12.94em -> 7.73cqw

   The wordmark itself needs no measurement: it is inline SVG at width:100%.

   Values below sit just under those, so each line fills its column and can
   never overflow it at any width. If either string ever changes, re-measure
   with fontTools and update - do not eyeball it back to a vw clamp. */

/* ---------- Tokens ---------- */
:root {
  --ink:        #0A0A0B;              /* ground - a hair cooler than pure black */
  --ink-2:      #101012;              /* panel base */
  --paper:      #F4F2ED;              /* type - warm off-white, matches the artwork stock */
  --paper-mute: rgba(244, 242, 237, 0.62);
  --paper-dim:  rgba(244, 242, 237, 0.40);
  --red:        #d4202a;              /* the exact red restrictedtour.com uses */
  --red-hot:    #E8323C;              /* hover / active only */

  --rule:        rgba(244, 242, 237, 0.16);
  --rule-strong: rgba(244, 242, 237, 0.34);
  --field-flat:  #0D0D0F;             /* fields are transparent, so this is the panel colour (gotcha 30) */

  --panel-w: 25.5rem;
  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-load: cubic-bezier(0.33, 0, 0.2, 1);   /* moves off, then eases into 100 */
}

*, *::before, *::after { box-sizing: border-box; }

/* html carries the base colour; body stays transparent so it can never paint
   over the fixed ground layer (gotcha 16). */
html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: transparent;
  color: var(--paper);
  font-family: "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------- Fonts (see assets/fonts/LICENSES.txt) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2?v=20260901-13") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("/assets/fonts/oswald-latin-600.woff2?v=20260901-13") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Ground ----------
   No photograph. A teaser that shows nothing should not borrow atmosphere
   from a stock image, so the ground is flat ink with a single soft vignette
   and a red bloom sitting low behind the lockup. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(105% 68% at 24% 46%, rgba(212, 32, 42, 0.16) 0%, rgba(212, 32, 42, 0) 64%),
    radial-gradient(150% 110% at 50% 50%, rgba(10, 10, 11, 0) 38%, rgba(0, 0, 0, 0.78) 100%),
    var(--ink);
}

/* ---------- Shell ---------- */
.sheet {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* Bottom padding is deliberately much tighter than the top and sides. The
     footer is the last thing in this flex column, so the sheet's own bottom
     padding reads as dead space under it and makes the footer band look far
     taller than it is (Adam, 2026-09-01). */
  padding: clamp(1.1rem, 3.2vw, 2.1rem) clamp(1.1rem, 3.2vw, 2.1rem) clamp(0.45rem, 1.1vw, 0.75rem);
}
.wrap {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.8rem, 4.5vh, 2.8rem);
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;                 /* auto at EVERY breakpoint (gotcha 10) */
  padding: clamp(0.6rem, 1.6vh, 1rem) 0;
}

/* =========================================================
   The mark: crop frame, lockup, loading readout
   ========================================================= */
.mark {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Print crop marks, drawn as eight background gradients so the corners cost
   no DOM and stay hairline at any size.
   This is also the QUERY CONTAINER the lockup sizes itself from. */
.mark__frame {
  container-type: inline-size;
  --cm: clamp(11px, 2.4vw, 17px);   /* mark length */
  position: relative;
  width: 100%;
  padding: clamp(1.5rem, 4.4vw, 2.6rem) clamp(1.1rem, 3.6vw, 2.2rem);
  background-image:
    linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--rule), var(--rule)),
    linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--rule), var(--rule)),
    linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--rule), var(--rule)),
    linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--rule), var(--rule));
  background-repeat: no-repeat;
  background-size:
    var(--cm) 1px, 1px var(--cm),
    var(--cm) 1px, 1px var(--cm),
    var(--cm) 1px, 1px var(--cm),
    var(--cm) 1px, 1px var(--cm);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

/* The client's own logo artwork, traced to a vector and inlined in the
   document. width:100% of the query container with height:auto from the
   3.0 aspect ratio, so it fills its column exactly and can never overflow -
   no font metrics to measure, no vw clamp to get wrong.
   NO entrance animation and no opacity:0 start: the logo must be on screen
   from the first painted frame, never revealed by a loading state. */
.mark__word {
  display: block;
  margin: 0;
  color: var(--red);
}
.mark__word svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Second line of the lockup, tracked out to span the same column width.
   Oswald 600: "LOS ANGELES" is 5.242em plus 11 tracking units; at 0.70em
   tracking that is 12.94em, so 7.6cqw sits just inside flush. Echoes the way
   the tour artwork ranges its place names across the width of the wordmark. */
.mark__place {
  margin: clamp(0.5rem, 1.6cqw, 0.9rem) 0 0;
  font-family: "Oswald", "Arial Narrow", system-ui, sans-serif;
  font-weight: 600;
  font-size: 7.6cqw;
  line-height: 1;
  letter-spacing: 0.7em;
  text-indent: 0.7em;            /* re-centres against the trailing tracking unit */
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--paper);
}

/* --- Signature: the stalled loading readout --- */
.load {
  width: 100%;
  margin: clamp(1.6rem, 4.4cqw, 2.4rem) 0 0;
  opacity: 0;
  animation: fade 0.9s var(--ease) 0.62s forwards;
}
.load__track {
  position: relative;
  height: 1px;
  width: 100%;
  background: var(--rule);
}
.load__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--red);
  transform-origin: left center;
  /* Resting state is COMPLETE, and app.js animates it up from zero on load.
     Done this way round so that with no JS the bar reads finished rather than
     empty, and so the bar and the number have exactly one driver. An earlier
     build split them - CSS moved the bar, JS (then @property) moved the
     number - and they drifted apart twice. Do not re-split them. */
  transform: scaleX(1);
}
/* Terminal caret at the leading edge. The single moving thing left on the
   page once the fill stalls, and the only cue that it is still waiting. */
.load__fill::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 1px;
  height: 7px;
  background: var(--red);
}
.load__read {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.75rem 0 0;
  font-weight: 400;
  font-size: clamp(0.6rem, 1.9cqw, 0.74rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.load__pct {
  color: var(--red);
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;   /* the number must not jitter as it counts */
}

/* =========================================================
   Panel
   ========================================================= */
.signup {
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
}
/* The panel is a restricted-access credential, not a card: a solid red header
   band with the eyebrow reversed out of it, registration ticks at the foot
   echoing the artwork crop marks, ruled fields rather than filled boxes, and a
   status line where a pass would carry its serial.
   --panel-pad is a variable so the full-bleed band and status bar can negative
   margin out to the exact panel edge at every breakpoint - override the
   variable in a media block, never the padding property. */
/* The panel is a restricted-access credential, not a card: a solid red header
   band with the eyebrow reversed out of it, registration ticks at the foot
   echoing the artwork crop marks, ruled fields rather than filled boxes, and a
   status line where a pass would carry its serial.
   --panel-pad is a variable so the full-bleed band and status bar can negative
   margin out to the exact panel edge at every breakpoint - override the
   variable in a media block, never the padding property. */
.panel {
  --panel-pad: clamp(1.3rem, 4.4vw, 1.75rem);
  position: relative;
  isolation: isolate;             /* keeps the country dropdown above the frame (gotcha 5) */
  width: min(var(--panel-w), 100%);
  margin: 0 auto;
  padding: var(--panel-pad);
  background: #0D0D0F;
  /* hairline edge, a tight contact shadow and a soft ambient drop, so the pass
     sits above the page instead of lying flat on it */
  box-shadow:
    inset 0 0 0 1px var(--rule),
    0 2px 6px rgba(0, 0, 0, 0.55),
    0 26px 60px rgba(0, 0, 0, 0.72),
    0 0 90px rgba(212, 32, 42, 0.10);
  /* registration ticks, bottom corners only - the top is the red band */
  background-image:
    linear-gradient(var(--rule-strong), var(--rule-strong)), linear-gradient(var(--rule-strong), var(--rule-strong)),
    linear-gradient(var(--rule-strong), var(--rule-strong)), linear-gradient(var(--rule-strong), var(--rule-strong));
  background-repeat: no-repeat;
  background-size: 9px 1px, 1px 9px, 9px 1px, 1px 9px;
  background-position:
    9px calc(100% - 9px), 9px calc(100% - 9px),
    calc(100% - 9px) calc(100% - 9px), calc(100% - 9px) calc(100% - 9px);
  opacity: 0;
  animation: rise 1s var(--ease) 0.14s forwards;
}
.panel > * { position: relative; z-index: 1; }

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

.panel__eyebrow {
  margin: calc(-1 * var(--panel-pad)) calc(-1 * var(--panel-pad)) 1.3rem;
  padding: 0.6rem var(--panel-pad);
  background: var(--red);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--paper);
}
.panel__title {
  margin: 0 0 0.65rem;
  font-family: inherit;           /* Oswald - the serif belongs to the wordmark alone */
  font-weight: 600;
  font-size: clamp(1.35rem, 5.4vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
}
/* state-scoped p rules must not out-specific the eyebrow (gotcha 7) */
.panel__lede,
.panel__state p:not(.panel__eyebrow):not(.form__error) {
  margin: 0 0 1.15rem;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--paper-mute);
}

/* ---------- Form ---------- */
.form__row { margin: 0 0 1rem; }
/* Labels are VISIBLE now. Ruled fields have no box to imply what goes in
   them, so the label has to do that job. */
.form__label {
  display: block;
  margin: 0 0 0.15rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.form__input {
  width: 100%;
  padding: 0.5rem 0 0.45rem;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;               /* ruled, not boxed - a proof sheet, not an app */
  background: transparent;
  color: var(--paper);
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;                /* 16px min - stops iOS zoom-on-focus */
  line-height: 1.35;
  letter-spacing: 0;
  transition: border-bottom-color 0.2s var(--ease);
}
.form__input::placeholder { color: var(--paper-dim); letter-spacing: 0; }
.form__input:hover { border-bottom-color: var(--paper-dim); }
.form__input:focus {
  outline: none;
  border-bottom-color: var(--red);
  background: transparent;
}

/* Chrome autofill: :-webkit-autofill ignores background - the inset shadow is
   the only override, and it must be the FLATTENED opaque equivalent of the
   field-over-panel stack, not the field's own rgba (gotcha 30). */
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus,
.form__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--field-flat) inset !important;
          box-shadow: 0 0 0 1000px var(--field-flat) inset !important;
  -webkit-text-fill-color: var(--paper) !important;
  caret-color: var(--paper);
  transition: background-color 9999s ease-in-out 0s;
}

/* Honeypot - display:none ONLY. Off-screen positioning gets autofilled by
   Chrome/Edge and silently blocks real signups (gotcha 2). */
.hp-row { display: none !important; }

.form__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--paper-mute);
  cursor: pointer;
}
.form__check input {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0.18rem 0 0;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.form__check input:checked {
  background: var(--red);
  border-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6.2 4.7,8.9 10,3.2' fill='none' stroke='%230A0A0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 76%;
  background-repeat: no-repeat;
  background-position: center;
}
.form__check input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.form__check a { color: var(--paper); text-underline-offset: 2px; }
.form__check a:hover { color: var(--red); }

.form__error {
  margin: 0.42rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #FF8A70;
}
.form__error--global { margin-top: 0.75rem; text-align: center; }

/* ---------- Button ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.92rem 1.1rem;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-weight: 600;
  /* shrink before wrapping - never let a CTA label break (gotcha 26) */
  font-size: clamp(0.78rem, 3.2vw, 0.9rem);
  letter-spacing: clamp(0.12em, 0.7vw, 0.2em);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.btn--primary {
  color: var(--paper);
  background: var(--red);
}
.btn--primary:hover:not(:disabled) { background: var(--red-hot); }
.btn--primary:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Where a pass would carry a serial. It states the actual status rather than
   a decorative fake reference number. */
.panel__ref {
  margin: 1.3rem calc(-1 * var(--panel-pad)) calc(-1 * var(--panel-pad));
  padding: 0.5rem var(--panel-pad);
  border-top: 1px solid var(--rule);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.panel__ref b { color: var(--red); font-weight: 600; }

/* ---------- Success ---------- */
.panel__success-note {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: var(--paper);
}

/* ---------- Footer ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.2rem;
  width: 100%;
  margin: 0;                      /* full-bleed across the sheet, not a centred column */
  padding-top: clamp(0.5rem, 1.3vh, 0.75rem);
  border-top: 1px solid rgba(244, 242, 237, 0.10);
  opacity: 0;
  animation: fade 1s var(--ease) 0.8s forwards;
}
.foot__legal {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.foot__legal a {
  color: var(--paper-mute);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 242, 237, 0.2);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.foot__legal a:hover { color: var(--red); border-color: var(--red); }
.site-built { margin: 0; }
/* Keeps its pill - slimmer than the engine default, but a pill. */
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(244, 242, 237, 0.14);
  background: rgba(10, 6, 6, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-mute);
  text-decoration: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.site-built a:hover {
  background: rgba(10, 6, 6, 0.78);
  color: var(--paper);
  border-color: rgba(212, 32, 42, 0.55);
}
.site-built img { height: 11px; width: auto; display: block; }

/* ---------- intl-tel-input ---------- */
/* Hidden state lives in the vendor stylesheet; until it loads the list would
   flash open on first paint (gotcha 19). */
.iti__dropdown-content.iti__hide { display: none !important; }
.iti { width: 100%; display: block; }
.iti__country-container { z-index: 3; }
.iti input.form__input { padding-left: calc(52px + 0.7rem); }   /* app.js re-measures */
.iti__dropdown-content {
  background: #131315;
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.7);
  color: var(--paper);
}
.iti__country-list { background: transparent; }
.iti__country { color: var(--paper); font-size: 0.85rem; }
.iti__country.iti__highlight,
.iti__country:hover { background: rgba(212, 32, 42, 0.2); }
.iti__dial-code { color: var(--paper-dim); }
.iti__search-input {
  /* keep the vendor's horizontal reservation or the magnifier lands on the
     word "Search" - never use the padding shorthand alone (gotcha 33) */
  padding: 9px 30px 9px 32px;
  background: #131315;
  color: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-family: inherit;
  font-size: 0.8rem;
}
.iti__search-input::placeholder { color: var(--paper-dim); }

/* ---------- Motion ---------- */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   Layout blocks.
   Aspect-ratio thresholds, not width alone, so squarish in-between
   windows never fall through a gap (gotcha 20).
   ========================================================= */

/* --- Desktop / landscape tablet: artwork left, sign-up right.
       Grid rather than flex so the mark column is an explicit
       minmax(0, 1fr) track and can never be pushed past the panel. --- */
@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  /* The panel track is DEFINITE (var(--panel-w)), never `auto`.
     With `auto` the track's size came from .panel's own width:min(25.5rem,100%)
     - a percentage resolving against the very track it was sizing. That left
     the grid with no definite basis to distribute free space from, so the
     neighbouring minmax(0,1fr) track resolved to ZERO. It could not fall back
     on its contents either, because .mark__frame is a container-type:
     inline-size element and those contribute no width to content-based
     sizing by design. The mark column collapsed to exactly its own padding.
     Keep this track definite. (2026-09-01) */
  .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    max-width: 76rem;
  }
  .mark        { text-align: left; }
  .mark__frame { padding: clamp(2rem, 3.6vw, 3rem) clamp(1.6rem, 3vw, 2.4rem); }
  .mark__place { text-align: left; text-indent: 0; }
  .signup      { width: 100%; }
  .panel       { width: 100%; }   /* fills the definite track - no percentage circularity */
  .foot        { justify-content: space-between; }
}

/* --- Landscape phone: satisfies the desktop width/aspect test but has almost
       no height, so it needs its own compact treatment. Placed AFTER the
       desktop block so it wins at equal specificity (gotcha 27).
       The lockup needs no font-size override here: it is sized in cqw, so it
       tracks the narrower column automatically. --- */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .sheet { padding: 0.7rem 1rem; }
  .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20.5rem;   /* definite, as above */
    align-items: center;
    gap: clamp(1.2rem, 3.5vw, 2.2rem);
    max-width: 58rem;
    padding: 0.3rem 0;
    min-height: 0;
  }
  .mark__frame { padding: clamp(0.9rem, 2.4vw, 1.4rem) clamp(0.8rem, 2vw, 1.2rem); }
  .load        { margin-top: 0.9rem; }
  .load__read  { margin-top: 0.5rem; }
  .panel {
    --panel-pad: 1.05rem;
    width: 100%;
    max-height: calc(100svh - 3.4rem);
    overflow-y: auto;
  }
  .panel__eyebrow { margin-bottom: 0.4rem; font-size: 0.5rem; }
  .panel__title   { font-size: 0.95rem; margin-bottom: 0.4rem; }
  /* The mark column already carries the pitch, so the idle panel drops its
     lede here. That is the ~60px keeping the CTA above the fold at 390px. */
  .panel__idle .panel__lede { display: none; }
  .form__row    { margin-bottom: 0.6rem; }
  .form__input  { padding: 0.58rem 0.8rem; }
  .form__check  { font-size: 0.58rem; line-height: 1.55; }
  .btn          { margin-top: 0.7rem; padding: 0.68rem 1rem; }
  .foot         { padding-top: 0.55rem; gap: 0.4rem 1rem; }
  .foot__legal, .site-built a { font-size: 0.6rem; }
}

/* --- Very short portrait phones --- */
@media (max-aspect-ratio: 7/10) and (max-height: 700px) {
  .wrap        { gap: 1.4rem; }
  .mark__frame { padding: clamp(1.1rem, 3.4vw, 1.6rem) clamp(0.9rem, 3vw, 1.4rem); }
  .load        { margin-top: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .panel, .foot { opacity: 1; }
  /* Land on the finished state immediately; app.js skips its run entirely. */
  .load__fill { transform: scaleX(1); }
}