/* Authentication and early-access journey.
   This file owns login, waitlist enrollment, and confirmation layouts so auth
   design does not continue accumulating in the global site overrides. */

body.auth-site {
  --auth-surface: rgba(10, 26, 34, 0.96);
  --auth-surface-soft: rgba(16, 38, 48, 0.72);
  --auth-line: rgba(207, 224, 255, 0.14);
  --auth-green: #23d18b;
}

/* Auth pages use the same edge-aligned banner geometry as the landing page so
   moving between product discovery and account actions does not shift the
   brand or CTA anchors. */
body.auth-site .navbar {
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(220, 232, 229, 0.08);
  background: #061116;
  box-shadow: none;
  backdrop-filter: none;
}

body.auth-site .navbar.scrolled {
  background: #081822;
  border-bottom-color: rgba(220, 232, 229, 0.12);
}

body.auth-site .nav-inner {
  width: 100%;
  max-width: none;
  padding: 14px clamp(20px, 5vw, 88px);
}

body.auth-site .nav-center-empty {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  visibility: hidden;
}

/* The wider auth nav padding above is a desktop-only edge-aligned treatment.
   On mobile, drop back to the shared mobile navbar metrics so the banner and
   hamburger look identical to the landing page across the whole experience. */
@media (max-width: 860px) {
  body.auth-site .nav-inner {
    padding: 8px 14px;
    min-height: 50px;
  }
}

.auth-journey-page {
  position: relative;
  /* Contain the 200%-wide scrolling wave track. */
  overflow: hidden;
  min-height: 100svh;
  padding: clamp(6.75rem, 10vh, 8.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 7vh, 5rem);
}

