/* Pakstoor :: login-refine.css :: v1.2-000005 :: 2026-10-18 */
/* Login page visual refinement. Loaded by login.html ONLY, after every other login sheet, so nothing here can reach
   another page. Layout (section 1 and the lip size) is shared by both themes; every colour, type and surface rule is
   scoped to html[data-theme="light"] body.auth-page-login, so dark mode keeps its own look.
   Second iteration (owner brief 2026-10-09): premium consumer marketplace, not an enterprise portal. Palette stays
   warm near-black, white, warm neutrals and Pakstoor gold; NO navy, no blue greys. White is the main light surface;
   warmth comes from stone neutrals, warm charcoal type and restrained gold, not from beige everywhere. */

html[data-theme="light"] body.auth-page-login {
  --lr-bg: #FFFFFF;          /* white is the primary light surface */
  --lr-surface: #FFFFFF;
  --lr-stone: #F7F6F3;       /* very soft stone: notice, quiet fills */
  --lr-sunken: #F2F0EC;
  --lr-ink: #1E1B18;         /* warm charcoal */
  --lr-ink-2: #3B3733;
  --lr-muted: #67615A;
  --lr-faint: #928B83;
  --lr-line: #ECE8E2;
  --lr-line-2: #DCD7CF;
  --lr-gold: #D9A625;
  --lr-gold-hover: #C99820;
  --lr-gold-ink: #8A6410;    /* gold for small text on white (AA) */
  --lr-gold-ring: rgba(217, 166, 37, 0.20);
  --lr-danger: #B3402F;
  --lr-sans: var(--font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  background: var(--lr-bg) !important;
}

/* ════════════════════════════════════════════════════════════
   1. LAYOUT (both themes): the brand panel keeps a strong
      presence but no longer takes half the screen.
   ──────────────────────────────────────────────────────────── */

@media (min-width: 981px) {
  html body.auth-page-login .auth-wrap {
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr) !important;
  }
}

/* Side by side: form | hairline | steps. */
@media (min-width: 1360px) {
  html body.auth-page-login .auth-body-grid {
    display: grid !important;
    grid-template-columns: minmax(320px, 380px) 1px minmax(250px, 300px) !important;
    column-gap: clamp(28px, 3.2vw, 56px) !important;
    justify-content: center !important;
    max-width: 880px !important;
    padding: 0 0 32px !important;
    align-items: start !important;
  }
  html body.auth-page-login .auth-body-grid::before {
    content: '' !important;
    display: block !important;
    grid-column: 2; grid-row: 1 / -1;
    width: 1px; align-self: stretch;
  }
  html body.auth-page-login .auth-form-container { grid-column: 1; max-width: 380px !important; }
  html body.auth-page-login .auth-trust-ladder { grid-column: 3; display: block !important; padding-top: 6px !important; }
}

/* Narrower screens: one column, form first, the steps follow under a quiet rule. */
@media (max-width: 1359px) {
  html body.auth-page-login .auth-body-grid {
    display: flex !important;
    flex-direction: column !important;
    max-width: 420px !important;
    padding: 0 0 28px !important;
    gap: 32px !important;
  }
  html body.auth-page-login .auth-body-grid::before { display: none !important; }
  html body.auth-page-login .auth-form-container {
    max-width: none !important;
    padding-bottom: 32px !important;
  }
}

/* Gold success seal (login.css "GOLD WAX SEAL"): it sits ON the line between the panels (owner 2026-05-18) and was
   pinned at 51.22%, the old 1.05fr / 1fr split. With the 0.84fr / 1fr split above that line is at 0.84 / 1.84 of the
   width. Stacked (phones, tablets): the centre of the screen. */
@media (min-width: 981px) {
  html body.auth-page-login .auth-toast.is-success.is-visible,
  html body.auth-page-login .auth-toast.is-success.show { left: calc(100% * 0.84 / 1.84) !important; }
}
@media (max-width: 980px) {
  html body.auth-page-login .auth-toast.is-success.is-visible,
  html body.auth-page-login .auth-toast.is-success.show { left: 50% !important; }
}
/* light-mode.css paints every .auth-toast white (!important), which turned the gold seal into a white hexagon in
   light mode. Give the success seal its gold back (same layers as login.css); error toasts keep the light look. */
html[data-theme="light"] body.auth-page-login .auth-toast.is-success.is-visible,
html[data-theme="light"] body.auth-page-login .auth-toast.is-success.show {
  background:
    radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 72% 82%, rgba(141, 103, 17, 0.60) 0%, rgba(141, 103, 17, 0) 34%),
    radial-gradient(circle at 36% 28%, #FAEC9A 0%, #F0C64D 24%, #D9A625 50%, #B88417 78%, #8D6711 100%) !important;
  border-color: transparent !important;
  color: #1B1815 !important;
}

/* Same layout in both themes (owner 2026-10-09); only the line colour differs. */
@media (min-width: 1360px) {
  html[data-theme="light"] body.auth-page-login .auth-body-grid::before {
    background: linear-gradient(180deg, transparent 0%, var(--lr-line) 12%, var(--lr-line) 88%, transparent 100%) !important;
  }
  html:not([data-theme="light"]) body.auth-page-login .auth-body-grid::before {
    background: linear-gradient(180deg, transparent 0%, rgba(217, 166, 37, 0.16) 14%, rgba(217, 166, 37, 0.26) 50%, rgba(217, 166, 37, 0.16) 86%, transparent 100%) !important;
  }
}
@media (max-width: 1359px) {
  html[data-theme="light"] body.auth-page-login .auth-form-container { border-bottom: 1px solid var(--lr-line) !important; }
  html:not([data-theme="light"]) body.auth-page-login .auth-form-container { border-bottom: 1px solid rgba(217, 166, 37, 0.18) !important; }
}

/* ════════════════════════════════════════════════════════════
   2. BRAND PANEL (light mode): the same warm near-black, logo,
      emblem and headline, made elegant rather than heavy. One
      soft gold light behind the emblem; no particles, scanlines
      or beam. Content sits as one composed group.
   ──────────────────────────────────────────────────────────── */

