/* ============================================================
   CULTURILY — AUTH PAGES  (login.html, register.html, update-password.html)
   App-style dark auth card from the Claude Design "Culturily Auth" export.
   Brand-locked: lime #CCFF00, dark #0e0e0e, Cormorant Garamond / DM Sans /
   Fraunces — §ED430 (2026-08-20): --font-display was Cormorant Garamond, is
   now Fraunces. (DM Sans is pre-existing drift in this header, not this
   pass's doing — nothing in this file actually loads it; left alone.)
   Requires: global.css, components.css.
   ============================================================ */

/* ── Page shell ─────────────────────────────────────────────── */

.auth-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--safe-top)) 18px 24px;
  /* §ED141 — THE DARK BACKGROUND, ROOT CAUSE. This was `background: #070707`,
     a literal WO-VIS Wave B kept deliberately ("no clean token match — darker
     than --surface-well #101010, the deepest defined value") on the premise
     recorded at the foot of this file: "these auth pages are theme-locked
     dark ... the pre-paint script always strips html.theme-light". THE FLIP
     (VISUAL-IDENTITY-RULING §9.3) ended that premise — login.html and
     register.html now run briefing.html's theme script verbatim and DO stamp
     html.theme-light on web. Every other surface on these pages theme-follows
     through var(); this one literal did not, so a light-theme reader got a
     light card floating on a near-black page. The theme script is NOT the
     defect here (both pages already carry it and the capability gate it
     depends on — §ED112's fix landed on these two); the defect is a colour
     that cannot follow it.
     --surface-well is the token whose ROLE this is: a recessed surface the UI
     sits inside. It is 6 units lighter than #070707 in dark (#101010) and the
     vignette Wave B was protecting survives in BOTH themes, because the well
     is darker than .auth-inner's var(--bg) on each side of the flip
     (dark #101010 < #161616; light #EBEBEB < #F4F4F4). */
  background: var(--surface-well); /* backdrop behind the floating card */
}

/* The dark, app-style card (the manifesto/landing system, inverted small) */
.auth-inner {
  position: relative;
  width: 100%;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 30px;
  /* §ED141 — was `0 18px 50px rgba(0,0,0,0.5)`, a second dark-locked literal.
     global.css re-points --shadow-xl under .theme-light (achromatic
     rgba(22,22,22,0.18)), so the card now casts a shadow that belongs to the
     theme it is rendered in instead of a hard black halo on a light page.
     Geometry moves 18px/50px -> 16px/48px, the nearest token step; dark alpha
     0.5 -> 0.75. Desktop only in practice — the <=480px block below drops the
     shadow entirely, so the phone render is untouched. */
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  padding: 30px 26px 26px;
}

/* lime glow bleeding from the top of the card */
.auth-inner::before {
  content: '';
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent), transparent 64%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.auth-inner > * { position: relative; z-index: 1; }

/* Full-bleed app feel on phones */
@media (max-width: 480px) {
  .auth-page { padding: 0; }
  .auth-inner {
    max-width: none;
    min-height: 100dvh;
    border: none;
    border-radius: 0;
    box-shadow: none;
    /* full-bleed on phones → the inner card owns the top inset (page padding is 0 here) */
    padding: calc(26px + var(--safe-top)) 22px calc(26px + var(--safe-bottom, 0px));
  }
}

/* ── Top bar: back + wordmark ───────────────────────────────── */

.auth-top {
  display: flex;
  align-items: center;
  gap: 13px;
}

.auth-back {
  position: relative; /* a11y medium-pass: hit-slop base, see ::before */
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-subtle); /* was rgba(248,248,248,0.6) — same light-theme-invisibility issue as .auth-terms above */
  flex-shrink: 0;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
/* Was 36x36, 8px short on each axis. Hit-slop rather than growing the visible
   pill, matching .pf-icon-btn's precedent. */
.auth-back::before { content: ''; position: absolute; inset: -4px; }

.auth-back:hover { border-color: var(--border-strong); color: var(--text-primary); }
.auth-back svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.auth-wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
}

/* ── Logo (kept for update-password.html) ───────────────────── */

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  gap: 10px;
  text-decoration: none;
}

/* ── Headings ───────────────────────────────────────────────── */

.auth-heading {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--text-primary);
  text-align: left;
  margin: 40px 0 0;
  text-wrap: balance;
}

.auth-subheading {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: left;
  margin: 9px 0 0;
}

/* ── Providers (Apple / Google) ─────────────────────────────── */