.auth-journey-shell {
  width: min(68rem, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(21rem, 0.82fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

/* Establish a stacking context for the auth content shells. */
body.auth-site .auth-journey-shell,
body.auth-site .waitlist-shell {
  position: relative;
  z-index: 1;
}

.auth-journey-intro {
  display: grid;
  gap: 1.25rem;
  max-width: 37rem;
}

.auth-copy-mobile {
  display: none;
}


.auth-eyebrow,
.auth-card-kicker {
  color: var(--auth-green);
  font-family: var(--mono);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.auth-journey-intro > h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--text);
  font-family: var(--head);
  font-size: clamp(2.75rem, 5vw, 4.9rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0;
}

.auth-journey-intro > p {
  max-width: 35rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.75;
}

.auth-journey-intro > .auth-reassurance {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  width: fit-content;
  max-width: 32rem;
  padding-top: 1rem;
  border-top: 1px solid var(--auth-line);
  color: rgba(238, 244, 255, 0.72);
  font-size: 0.9rem;
  line-height: 1.55;
}

.auth-reassurance::before {
  content: "";
  flex: 0 0 auto;
  width: 0.48rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--auth-green);
  box-shadow: 0 0 0 0.24rem rgba(35, 209, 139, 0.09);
}


.auth-benefit-list {
  display: grid;
  gap: 1rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.auth-benefit-list li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.auth-benefit-list strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--text);
  font-size: 0.94rem;
}

.auth-benefit-icon,
.auth-step-number {
  display: grid;
  width: 2.5rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(35, 209, 139, 0.26);
  border-radius: 50%;
  color: var(--auth-green);
  background: rgba(35, 209, 139, 0.06);
}

.auth-benefit-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-step-number {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.auth-access-card {
  width: 100%;
  max-width: 29rem;
  gap: 1.35rem;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 34%),
    var(--auth-surface);
}

/* ════════════════════════════════════════════════════════════════════════
   LOGIN — full-screen "trader access" split
   A true full-viewport composition that reads as a direct continuation of the
   landing hero: a brand panel (ambient market wave, depth grid, the hero's
   eyebrow pill + display headline) bleeds from the left edge into a raised
   dark-glass access panel on the right that holds the Google sign-in. Both
   panels run full height behind the translucent glass navbar, exactly like the
   hero. Scoped to .login-split-page / .login-brand* / .login-access* so the
   waitlist and confirmation layouts stay untouched.
   ════════════════════════════════════════════════════════════════════════ */

/* Deep unified environment — a single near-black navy field, no split panels.
   This mirrors the landing canvas: #03070d base, almost-imperceptible cool
   pools, and a grounding falloff instead of a bright blue wash. */
body.login-page-body,
body.waitlist-page-body {
  background:
    radial-gradient(ellipse 42% 48% at 24% 40%, rgba(66, 100, 122, 0.03), transparent 74%),
    radial-gradient(ellipse 58% 70% at 74% 52%, rgba(66, 100, 122, 0.026), transparent 78%),
    radial-gradient(ellipse 132% 76% at 50% 116%, rgba(2, 7, 12, 0.68), transparent 64%),
    linear-gradient(180deg, #050b12 0%, #03070d 48%, #02050a 100%);
  /* Solid base under the gradients so iOS Safari overscroll never flashes a
     lighter system color. */
  background-color: #03070d;
}

/* Barely-there depth layer. It keeps the existing fixed full-page pseudo-element
   from site-sub, but retunes the color to the landing page's quieter blue and
   lets the grid dissolve before it reads as graph paper. */
body.login-page-body::before,
body.waitlist-page-body::before {
  background-image:
    linear-gradient(rgba(120, 168, 224, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 168, 224, 0.01) 1px, transparent 1px),
    radial-gradient(circle at 20% 22%, rgba(70, 108, 150, 0.032), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(56, 90, 132, 0.026), transparent 38%),
    linear-gradient(135deg, rgba(180, 205, 245, 0.007), transparent 42%, rgba(20, 46, 74, 0.032));
  background-size: 64px 64px, 64px 64px, auto, auto, auto;
  -webkit-mask-image: radial-gradient(135% 125% at 58% 28%, #000 22%, transparent 86%);
          mask-image: radial-gradient(135% 125% at 58% 28%, #000 22%, transparent 86%);
}

/* Drop the diagonal signal streaks the shared auth base paints along the
   bottom — they read techy rather than luxurious. */
body.login-page-body::after {
  display: none;
}

/* ── Centered two-column composition inside a constrained container. No harsh
   full-bleed seam: both columns share the same environment, the card sitting
   slightly right of page centre. Overrides the shared .auth-page centering. ── */
.login-split-page {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 27.5rem) minmax(0, 33rem);
  gap: clamp(88px, 9.5vw, 150px);
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
  min-height: 100svh;
  padding:
    clamp(7rem, 13vh, 9.5rem)
    clamp(1.5rem, 5vw, 4rem)
    clamp(4rem, 8vh, 6rem);
}

/* ── Left: editorial trust panel ────────────────────────────────────────── */
.login-brand {
  position: relative;
}

.login-brand-inner {
  width: 100%;
  max-width: 31.5rem;
}

/* Eyebrow — small uppercase, muted controlled emerald, wide tracking. */
/* Eyebrows across the login/request-access pages read in the landing
   section-eyebrow language (.depth-tag): full brand-green label + a 22px green
   dash cue, Inter 12px, weight 700, 0.16em tracking. The dash is added via
   ::before on each eyebrow in the shared rule below. */
.login-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(18px, 2.6vh, 26px);
  font-family: var(--t-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #23d18b;
}

/* Shared green dash cue — matches .depth-tag::before on the landing page. */
.login-eyebrow::before,
.login-card-eyebrow::before,
.wl-eyebrow::before,
.wl-access-kicker::before {
  content: "";
  flex: none;
  width: 22px;
  height: 1px;
  background: #23d18b;
  opacity: 0.9;
}

/* Editorial headline — Inter, tight tracking, weight held under the heavy
   default so it reads refined rather than blunt. */
.login-brand-title {
  margin: 0;
  font-size: clamp(2.9rem, 4.4vw, 3.9rem);
  font-weight: 650;
  line-height: 0.96;
  letter-spacing: -0.055em;
  color: #eef4ff;
}

.login-brand-lede {
  max-width: 27rem;
  margin: clamp(20px, 2.6vh, 26px) 0 0;
  font-size: clamp(1rem, 1.05vw, 1.075rem);
  line-height: 1.6;
  color: #8e9aad;
}

/* Trust panel — three quiet security assurances, private-bank calm. Thin,
   restrained icon marks (no chunky app badges) with generous air between rows. */
.login-trust {
  display: grid;
  gap: clamp(20px, 2.6vh, 26px);
  margin: clamp(34px, 4.6vh, 44px) 0 0;
  padding: 0;
  list-style: none;
}

.login-trust li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.login-trust-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  aspect-ratio: 1;
  margin-top: 1px;
  border: 1px solid rgba(150, 170, 200, 0.12);
  border-radius: 10px;
  color: rgba(35, 209, 139, 0.66);
  background: rgba(150, 176, 205, 0.028);
}

.login-trust-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-trust-text {
  display: grid;
  gap: 3px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #7f8b9e;
}

.login-trust-text strong {
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: -0.005em;
  color: #dce7f5;
}

/* ── Right: the access card — a raised glass object sitting in the field ─── */
.login-access {
  position: relative;
  display: flex;
  justify-content: center;
  /* Fill the grid track so the card reaches its max-width. The grid centres its
     items, which would otherwise let the card shrink-wrap to its content and end
     up narrower than the request-access card (whose content is wider). */
  width: 100%;
}

/* Soft radial light behind the card — navy/blue with the faintest emerald hint,
   centred slightly above and right of the card. Never a loud green halo. */
.login-cardglow {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 132%;
  aspect-ratio: 1;
  transform: translate(-44%, -56%);
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(66, 100, 122, 0.11), rgba(66, 100, 122, 0.028) 48%, transparent 72%),
    radial-gradient(closest-side, rgba(35, 209, 139, 0.032), transparent 60%);
}

/* Expensive glass/metal card: transparent near-black navy fill, a fine white
   hairline, an inner top highlight, and a deep soft drop shadow. */
.login-access-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 33rem;
  padding: clamp(28px, 2.6vw, 38px) clamp(30px, 3vw, 46px);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 42%),
    rgba(8, 15, 27, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 28px 80px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
  text-align: center;
}

