/*
 * Auth · The Felt — Phase 1: Landing + shared shell + mobile breakpoint.
 *
 * Aesthetic: oxblood + brass + vellum. Cormorant Garamond italic + JetBrains
 * Mono + Inter. Deep red disc backdrop, brass-plaque method buttons with
 * pseudo-rivets. Built from the "Auth · The Felt" design bundle.
 *
 * Phase 1 ships Screen 01 only. Other section[data-screen] blocks will be
 * added in P2–P6. The shared shell tokens (--brass, --vellum, --iron-edge,
 * etc.) and the FeltBackdrop layers (.bja-felt-*) are forward-compatible.
 */

/* ===== Tokens =========================================================== */
:root {
  --brass:        #c9a24a;
  --brass-hi:     #f4d680;
  --brass-lo:     #5a4418;
  --vellum:       #ece3cf;
  --vellum-dim:   rgba(236, 227, 207, 0.55);
  --iron-edge:    #2a2a30;
  --oxblood-1:    #5a1118;
  --oxblood-2:    #3a070d;
  --oxblood-3:    #220308;
  --oxblood-bg-1: #4a0d14;
  --oxblood-bg-2: #2a060a;
  --oxblood-bg-3: #150307;
  --ink:          #1a1410;
  --night:        #050508;
}

/* ===== Page reset ======================================================== */
html, body {
  margin: 0;
  padding: 0;
  background: var(--night);
  color: var(--vellum);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { overflow-x: hidden; }
* { box-sizing: border-box; }

/* ===== Felt backdrop ===================================================== */
.bja-felt {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, var(--oxblood-bg-1) 0%, var(--oxblood-bg-2) 60%, var(--oxblood-bg-3) 100%),
    var(--night);
}
.bja-felt-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.08;
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 2px, rgba(229,193,106,0.06) 2px 3px),
    repeating-linear-gradient(90deg, transparent 0 2px, rgba(229,193,106,0.06) 2px 3px);
  mix-blend-mode: screen;
}
.bja-felt-disc {
  position: absolute;
  left: 50%; bottom: -480px;
  transform: translateX(-50%);
  width: 1720px; height: 1720px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(229,193,106,0.10), transparent 50%),
    linear-gradient(180deg, var(--oxblood-1) 0%, var(--oxblood-2) 60%, var(--oxblood-3) 100%);
  box-shadow:
    0 -40px 80px rgba(0,0,0,0.6),
    inset 0 0 120px rgba(0,0,0,0.7),
    inset 0 6px 0 rgba(229,193,106,0.18);
}
.bja-felt-disc::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05)     0 2px, transparent 2px 4px),
    repeating-linear-gradient(0deg,  rgba(255,200,180,0.04) 0 2px, transparent 2px 4px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.bja-felt-disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--brass);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 0 4px rgba(229,193,106,0.25);
}
.bja-felt-ring-mid,
.bja-felt-ring-inner {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.bja-felt-ring-mid   { width: 1340px; height: 1340px; border: 1px solid rgba(201,162,74,0.28); }
.bja-felt-ring-inner { width: 1140px; height: 1140px; border: 1px dashed rgba(201,162,74,0.16); }
.bja-felt-motto {
  position: absolute; left: 50%; top: 110px;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 22px;
  color: rgba(229,193,106,0.7);
  letter-spacing: 0.4em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7);
  white-space: nowrap;
}

/* ===== Section gating ==================================================== */
/* All section[data-screen] are hidden by default. auth-flow.js sets
   data-active="true" on the active section + toggles aria-hidden. */
section[data-screen] { display: none; }
section[data-screen][data-active="true"] { display: block; }

/* ===== AuthCard shell (Screens 02+) ===================================== */
/* A centered modal card on the felt. Wraps non-landing screens. */
.bja-card-stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  z-index: 1;
}
/* Override the generic `section[data-screen][data-active="true"] { display: block }`
   default (line 113) — that selector (0,2,1) beats `.bja-card-stage` (0,1,0) and
   was breaking the flex centering on all card-stage screens. This selector
   (0,3,1) wins on specificity and is scoped so Screen 01 landing (uses
   `.bja-landing`, not `.bja-card-stage`) is untouched. */