.auth-providers {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.btn-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 15px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15.5px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 60ms ease, border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.btn-provider:active:not(:disabled) { transform: translateY(1px); }
.btn-provider:disabled { opacity: 0.6; cursor: default; }
.btn-provider svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Apple — iOS/Capacitor only. Hidden on web so users never see a dead button;
   revealed by a small platform check that adds .is-ios. Fixed white/black per
   Apple HIG regardless of app theme — these auth pages are theme-locked dark
   (see file header), so var(--surface)/var(--text-primary) would resolve DARK
   here and invert the button; left hardcoded intentionally. */
.btn-apple { background: #f8f8f8; color: #0e0e0e; display: none; }
.btn-apple.is-ios { display: flex; }
.btn-apple:hover { background: #ffffff; }

/* Google — fully wired on web. */
.btn-google {
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
  /* inherits .btn-provider layout */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border-radius: 14px;
  padding: 15px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15.5px;
  cursor: pointer;
  transition: transform 60ms ease, border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.btn-google:hover { border-color: color-mix(in srgb, var(--text-primary) 22%, transparent); background: var(--surface-2); }
.btn-google:active:not(:disabled) { transform: translateY(1px); }
.btn-google:disabled { opacity: 0.6; cursor: default; }
.btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── OR divider ─────────────────────────────────────────────── */

.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  /* 22px, then 32px, both still read as cramped between the (Apple/Google)
     provider buttons and the email/password form below — bumped again for
     real breathing room on both sides. */
  margin: 44px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-divider span {
  font-size: 12px;
  color: var(--text-disabled);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Apple's divider — moved below the email/password form alongside .btn-apple.
   Same is-ios reveal gate (see the platform-check script in login.html/
   register.html) so this never renders orphaned with no button under it on
   web, where Apple has no flow. */
.auth-divider-apple { display: none; }
.auth-divider-apple.is-ios { display: flex; }

/* ── Form ───────────────────────────────────────────────────── */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-form .form-group { gap: 7px; }

.auth-form .form-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* label row that also carries the inline "Forgot?" link */
.auth-form .form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.auth-form .form-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 15px;
  font-size: 15px;
}

.auth-form .form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  background: var(--bg);
}

/* ── Forgot password (inline, neutral) — demoted from lime: the submit
   button below is this screen's one lime action; a secondary nav link
   doesn't also get to be lime (§3a punctuation law). ──────────────── */

.auth-forgot {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.auth-forgot:hover { color: var(--text-primary); }

/* ── Submit — VISUAL-IDENTITY-RULING §5 K2: flat lime CTA, no lip/no glow.
   De-lipped for THE FLIP (§9.3) — was a 3D box-shadow lip matching the
   pre-ruling landing CTA; that landing is itself superseded (K6). ──────── */

.auth-submit {
  margin-top: 8px;
  width: 100%;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  padding: 17px;
  cursor: pointer;
  transition: opacity 60ms ease;
}

.auth-submit:active:not(:disabled) { opacity: 0.85; }
.auth-submit:disabled { opacity: 0.6; cursor: default; }

/* ── Consent / terms ────────────────────────────────────────── */

/* a11y medium-pass (2026-07-11): was rgba(248,248,248,0.42) — 3.91:1 on dark
   --bg (needs 4.5:1), and since this is a hardcoded white-based rgba with no
   light-theme override anywhere in this file, it measured 1.15:1 on light
   theme's cream --bg (effectively invisible — worse than the dark-theme
   number the original audit caught). Swapped to --text-subtle, which is
   theme-aware and now clears AA in both (dark 7.94:1, light 4.51:1). */
.auth-terms {
  margin: 16px 2px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-subtle);
  text-align: center;
}

.auth-terms a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-terms a:hover { color: var(--text-primary); }

/* ── Referral banner (register) ─────────────────────────────── */

.auth-referral {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  border-radius: 13px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
  margin-top: 18px;
}

.auth-referral i { font-size: 20px; color: var(--accent); flex-shrink: 0; }
.auth-referral strong { font-weight: 700; }

/* ── Switch line (neutral) — demoted from lime for the same reason as
   .auth-forgot above: one lime action per screen, the submit button owns
   it. Still reads as a link via weight + underline-on-hover. ──────────── */

.auth-switch {
  text-align: center;
  margin-top: 24px;
  padding-top: 4px;
  font-size: 14px;
  color: var(--text-subtle);
}

.auth-switch a,
.auth-switch button {
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  transition: color var(--t-fast) var(--ease);
}

.auth-switch a:hover,
.auth-switch button:hover { color: var(--text-primary); }

/* ── Email-sent state (register) ────────────────────────────── */

.auth-sent-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 8px 0;
}

.auth-sent-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.auth-sent-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--accent);
  fill: none;
}