/* ── Group 1 · Access label — a compact brand cue before the login message. ── */
.login-brandmark {
  line-height: 1;
}

/* Card eyebrow — matches the left eyebrow language, a touch smaller. */
.login-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #23d18b;
}

/* ── Group 2 · Login message — a clear gap above (brand → message) separates
   the two groups; heading leads, subtitle supports it directly below. ─────── */
.login-access-head {
  margin-top: clamp(18px, 2.2vh, 24px);
}

.login-access-title {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: clamp(1.9rem, 2.5vw, 2.35rem);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: #eef4ff;
}

.login-access-desc {
  max-width: 25rem;
  margin: 10px auto 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #98a5b7;
}

.login-alerts {
  margin-top: 22px;
  text-align: center;
}

/* ── Group 3 · Action — a clear gap above (message → action); the request-access
   link then sits tight under the button so the two read as one action pair. ── */
.login-cta {
  margin-top: clamp(20px, 2.6vh, 26px);
}

/* ── OAuth button pair (shared by the trader-login and request-access cards) ──
   Both cards present the same matched pair: a neutral 1px hairline, dark fill,
   subtle depth — no green frame — so Apple's native black and the Google button
   read as equals. Sizing is shared so the two cards feel identical. */
body.auth-site .login-access .oauth-btn,
body.auth-site .wl-access .oauth-btn {
  min-height: 50px;
  gap: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  color: #eef4ff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  background: linear-gradient(180deg, #071521 0%, #050d16 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 6px 16px rgba(0, 0, 0, 0.3);
  transition: transform 160ms ease, box-shadow 220ms ease, border-color 180ms ease, background 180ms ease;
}

/* Sign in with Apple — Apple's brand guidelines call for a solid black button
   with a white logomark + wordmark. It sits first in the stack as the lead
   option. Near-white on a black lifted just off #000: at high luminance contrast
   pure-white-on-pure-black glyphs bloom (halation), so we pull both ends in
   slightly — still a white label on a black Apple button, without the glow. */
body.auth-site .login-access .oauth-btn-apple,
body.auth-site .wl-access .oauth-btn-apple {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, #202022 0%, #0c0c0e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 16px rgba(0, 0, 0, 0.42);
}

body.auth-site .login-access .oauth-btn-apple:hover,
body.auth-site .wl-access .oauth-btn-apple:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, #29292c 0%, #0c0c0e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 9px 20px rgba(0, 0, 0, 0.46);
}

/* Logomark matches the label's near-white so it doesn't bloom either; sized a
   touch larger than Google's mark and optically nudged up to center on the cap
   height of the label. */
.login-access .oauth-btn-apple .oauth-btn-icon svg,
.wl-access .oauth-btn-apple .oauth-btn-icon svg {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -2px;
  fill: rgba(255, 255, 255, 0.9);
}

/* Google label: ease off pure near-white the same way, so both buttons sit at
   the same reduced-halation contrast. */
body.auth-site .login-access .oauth-btn-google,
body.auth-site .wl-access .oauth-btn-google {
  color: rgba(238, 244, 255, 0.88);
}

/* Neutral Google hover to match Apple's — the pair lightens the same way. */
body.auth-site .login-access .oauth-btn-google:hover,
body.auth-site .wl-access .oauth-btn-google:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, #0a1a27 0%, #06111a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 9px 20px rgba(0, 0, 0, 0.34);
}

.login-access .oauth-btn-icon,
.wl-access .oauth-btn-icon {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 5px;
  background: transparent;
}

.login-access .oauth-btn-icon svg,
.wl-access .oauth-btn-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.login-access-foot {
  margin: clamp(12px, 1.6vh, 15px) 0 0;
  font-size: 0.9rem;
  color: #8e9aad;
}

/* Softer, quieter green than the site accent so the link reads as a calm
   secondary path rather than competing with the buttons. */
.login-access-foot .link-accent {
  font-weight: 600;
  color: rgba(46, 176, 129, 0.92);
}

/* ── Group 4 · Security footer — the most breathing room of any gap sets this
   apart as a quiet, anchored trust note rather than part of the login flow: a
   subtle hairline seam and a small lock note. ────────────────────────────── */
.login-secure-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(20px, 2.6vh, 26px);
  padding-top: clamp(13px, 1.7vh, 17px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  color: #7f8b9e;
}