html[data-theme="light"] body.auth-page-login .auth-brand {
  background:
    radial-gradient(120% 80% at 30% 15%, #1A150F 0%, #0F0D0B 52%, #0B0A09 100%) !important;
}
html[data-theme="light"] body.auth-page-login .auth-brand .brand-grid,
html[data-theme="light"] body.auth-page-login .auth-brand .brand-beam { display: none !important; }
/* 2026-10-18 (owner: "the sparks that rise up over the left side ... do not work in light mode"): the rising sparks
   (.pks-dust, login-magic.js) now show in light mode too, exactly as in dark mode: the brand panel is the same warm
   near-black in both themes. Reduced motion and the phone / tablet rule are handled in login.css. */
/* warm ambient light behind the emblem: wide and soft, never a glow ring */
html[data-theme="light"] body.auth-page-login .auth-brand .brand-glow {
  width: 680px !important; height: 680px !important;
  top: 40% !important;
  opacity: 1 !important;
  background: radial-gradient(circle, rgba(222, 172, 52, 0.15) 0%, rgba(222, 172, 52, 0.06) 34%, rgba(222, 172, 52, 0) 66%) !important;
}

/* one composed group: emblem, headline and text centred between the logo and the trust line */
html[data-theme="light"] body.auth-page-login .auth-brand .brand-hero {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
html[data-theme="light"] body.auth-page-login .brand-hex-canvas {
  width: clamp(220px, 70%, 330px) !important;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.45)) !important;
}
html[data-theme="light"] body.auth-page-login .brand-image-shadow { opacity: 0.7 !important; }