section[data-screen][data-active="true"].bja-card-stage { display: flex; }
.bja-card-shell {
  width: 480px; max-width: 100%;
  background: linear-gradient(180deg, rgba(20,18,24,.96) 0%, rgba(12,11,16,.96) 100%);
  border: 1px solid var(--iron-edge);
  border-top: 1px solid var(--brass);
  box-shadow:
    0 28px 60px rgba(0,0,0,.7),
    0 0 0 1px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,235,180,.04);
  padding: 32px 36px;
  color: var(--vellum);
  font-family: 'Inter', sans-serif;
  position: relative;
}
.bja-card-shell::before {
  /* Inner brass hairline */
  content: ""; position: absolute;
  left: 8px; right: 8px; top: 8px; bottom: 8px;
  border: 1px solid rgba(201,162,74,.12);
  pointer-events: none;
}
.bja-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
  position: relative; z-index: 1;
}
.bja-card-header-left { display: flex; align-items: center; gap: 14px; }
.bja-back {
  width: 30px; height: 30px; padding: 0;
  background: transparent;
  border: 1px solid #3a3a42;
  color: var(--brass); cursor: pointer;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.bja-back:hover, .bja-back:focus-visible {
  border-color: var(--brass);
  color: var(--brass-hi);
}
.bja-smallmark { display: inline-flex; align-items: center; gap: 8px; }
.bja-smallmark-bja {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 600;
  font-size: 22px; color: #e5c16a; line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.bja-smallmark-rule { width: 1px; height: 14px; background: #5a4418; }
.bja-smallmark-name {
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  font-size: 9px; letter-spacing: .35em; text-transform: uppercase;
  color: rgba(229,193,106,.75);
}
.bja-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 500;
  font-size: 38px; line-height: 1.05;
  letter-spacing: .005em;
  margin: 0;
  color: var(--vellum);
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  position: relative; z-index: 1;
}
.bja-card-title .accent { color: var(--brass-hi); }
.bja-card-sub {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: 14px; line-height: 1.5;
  color: rgba(236,227,207,.75);
  margin: 10px 0 0;
  position: relative; z-index: 1;
}
.bja-card-sub strong { color: var(--vellum); font-weight: 500; }
.bja-card-body { margin-top: 24px; position: relative; z-index: 1; }
.bja-card-footer {
  margin-top: 20px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  position: relative; z-index: 1;
}

/* ===== Form fields ===================================================== */
.bja-field-block { margin-bottom: 14px; }
.bja-field-label {
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  font-size: 9px; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(229,193,106,.8);
  margin-bottom: 8px;
  display: block;
}
.bja-field {
  display: flex; align-items: center;
  background: rgba(8,8,12,.7);
  border: 1px solid var(--iron-edge);
  border-bottom: 1px solid var(--brass);
  padding: 0 12px;
  height: 48px;
}
.bja-field.--error { border-color: #a0242d; border-bottom-color: #c93545; }
.bja-field-prefix {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 18px; color: var(--brass); margin-right: 8px;
}
.bja-field-input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--vellum);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px; font-weight: 500;
  letter-spacing: .01em;
  padding: 0; height: 100%;
  caret-color: var(--brass);
}
.bja-field-input:not(:placeholder-shown) { font-style: normal; }
.bja-field-input::placeholder { color: rgba(236,227,207,.4); font-style: italic; }
.bja-phone-row { display: flex; gap: 8px; }
.bja-phone-country {
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px;
  background: rgba(8,8,12,.7);
  border: 1px solid var(--iron-edge);
  border-bottom: 1px solid var(--brass);
  height: 48px;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 19px; color: var(--vellum);
}
.bja-phone-country .flag { font-size: 18px; }
.bja-phone-field { flex: 1; }
.bja-field-help {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
  color: rgba(236,227,207,.6);
}
.bja-field-help.--error { color: #e89aa2; }
.bja-field-help::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: #7a6f55; flex-shrink: 0;
}
.bja-field-help.--error::before { background: #c93545; }

/* ===== OTP grid ======================================================== */
.bja-otp {
  display: flex; justify-content: space-between; gap: 8px;
}
.bja-otp-box {
  flex: 1;
  height: 68px;
  background: rgba(8,8,12,.7);
  border: 1px solid var(--iron-edge);
  border-bottom: 2px solid var(--brass);
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 600;
  font-size: 36px; color: var(--vellum);
  caret-color: var(--brass);
  outline: none;
  padding: 0;
  min-width: 0;
  -moz-appearance: textfield;
}
.bja-otp-box::-webkit-outer-spin-button,
.bja-otp-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bja-otp-box:focus { border-bottom-color: var(--brass-hi); }
.bja-screen-error .bja-otp-box {
  border-color: #a0242d;
  border-bottom-color: #c93545;
}

/* ===== Primary CTA (form variant of the brass plaque) ================== */
.bja-cta-primary {
  width: 100%; padding: 0; background: transparent; border: none;
  cursor: pointer; color: inherit; font-family: inherit;
  display: block; margin-top: 16px;
}
.bja-cta-primary[disabled] { cursor: not-allowed; opacity: .55; }
.bja-cta-primary-face {
  position: relative; height: 60px;
  background: linear-gradient(180deg, #f1d685 0%, #d4ac4f 30%, #8a6d2c 70%, #5a4418 100%);
  border: 1.5px solid var(--brass-lo);
  border-top: 1.5px solid var(--brass-hi);
  box-shadow:
    0 6px 16px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,235,180,.5),
    inset 0 -2px 4px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--ink);
}
.bja-cta-primary-face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255,245,210,.25) 50%, transparent 60%);
}
.bja-cta-primary-label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 600;
  font-size: 25px; color: var(--ink); line-height: 1;
  text-shadow: 0 1px 0 rgba(255,240,200,.55), 0 -1px 0 rgba(0,0,0,.35);
  position: relative; z-index: 1; white-space: nowrap;
}
.bja-cta-primary-arrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 26px; color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,240,200,.55);
  position: relative; z-index: 1;
}
.bja-cta-primary[aria-busy="true"] .bja-cta-primary-arrow { display: none; }
.bja-cta-primary-spinner {
  display: none;
  width: 22px; height: 22px;
  border: 2px solid rgba(26,20,16,.25);
  border-top: 2px solid var(--ink);
  border-radius: 50%;
  animation: spin-bja 0.85s linear infinite;
}
.bja-cta-primary[aria-busy="true"] .bja-cta-primary-spinner { display: inline-block; }