.login-secure-note svg {
  width: 0.88rem;
  height: 0.88rem;
  fill: none;
  stroke: rgba(35, 209, 139, 0.55);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Responsive: collapse to a single centred, premium stacked column ────── */
@media (max-width: 980px) {
  .login-split-page {
    grid-template-columns: minmax(0, 30rem);
    justify-items: center;
    /* Top-align so the content sits just under the fixed navbar rather than
       floating toward the vertical centre of a tall phone viewport. */
    align-content: start;
    gap: clamp(32px, 5vh, 48px);
    padding:
      clamp(5rem, 7vh, 6rem)
      clamp(1.25rem, 6vw, 2.5rem)
      clamp(3rem, 7vh, 4.5rem);
  }

  /* Compact welcome above the card; the card carries the trust story from here. */
  .login-brand {
    text-align: center;
  }

  .login-brand-inner {
    max-width: 34rem;
  }

  .login-eyebrow {
    margin-bottom: 14px;
  }

  .login-brand-title {
    font-size: clamp(2.5rem, 9vw, 3.2rem);
  }

  .login-brand-lede {
    max-width: 30rem;
    margin-inline: auto;
  }

  /* Keep the eyebrow, headline, and lede on the fold; the card carries the
     trust story from here down. */
  .login-trust {
    display: none;
  }

  .login-access-inner {
    max-width: 30rem;
  }

  .login-cardglow {
    width: 150%;
    transform: translate(-50%, -52%);
  }
}

@media (max-width: 560px) {
  .login-split-page {
    gap: clamp(26px, 4.5vh, 36px);
  }

  .login-brand-lede {
    font-size: 0.98rem;
  }

  /* The grid centres its items (justify-items: center), which would let the
     access column shrink-wrap to the buttons. Force it to fill the column so
     the card spans the same width as the welcome text above it. */
  .login-access {
    width: 100%;
  }

  .login-access-inner {
    width: 100%;
    max-width: 100%;
    padding: 30px 22px;
    border-radius: 24px;
  }

}


/* ── Contain the decorative card glow while the page is full-bleed ───────────
   .login-cardglow / .wl-cardglow are oversized radials (≈130–150% of the card)
   that intentionally bleed around it. At or below the container's max-width the
   split page fills the whole viewport, so that bleed reaches past the right edge
   and lets mobile pan the page sideways (and briefly overflows around the
   two-column handoff, ~1000–1100px). Clip horizontal overflow only here: with no
   side margins the container box equals the viewport, so this removes just the
   off-screen tail and never cuts the glow that is actually visible. Above 1300px
   the container gains side margins and the glow fades into them, so the clip is
   deliberately not applied — desktop rendering is unchanged. `clip` (not
   `hidden`) so the page never becomes its own scroll container. ── */
@media (max-width: 1300px) {
  .login-split-page,
  .waitlist-split-page {
    overflow-x: clip;
  }
}


.auth-access-card .auth-logo-img {
  width: clamp(7.2rem, 12vw, 8.6rem);
}

/* ════════════════════════════════════════════════════════════════════════
   REQUEST EARLY ACCESS — private-access application screen
   The early-access twin of the trader login, rebuilt to the same restrained
   composition: a centered two-column field (not a full-bleed checkout split)
   where an editorial intro on the left sits beside ONE raised dark-glass card
   holding a single action — Request Access with Google. The plan selector was
   removed (interest is gathered later, after sign-in), so the card carries one
   clear ask instead of a checkout stack. Scoped to .waitlist-split-page /
   .wl-brand* / .wl-flow* / .wl-access* so the trader login and the confirmation
   layout stay untouched.
   ════════════════════════════════════════════════════════════════════════ */

/* Drop the diagonal signal streaks the shared auth base paints along the bottom. */
body.waitlist-page-body::after {
  display: none;
}

/* ── Centered two-column composition inside a constrained container. Both
   columns share one environment; the card sits slightly right of page centre,
   the focal object. Overrides the shared .auth-page centering (mirrors
   .login-split-page). ── */
.waitlist-split-page {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 28rem) minmax(0, 33rem);
  gap: clamp(80px, 8.5vw, 132px);
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  min-height: 100svh;
  padding:
    clamp(5rem, 9.5vh, 6.5rem)
    clamp(1.5rem, 5vw, 4rem)
    clamp(4rem, 8vh, 6rem);
}

/* ── Left: editorial intro ──────────────────────────────────────────────── */
.wl-brand {
  position: relative;
}

.wl-brand-inner {
  width: 100%;
  max-width: 32rem;
}

/* Eyebrow — small uppercase, muted controlled emerald, wide tracking (mirrors
   the login eyebrow language). */
.wl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(18px, 2.6vh, 26px);
  font-family: var(--t-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #23d18b;
}

/* Editorial display headline — Inter, tight tracking, weight held under the
   heavy default so it reads refined rather than blunt. All one colour: the
   green already lives in the eyebrow and step markers, so the headline stays
   monochrome for restraint. Overrides .t-hero--auth. */