html[data-theme="light"] body.auth-page-login .brand-eyebrow {
  font-family: var(--lr-sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  color: #D8B04E !important;
}
html[data-theme="light"] body.auth-page-login .brand-eyebrow-text { letter-spacing: 0.16em !important; }
@media (max-width: 600px) {
  html[data-theme="light"] body.auth-page-login .brand-eyebrow { font-size: 10px !important; }
  html[data-theme="light"] body.auth-page-login .brand-eyebrow-text { letter-spacing: 0.08em !important; white-space: nowrap; }
}
/* big screens: the emblem fills its space instead of floating small in a wide panel */
@media (min-width: 1600px) and (min-height: 960px) {
  html[data-theme="light"] body.auth-page-login .brand-hex-canvas { width: clamp(300px, 72%, 380px) !important; }
}

html[data-theme="light"] body.auth-page-login .brand-slogan { margin: 22px 0 18px !important; }
html[data-theme="light"] body.auth-page-login .brand-slogan-line-1,
html[data-theme="light"] body.auth-page-login .brand-slogan-line-2 { text-shadow: none !important; color: #F7F3EC !important; }
html[data-theme="light"] body.auth-page-login .brand-slogan-line-2 em { color: #E0AE36 !important; }
html[data-theme="light"] body.auth-page-login .brand-slogan-line-2 em::after { height: 4px !important; border-radius: 2px; background: #E0AE36 !important; }

html[data-theme="light"] body.auth-page-login .brand-sub {
  font-family: var(--lr-sans) !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  color: rgba(240, 234, 224, 0.70) !important;
  max-width: 440px !important;
}

/* trust indicators: one refined line, gold ticks, no box, no monospace capitals */
html[data-theme="light"] body.auth-page-login .brand-trust {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 236, 200, 0.09) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 20px 0 0 !important;
  gap: 10px 24px !important;
}
html[data-theme="light"] body.auth-page-login .brand-trust .trust-item {
  font-family: var(--lr-sans) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(240, 234, 224, 0.80) !important;
}
html[data-theme="light"] body.auth-page-login .brand-trust .trust-icon { color: #E0AE36 !important; }

/* ════════════════════════════════════════════════════════════
   3. FORM PANEL SURFACE: white, with a whisper of stone low down
   ──────────────────────────────────────────────────────────── */

html[data-theme="light"] body.auth-page-login .auth-form-wrap {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #F9F8F5 100%) !important;
}
/* The hexagon texture and the load pulse read as tech decoration on a light page. */
html[data-theme="light"] body.auth-page-login .auth-form-wrap > svg.pks-bg-hex,
html[data-theme="light"] body.auth-page-login .auth-pulse { display: none !important; }

/* Header row: Back, theme switch, EN / AF */
html[data-theme="light"] body.auth-page-login .auth-back,
html[data-theme="light"] body.auth-page-login .auth-lang-toggle button {
  font-family: var(--lr-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--lr-muted) !important;
}
html[data-theme="light"] body.auth-page-login .auth-lang-toggle button[aria-pressed="true"],
html[data-theme="light"] body.auth-page-login .auth-lang-toggle button.is-active { color: var(--lr-ink) !important; }
html[data-theme="light"] body.auth-page-login .auth-lang-sep { color: var(--lr-line-2) !important; }

/* Mobile brand strip (phones only) */
html[data-theme="light"] body.auth-page-login .auth-mobile-strip-slogan { color: var(--lr-ink) !important; }
html[data-theme="light"] body.auth-page-login .auth-mobile-strip-slogan em { color: var(--lr-gold-ink) !important; }

/* ════════════════════════════════════════════════════════════
   4. TABS: simple text tabs, a gold underline marks the choice
   ──────────────────────────────────────────────────────────── */

html[data-theme="light"] body.auth-page-login .auth-tabs {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lr-line) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  gap: 0 !important;
  margin-bottom: 28px !important;
}
html[data-theme="light"] body.auth-page-login .auth-tab {
  font-family: var(--lr-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--lr-faint) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 46px !important;
  border-radius: 0 !important;
  transition: color 180ms ease !important;
}
html[data-theme="light"] body.auth-page-login .auth-tab:hover { color: var(--lr-ink-2) !important; }
html[data-theme="light"] body.auth-page-login .auth-tab.is-active { color: var(--lr-ink) !important; }
html[data-theme="light"] body.auth-page-login .auth-tab:focus-visible {
  outline: 2px solid var(--lr-gold) !important; outline-offset: -2px !important; border-radius: 8px !important;
}
html[data-theme="light"] body.auth-page-login .auth-tabs .tab-slider {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: inset 0 -2px 0 var(--lr-gold) !important;
  top: 0 !important; bottom: -1px !important; height: auto !important;
}

/* ════════════════════════════════════════════════════════════
   5. HEADING, LABELS, INPUTS
   ──────────────────────────────────────────────────────────── */

html[data-theme="light"] body.auth-page-login .auth-heading { margin-bottom: 24px !important; }
html[data-theme="light"] body.auth-page-login .auth-heading h2 {
  font-family: var(--lr-sans) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--lr-ink) !important;
  margin: 0 0 6px !important;
}
html[data-theme="light"] body.auth-page-login .auth-heading p {
  font-family: var(--lr-sans) !important;
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  color: var(--lr-muted) !important;
}

html[data-theme="light"] body.auth-page-login .form-group { margin-bottom: 18px !important; }
html[data-theme="light"] body.auth-page-login .form-group label,
html[data-theme="light"] body.auth-page-login .dob-label {
  font-family: var(--lr-sans) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--lr-ink-2) !important;
  margin-bottom: 8px !important;
}
html[data-theme="light"] body.auth-page-login .label-link,
html[data-theme="light"] body.auth-page-login .label-link--floating {
  font-family: var(--lr-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--lr-gold-ink) !important;
}
html[data-theme="light"] body.auth-page-login .label-link:hover { color: var(--lr-ink) !important; text-decoration: underline; text-underline-offset: 3px; }

html[data-theme="light"] body.auth-page-login .form-group input[type="text"],
html[data-theme="light"] body.auth-page-login .form-group input[type="email"],
html[data-theme="light"] body.auth-page-login .form-group input[type="password"],
html[data-theme="light"] body.auth-page-login .form-group input[type="tel"],
html[data-theme="light"] body.auth-page-login .form-group input[type="date"],
html[data-theme="light"] body.auth-page-login .form-group input[inputmode],
html[data-theme="light"] body.auth-page-login .dob-select,
html[data-theme="light"] body.auth-page-login .phone-input {
  font-family: var(--lr-sans) !important;
  font-size: 15px !important;
  color: var(--lr-ink) !important;
  background: var(--lr-surface) !important;
  border: 1px solid var(--lr-line-2) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.04) !important;
  min-height: 50px !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important;
}
/* phone-input is a wrapper: its inner input must not draw a second box */
html[data-theme="light"] body.auth-page-login .phone-input input {
  border: 0 !important; box-shadow: none !important; background: transparent !important; min-height: 48px !important;
}
html[data-theme="light"] body.auth-page-login .form-group input::placeholder { color: #A39C93 !important; opacity: 1; }
html[data-theme="light"] body.auth-page-login .form-group input:hover,
html[data-theme="light"] body.auth-page-login .dob-select:hover { border-color: #C9C2B8 !important; }
html[data-theme="light"] body.auth-page-login .form-group input:focus,
html[data-theme="light"] body.auth-page-login .dob-select:focus,
html[data-theme="light"] body.auth-page-login .phone-input:focus-within {
  outline: none !important;
  border-color: var(--lr-gold) !important;
  box-shadow: 0 0 0 4px var(--lr-gold-ring) !important;
}
html[data-theme="light"] body.auth-page-login .phone-input input:focus { box-shadow: none !important; }
/* Errors stay clearly visible (these come after the focus rules on purpose) */
html[data-theme="light"] body.auth-page-login .form-group input.is-error,
html[data-theme="light"] body.auth-page-login .dob-select.is-error {
  border-color: var(--lr-danger) !important;
  box-shadow: 0 0 0 4px rgba(179, 64, 47, 0.12) !important;
}
html[data-theme="light"] body.auth-page-login .form-error {
  font-family: var(--lr-sans) !important;
  font-size: 13px !important;
  color: var(--lr-danger) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html[data-theme="light"] body.auth-page-login .password-toggle { color: var(--lr-faint) !important; }
html[data-theme="light"] body.auth-page-login .password-toggle:hover { color: var(--lr-ink) !important; }
html[data-theme="light"] body.auth-page-login .password-hint {
  font-family: var(--lr-sans) !important; font-size: 12.5px !important; color: var(--lr-faint) !important;
  letter-spacing: 0 !important; text-transform: none !important;
}

/* ════════════════════════════════════════════════════════════
   6. BUTTONS: one gold action, calm secondary options
   ──────────────────────────────────────────────────────────── */

html[data-theme="light"] body.auth-page-login .btn-submit {
  font-family: var(--lr-sans) !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #1E1B18 !important;
  background: linear-gradient(180deg, #E3B43A 0%, #D8A425 100%) !important;
  border: 1px solid #CB9A20 !important;
  border-radius: 12px !important;
  min-height: 50px !important;
  margin-top: 6px !important;
  box-shadow: 0 10px 22px -12px rgba(150, 105, 15, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  filter: none !important;
  text-shadow: none !important;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}
html[data-theme="light"] body.auth-page-login .btn-submit::before { display: none !important; }
html[data-theme="light"] body.auth-page-login .btn-submit:hover {
  background: linear-gradient(180deg, #DDAC2E 0%, #CF9B1E 100%) !important;
  box-shadow: 0 14px 26px -12px rgba(150, 105, 15, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  transform: translateY(-1px) !important;
}
html[data-theme="light"] body.auth-page-login .btn-submit:active { transform: translateY(0) !important; }
html[data-theme="light"] body.auth-page-login .btn-submit:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--lr-surface), 0 0 0 5px var(--lr-gold-hover) !important;
}
html[data-theme="light"] body.auth-page-login .btn-submit.is-loading { color: transparent !important; }

html[data-theme="light"] body.auth-page-login .auth-divider { margin: 22px 0 !important; }
html[data-theme="light"] body.auth-page-login .auth-divider::before,
html[data-theme="light"] body.auth-page-login .auth-divider::after { background: var(--lr-line) !important; }
html[data-theme="light"] body.auth-page-login .auth-divider span {
  font-family: var(--lr-sans) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--lr-faint) !important;
  background: transparent !important;
}

html[data-theme="light"] body.auth-page-login .btn-social {
  font-family: var(--lr-sans) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--lr-ink) !important;
  background: var(--lr-surface) !important;
  border: 1px solid var(--lr-line-2) !important;
  border-radius: 12px !important;
  min-height: 48px !important;
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.04) !important;
}
html[data-theme="light"] body.auth-page-login .btn-social:hover {
  background: #FBFAF8 !important;
  border-color: #C9C2B8 !important;
}
html[data-theme="light"] body.auth-page-login .btn-social:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px var(--lr-gold-ring) !important;
  border-color: var(--lr-gold) !important;
}
html[data-theme="light"] body.auth-page-login .pks-passkey-btn svg { color: var(--lr-gold-ink) !important; }
html[data-theme="light"] body.auth-page-login .social-buttons { gap: 10px !important; }
html[data-theme="light"] body.auth-page-login .pks-passkey-btn { margin-bottom: 10px !important; }

html[data-theme="light"] body.auth-page-login .auth-switch {
  font-family: var(--lr-sans) !important;
  font-size: 14px !important;
  color: var(--lr-muted) !important;
  letter-spacing: 0 !important;
}
html[data-theme="light"] body.auth-page-login .auth-switch:first-of-type { margin-top: 22px !important; }
html[data-theme="light"] body.auth-page-login .auth-switch a {
  color: var(--lr-gold-ink) !important;
  font-weight: 600 !important;
}
html[data-theme="light"] body.auth-page-login .auth-switch a:hover { color: var(--lr-ink) !important; text-decoration: underline; text-underline-offset: 3px; }

/* Signup wizard progress */
html[data-theme="light"] body.auth-page-login .signup-progress-track { background: var(--lr-sunken) !important; box-shadow: none !important; }
html[data-theme="light"] body.auth-page-login .signup-progress-fill { background: var(--lr-gold) !important; box-shadow: none !important; }
html[data-theme="light"] body.auth-page-login .signup-progress-label {
  font-family: var(--lr-sans) !important; font-size: 13px !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--lr-muted) !important;
}
html[data-theme="light"] body.auth-page-login .signup-progress-label strong { color: var(--lr-ink) !important; }