/* ===== Ghost link ====================================================== */
.bja-ghost {
  background: transparent; border: none; padding: 0;
  color: var(--brass-hi);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(229,193,106,.4);
  text-underline-offset: 4px;
}
.bja-ghost.--dim { color: var(--vellum-dim); }
.bja-ghost.--mono {
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none;
}
.bja-ghost:hover, .bja-ghost:focus-visible { color: var(--brass-hi); }

/* ===== Banner (error / info / success) ================================ */
.bja-banner {
  background: rgba(122,26,34,.32);
  border: 1px solid #a0242d;
  border-top: 1px solid #c93545;
  padding: 12px 14px;
  margin-bottom: 18px;
  display: flex; gap: 10px; align-items: flex-start;
  color: #f1c7cc;
}
.bja-banner::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #c93545; margin-top: 6px; flex-shrink: 0;
}
.bja-banner-body { flex: 1; min-width: 0; }
.bja-banner-title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600; font-size: 9.5px;
  letter-spacing: .3em; text-transform: uppercase;
  color: #c93545; margin-bottom: 4px;
}
.bja-banner-text {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; line-height: 1.45;
}
.bja-banner[hidden] { display: none; }
.bja-banner.--success {
  background: rgba(20,40,28,.5);
  border: 1px solid #3a6650;
  border-top: 1px solid #5fbf83;
  color: #c3e6cf;
}
.bja-banner.--success::before { background: #5fbf83; }
.bja-banner.--success .bja-banner-title { color: #5fbf83; }

/* ===== Cooldown pill =================================================== */
.bja-cooldown {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(8,8,12,.7);
  border: 1px solid var(--iron-edge);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(236,227,207,.55);
}
.bja-cooldown::before {
  content: ""; width: 10px; height: 10px;
  border: 1.5px solid rgba(122,111,85,.3);
  border-top-color: #7a6f55;
  border-radius: 50%;
  animation: spin-bja 0.85s linear infinite;
}
.bja-cooldown[hidden] { display: none; }

/* ===== Turnstile slot ================================================== */
.bja-turnstile-slot {
  margin-top: 14px;
  margin-bottom: 6px;
}
.bja-turnstile-frame {
  padding: 14px 16px;
  background: rgba(8,8,12,.7);
  border: 1px solid var(--iron-edge);
  border-bottom: 1px solid var(--brass);
  min-height: 70px;
  display: flex; align-items: center;
}
.bja-turnstile-frame > div { width: 100%; }

/* ===== Segmented toggle (Sign in / Create) ============================== */
.bja-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(8,8,12,.7);
  border: 1px solid var(--iron-edge);
  padding: 3px;
  margin-bottom: 22px;
}
.bja-segmented-btn {
  padding: 12px 14px;
  background: transparent;
  border: none;
  color: rgba(236,227,207,.7);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  transition: background .15s ease, color .15s ease;
}
.bja-segmented-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #d4ac4f 0%, #8a6d2c 100%);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,.5),
    inset 0 -2px 4px rgba(0,0,0,.3),
    0 2px 6px rgba(0,0,0,.4);
}