.wl-brand-title {
  margin: 0;
  /* Sized to keep "Trade with clarity." on ONE line across desktop: the brand
     column caps near 448px, so the headline maxes at ~3.15rem (reached by 1440
     per coeff = max/14.4) rather than 3.7rem, which overflowed to two lines. */
  font-size: clamp(2.6rem, 3.5vw, 3.15rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.055em;
  color: #eef4ff;
}

.wl-brand-title-break {
  display: inline;
}

.wl-brand-lede {
  max-width: 27rem;
  margin: clamp(20px, 2.6vh, 26px) 0 0;
  font-size: clamp(1rem, 1.05vw, 1.075rem);
  line-height: 1.6;
  color: #8e9aad;
}

/* "What happens next" — an open, private-bank-calm numbered flow, the waitlist
   analogue of the login trust rows: refined marker circles, a very subtle
   connector, a light title over quiet subtext. */
.wl-flow {
  display: grid;
  gap: clamp(22px, 3vh, 28px);
  margin: clamp(34px, 4.6vh, 44px) 0 0;
  padding: 0;
  list-style: none;
}

.wl-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* Numbered markers reuse the trader-login trust-icon treatment exactly: a subtle
   neutral rounded-square box with a muted emerald number inside (no ring, glow,
   or connector line) so the request page reads as calm as the login page. */
.wl-flow-marker {
  display: grid;
  place-items: center;
  width: 2.25rem;
  aspect-ratio: 1;
  margin-top: 1px;
  border: 1px solid rgba(150, 170, 200, 0.12);
  border-radius: 10px;
  color: rgba(35, 209, 139, 0.66);
  background: rgba(150, 176, 205, 0.028);
  font-family: var(--t-font-sans);
  font-size: 0.82rem;
  font-weight: 600;
}

.wl-flow-text {
  display: grid;
  gap: 3px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #7f8b9e;
}

.wl-flow-text strong {
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: -0.005em;
  color: #e6eefb;
}

/* ── Right: the access card — a single raised glass object, the focal point ── */
.wl-access {
  position: relative;
  display: flex;
  justify-content: center;
  /* Fill the grid track (mirrors .login-access) so both cards match width. */
  width: 100%;
}

/* Restrained radial light behind the card — navy/blue with only the faintest
   emerald hint, above and right of the card. Never a loud green halo. */
.wl-cardglow {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 130%;
  aspect-ratio: 1;
  transform: translate(-46%, -54%);
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(66, 100, 122, 0.105), rgba(66, 100, 122, 0.026) 48%, transparent 72%),
    radial-gradient(closest-side, rgba(35, 209, 139, 0.028), transparent 60%);
}

/* Expensive glass/metal card: transparent near-black navy fill, a fine white
   hairline, an inner top highlight, and a deep soft drop shadow — the twin of
   the login access card. */
.wl-access-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 33rem;
  padding: clamp(36px, 3.2vw, 48px) clamp(34px, 3.4vw, 52px);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(210, 230, 255, 0.03), rgba(255, 255, 255, 0) 40%),
    rgba(8, 15, 27, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 28px 80px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(22px);
          backdrop-filter: blur(22px);
  text-align: center;
}

/* The card opens with the eyebrow — no logo (the header already carries it). */
.wl-access-head {
  margin-top: 0;
}

/* Card eyebrow — matches the left eyebrow language, a touch smaller. */
.wl-access-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #23d18b;
}

.wl-access-title {
  margin: 10px 0 0;
  font-family: var(--t-font-sans);
  /* Matches .login-access-title so both cards' headlines read at one size. */
  font-size: clamp(1.9rem, 2.5vw, 2.35rem);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: #eef4ff;
}

.wl-access-desc {
  max-width: 25rem;
  margin: 13px auto 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: #98a5b7;
}

.wl-alerts {
  margin-top: 14px;
  text-align: center;
}

.wl-cta {
  margin-top: clamp(22px, 2.8vh, 28px);
}

/* Secondary action — sits directly under the CTA, above the legal line. The
   muted note carries a single brighter emerald link that never competes with
   the Google button above it. */
.wl-login-note {
  margin: clamp(16px, 2vh, 20px) 0 0;
  font-size: 0.9rem;
  color: #8e9aad;
}

.wl-login-note .link-accent {
  font-weight: 600;
  color: rgba(46, 176, 129, 0.92);
  text-underline-offset: 0.2em;
  transition: color 160ms ease;
}

.wl-login-note .link-accent:hover {
  color: #4fd3a0;
  text-decoration: underline;
}