.auth-sent-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}

.auth-sent-body {
  font-size: 0.9375rem;
  color: var(--text-subtle);
  line-height: 1.6;
  margin: 0;
  max-width: 300px;
}

.auth-sent-email {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── Inline toast (auth pages, before app shell loads) ──────── */

.auth-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--surface-3);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: var(--font-body);
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  border: 1px solid var(--border);
  max-width: min(360px, calc(100vw - 40px));
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9999;
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.auth-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.auth-toast--error {
  border-color: color-mix(in srgb, var(--error) 35%, transparent);
  background: var(--error-dim);
  color: var(--error-ink);
}

.auth-toast--success {
  border-color: var(--border-accent);
  background: var(--accent-dim);
  color: var(--accent);
}

/* ── Password visibility toggle ─────────────────────────────── */

.input-password-wrap {
  position: relative;
}

.input-password-wrap .form-input {
  padding-right: 48px;
}

.btn-pw-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-subtle);
  display: flex;
  align-items: center;
  transition: color var(--transition);
}
/* Hit-slop only — the visual icon (18px + 4px padding = 26px) stays exactly
   as designed; this invisible pseudo-element extends the actual tappable
   area to ~44px without growing anything on screen or shifting the input's
   padding-right. */
.btn-pw-toggle::before {
  content: '';
  position: absolute;
  inset: -9px;
}

.btn-pw-toggle:hover {
  color: var(--text-primary);
}

.btn-pw-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Onboarding layout ──────────────────────────────────────── */

.onboarding-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 32px 20px 48px;
  background: var(--bg);
}

.onboarding-inner {
  width: 100%;
  max-width: 420px;
}

.onboarding-step-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  margin-bottom: 8px;
}

.onboarding-heading {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 6px;
  line-height: 1.2;
}

.onboarding-subheading {
  font-size: 0.9375rem;
  color: var(--text-subtle);
  text-align: center;
  margin: 0 0 32px;
}

/* ── Section titles inside onboarding form ──────────────────── */

.onboarding-section-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 12px;
}

/* ── Avatar grid ────────────────────────────────────────────── */

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}

@media (max-width: 360px) {
  .avatar-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.avatar-option {
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  outline: 3px solid transparent;
  outline-offset: 3px;
  transition: outline-color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.avatar-option:hover {
  transform: scale(1.08);
}

.avatar-option.selected {
  outline-color: var(--accent-ink);
  transform: scale(1.1);
}

.avatar-option .avatar {
  pointer-events: none;
}

/* No overlay — selection is shown purely by the lime ring on .avatar-option.selected */

/* ── Country select ─────────────────────────────────────────── */

.country-select-wrap {
  position: relative;
  margin-bottom: 28px;
}

.country-select-wrap::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-subtle);
  pointer-events: none;
}

.country-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 14px 44px 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  outline: none;
}

.country-select:focus {
  border-color: var(--accent);
  background: var(--surface-2);
}

.country-select option {
  background: var(--surface-2);
  color: var(--text-primary);
}

/* ── Onboarding form spacing ────────────────────────────────── */

.onboarding-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.onboarding-form .form-group {
  margin-bottom: 28px;
}

/* ── Avatar preview in name section ─────────────────────────── */

.name-avatar-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.name-avatar-preview .avatar {
  flex-shrink: 0;
}

.name-avatar-preview-text {
  font-size: 0.875rem;
  color: var(--text-subtle);
  line-height: 1.4;
}

/* ── Loading overlay (during onboarding save) ───────────────── */