/* ===== Divider with center text ======================================== */
.bja-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0;
}
.bja-divider::before,
.bja-divider::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(229,193,106,.18);
}
.bja-divider-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(229,193,106,.55);
}

/* ===== OAuth chip row (Screen 07) ====================================== */
.bja-oauth-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.bja-oauth-chip {
  background: rgba(8,8,12,.7);
  border: 1px solid var(--iron-edge);
  border-top: 1px solid var(--brass);
  padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
  color: var(--vellum);
  font-family: inherit;
  transition: border-color .15s ease;
}
.bja-oauth-chip:hover, .bja-oauth-chip:focus-visible {
  border-color: var(--brass-hi);
}
.bja-oauth-chip-icon {
  width: 22px; height: 22px;
  color: var(--brass);
}
.bja-oauth-chip-label {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 16px; line-height: 1; color: var(--vellum);
}
.bja-oauth-chip-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(229,193,106,.65);
}

/* ===== Password show/hide toggle ======================================= */
.bja-field-toggle {
  background: transparent;
  border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brass);
  cursor: pointer;
  padding: 4px 6px;
}
.bja-field-toggle:hover, .bja-field-toggle:focus-visible {
  color: var(--brass-hi);
}

/* ===== Field right-aligned ghost link row ============================== */
.bja-field-aside {
  display: flex; justify-content: flex-end;
  margin-top: 2px; margin-bottom: 4px;
}

/* ===== Inline form microcopy (Create-Account TOS notice) =============== */
.bja-form-microcopy {
  margin-top: 18px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(236,227,207,.55);
}
.bja-form-microcopy a {
  color: var(--brass-hi);
  text-decoration: none;
  border-bottom: 1px dotted rgba(229,193,106,.4);
}
.bja-form-microcopy a:hover,
.bja-form-microcopy a:focus-visible { color: var(--brass); }

/* ===== Locked info box (Screen 20) ===================================== */
.bja-locked-box {
  background: rgba(8,8,12,.7);
  border: 1px solid #6a4f20;
  border-top: 1px solid var(--brass);
  padding: 20px 22px;
  margin-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
}
.bja-locked-box-label {
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  font-size: 9px; letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(229,193,106,.75);
  margin-bottom: 4px;
}
.bja-locked-box-value {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-weight: 600; font-size: 32px;
  color: var(--vellum); line-height: 1;
}
.bja-locked-box-note {
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: rgba(236,227,207,.6);
  text-align: right;
  max-width: 180px;
  line-height: 1.45;
}

/* ===== Signed-out glyph (Screen 23) ==================================== */
.bja-signed-out-glyph {
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--oxblood-bg-1) 0%, var(--oxblood-bg-2) 60%, var(--oxblood-bg-3) 100%);
  border: 2px solid var(--brass);
  box-shadow: 0 8px 18px rgba(0,0,0,.55), inset 0 0 20px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  color: var(--brass-hi);
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-weight: 600; font-size: 40px;
}