/* Legal — the quietest element on the card, set off by a faint hairline. */
.wl-consent {
  margin: clamp(16px, 2.2vh, 20px) 0 0;
  padding-top: clamp(14px, 2vh, 18px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  line-height: 1.55;
  color: #6f7b8d;
}

.wl-consent a {
  color: #98a5b7;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.wl-consent a:hover {
  color: #cdd8e8;
}

/* ── Responsive: collapse to a single centred, premium stacked column. A
   shortened intro (eyebrow + headline + lede) sits above the card; the step
   flow is a desktop enrichment and drops away so mobile stays short. ─────── */
@media (max-width: 980px) {
  .waitlist-split-page {
    grid-template-columns: minmax(0, 30rem);
    justify-items: center;
    /* Top-align under the fixed navbar (mirrors the login page). */
    align-content: start;
    gap: clamp(30px, 5vh, 44px);
    padding:
      clamp(5rem, 7vh, 6rem)
      clamp(1.25rem, 6vw, 2.5rem)
      clamp(3rem, 7vh, 4.5rem);
  }

  .wl-brand {
    text-align: center;
  }

  .wl-brand-inner {
    max-width: 34rem;
  }

  .wl-eyebrow {
    margin-bottom: 14px;
  }

  .wl-brand-title {
    font-size: clamp(2.5rem, 9vw, 3.2rem);
  }

  .wl-brand-title-break {
    display: block;
  }

  .wl-brand-lede {
    max-width: 32rem;
    margin-inline: auto;
  }

  /* The flow is a desktop enrichment; the access card carries the ask on mobile. */
  .wl-flow {
    display: none;
  }

  .wl-access-inner {
    max-width: 30rem;
  }

  .wl-cardglow {
    width: 150%;
    transform: translate(-50%, -52%);
  }
}

@media (max-width: 560px) {
  .waitlist-split-page {
    gap: clamp(24px, 4.5vh, 34px);
  }

  /* Let the longer headline settle to a comfortable phone size. */
  .wl-brand-title {
    font-size: clamp(2.1rem, 8.6vw, 2.7rem);
  }

  .wl-brand-lede {
    font-size: 0.98rem;
  }

  /* Fill the column so the card spans the same width as the intro text above it
     (mirrors the login card; the grid centres items, which would otherwise let
     the card shrink-wrap to its buttons). */
  .wl-access {
    width: 100%;
  }

  .wl-access-inner {
    width: 100%;
    max-width: 100%;
    padding: 30px 22px;
    border-radius: 24px;
  }
}


.auth-card-heading {
  display: grid;
  gap: 0.55rem;
  text-align: center;
}

.auth-card-kicker {
  text-align: center;
}

.auth-access-card .auth-title {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: 0;
}

.auth-access-card .auth-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.65;
}

.auth-access-card .oauth-btn {
  min-height: 3.35rem;
  border-color: rgba(35, 209, 139, 0.34);
  color: #061116;
  background: var(--auth-green);
}

.auth-access-card .oauth-btn:hover {
  border-color: #5de9b3;
  color: #061116;
  background: #3cdda0;
  box-shadow: 0 0.75rem 2rem rgba(35, 209, 139, 0.16);
}

.auth-access-card .auth-footer-note,
.auth-consent-note {
  margin: 0;
  color: var(--dim);
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: center;
}