.auth-loading-overlay {
  position: fixed;
  inset: 0;
  /* WO-VIS Wave B: rgb base matches --scrim (14,14,14) but this needs to be
     near-opaque (0.85) to fully block the screen during save, vs --scrim's
     lighter modal-backdrop alpha (0.62) — kept literal rather than lightened. */
  background: rgba(14, 14, 14, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.auth-loading-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.auth-loading-overlay p {
  font-size: 0.9375rem;
  color: var(--text-subtle);
}

/* Dead code removed (WO-VIS Wave B): these auth pages are theme-locked dark
   (see file header) — the pre-paint script always strips html.theme-light,
   so this selector never matched. */

/* ── §ED133: the ten DESIGN-bearing style="" attributes on login.html and
   register.html, lifted. §ED132's finding was that a page WITH a dedicated
   stylesheet can still hold a component's design in style attributes; these two
   pages have linked auth.css since they were built and still carried ten. The
   display:none attributes that Auth/js toggle are left in the markup — state is
   not design, the same line §ED132 drew.

   Declarations below are byte-identical to the attributes they replace. Where a
   rule must beat an existing class it does so by id (0,1,0,0) or by appearing
   later in this file at equal specificity — no !important, and no value moved
   to a nearby token: this is extraction, not a redesign. ─────────────────── */

/* was: style="margin:0 0 var(--sp-3)" on all three Turnstile hosts. Scoped by
   id, not by .cf-turnstile, so this cannot reach the Turnstile box on any other
   page (settings.html has one too — see §ED132). */
#ts-login, #ts-reset, #ts-register { margin: 0 0 var(--sp-3); }

/* was: an unclassed <p style="font-size:0.9rem;…"> at the head of #reset-form */
.auth-reset-intro {
  font-size: 0.9rem;
  color: var(--text-subtle);
  margin: 0 0 4px;
  text-align: left;
  line-height: 1.5;
}

/* was: style="margin-top:8px;" on login's "Back to sign in" and register's
   "Resend email". Two buttons, identical declaration, one rule — the §ED132
   collapse precedent. Both are .btn.btn-ghost.btn-full, so an id is what wins. */
#btn-back-to-login, #btn-resend { margin-top: 8px; }

/* was: style="margin-top:4px;font-size:0.875rem;" on register's second sent-view
   paragraph. Modifier on .auth-sent-body (defined earlier in this file), which
   it beats on source order at equal specificity. */
.auth-sent-note { margin-top: 4px; font-size: 0.875rem; }

/* was: style="margin-top:16px;text-decoration:none;display:flex;…" on the
   "Go to sign in" anchor wearing .auth-submit. .auth-submit sets margin-top:8px,
   so the 16px here must come later in the file — it does. */
.auth-sent-cta {
  margin-top: 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── §ED141: THE DESKTOP COMPOSITION ─────────────────────────────────────────
   Jake's report: "they are phone-shaped on desktop — the form column stays
   mobile-width, so a wide screen renders a tall narrow strip."

   Disk before this block: exactly ONE media query governed these pages,
   `@media (max-width: 480px)`, which makes the card full-bleed on phones.
   Everything above 480px got the SAME 430px card with the same 30/26px
   padding — a phone at 1440px, sitting in a near-black void (see the
   .auth-page root-cause note at the head of this file; the void was most of
   what read as "phone-shaped", because a card cannot look composed on a page
   that looks like nothing).

   INHERITED, NOT INVENTED. The landing is itself a centred column — a page
   that centres a column is not the defect; a page that centres a PHONE is.
   So this block moves the auth column onto the landing's own measures and
   rhythm and stops there:
     .lv2-sub   max-width: 520px  -> the card's desktop measure
     .lv2-page  padding: 0 24px.. -> top-aligned, --sp-6 gutters
     --sp-*, --r-2xl              -> the shared spacing/radius scale

   LAYOUT ONLY, the §ED140 discipline: this block declares no font-size,
   font-family, font-weight, letter-spacing or line-height, and no colour
   literal. Section F of scripts/test-editorial-system.js greps it and fails
   on any of them. The auth heading therefore still resolves at .auth-heading's
   38px on a 520px desktop card, against the landing hero's 40-64px .lv2-h1 —
   that gap is a TYPE ruling (does the auth top inherit .lv2-h1?), and this
   session refuses to settle it inside a layout fix. Left for Jake.

   Breakpoint is 768px, not 481px: 481-767px is tablet/landscape-phone, where
   the 430px card at 24px padding is still the right object. Nothing below
   768px changes. ────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  /* Top-aligned, like .lv2-page. Vertical centring is a phone conceit and it
     is also a bug at this size: a flex item taller than its container (which
     register.html is, at short desktop viewport heights) overflows EQUALLY in
     both directions under align-items:center, and the overflow above the
     container is unscrollable — the top of the form becomes unreachable. */
  .auth-page {
    align-items: flex-start;
    padding: calc(var(--sp-16) + var(--safe-top)) var(--sp-6) var(--sp-20);
  }

  /* 430px -> 520px, .lv2-sub's measure, with the interior air the landing
     gives a column at this width. The form controls inside fill the card, so
     there is no empty gutter and no control changes what it does or where it
     sits relative to its neighbours — only the box around them grows. */
  .auth-inner {
    max-width: 520px;
    border-radius: var(--r-2xl);
    padding: var(--sp-12) var(--sp-10) var(--sp-10);
  }

  /* The lime glow was sized to the 430px card; re-seat it on the wider one so
     it stays a bleed from the card's top edge rather than a hot spot off-centre
     of it. Same gradient, same token, same blur — geometry only. */
  .auth-inner::before {
    width: 520px;
    height: 520px;
    top: -170px;
  }
}