/* ===== Availability pill (Screen 17) =================================== */
.bja-availability-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(236,227,207,.5);
  padding: 0 6px;
}
.bja-availability-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.bja-availability-pill[data-state="checking"] { color: rgba(236,227,207,.5); }
.bja-availability-pill[data-state="available"] { color: #5fbf83; }
.bja-availability-pill[data-state="unavailable"] { color: #c93545; }
.bja-availability-pill[data-state="hidden"] { display: none; }

/* ===== Suggestion chips (Screen 17) ==================================== */
.bja-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 20px;
}
.bja-suggestion-chip {
  padding: 6px 11px;
  background: rgba(8,8,12,.6);
  border: 1px solid var(--iron-edge);
  color: rgba(236,227,207,.85);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.bja-suggestion-chip:hover,
.bja-suggestion-chip:focus-visible {
  border-color: var(--brass);
  color: var(--vellum);
}

/* ===== Strength bar (Screen 14) ======================================== */
.bja-strength {
  margin: 4px 0 14px;
}
.bja-strength-bars {
  display: flex; gap: 4px; margin-bottom: 6px;
}
.bja-strength-bar {
  flex: 1; height: 4px;
  background: var(--iron-edge);
  transition: background .2s ease;
}
.bja-strength[data-tier="1"] .bja-strength-bar:nth-child(-n+1),
.bja-strength[data-tier="2"] .bja-strength-bar:nth-child(-n+2) { background: #c93545; }
.bja-strength[data-tier="3"] .bja-strength-bar:nth-child(-n+3) { background: #e5c16a; }
.bja-strength[data-tier="4"] .bja-strength-bar { background: #5fbf83; }
.bja-strength-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(236,227,207,.45);
}
.bja-strength[data-tier="1"] .bja-strength-label,
.bja-strength[data-tier="2"] .bja-strength-label { color: #c93545; }
.bja-strength[data-tier="3"] .bja-strength-label { color: #e5c16a; }
.bja-strength[data-tier="4"] .bja-strength-label { color: #5fbf83; }

/* ===== Envelope + seal-mark (Screens 09 / 10 / 11) ===================== */
.bja-art-row {
  display: flex; justify-content: center;
  margin-bottom: 18px;
}
.bja-envelope {
  width: 88px; height: 62px;
  position: relative;
  background: linear-gradient(180deg, #ece3cf 0%, #d6cdb6 100%);
  border: 1px solid var(--brass-lo);
  border-top: 2px solid var(--brass);
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
}
.bja-envelope::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #f1e6c9 0%, #d6cdb6 50%);
  clip-path: polygon(0 0, 100% 0, 50% 60%);
  border-bottom: 1px solid #8a6d2c;
}
.bja-envelope::after {
  content: "♠"; position: absolute;
  left: 50%; top: 55%;
  transform: translate(-50%, -50%);
  width: 23px; height: 23px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #c93545 0%, #6e1620 70%, #3a070d 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  color: #3a070d;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12px;
  font-weight: 700;
}

.bja-seal-mark {
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 2px solid #14361f;
  background: radial-gradient(circle at 35% 28%, #6fc78e 0%, #2e6e44 70%, #14361f 100%);
  box-shadow:
    0 8px 18px rgba(0,0,0,.6),
    inset 0 -6px 12px rgba(0,0,0,.45),
    inset 0 4px 8px rgba(255,220,180,.3);
  display: flex; align-items: center; justify-content: center;
  color: #0d1f12;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 50px;
}
.bja-seal-mark.--warn {
  border-color: #3a070d;
  background: radial-gradient(circle at 35% 28%, #c93545 0%, #6e1620 70%, #3a070d 100%);
  color: #2a070b;
}

/* ===== Animations ====================================================== */
@keyframes spin-bja { to { transform: rotate(360deg); } }
@keyframes blink-bja { 50% { opacity: 0; } }

/* ===== Landing layout (Screen 01) ======================================== */
.bja-landing {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  z-index: 1;
}
.bja-landing-wordmark-block {
  position: absolute; top: 70px; left: 0; right: 0;
  text-align: center;
  z-index: 5;
}
.bja-wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 500;
  font-size: 92px; line-height: 1;
  letter-spacing: 0.005em;
  color: var(--vellum);
  text-shadow: 0 4px 18px rgba(0,0,0,0.65), 0 0 40px rgba(229,193,106,0.15);
  margin: 0;
}
.bja-wordmark .accent { color: var(--brass-hi); }
.bja-tagline {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 14px; letter-spacing: 0.28em;
  color: rgba(245,225,180,0.95);
  text-transform: uppercase;
  margin-top: 32px;
  display: inline-flex; align-items: center; gap: 16px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.bja-tagline-rule { width: 32px; height: 1px; background: rgba(229,193,106,0.7); }

/* ===== Action card fan =================================================== */
/* 8 action cards arranged in an arc. Each card's rotation is set inline via
   a CSS custom property (--rot) so this stylesheet stays declarative. */
.bja-fan {
  position: absolute;
  left: 50%; top: 280px;
  transform: translateX(-50%);
  width: 1120px; height: 424px;
  z-index: 4;
  pointer-events: none;
}
.bja-fan-card {
  position: absolute;
  left: calc(50% - 80px);
  top: 0;
  width: 160px; height: 224px;
  transform: rotate(var(--rot, 0deg));
  transform-origin: 50% 720px;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,0.65));
}

/* Action card visual (vanilla rebuild of design's ActionCard). */
.bja-card {
  width: 100%; height: 100%; position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-top: 2px solid var(--card-border);
  color: var(--card-fg, var(--vellum));
  box-shadow:
    0 6px 16px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 0 0 1px rgba(0,0,0,0);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  overflow: hidden;
}
.bja-card-glyph {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 700;
  font-size: 90px; line-height: 1; letter-spacing: 0.02em;
  color: var(--card-accent);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  position: relative; z-index: 2;
}
.bja-card-sigil {
  font-family: serif;
  font-size: 80px; line-height: 1;
  color: var(--card-accent);
  text-shadow: 0 0 10px var(--card-glow, rgba(0,0,0,0)), 0 1px 4px rgba(0,0,0,0.6);
  position: relative; z-index: 2;
}
.bja-card-sigil.--hazard {
  font-weight: 700;
  transform: rotate(-8deg) translateY(-2px);
  text-shadow: 0 0 10px #ffcc33, 0 0 20px rgba(255,80,40,0.8), 0 2px 0 #1a0203;
}
.bja-card-sigil.--frost {
  text-shadow: 0 0 10px #dfefff, 0 0 18px rgba(127,205,255,0.6), 0 1px 0 #0a1e36;
}
.bja-card-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--card-accent); opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  position: relative; z-index: 2;
  margin-top: 2px;
}
/* Brass corner ticks */
.bja-card::before,
.bja-card::after {
  content: ""; position: absolute;
  width: 7px; height: 7px; opacity: 0.7; z-index: 1;
}
.bja-card::before {
  top: 3px; left: 3px;
  border-top: 1px solid var(--card-border);
  border-left: 1px solid var(--card-border);
}
.bja-card::after {
  bottom: 3px; right: 3px;
  border-bottom: 1px solid var(--card-border);
  border-right: 1px solid var(--card-border);
}
/* Pattern overlay */
.bja-card-pattern {
  position: absolute; inset: 0;
  pointer-events: none;
}

/* ----- Per-kind palettes ----- */
.bja-card[data-kind="+1"],
.bja-card[data-kind="+2"] {
  --card-bg: linear-gradient(180deg, #3a8a3a 0%, #1a5a1a 60%, #082408 100%);
  --card-border: #7ed87e;
  --card-accent: #d4ff8a;
}
.bja-card[data-kind="-5"] {
  --card-bg: linear-gradient(180deg, #c93030 0%, #6e0e0e 60%, #2a0506 100%);
  --card-border: #ff6a6a;
  --card-accent: #ffd4d4;
}
.bja-card[data-kind="ST"],
.bja-card[data-kind="SW"] {
  --card-bg: linear-gradient(180deg, #6a3a8a 0%, #3d2550 60%, #1a0e26 100%);
  --card-border: #c89cff;
  --card-accent: #f0d4ff;
}
.bja-card[data-kind="FC"] {
  --card-bg: linear-gradient(180deg, #6a3a8a 0%, #3d2550 60%, #1a0e26 100%);
  --card-border: #c89cff;
  --card-accent: #ffd870;
}
.bja-card[data-kind="FH"] {
  --card-bg: linear-gradient(180deg, #c93030 0%, #6e0e0e 60%, #2a0506 100%);
  --card-border: #ff4a4a;
  --card-accent: #ffe066;
}
.bja-card[data-kind="FF"] {
  --card-bg: linear-gradient(180deg, #3a7ab0 0%, #1f4a7a 60%, #0a1e36 100%);
  --card-border: #7fcdff;
  --card-accent: #dfefff;
}

/* ----- Per-kind pattern overlays ----- */
.bja-card[data-kind="+1"] .bja-card-pattern,
.bja-card[data-kind="+2"] .bja-card-pattern {
  background: radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255,255,180,0.20), transparent 70%);
}
.bja-card[data-kind="-5"] .bja-card-pattern {
  background: repeating-linear-gradient(180deg, transparent 0 8px, rgba(0,0,0,0.2) 8px 9px);
  mix-blend-mode: multiply;
}
.bja-card[data-kind="ST"] .bja-card-pattern {
  background:
    repeating-linear-gradient(90deg, rgba(200,156,255,0.10) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 50% 50%, rgba(200,156,255,0.18), transparent 70%);
}
.bja-card[data-kind="FC"] .bja-card-pattern {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,216,112,0.35) 0%, transparent 50%);
}
.bja-card[data-kind="SW"] .bja-card-pattern {
  background:
    repeating-linear-gradient( 45deg, rgba(200,156,255,0.12) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(-45deg, rgba(200,156,255,0.12) 0 3px, transparent 3px 9px);
}
.bja-card[data-kind="FH"] .bja-card-pattern {
  background: repeating-linear-gradient(135deg, rgba(255,200,40,0.18) 0 4px, transparent 4px 10px);
  mix-blend-mode: screen;
}
.bja-card[data-kind="FF"] .bja-card-pattern {
  background:
    repeating-linear-gradient( 45deg, rgba(220,240,255,0.10) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(220,240,255,0.10) 0 2px, transparent 2px 8px);
}

/* ===== Plaque buttons (Google / Phone / Account) ========================= */
/* Bottom-anchored so they stay visible on viewports shorter than the design's
   900-tall canvas. Footer sits 22px from the bottom; plaques 80px above it. */
.bja-plaques {
  position: absolute;
  left: 0; right: 0; bottom: 80px; top: auto;
  display: flex; justify-content: center; align-items: flex-start;
  gap: 26px;
  z-index: 5;
}
.bja-plaque {
  width: 280px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  color: inherit; font-family: inherit;
  display: block;
}
.bja-plaque-face {
  position: relative;
  height: 84px;
  background: linear-gradient(180deg, #f1d685 0%, #d4ac4f 30%, #8a6d2c 70%, #5a4418 100%);
  border: 1.5px solid var(--brass-lo);
  border-top: 1.5px solid var(--brass-hi);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,235,180,0.5),
    inset 0 -2px 4px rgba(0,0,0,0.35);
  display: flex; align-items: center;
  padding: 0 22px 0 18px;
  gap: 14px;
  color: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bja-plaque:hover .bja-plaque-face,
.bja-plaque:focus-visible .bja-plaque-face {
  transform: translateY(-1px);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,235,180,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.35);
}
.bja-plaque:active .bja-plaque-face { transform: translateY(0); }
.bja-plaque:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 4px; }
.bja-plaque-face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255,245,210,0.25) 50%, transparent 60%);
}
/* Pseudo-rivets (4 corners) */
.bja-plaque-face .rivet {
  position: absolute;
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--brass-hi), #4a3a18);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5);
}
.bja-plaque-face .rivet.tl { top: 8px; left: 8px; }
.bja-plaque-face .rivet.tr { top: 8px; right: 14px; }
.bja-plaque-face .rivet.bl { bottom: 8px; left: 8px; }
.bja-plaque-face .rivet.br { bottom: 8px; right: 14px; }
.bja-plaque-glyph {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.bja-plaque-glyph svg { width: 28px; height: 28px; }
.bja-plaque-text { flex: 1; min-width: 0; position: relative; }
.bja-plaque-label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 600;
  font-size: 28px; color: var(--ink); line-height: 1;
  text-shadow: 0 1px 0 rgba(255,240,200,0.55), 0 -1px 0 rgba(0,0,0,0.35);
}
.bja-plaque-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(26,20,16,0.7);
  margin-top: 5px;
}
.bja-plaque-arrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 26px;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,240,200,0.55);
  flex-shrink: 0;
}