.auth-consent-note a,
.auth-text-link {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.auth-consent-note a:hover,
.auth-text-link:hover {
  color: var(--text);
}


.auth-confirmation-page {
  place-items: center;
}

.auth-confirmation-shell {
  width: min(34rem, 100%);
}

.waitlist-confirmation {
  max-width: none;
  text-align: center;
}

.waitlist-success-icon {
  display: grid;
  width: 3.5rem;
  aspect-ratio: 1;
  place-items: center;
  justify-self: center;
  border: 1px solid rgba(35, 209, 139, 0.34);
  border-radius: 50%;
  color: var(--auth-green);
  background: rgba(35, 209, 139, 0.08);
  box-shadow: 0 0 2.5rem rgba(35, 209, 139, 0.12);
}

.waitlist-success-icon svg {
  width: 1.55rem;
  height: 1.55rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.waitlist-profile {
  display: grid;
  margin: 0;
  border-block: 1px solid var(--auth-line);
}

.waitlist-profile > div {
  display: grid;
  grid-template-columns: minmax(6rem, 0.75fr) minmax(0, 1.25fr);
  gap: 1rem;
  padding: 0.8rem 0;
  text-align: left;
}

.waitlist-profile > div + div {
  border-top: 1px solid rgba(207, 224, 255, 0.08);
}

.waitlist-profile dt {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.waitlist-profile dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
}

.waitlist-status {
  color: var(--auth-green);
}

.waitlist-confirmation-actions {
  display: grid;
  gap: 0.9rem;
}

.auth-text-link {
  justify-self: center;
  font-size: 0.82rem;
}

@media (min-width: 901px) {
  body.auth-site .nav-inner {
    padding-inline: clamp(24px, 4vw, 72px);
  }

  body.auth-site .nav-logo {
    grid-column: 1;
    justify-self: start;
    align-items: flex-start;
  }

  body.auth-site .nav-center-empty {
    grid-column: 2;
    justify-self: center;
  }

  body.auth-site .nav-right {
    grid-column: 3;
    justify-self: end;
    justify-content: flex-end;
  }

  body.auth-site .nav-right .btn-nav {
    min-height: 40px;
    padding-inline: clamp(13px, 1.15vw, 17px);
    border-radius: 6px;
    font-family: "Inter", "Manrope", system-ui, sans-serif;
    font-size: clamp(0.72rem, 0.78vw, 0.8rem);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
  }

  body.auth-site .nav-right .btn-nav-secondary {
    color: var(--text);
    border-color: rgba(207, 224, 255, 0.18);
    background: rgba(13, 26, 36, 0.88);
  }

  body.auth-site .nav-right .btn-nav-primary {
    color: #06100c;
    border-color: rgba(93, 233, 179, 0.42);
    background: var(--auth-green);
    box-shadow: 0 8px 24px rgba(15, 168, 110, 0.16);
  }
}

@media (max-width: 800px) {
  .auth-journey-page {
    display: block;
    min-height: auto;
    padding: 6rem 1rem 2.5rem;
  }

  /* Waitlist mobile: one calm centered column — intro -> card -> steps. The
     taller top pad clears the fixed nav; if content ever exceeds the viewport it
     grows past min-height and the page scrolls normally instead of clipping. */
  .waitlist-journey-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    padding: clamp(4.75rem, 11svh, 6rem) 1.25rem 2.5rem;
  }

  /* Shared single-column shell metrics for the login journey. */
  .auth-journey-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    width: min(31rem, 100%);
    margin-inline: auto;
  }

  .waitlist-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "card"
      "steps";
    width: min(27rem, 100%);
    column-gap: 0;
    row-gap: 1.75rem;
    margin-inline: auto;
    text-align: center;
  }

  .wl-intro {
    max-width: none;
    text-align: center;
  }

  .wl-intro > h1 {
    max-width: 16ch;
    margin: 0.9rem auto 0;
    font-size: clamp(2.05rem, 8.6vw, 2.7rem);
    line-height: 1;
  }

  .wl-intro > p {
    margin-inline: auto;
    font-size: 0.94rem;
    line-height: 1.6;
  }

  body.auth-site .wl-card {
    align-self: stretch;
    justify-self: stretch;
    max-width: none;
    padding: clamp(1.6rem, 6vw, 2.1rem);
    border-radius: 20px;
  }

  .wl-logo {
    display: none;
  }

  .wl-card-heading .auth-title {
    font-size: clamp(1.5rem, 6.5vw, 1.85rem);
  }

  /* The timeline stays left-aligned inside the centered column. */
  .wl-steps {
    max-width: none;
    text-align: left;
  }


  /* Login mobile: one calm centered column — headline first, then the
     access card (chrome kept, nearly full width), then a compact trust note. */
  .login-journey-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    padding: clamp(5rem, 12svh, 6.5rem) 1.25rem 2rem;
  }

  .login-journey-page .auth-journey-shell {
    grid-template-columns: minmax(0, 1fr);
    width: min(27rem, 100%);
    gap: 1.6rem;
    margin-inline: auto;
  }

  /* No center hairline in the stacked layout. */
  .login-shell::after {
    display: none;
  }

  /* Center the pill + headline; the card carries the rest of the copy. */
  .login-journey-page .login-intro {
    max-width: none;
    justify-self: stretch;
    text-align: center;
  }

  .login-intro > p,
  .login-intro > .login-trust {
    display: none;
  }

  .login-intro > h1 {
    margin-inline: auto;
  }

  body.auth-site .login-access-card {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    padding: clamp(1.6rem, 6vw, 2rem);
    border-radius: 20px;
  }

  .login-access-card .auth-logo {
    display: none;
  }

  .login-access-card .auth-title {
    font-size: clamp(1.5rem, 6.5vw, 1.85rem);
  }

  .auth-journey-intro {
    gap: 1rem;
    max-width: none;
  }

  .auth-journey-intro > h1 {
    max-width: 14ch;
    font-size: clamp(2.1rem, 10vw, 3rem);
  }

  .auth-journey-intro > p {
    font-size: 0.94rem;
    line-height: 1.65;
  }

  .auth-journey-intro > .auth-reassurance {
    font-size: 0.84rem;
  }

  .auth-benefit-list {
    gap: 0.85rem;
  }

  .auth-copy-desktop {
    display: none;
  }

  .auth-copy-mobile {
    display: inline;
  }

  .auth-benefit-list li {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.75rem;
    font-size: 0.82rem;
  }

  .auth-benefit-icon,
  .auth-step-number {
    width: 2.25rem;
  }

  .auth-confirmation-page {
    display: grid;
    min-height: 100svh;
  }
}