/* ════════════════════════════════════════════════════════════
   7. HOW WE PROTECT YOU: a calm consumer journey, not a process
      diagram. Same seven steps; small gold numbers, no circles,
      no connector, more air.
   ──────────────────────────────────────────────────────────── */

html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-eyebrow {
  font-family: var(--lr-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  color: var(--lr-ink) !important;
  margin-bottom: 22px !important;
}
html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-dot {
  background: var(--lr-gold) !important; box-shadow: none !important; animation: none !important;
}
html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-step {
  grid-template-columns: 26px 1fr !important;
  column-gap: 10px !important;
  padding-bottom: 18px !important;
}
html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-step:last-child { padding-bottom: 0 !important; }
html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-step:not(:last-child)::after,
html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-marker::after,
html[data-theme="light"] body.auth-page-login .auth-trust-ladder .pks-ladder-dot { display: none !important; }
html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-marker {
  width: 26px !important;
  height: 20px !important;
  clip-path: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-marker::before {
  font-family: var(--lr-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: 0.02em !important;
  color: var(--lr-gold-ink) !important;
}
html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-step:hover .ladder-marker { box-shadow: none !important; transform: none !important; }
html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-title {
  font-family: var(--lr-sans) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--lr-ink) !important;
  margin: 0 0 2px !important;
}
html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-desc {
  font-family: var(--lr-sans) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--lr-muted) !important;
  letter-spacing: 0 !important;
}

/* Desktop is one screen (no scroll): up to 1000px tall the form keeps its look but closes up, so Log In, passkey and
   Google stay above the bottom edge. */
@media (min-width: 981px) and (max-height: 1000px) {
  html[data-theme="light"] body.auth-page-login .auth-tabs { margin-bottom: 20px !important; }
  html[data-theme="light"] body.auth-page-login .auth-tab { min-height: 42px !important; }
  html[data-theme="light"] body.auth-page-login .auth-heading { margin-bottom: 16px !important; }
  html[data-theme="light"] body.auth-page-login .auth-heading h2 { font-size: 26px !important; margin-bottom: 4px !important; }
  html[data-theme="light"] body.auth-page-login .form-group { margin-bottom: 14px !important; }
  html[data-theme="light"] body.auth-page-login .form-group label { margin-bottom: 6px !important; }
  html[data-theme="light"] body.auth-page-login .form-group input[type="email"],
  html[data-theme="light"] body.auth-page-login .form-group input[type="password"] { min-height: 46px !important; }
  html[data-theme="light"] body.auth-page-login .btn-submit { min-height: 48px !important; margin-top: 2px !important; }
  html[data-theme="light"] body.auth-page-login .btn-social { min-height: 44px !important; }
  html[data-theme="light"] body.auth-page-login .auth-divider { margin: 16px 0 !important; }
  html[data-theme="light"] body.auth-page-login .auth-switch:first-of-type { margin-top: 16px !important; }
}

/* Short laptop screens: the page is one screen on desktop, so the steps tighten up to fit. */
@media (min-width: 981px) and (max-height: 820px) {
  html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-eyebrow { margin-bottom: 14px !important; }
  html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-step { padding-bottom: 11px !important; }
  html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-title { font-size: 14px !important; }
  html[data-theme="light"] body.auth-page-login .auth-trust-ladder .ladder-desc { font-size: 13px !important; line-height: 1.45 !important; }
  html[data-theme="light"] body.auth-page-login .auth-heading { margin-bottom: 18px !important; }
  html[data-theme="light"] body.auth-page-login .auth-tabs { margin-bottom: 20px !important; }
}

/* ════════════════════════════════════════════════════════════
   8. FOOTER
   ──────────────────────────────────────────────────────────── */

html[data-theme="light"] body.auth-page-login .auth-footer,
html[data-theme="light"] body.auth-page-login .auth-footer a,
html[data-theme="light"] body.auth-page-login .auth-copyright {
  font-family: var(--lr-sans) !important;
  font-size: 12.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--lr-faint) !important;
}
html[data-theme="light"] body.auth-page-login .auth-footer a:hover { color: var(--lr-ink) !important; }