/* ===== Footer ============================================================ */
.bja-footer {
  position: absolute;
  bottom: 22px; left: 0; right: 0;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(229,193,106,0.5);
  z-index: 6;
}
.bja-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(229,193,106,0.35);
}
.bja-footer a:hover,
.bja-footer a:focus-visible { color: var(--brass-hi); }
.bja-footer .sep { color: rgba(229,193,106,0.3); margin: 0 6px; }

/* ===== Short-viewport guard (height ≤820px) ============================= */
/* Compresses the desktop arc so it doesn't overlap the bottom-anchored
   plaques on common laptop viewports (typical 13" lid ≈ 768px tall). */
@media (min-width: 481px) and (max-height: 820px) {
  .bja-landing-wordmark-block { top: 40px; }
  .bja-wordmark { font-size: 68px; }
  .bja-tagline { margin-top: 22px; font-size: 12px; }
  .bja-fan {
    top: 200px;
    transform: translateX(-50%) scale(0.7);
    transform-origin: 50% 0;
  }
  .bja-plaques { bottom: 64px; }
  .bja-plaque { width: 240px; }
  .bja-plaque-face { height: 72px; }
  .bja-plaque-label { font-size: 24px; }
}

/* ===== Very short viewport guard (height ≤600px) ========================= */
/* Split-screen Chromebooks, windowed laptop sessions, iPad multitasking. */
@media (min-width: 481px) and (max-height: 600px) {
  .bja-landing-wordmark-block { top: 24px; }
  .bja-wordmark { font-size: 52px; }
  .bja-tagline { margin-top: 16px; font-size: 11px; }
  .bja-fan {
    top: 160px;
    transform: translateX(-50%) scale(0.55);
  }
  .bja-plaques { bottom: 48px; }
  .bja-plaque-face { height: 60px; }
  .bja-plaque-label { font-size: 20px; }
  .bja-footer { bottom: 14px; font-size: 8px; }
}