@media (max-width: 420px) {
  .auth-access-card {
    padding: 1.4rem;
  }

  .waitlist-profile > div {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   WAITLIST CONFIRMED — full-screen premium receipt
   The terminal state of the early-access flow, revamped into the same visual
   family as the login/waitlist splits: a calm dark canvas (depth grid + cool
   glow) with one centered dark-glass card carrying the success mark, the
   confirmed profile, and the next actions. Scoped to .confirm-* / the
   confirm-page-body class so nothing else is affected.
   ════════════════════════════════════════════════════════════════════════ */

body.confirm-page-body {
  background: #03070d;
}

body.confirm-page-body::before {
  background:
    radial-gradient(circle at 20% 22%, rgba(70, 108, 150, 0.042), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(56, 90, 132, 0.034), transparent 38%),
    linear-gradient(135deg, rgba(180, 205, 245, 0.009), transparent 42%, rgba(20, 46, 74, 0.046));
}

body.confirm-page-body::after {
  display: none;
}

.confirm-page {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(6rem, 12vh, 8.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
}

.confirm-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 168, 110, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 168, 110, 0.035) 1px, transparent 1px);
  background-size: 82px 82px;
  -webkit-mask-image: radial-gradient(115% 90% at 50% 34%, #000 30%, transparent 78%);
          mask-image: radial-gradient(115% 90% at 50% 34%, #000 30%, transparent 78%);
}

.confirm-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 44% at 50% 30%, rgba(30, 78, 92, 0.10), transparent 68%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(52, 82, 120, 0.05), transparent 72%);
}

.confirm-card {
  position: relative;
  z-index: 1;
  width: min(30rem, 100%);
  padding: clamp(2rem, 3.4vw, 2.75rem);
  border: 1px solid rgba(140, 165, 200, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(13, 24, 35, 0.96), rgba(8, 16, 25, 0.985) 62%, rgba(6, 12, 20, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 30px 70px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.confirm-badge {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(18px, 2.4vh, 24px);
}

.confirm-icon {
  display: grid;
  place-items: center;
  width: 3.4rem;
  aspect-ratio: 1;
  border: 1px solid rgba(35, 209, 139, 0.34);
  border-radius: 50%;
  color: var(--auth-green);
  background: rgba(35, 209, 139, 0.08);
  box-shadow: 0 0 0 6px rgba(35, 209, 139, 0.05), 0 0 34px rgba(35, 209, 139, 0.14);
}

.confirm-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Neutral variant of the badge for non-success terminal states (access pending /
   account not recognized) — a calm slate rather than the green success mark.
   Same specificity as .confirm-icon, so it must stay after it in source order. */
.confirm-icon--quiet {
  border-color: rgba(150, 175, 210, 0.28);
  color: rgba(196, 214, 236, 0.92);
  background: rgba(150, 175, 210, 0.07);
  box-shadow: 0 0 0 6px rgba(150, 175, 210, 0.04), 0 0 30px rgba(90, 120, 160, 0.12);
}

.confirm-kicker {
}

.confirm-title {
  margin: 12px 0 0;
}

.confirm-sub {
  max-width: 26rem;
  margin: 12px auto 0;
}

.confirm-profile {
  display: grid;
  margin: clamp(20px, 2.8vh, 26px) 0 0;
  border-block: 1px solid rgba(140, 165, 200, 0.14);
}

.confirm-profile > div {
  display: grid;
  grid-template-columns: minmax(6rem, 0.7fr) minmax(0, 1.3fr);
  gap: 1rem;
  padding: 0.8rem 0;
  text-align: left;
}

.confirm-profile > div + div {
  border-top: 1px solid rgba(140, 165, 200, 0.1);
}

.confirm-profile dt {
  color: rgba(200, 220, 230, 0.5);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.confirm-profile dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
}

.confirm-status {
  color: var(--auth-green);
}

.confirm-actions {
  display: grid;
  gap: 0.9rem;
  margin-top: clamp(20px, 2.8vh, 26px);
}

/* Primary green action — same button language as the sign-in / request buttons. */
.confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.4rem;
  border-radius: 14px;
  color: #05130d;
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(180deg, #1fb87d 0%, #0e9a64 55%, #0a8a58 100%);
  box-shadow: 0 0.4rem 0.9rem rgba(6, 17, 22, 0.32);
  transition: transform 160ms ease, box-shadow 200ms ease, filter 160ms ease;
}

.confirm-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 0.6rem 1.2rem rgba(6, 17, 22, 0.4);
}

.confirm-textlink {
  justify-self: center;
  color: var(--muted);
  font-size: 0.84rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.confirm-textlink:hover {
  color: var(--text);
}

.confirm-note {
  margin: clamp(18px, 2.4vh, 22px) 0 0;
}

@media (max-width: 480px) {
  .confirm-card {
    padding: 1.6rem 1.4rem;
    border-radius: 20px;
  }

  .confirm-profile > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}