/* ════════════════════════════════════════════════════════════
   9. PRE-LAUNCH LIP (pks-login-banner): same message, place and
      button. Light mode: its own light warm grey, slim, thin
      border, barely any shadow, so it reads as part of the page
      rather than a floating notification.
   ──────────────────────────────────────────────────────────── */

html[data-theme="light"] .pks-lb {
  padding: 9px 18px 11px !important;
  gap: 6px 18px !important;
  border-color: #E1DDD6 !important;
  background: #EFEDEA !important;
  color: #1E1B18 !important;
  box-shadow: 0 6px 18px -14px rgba(30, 24, 18, 0.30) !important;
}
/* curved shoulders take the lip's colour */
html[data-theme="light"] .pks-lb::before { background: radial-gradient(circle at 0 100%, transparent 21px, #EFEDEA 22px) !important; }
html[data-theme="light"] .pks-lb::after { background: radial-gradient(circle at 100% 100%, transparent 21px, #EFEDEA 22px) !important; }
@media (max-width: 600px) {
  html[data-theme="light"] .pks-lb::before { background: radial-gradient(circle at 0 100%, transparent 15px, #EFEDEA 16px) !important; }
  html[data-theme="light"] .pks-lb::after { background: radial-gradient(circle at 100% 100%, transparent 15px, #EFEDEA 16px) !important; }
}
html[data-theme="light"] .pks-lb-seam { opacity: 0.4; animation: none !important; background-position: 0 0 !important; }
html[data-theme="light"] .pks-lb-main { gap: 4px !important; }
html[data-theme="light"] .pks-lb-eyebrow {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: #8A6410 !important;
}
html[data-theme="light"] .pks-lb-dot { animation: none !important; width: 6px !important; height: 6px !important; background: #D9A625 !important; }
html[data-theme="light"] .pks-lb-title {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.3 !important;
  color: #1E1B18 !important;
}
html[data-theme="light"] .pks-lb-perk {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  gap: 8px !important;
}
html[data-theme="light"] .pks-lb-perk-icon {
  width: 20px !important; height: 20px !important; border-radius: 6px !important;
  background: rgba(217, 166, 37, 0.18) !important;
  color: #8A6410 !important;
}
html[data-theme="light"] .pks-lb-perk-icon svg { width: 11px !important; height: 11px !important; }
html[data-theme="light"] .pks-lb-perk-text { font-size: 12.5px !important; font-weight: 500 !important; color: #4A4540 !important; }
html[data-theme="light"] .pks-lb-cta {
  min-height: 36px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 600px) {
  html[data-theme="light"] .pks-lb-cta { min-height: 44px !important; }
}

@media (min-width: 981px) {
  /* The seam sits at about 45.6% of the width; half the lip must stay right of the logo (about 280px). */
  html #pksLoginBanner.pks-lip-host { width: clamp(460px, calc(91.3vw - 560px), 740px) !important; }
  html .pks-lb { grid-template-columns: minmax(0, 1fr) auto !important; }
  html .pks-lb-main {
    grid-column: 1 / -1; flex-direction: row !important; align-items: center !important; flex-wrap: wrap; gap: 4px 12px !important;
  }
  /* "Est. 2026" sits where the lip hangs */
  html.pks-has-lip body.auth-page-login .brand-number { display: none !important; }
}

/* The welcome notice above the tabs: a soft stone surface, clearly apart from the controls below. */
html[data-theme="light"] body.auth-page-login .pks-lb-note {
  font-family: var(--lr-sans) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--lr-ink-2) !important;
  background: var(--lr-stone) !important;
  border: 1px solid #EFECE7 !important;
  border-left: 1px solid #EFECE7 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 30px !important;
}
html[data-theme="light"] body.auth-page-login .pks-lb-note-title { color: var(--lr-gold-ink) !important; }

/* ════════════════════════════════════════════════════════════
   10. PHONES AND TABLETS (stacked)
   ──────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  html[data-theme="light"] body.auth-page-login .auth-form-wrap { padding-left: 16px !important; padding-right: 16px !important; }
  html[data-theme="light"] body.auth-page-login .auth-body-grid { max-width: 440px !important; margin: 0 auto !important; }
  html[data-theme="light"] body.auth-page-login .brand-hex-canvas { width: clamp(170px, 46vw, 240px) !important; }
}
@media (max-width: 700px) {
  /* Phones: the second small slogan under the dark header steps aside so Log In arrives sooner. */
  html[data-theme="light"] body.auth-page-login .auth-mobile-strip { display: none !important; }
  html[data-theme="light"] body.auth-page-login .auth-body-grid { padding: 0 0 24px !important; border-radius: 0 !important; }
  html[data-theme="light"] body.auth-page-login .auth-heading h2 { font-size: 25px !important; }
  html[data-theme="light"] body.auth-page-login .brand-trust { gap: 8px 18px !important; }
}
@media (max-width: 640px) {
  /* 16px keeps iOS from zooming on focus */
  html[data-theme="light"] body.auth-page-login .form-group input[type="text"],
  html[data-theme="light"] body.auth-page-login .form-group input[type="email"],
  html[data-theme="light"] body.auth-page-login .form-group input[type="password"],
  html[data-theme="light"] body.auth-page-login .form-group input[type="tel"],
  html[data-theme="light"] body.auth-page-login .form-group input[type="date"],
  html[data-theme="light"] body.auth-page-login .dob-select,
  html[data-theme="light"] body.auth-page-login .phone-input input { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] body.auth-page-login .form-group input,
  html[data-theme="light"] body.auth-page-login .btn-social,
  html[data-theme="light"] body.auth-page-login .btn-submit { transition: none !important; }
  html[data-theme="light"] body.auth-page-login .btn-submit:hover { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════
   11. DARK MODE: same fonts, case, sizes, spacing and positions
       as light mode (owner 2026-10-09: "make dark modes font and
       case the same, positioning too"). Only colours differ:
       dark keeps its own surfaces (page #1B1815, fields #221F1C,
       borders #403B36, ink #F1EFED / #B4AEA8) and Pakstoor gold.
       Kept as its own block so the approved light rules above
       stay untouched; change a size here when you change it there.
   ──────────────────────────────────────────────────────────── */

/* Brand panel: Inter eyebrow and trust line, composed group, same emblem size */
html[data-theme="dark"] body.auth-page-login .auth-brand .brand-hero { margin-top: auto !important; margin-bottom: auto !important; }
html[data-theme="dark"] body.auth-page-login .brand-hex-canvas { width: clamp(220px, 70%, 330px) !important; }
html[data-theme="dark"] body.auth-page-login .brand-eyebrow {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 0.16em !important;
}
html[data-theme="dark"] body.auth-page-login .brand-eyebrow-text { letter-spacing: 0.16em !important; }
html[data-theme="dark"] body.auth-page-login .brand-slogan { margin: 22px 0 18px !important; }
html[data-theme="dark"] body.auth-page-login .brand-sub {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 15.5px !important; line-height: 1.65 !important; max-width: 440px !important;
}
html[data-theme="dark"] body.auth-page-login .brand-trust {
  background: transparent !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 20px 0 0 !important; gap: 10px 24px !important;
}
html[data-theme="dark"] body.auth-page-login .brand-trust .trust-item {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: rgba(241, 239, 237, 0.82) !important;
}
html[data-theme="dark"] body.auth-page-login .brand-trust .trust-icon { color: #D9A625 !important; }
@media (max-width: 600px) {
  html[data-theme="dark"] body.auth-page-login .brand-eyebrow { font-size: 10px !important; }
  html[data-theme="dark"] body.auth-page-login .brand-eyebrow-text { letter-spacing: 0.08em !important; white-space: nowrap; }
}
@media (min-width: 1600px) and (min-height: 960px) {
  html[data-theme="dark"] body.auth-page-login .brand-hex-canvas { width: clamp(300px, 72%, 380px) !important; }
}

/* Header row */
html[data-theme="dark"] body.auth-page-login .auth-back,
html[data-theme="dark"] body.auth-page-login .auth-lang-toggle button {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.02em !important;
  color: #99928B !important;
}
html[data-theme="dark"] body.auth-page-login .auth-lang-toggle button.is-active { color: #F1EFED !important; }

/* Tabs: text tabs, gold underline */
html[data-theme="dark"] body.auth-page-login .auth-tabs {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid #34302C !important;
  border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; gap: 0 !important; margin-bottom: 28px !important;
}
html[data-theme="dark"] body.auth-page-login .auth-tab {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: #99928B !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
  min-height: 46px !important; border-radius: 0 !important;
}
html[data-theme="dark"] body.auth-page-login .auth-tab:hover { color: #C9D0D8 !important; }
html[data-theme="dark"] body.auth-page-login .auth-tab.is-active { color: #F1EFED !important; }
html[data-theme="dark"] body.auth-page-login .auth-tab:focus-visible {
  outline: 2px solid #D9A625 !important; outline-offset: -2px !important; border-radius: 8px !important;
}
html[data-theme="dark"] body.auth-page-login .auth-tabs .tab-slider {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: inset 0 -2px 0 #D9A625 !important; top: 0 !important; bottom: -1px !important; height: auto !important;
}

/* Heading, labels, fields */
html[data-theme="dark"] body.auth-page-login .auth-heading { margin-bottom: 24px !important; }
html[data-theme="dark"] body.auth-page-login .auth-heading h2 {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 28px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important;
  text-transform: none !important; color: #F1EFED !important; margin: 0 0 6px !important;
}
html[data-theme="dark"] body.auth-page-login .auth-heading p {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 15.5px !important; line-height: 1.5 !important; color: #B4AEA8 !important;
}
html[data-theme="dark"] body.auth-page-login .form-group { margin-bottom: 18px !important; }
html[data-theme="dark"] body.auth-page-login .form-group label,
html[data-theme="dark"] body.auth-page-login .dob-label {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: #C9D0D8 !important; margin-bottom: 8px !important;
}
html[data-theme="dark"] body.auth-page-login .label-link,
html[data-theme="dark"] body.auth-page-login .label-link--floating {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: #D9A625 !important;
}
html[data-theme="dark"] body.auth-page-login .label-link:hover { color: #F1EFED !important; text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="dark"] body.auth-page-login .form-group input[type="text"],
html[data-theme="dark"] body.auth-page-login .form-group input[type="email"],
html[data-theme="dark"] body.auth-page-login .form-group input[type="password"],
html[data-theme="dark"] body.auth-page-login .form-group input[type="tel"],
html[data-theme="dark"] body.auth-page-login .form-group input[type="date"],
html[data-theme="dark"] body.auth-page-login .form-group input[inputmode],
html[data-theme="dark"] body.auth-page-login .dob-select,
html[data-theme="dark"] body.auth-page-login .phone-input {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 15px !important; color: #F1EFED !important;
  background: #221F1C !important; border: 1px solid #403B36 !important; border-radius: 12px !important;
  box-shadow: none !important; min-height: 50px !important;
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
}
html[data-theme="dark"] body.auth-page-login .phone-input input {
  border: 0 !important; box-shadow: none !important; background: transparent !important; min-height: 48px !important;
}
html[data-theme="dark"] body.auth-page-login .form-group input:hover,
html[data-theme="dark"] body.auth-page-login .dob-select:hover { border-color: #56504A !important; }
html[data-theme="dark"] body.auth-page-login .form-group input:focus,
html[data-theme="dark"] body.auth-page-login .dob-select:focus,
html[data-theme="dark"] body.auth-page-login .phone-input:focus-within {
  outline: none !important; border-color: #D9A625 !important; box-shadow: 0 0 0 4px rgba(217, 166, 37, 0.22) !important;
}
html[data-theme="dark"] body.auth-page-login .phone-input input:focus { box-shadow: none !important; }
html[data-theme="dark"] body.auth-page-login .form-group input.is-error,
html[data-theme="dark"] body.auth-page-login .dob-select.is-error {
  border-color: #E06B5C !important; box-shadow: 0 0 0 4px rgba(224, 107, 92, 0.16) !important;
}
html[data-theme="dark"] body.auth-page-login .form-error,
html[data-theme="dark"] body.auth-page-login .password-hint {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important; letter-spacing: 0 !important; text-transform: none !important;
}
html[data-theme="dark"] body.auth-page-login .form-error { font-size: 13px !important; }
html[data-theme="dark"] body.auth-page-login .password-hint { font-size: 12.5px !important; color: #99928B !important; }

/* Buttons */
html[data-theme="dark"] body.auth-page-login .btn-submit {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 15.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: #1B1815 !important; background: linear-gradient(180deg, #E3B43A 0%, #D8A425 100%) !important;
  border: 1px solid #CB9A20 !important; border-radius: 12px !important; min-height: 50px !important; margin-top: 6px !important;
  box-shadow: 0 10px 24px -12px rgba(217, 166, 37, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  filter: none !important; text-shadow: none !important;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}
html[data-theme="dark"] body.auth-page-login .btn-submit::before { display: none !important; }
html[data-theme="dark"] body.auth-page-login .btn-submit:hover {
  background: linear-gradient(180deg, #ECC052 0%, #DDAA2C 100%) !important;
  box-shadow: 0 14px 28px -12px rgba(217, 166, 37, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px) !important;
}
html[data-theme="dark"] body.auth-page-login .btn-submit:active { transform: translateY(0) !important; }
html[data-theme="dark"] body.auth-page-login .btn-submit:focus-visible {
  outline: none !important; box-shadow: 0 0 0 3px #1B1815, 0 0 0 5px #D9A625 !important;
}
html[data-theme="dark"] body.auth-page-login .btn-submit.is-loading { color: transparent !important; }
html[data-theme="dark"] body.auth-page-login .auth-divider { margin: 22px 0 !important; }
html[data-theme="dark"] body.auth-page-login .auth-divider span {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; color: #99928B !important;
}
html[data-theme="dark"] body.auth-page-login .btn-social {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: #F1EFED !important; border-radius: 12px !important; min-height: 48px !important;
}
html[data-theme="dark"] body.auth-page-login .sso-google-btn { background: #221F1C !important; border: 1px solid #403B36 !important; }
html[data-theme="dark"] body.auth-page-login .sso-google-btn:hover { background: #292521 !important; border-color: #56504A !important; }
html[data-theme="dark"] body.auth-page-login .btn-social:focus-visible {
  outline: none !important; box-shadow: 0 0 0 4px rgba(217, 166, 37, 0.22) !important; border-color: #D9A625 !important;
}
html[data-theme="dark"] body.auth-page-login .social-buttons { gap: 10px !important; }
html[data-theme="dark"] body.auth-page-login .pks-passkey-btn { margin-bottom: 10px !important; }
html[data-theme="dark"] body.auth-page-login .auth-switch {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 14px !important; letter-spacing: 0 !important; color: #B4AEA8 !important;
}
html[data-theme="dark"] body.auth-page-login .auth-switch:first-of-type { margin-top: 22px !important; }
html[data-theme="dark"] body.auth-page-login .auth-switch a { color: #D9A625 !important; font-weight: 600 !important; }
html[data-theme="dark"] body.auth-page-login .auth-switch a:hover { color: #F1EFED !important; text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="dark"] body.auth-page-login .signup-progress-label {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; color: #B4AEA8 !important;
}
html[data-theme="dark"] body.auth-page-login .signup-progress-label strong { color: #F1EFED !important; }

/* How we protect you: same journey layout, gold numbers */
html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-eyebrow {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.005em !important; text-transform: none !important;
  color: #F1EFED !important; margin-bottom: 22px !important;
}
html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-dot { background: #D9A625 !important; box-shadow: none !important; animation: none !important; }
html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-step {
  grid-template-columns: 26px 1fr !important; column-gap: 10px !important; padding-bottom: 18px !important;
}
html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-step:last-child { padding-bottom: 0 !important; }
html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-step:not(:last-child)::after,
html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-marker::after,
html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .pks-ladder-dot { display: none !important; }
html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-marker {
  width: 26px !important; height: 20px !important; clip-path: none !important; border-radius: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important;
  justify-content: flex-start !important; align-items: flex-start !important;
}
html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-marker::before {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 12px !important; font-weight: 600 !important; line-height: 20px !important; letter-spacing: 0.02em !important;
  color: #D9A625 !important;
}
html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-step:hover .ladder-marker { box-shadow: none !important; transform: none !important; }
html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-title {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 14.5px !important; font-weight: 600 !important; line-height: 20px !important; letter-spacing: 0 !important;
  text-transform: none !important; color: #F1EFED !important; margin: 0 0 2px !important;
}
html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-desc {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 13.5px !important; line-height: 1.5 !important; letter-spacing: 0 !important; color: #B4AEA8 !important;
}

/* Footer */
html[data-theme="dark"] body.auth-page-login .auth-footer,
html[data-theme="dark"] body.auth-page-login .auth-footer a,
html[data-theme="dark"] body.auth-page-login .auth-copyright {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; color: #99928B !important;
}
html[data-theme="dark"] body.auth-page-login .auth-footer a:hover { color: #F1EFED !important; }

/* Launch lip: same slim shape and type as light, dark surface */
html[data-theme="dark"] .pks-lb {
  padding: 9px 18px 11px !important; gap: 6px 18px !important;
  border-color: rgba(217, 166, 37, 0.30) !important;
  background: #181512 !important;
  box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.7) !important;
}
html[data-theme="dark"] .pks-lb-seam { opacity: 0.5; animation: none !important; background-position: 0 0 !important; }
html[data-theme="dark"] .pks-lb-main { gap: 4px !important; }
html[data-theme="dark"] .pks-lb-eyebrow {
  border: 0 !important; background: transparent !important; padding: 0 !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; color: #EAC04C !important;
}
html[data-theme="dark"] .pks-lb-dot { animation: none !important; width: 6px !important; height: 6px !important; }
html[data-theme="dark"] .pks-lb-title {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.005em !important; line-height: 1.3 !important;
  color: #F8F6F4 !important;
}
html[data-theme="dark"] .pks-lb-perk { border: 0 !important; background: transparent !important; padding: 0 !important; gap: 8px !important; }
html[data-theme="dark"] .pks-lb-perk-icon {
  width: 20px !important; height: 20px !important; border-radius: 6px !important;
  background: rgba(217, 166, 37, 0.18) !important; color: #EAC04C !important;
}
html[data-theme="dark"] .pks-lb-perk-icon svg { width: 11px !important; height: 11px !important; }
html[data-theme="dark"] .pks-lb-perk-text { font-size: 12.5px !important; font-weight: 500 !important; color: rgba(241, 239, 237, 0.82) !important; }
html[data-theme="dark"] .pks-lb-cta {
  min-height: 36px !important; padding: 0 16px !important; border-radius: 10px !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; box-shadow: none !important;
}
@media (max-width: 600px) {
  html[data-theme="dark"] .pks-lb-cta { min-height: 44px !important; }
}

/* Welcome notice: same rounded card as light, dark surface */
html[data-theme="dark"] body.auth-page-login .pks-lb-note {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 14px !important; line-height: 1.6 !important; color: #C3CAD3 !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important; border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important; padding: 14px 16px !important; margin-bottom: 30px !important;
}
html[data-theme="dark"] body.auth-page-login .pks-lb-note-title { color: #EAC04C !important; }

/* One screen on desktop: the same close-up as light */
@media (min-width: 981px) and (max-height: 1000px) {
  html[data-theme="dark"] body.auth-page-login .auth-tabs { margin-bottom: 20px !important; }
  html[data-theme="dark"] body.auth-page-login .auth-tab { min-height: 42px !important; }
  html[data-theme="dark"] body.auth-page-login .auth-heading { margin-bottom: 16px !important; }
  html[data-theme="dark"] body.auth-page-login .auth-heading h2 { font-size: 26px !important; margin-bottom: 4px !important; }
  html[data-theme="dark"] body.auth-page-login .form-group { margin-bottom: 14px !important; }
  html[data-theme="dark"] body.auth-page-login .form-group label { margin-bottom: 6px !important; }
  html[data-theme="dark"] body.auth-page-login .form-group input[type="email"],
  html[data-theme="dark"] body.auth-page-login .form-group input[type="password"] { min-height: 46px !important; }
  html[data-theme="dark"] body.auth-page-login .btn-submit { min-height: 48px !important; margin-top: 2px !important; }
  html[data-theme="dark"] body.auth-page-login .btn-social { min-height: 44px !important; }
  html[data-theme="dark"] body.auth-page-login .auth-divider { margin: 16px 0 !important; }
  html[data-theme="dark"] body.auth-page-login .auth-switch:first-of-type { margin-top: 16px !important; }
}
@media (min-width: 981px) and (max-height: 820px) {
  html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-eyebrow { margin-bottom: 14px !important; }
  html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-step { padding-bottom: 11px !important; }
  html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-title { font-size: 14px !important; }
  html[data-theme="dark"] body.auth-page-login .auth-trust-ladder .ladder-desc { font-size: 13px !important; line-height: 1.45 !important; }
  html[data-theme="dark"] body.auth-page-login .auth-heading { margin-bottom: 18px !important; }
  html[data-theme="dark"] body.auth-page-login .auth-tabs { margin-bottom: 20px !important; }
}

/* Phones and tablets: same as light */
@media (max-width: 980px) {
  html[data-theme="dark"] body.auth-page-login .auth-form-wrap { padding-left: 16px !important; padding-right: 16px !important; }
  html[data-theme="dark"] body.auth-page-login .auth-body-grid { max-width: 440px !important; margin: 0 auto !important; }
  html[data-theme="dark"] body.auth-page-login .brand-hex-canvas { width: clamp(170px, 46vw, 240px) !important; }
}
@media (max-width: 700px) {
  html[data-theme="dark"] body.auth-page-login .auth-mobile-strip { display: none !important; }
  html[data-theme="dark"] body.auth-page-login .auth-body-grid { padding: 0 0 24px !important; border-radius: 0 !important; }
  html[data-theme="dark"] body.auth-page-login .auth-heading h2 { font-size: 25px !important; }
  html[data-theme="dark"] body.auth-page-login .brand-trust { gap: 8px 18px !important; }
}
@media (max-width: 640px) {
  html[data-theme="dark"] body.auth-page-login .form-group input[type="text"],
  html[data-theme="dark"] body.auth-page-login .form-group input[type="email"],
  html[data-theme="dark"] body.auth-page-login .form-group input[type="password"],
  html[data-theme="dark"] body.auth-page-login .form-group input[type="tel"],
  html[data-theme="dark"] body.auth-page-login .form-group input[type="date"],
  html[data-theme="dark"] body.auth-page-login .dob-select,
  html[data-theme="dark"] body.auth-page-login .phone-input input { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] body.auth-page-login .form-group input,
  html[data-theme="dark"] body.auth-page-login .btn-submit { transition: none !important; }
  html[data-theme="dark"] body.auth-page-login .btn-submit:hover { transform: none !important; }
}