/* ===== Mobile breakpoint (≤480px) ======================================== */
@media (max-width: 480px) {
  /* Card shell shrink */
  .bja-card-stage { padding: 20px 16px; }
  .bja-card-shell { width: 340px; padding: 24px 22px; }
  .bja-card-title { font-size: 30px; }
  .bja-card-sub { font-size: 13px; }
  .bja-card-header { margin-bottom: 18px; }
  .bja-field, .bja-phone-country { height: 44px; }
  .bja-field-input { font-size: 17px; }
  .bja-phone-country { font-size: 17px; }
  .bja-otp-box { height: 56px; font-size: 28px; }
  .bja-otp { gap: 5px; }
  .bja-cta-primary-face { height: 54px; }
  .bja-cta-primary-label { font-size: 22px; }
  .bja-cta-primary-arrow { font-size: 22px; }
  .bja-ghost { font-size: 12px; }
  .bja-ghost.--mono { font-size: 10px; }
  .bja-segmented { margin-bottom: 18px; }
  .bja-segmented-btn { padding: 10px 12px; font-size: 10px; }
  .bja-divider { margin: 14px 0; }
  .bja-divider-text { font-size: 9px; }
  .bja-oauth-chip { padding: 10px 8px; }
  .bja-oauth-chip-icon { width: 18px; height: 18px; }
  .bja-oauth-chip-label { font-size: 15px; }
  .bja-form-microcopy { margin-top: 14px; font-size: 11.5px; }
  .bja-suggestion-chip { font-size: 14px; }
  .bja-availability-pill { font-size: 9px; }
  .bja-locked-box { padding: 16px 18px; }
  .bja-locked-box-value { font-size: 26px; }
  .bja-locked-box-note { font-size: 12px; max-width: 140px; }
  .bja-signed-out-glyph { width: 78px; height: 78px; font-size: 32px; }
  .bja-envelope { width: 72px; height: 50px; }
  .bja-envelope::after { width: 19px; height: 19px; font-size: 10px; }
  .bja-seal-mark { width: 82px; height: 82px; font-size: 41px; }
  .bja-felt-disc {
    width: 760px; height: 760px;
    bottom: -240px;
    box-shadow:
      0 -20px 60px rgba(0,0,0,0.6),
      inset 0 0 80px rgba(0,0,0,0.7),
      inset 0 4px 0 rgba(229,193,106,0.18);
  }
  .bja-felt-disc::after {
    border: 2px solid var(--brass);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 3px rgba(229,193,106,0.25);
  }
  .bja-felt-ring-mid   { width: 600px; height: 600px; }
  .bja-felt-ring-inner { display: none; }
  .bja-felt-motto {
    top: 56px; font-size: 12px; letter-spacing: 0.35em;
  }
  .bja-landing-wordmark-block { top: 60px; }
  .bja-wordmark { font-size: 48px; }
  .bja-tagline {
    font-size: 9px; letter-spacing: 0.26em;
    padding: 0 32px; line-height: 1.5;
    margin-top: 16px;
    display: block;
  }
  .bja-tagline-rule { display: none; }
  .bja-tagline br { display: inline; }

  /* Mobile fan: 5-card top arc + 3-card bottom arc. --rot-mobile overrides
     the desktop rotation so cards fan at the design's narrower spans
     (44° top, 26° bottom) instead of the desktop 72° spread. */
  .bja-fan {
    left: 50%; top: 200px;
    width: 360px; height: 280px;
  }
  .bja-fan-card {
    width: 76px; height: 106px;
    left: calc(50% - 38px);
    transform: rotate(var(--rot-mobile, var(--rot, 0deg)));
    transform-origin: 50% 380px;
  }
  .bja-fan-card.--bottom {
    top: 130px;
    transform-origin: 50% 360px;
  }
  .bja-fan-card .bja-card-glyph { font-size: 42px; }
  .bja-fan-card .bja-card-sigil { font-size: 38px; }
  .bja-fan-card .bja-card-sub { font-size: 7.5px; }

  /* Mobile plaques: stacked column at bottom */
  .bja-plaques {
    left: 20px; right: 20px; top: auto;
    bottom: 64px;
    flex-direction: column;
    gap: 12px;
  }
  .bja-plaque { width: 100%; }
  .bja-plaque-face { height: 64px; padding: 0 18px 0 14px; gap: 12px; }
  .bja-plaque-face .rivet.tl { top: 6px; left: 6px; }
  .bja-plaque-face .rivet.tr { top: 6px; right: 12px; }
  .bja-plaque-face .rivet.bl { bottom: 6px; left: 6px; }
  .bja-plaque-face .rivet.br { bottom: 6px; right: 12px; }
  .bja-plaque-glyph { width: 30px; height: 30px; }
  .bja-plaque-glyph svg { width: 22px; height: 22px; }
  .bja-plaque-label { font-size: 22px; }
  .bja-plaque-sub { font-size: 7.5px; letter-spacing: 0.26em; margin-top: 3px; }
  .bja-plaque-arrow { font-size: 22px; }

  .bja-footer { bottom: 18px; font-size: 7.5px; letter-spacing: 0.28em; }
}