/* ==========================================================================
   Vettedlance brand layer: "Observed. Verified."
   Deep-space navy + the glass-blue of the logo. Space imagery: NASA, ESA,
   CSA, STScI (public domain), credited in the footer.
   ========================================================================== */

:root {
  --blue: #3F5BF5;          /* primary, from the logo core */
  --blue-2: #6E86FF;        /* lighter glass highlight */
  --indigo: #2C396E;        /* deep logo shadow */
  --frost: #C9D0DF;         /* glass rim */
  --violet: #8B7CFF;
  --cyan: #62D6FF;
  --glass: rgba(255, 255, 255, .06);
  --glass-line: rgba(201, 208, 223, .22);
  --grad-brand: linear-gradient(135deg, #2C44E0 0%, #3F5BF5 42%, #7B8CFF 100%);
  --grad-aurora: radial-gradient(60% 80% at 20% 10%, rgba(98, 214, 255, .22), transparent 60%),
                 radial-gradient(50% 70% at 85% 20%, rgba(139, 124, 255, .28), transparent 60%),
                 radial-gradient(70% 60% at 50% 110%, rgba(63, 91, 245, .35), transparent 60%);
}

body { background: var(--paper); }
::selection { background: rgba(63, 91, 245, .22); }

/* ---------- Brand mark ---------- */
.brand__mark { width: 34px; height: 34px; display: block; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(63, 91, 245, .35)); animation: none; }
.brand__word { background: linear-gradient(180deg, var(--ink) 30%, #3A4C9E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand--light .brand__word { background: linear-gradient(180deg, #fff 30%, var(--frost)); -webkit-background-clip: text; background-clip: text; }
.nav { background: rgba(244, 246, 252, .78); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }

/* ---------- Buttons: glass-blue like the logo ---------- */
.btn--ink { --bg: var(--grad-brand); --fg: #fff; background: var(--grad-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 22px -10px rgba(63, 91, 245, .75); border: 0; }
.btn--ink:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 34px -12px rgba(63, 91, 245, .9); filter: saturate(1.1) brightness(1.05); }
.btn--mint { --bg: linear-gradient(135deg, #fff, #DCE3FF); --fg: var(--indigo); background: linear-gradient(135deg, #fff, #DCE3FF); }
.btn--line:hover { --bd: var(--blue); color: var(--blue); }
.eyebrow::before { background: var(--grad-brand); border-radius: 50%; box-shadow: 0 0 10px rgba(63, 91, 245, .6); }

/* ---------- Cosmos: full-bleed space backdrop with a viewfinder ---------- */
.cosmos { position: relative; isolation: isolate; color: var(--on-night); background: var(--night); overflow: hidden; }
.cosmos::before { content: ""; position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: .92; }
.cosmos::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 10, 28, .94) 0%, rgba(7, 10, 28, .78) 38%, rgba(7, 10, 28, .25) 70%, rgba(7, 10, 28, .45) 100%),
              linear-gradient(0deg, var(--night) 0%, transparent 22%); }
.cosmos--carina::before { background-image: image-set(url("/space/carina-1920.webp") 1x); background-position: 60% 40%; }
.cosmos--helix::before { background-image: url("/space/helix-1920.webp"); background-position: 70% 55%; }
@media (max-width: 800px) {
  .cosmos--carina::before { background-image: url("/space/carina-960.webp"); }
    .cosmos::after { background: linear-gradient(180deg, rgba(7, 10, 28, .7), rgba(7, 10, 28, .9)); }
}
.cosmos .hero__title, .cosmos h1, .cosmos h2 { color: #fff; }
.cosmos .hero__title .serif { background: linear-gradient(90deg, #B9C7FF, #fff 45%, #9DB2FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cosmos .hero__lede, .cosmos p { color: var(--on-night-2); }
.cosmos .hero__proof { color: var(--on-night-2); }
.cosmos .eyebrow { color: var(--mint); }
.cosmos .btn--line { --bd: var(--glass-line); color: #fff; }
.cosmos .btn--line:hover { --bd: #fff; }
.cosmos .btn--ghost { color: #fff; }
.cosmos .hero__caption { color: var(--on-night-3); }
.cosmos .hero__glow { background: radial-gradient(55% 55% at 60% 45%, rgba(110, 134, 255, .45), transparent 70%); }

/* Viewfinder corners and catalogue tag: the "observed, then verified" motif. */
.reticle { position: absolute; width: 56px; height: 56px; pointer-events: none; border-color: rgba(201, 208, 223, .45); border-style: solid; z-index: 1; }
.reticle--tl { top: 22px; left: 22px; border-width: 1px 0 0 1px; }
.reticle--br { bottom: 22px; right: 22px; border-width: 0 1px 1px 0; }
.cosmos__tag { position: absolute; right: 26px; top: 26px; z-index: 1; font-size: .66rem; letter-spacing: .16em; color: rgba(201, 208, 223, .7); }
.cosmos__tag b { color: var(--mint); font-weight: 500; }
@media (max-width: 700px) { .reticle, .cosmos__tag { display: none; } }

/* The ledger card becomes frosted glass over the nebula. */
.ledger { background: linear-gradient(180deg, rgba(20, 28, 70, .72), rgba(9, 12, 34, .82)); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(201, 208, 223, .16), inset 0 1px 0 rgba(255, 255, 255, .12); }
.ledger__avatar { background: var(--grad-brand); }

/* Dark sections elsewhere pick up a soft aurora. */
.footer { position: relative; isolation: isolate; }
.footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-aurora); opacity: .8; pointer-events: none; }
.footer__credit { color: var(--on-night-3); font-size: .7rem; margin-top: 6px; }

/* ---------- Help Center + auth backdrops ---------- */
.hc-hero { position: relative; isolation: isolate; overflow: hidden; }
.hc-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/space/helix-1920.webp") 78% 55% / cover no-repeat; opacity: .95; }
.hc-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 10, 28, .95) 0%, rgba(7, 10, 28, .7) 45%, rgba(7, 10, 28, .2) 100%); }
.hc-search { box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .6); }

.auth { position: relative; isolation: isolate; overflow: hidden; background: var(--night); }
.auth::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/space/pillars-1920.webp") 50% 30% / cover no-repeat; opacity: .9; }
.auth::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 50% 50%, rgba(7, 10, 28, .35), rgba(7, 10, 28, .85)); }
.auth__card { background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7); position: relative; }
.auth__card::before { content: ""; position: absolute; left: 50%; top: -34px; width: 68px; height: 68px; transform: translateX(-50%); background: url("/brand/mark-128.webp") center / contain no-repeat; filter: drop-shadow(0 10px 20px rgba(63, 91, 245, .55)); }
.auth__card h1 { margin-top: 18px; text-align: center; }
.auth__card > .sub { text-align: center; }

/* ---------- Loader: reticle locks on to the mark ---------- */
.vl-loader { background: rgba(7, 10, 28, .55); }
.vl-loader__card { background: linear-gradient(180deg, #fff, #F1F4FF); }
.vl-loader__scope { position: relative; width: 84px; height: 84px; margin: 0 auto 14px; display: grid; place-items: center; }
.vl-loader__scope img { width: 46px; height: 46px; object-fit: contain; animation: vl-float 1.6s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(63, 91, 245, .45)); }
.vl-loader__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(63, 91, 245, .18); border-top-color: var(--blue); border-right-color: var(--violet); animation: vl-spin 1.1s linear infinite; }
.vl-loader__cross { position: absolute; inset: 8px; border-radius: 50%; background:
  linear-gradient(var(--blue), var(--blue)) center top / 1px 8px no-repeat, linear-gradient(var(--blue), var(--blue)) center bottom / 1px 8px no-repeat,
  linear-gradient(var(--blue), var(--blue)) left center / 8px 1px no-repeat, linear-gradient(var(--blue), var(--blue)) right center / 8px 1px no-repeat; opacity: .7; }
@keyframes vl-float { 50% { transform: translateY(-3px) scale(1.04); } }

/* ---------- Pagination (replaces the unstyled default) ---------- */
.pg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 8px 0; }
.pg__info { font-size: .82rem; color: var(--muted); }
.pg__list { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pg__btn { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font: inherit; font-size: .88rem; font-weight: 550; cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.pg__btn:hover:not([disabled]):not([aria-current]) { border-color: var(--blue); color: var(--blue); }
.pg__btn[aria-current="page"] { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -8px rgba(63, 91, 245, .8); }
.pg__btn[disabled] { opacity: .4; cursor: default; }
.pg__gap { min-width: 24px; text-align: center; color: var(--muted); align-self: center; }
.pg svg { width: 14px; height: 14px; }
.pager--list .pg { flex-direction: column; align-items: stretch; }
.pager--list .pg__info { text-align: center; }
.pager--list .pg__list { justify-content: center; }

/* ---------- Small touches that read as "premium" ---------- */
.jtile { --h: 230; }
.jrow.is-active { background: linear-gradient(90deg, rgba(63, 91, 245, .08), transparent); border-left-color: var(--blue); }
.jpill--hot { color: #C2410C; border-color: #FED7AA; background: #FFF7ED; }
.hot { color: #C2410C; }
.new { color: var(--blue); }
.jx__tabs button[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); }
.jx__views button[aria-pressed="true"], .seg button[aria-pressed="true"] { background: var(--grad-brand); color: #fff; }
.hw__btn { background: var(--grad-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 34px -12px rgba(63, 91, 245, .9); }
.hw__head { background: linear-gradient(135deg, #0B1033, #1B2A7A); }
.otp__box:focus, .jx__search:focus-within, .jx__bar select:focus { outline-color: var(--blue); }
.funnel__s.is-on { box-shadow: inset 0 -3px 0 var(--blue); background: rgba(63, 91, 245, .06); }
.funnel__s.is-on span, .funnel__s.is-on b { color: var(--blue); }
.stx--success { background: rgba(63, 91, 245, .12); color: #2C44E0; }
.earn__paid { background: var(--grad-brand); }
.earn__pending { background: rgba(63, 91, 245, .28); }
.dash__side a.is-active { background: var(--grad-brand) !important; color: #fff !important; }
.bell__n { background: #E11D48; }

/* ---------- Hero: the observatory ---------- */
.cosmos--carina { min-height: min(92vh, 900px); display: grid; align-items: center; }
.hero--observatory { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 120px); }
.hero--observatory .hero__title { font-size: clamp(3rem, 6.6vw, 5.8rem); text-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.hero--observatory .hero__lede { color: #C9D0E6; max-width: 52ch; }
.hero__stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 8px 28px; margin: 6px 0 0; padding-top: 22px; border-top: 1px solid rgba(201, 208, 223, .18); }
.hero__stats div { display: grid; gap: 2px; }
.hero__stats dt { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.hero__stats dd { margin: 0; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-3); }

.observatory { position: relative; aspect-ratio: 1; width: min(100%, 540px); justify-self: center; }
.observatory__halo { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(110, 134, 255, .55), rgba(63, 91, 245, .12) 45%, transparent 70%); filter: blur(24px); animation: halo 6s ease-in-out infinite alternate; }
@keyframes halo { to { transform: scale(1.12); opacity: .8; } }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(201, 208, 223, .18); }
.orbit::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px rgba(157, 178, 255, .9); }
.orbit--1 { inset: 22%; animation: spin-orbit 18s linear infinite; }
.orbit--2 { inset: 10%; border-style: dashed; border-color: rgba(201, 208, 223, .14); animation: spin-orbit 32s linear infinite reverse; }
.orbit--2::after { background: var(--cyan); box-shadow: 0 0 14px 4px rgba(98, 214, 255, .7); }
.orbit--3 { inset: 0; animation: spin-orbit 60s linear infinite; }
.orbit--3::after { background: var(--violet); box-shadow: 0 0 14px 4px rgba(139, 124, 255, .7); }
@keyframes spin-orbit { to { transform: rotate(360deg); } }
.observatory__core { position: absolute; left: 50%; top: 50%; width: 40%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 30px 50px rgba(20, 40, 160, .6)); animation: core-float 7s ease-in-out infinite; }
@keyframes core-float { 50% { transform: translate(-50%, -54%) rotate(-3deg); } }

.stars { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.stars li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 7px; border-radius: 99px;
  font-size: .78rem; font-weight: 550; color: #E6EAFF; background: rgba(12, 18, 50, .55); border: 1px solid rgba(201, 208, 223, .2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; transition: color .4s, border-color .4s, background .4s; }
.stars li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(157, 178, 255, .85); animation: twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
.stars li.is-locked { color: #fff; border-color: rgba(157, 178, 255, .8); background: rgba(63, 91, 245, .35); }
@keyframes twinkle { 50% { opacity: .35; transform: scale(.7); } }

.lock { position: absolute; left: 0; top: 0; pointer-events: none; transition: transform .9s cubic-bezier(.6, 0, .2, 1); z-index: 2; }
.lock__box { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px;
  background: linear-gradient(#9DB2FF, #9DB2FF) 0 0 / 14px 2px no-repeat, linear-gradient(#9DB2FF, #9DB2FF) 0 0 / 2px 14px no-repeat,
              linear-gradient(#9DB2FF, #9DB2FF) 100% 0 / 14px 2px no-repeat, linear-gradient(#9DB2FF, #9DB2FF) 100% 0 / 2px 14px no-repeat,
              linear-gradient(#9DB2FF, #9DB2FF) 0 100% / 14px 2px no-repeat, linear-gradient(#9DB2FF, #9DB2FF) 0 100% / 2px 14px no-repeat,
              linear-gradient(#9DB2FF, #9DB2FF) 100% 100% / 14px 2px no-repeat, linear-gradient(#9DB2FF, #9DB2FF) 100% 100% / 2px 14px no-repeat;
  filter: drop-shadow(0 0 6px rgba(157, 178, 255, .9)); animation: lock-pulse 1.6s ease-in-out infinite; }
@keyframes lock-pulse { 50% { transform: scale(.86); } }
.lock__chip { position: absolute; left: 40px; top: -58px; display: grid; gap: 2px; min-width: 190px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .95); color: var(--ink); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.lock.is-on .lock__chip { opacity: 1; transform: none; }
.lock__chip b { font-size: .88rem; }
.lock__chip span { font-size: .76rem; color: var(--muted); }
.lock__chip em { font-style: normal; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-top: 3px; }
.lock.is-left .lock__chip { left: auto; right: 40px; }

@media (max-width: 960px) {
  .hero--observatory { grid-template-columns: 1fr; }
  .observatory { width: min(100%, 420px); }
  .hero__stats { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 520px) { .stars li { font-size: .68rem; padding: 4px 8px 4px 6px; } .lock__chip { min-width: 160px; } }
@media (prefers-reduced-motion: reduce) { .orbit, .observatory__core, .observatory__halo, .stars li::before, .lock__box { animation: none; } .lock { transition: none; } }

/* ---------- Logo-matched colour grade ---------- */
/* The wordmark uses the logo's own glass blues: deep indigo core to periwinkle rim. */
.brand__word { background: linear-gradient(100deg, #2C396E 0%, #3F5BF5 45%, #768AC9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand--light .brand__word { background: linear-gradient(100deg, #FFFFFF 0%, #C9D0DF 45%, #9DB2FF 100%); -webkit-background-clip: text; background-clip: text; }
/* Space images keep their original colours. */
.hero--observatory .hero__title .serif { background: linear-gradient(95deg, #C9D0DF 0%, #FFFFFF 40%, #9DB2FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Marquee: a star stream, not a flat strip ---------- */
.marquee { position: relative; background: linear-gradient(180deg, var(--night) 0%, #0C1440 50%, var(--night) 100%); border: 0; padding: 26px 0; overflow: hidden; isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image: radial-gradient(1px 1px at 12% 30%, #fff, transparent), radial-gradient(1px 1px at 37% 70%, #cfd8ff, transparent), radial-gradient(1.5px 1.5px at 58% 20%, #fff, transparent),
    radial-gradient(1px 1px at 76% 60%, #9DB2FF, transparent), radial-gradient(1px 1px at 91% 35%, #fff, transparent), radial-gradient(1px 1px at 25% 85%, #fff, transparent);
  background-size: 420px 120px; animation: drift 40s linear infinite; }
@keyframes drift { to { background-position: -420px 0; } }
.marquee__row + .marquee__row { margin-top: 14px; }
.marquee__track li { padding-left: 14px; font-size: .98rem; color: #DCE3FF; }
.marquee__track li { padding: 9px 16px; margin-left: 14px; border-radius: 99px; background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
  border: 1px solid rgba(201, 208, 223, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 24px -14px rgba(63, 91, 245, .8); backdrop-filter: blur(6px); }
.marquee__track li::after { display: none; }
.marquee__track li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(157, 178, 255, .9); }
.marquee__track--lang li { color: #B9C0E0; }
.marquee__track--lang .script { color: #fff; }
.marquee__track li:hover { border-color: rgba(157, 178, 255, .6); color: #fff; }

/* ---------- 4K backdrops, original colours ---------- */
.cosmos--carina::before { background-image: url("/space/carina-1920.webp"); background-blend-mode: normal; }
@media (min-width: 1700px), (min-resolution: 1.5dppx) and (min-width: 1000px) { .cosmos--carina::before { background-image: url("/space/carina-3840.webp"); } }
@media (max-width: 800px) { .cosmos--carina::before { background-image: url("/space/carina-960.webp"); } }
.hc-hero::before { background-image: url("/space/helix-1920.webp"); background-blend-mode: normal; }
.auth::before { background-image: url("/space/pillars-2560.webp"); background-position: 50% 20%; }
@media (max-width: 800px) { .auth::before { background-image: url("/space/pillars-1280.webp"); } }

/* Page heroes: a full-bleed band of space behind the title on every inner page. */
.jhero, .jx__band { --space: url("/space/crab-2560.webp"); --space-sm: url("/space/crab-1280.webp"); position: relative; isolation: isolate; color: var(--on-night); }
.jhero { padding-block: 64px 44px; }
.jhero::before, .jx__band::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -2; background: var(--night) var(--space) center / cover no-repeat; }
.jhero::after, .jx__band::after { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
  background: linear-gradient(90deg, rgba(7, 10, 28, .94) 0%, rgba(7, 10, 28, .78) 45%, rgba(7, 10, 28, .35) 100%); }
@media (max-width: 800px) { .jhero::before, .jx__band::before { background-image: var(--space-sm); } .jhero::after, .jx__band::after { background: rgba(7, 10, 28, .8); } }
.jhero--cartwheel, .jx__band--cartwheel { --space: url("/space/cartwheel-2560.webp"); --space-sm: url("/space/cartwheel-1280.webp"); }
.jhero--quintet, .jx__band--quintet { --space: url("/space/quintet-2560.webp"); --space-sm: url("/space/quintet-1280.webp"); }
.jhero--pillars { --space: url("/space/pillars-2560.webp"); --space-sm: url("/space/pillars-1280.webp"); }
.jhero .jhero__title, .jx__band .jx__title { color: #fff; }
.jhero .jhero__title .serif { background: linear-gradient(95deg, #C9D0DF, #fff 40%, #9DB2FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jhero .jhero__lede, .jx__band .jx__lede { color: #C9D0E6; }
.jhero .crumbs, .jhero .crumbs a, .jx__band .crumbs, .jx__band .crumbs a { color: #AEB9D5; }
.jhero .eyebrow { color: var(--mint); }
.jhero .jb { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(201, 208, 223, .25); }
.jhero .jb--hiring { background: rgba(157, 178, 255, .25); }
.jhero__native { color: #9DB2FF !important; }
.jhero .jstats b { color: #fff; }
.jhero .jstats span { color: #AEB9D5; }
.jx__band { padding: 40px 0 34px; margin-bottom: 18px; }

/* Closing call-to-action panel on the homepage. */
.panel--night { position: relative; isolation: isolate; overflow: hidden; background: var(--night); }
.panel--night::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/space/crab-2560.webp") center / cover no-repeat; }
.panel--night::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 50% 50%, rgba(7, 10, 28, .55), rgba(7, 10, 28, .9)); }
@media (max-width: 800px) { .panel--night::before { background-image: url("/space/crab-1280.webp"); } }

.jx__head { padding-top: 0; }
.jx__band { padding: 44px 0 38px; }
.jx__band--quintet::before { background-position: 85% 45%; }
.jhero--cartwheel::before { background-position: 80% 50%; }

@media (max-width: 1080px) {
  .nav__cta { display: none; }
  .nav__toggle span:not(.sr-only) { background: var(--ink); }
}

.marquee { -webkit-mask-image: none; mask-image: none; }
.marquee__row { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.panel--night::after { background: radial-gradient(70% 90% at 50% 50%, rgba(7, 10, 28, .35), rgba(7, 10, 28, .8)); }

/* ---------- One image per page (no repeats) ---------- */
/* Default page header: an aurora in the logo's blues, no photo (legal and utility pages). */
.jhero, .jx__band { --space: none; --space-sm: none; }
.jhero::before, .jx__band::before { background: var(--space) center / cover no-repeat, var(--grad-aurora), var(--night); }
@media (max-width: 800px) { .jhero::before, .jx__band::before { background: var(--space-sm) center / cover no-repeat, var(--grad-aurora), var(--night); } }
.jhero--cartwheel { --space: url("/space/cartwheel-2560.webp"); --space-sm: url("/space/cartwheel-1280.webp"); }
.jx__band--quintet { --space: url("/space/quintet-2560.webp"); --space-sm: url("/space/quintet-1280.webp"); }
.jhero--tarantula { --space: url("/space/tarantula-2560.webp"); --space-sm: url("/space/tarantula-1280.webp"); }
.jhero--deepfield { --space: url("/space/deepfield-2560.webp"); --space-sm: url("/space/deepfield-1280.webp"); }
.jhero--rho { --space: url("/space/rho-2560.webp"); --space-sm: url("/space/rho-1280.webp"); }
.jhero--ringneb { --space: url("/space/ringneb-1920.webp"); --space-sm: url("/space/ringneb-1280.webp"); }
.jhero--ngc602 { --space: url("/space/ngc602-2560.webp"); --space-sm: url("/space/ngc602-1280.webp"); }
.jhero--ringneb::before { background-position: 80% 40%; }
/* Only the closing call to action carries the Crab; other dark panels use the aurora. */
.panel--night::before { background: var(--grad-aurora), var(--night-2); }
.panel--night::after { background: none; }
.panel--night.panel--crab::before { background: url("/space/crab-2560.webp") center / cover no-repeat; }
.panel--night.panel--crab::after { background: radial-gradient(70% 90% at 50% 50%, rgba(7, 10, 28, .35), rgba(7, 10, 28, .8)); }

/* ---------- Floating glass navigation (pill) ---------- */
.nav { background: transparent; border-bottom: 0 !important; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 10px; pointer-events: none; }
.nav__inner { pointer-events: auto; height: 60px; padding: 0 10px 0 18px; border-radius: 999px; background: rgba(250, 251, 255, .74); border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 40px -18px rgba(11, 16, 51, .45); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); }
.nav.is-scrolled .nav__inner { background: rgba(250, 251, 255, .86); }
/* The first dark section slides up under the floating pill. */
main#main { padding-top: 0; }
:is(main#main > div, main#main) > .cosmos:first-child, :is(main#main > div, main#main) > .jhero:first-child, :is(main#main > div, main#main) > .hc-hero:first-child, :is(main#main > div, main#main) > .auth:first-child,
:is(main#main > div, main#main) > section.container.jx__head:first-child .jx__band { margin-top: -80px; padding-top: 80px; }
:is(main#main > div, main#main) > .jhero:first-child { padding-top: 144px; }
:is(main#main > div, main#main) > .cosmos:first-child .hero { padding-top: clamp(120px, 12vw, 170px); }
:is(main#main > div, main#main) > .hc-hero:first-child { padding-top: 136px; }
:is(main#main > div, main#main) > .auth:first-child { padding-top: 140px; }
:is(main#main > div, main#main) > section.container.jx__head:first-child .jx__band { padding-top: 124px; }
@media (max-width: 1080px) { .nav[data-open] .nav__menu { pointer-events: auto; border-radius: 18px; margin-top: 8px; } }

/* ---------- Typography: calmer, sharper, higher contrast ---------- */
body { color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; }
.hero__title, .jhero__title, .jx__title, .display, .hc-hero h1 { font-weight: 500; letter-spacing: -.045em; }
.hero--observatory .hero__title { font-size: clamp(3.1rem, 6.4vw, 5.6rem); line-height: .98; }
.jhero__title { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.02; }
.hero__lede, .jhero__lede, .jx__lede { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; }
/* Two-tone lede: first sentence bright, the rest softer. */
.hero__lede b, .jhero__lede b { color: #fff; font-weight: 500; }
h2 { letter-spacing: -.03em; }
.section h2, .display { font-weight: 500; }
.mono, .eyebrow { letter-spacing: .14em; }

.reticle--tl { top: 96px; }
.cosmos__tag { top: 100px; }
.lock:not(.is-on) .lock__chip { transition-duration: .15s; }

/* ---------- Contrast fixes (WCAG AA, measured) ---------- */
:root { --grad-brand: linear-gradient(135deg, #2238C9 0%, #3550E8 50%, #4F63F0 100%); }
.btn--ink, .hw__btn, .pg__btn[aria-current="page"], .dash__side a.is-active, .jx__views button[aria-pressed="true"], .seg button[aria-pressed="true"] { color: #fff; }
.jpill--hot { color: #9A3412; border-color: #FDBA74; background: #FFF7ED; }
.hot { color: #B45309; }
.footer__cols p { color: #A3ABCF; }
.footer__base, .footer__base span { color: #A3ABCF; }
.footer__credit { color: #A3ABCF; }
.footer__brand p, .footer__cols a { color: #CDD3EE; }
.auth__card .sub, .field small, .divider { color: #4A5178; }
.jnote .mono, .applybox__k { color: #3346C9; }

/* Cards inside dark headers keep dark text. */
.jhero .applybox, .jhero .sidecard { color: var(--ink); }
.jhero .applybox__v { color: var(--ink-2); }
.jhero .applybox .btn--line { color: var(--ink); }
.jrow__meta b.hot { color: #9A3412; }
.jrow__meta b.new, .new { color: #2B3FC4; }
.jx__n { color: #2B3FC4; background: rgba(63, 91, 245, .12); }

.lock:not(.is-on) .lock__chip { transition: none; opacity: 0; }

/* Performance: no live blur on moving or repeated elements. */
.marquee__track li { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(180deg, rgba(40, 52, 110, .55), rgba(20, 28, 70, .45)); }
.stars li { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14, 20, 56, .78); }
.marquee::before { animation: none; }

/* ---------- Human eval dataset page ---------- */
.jhero--southring { --space: url("/space/southring-2560.webp"); --space-sm: url("/space/southring-1280.webp"); }
.jhero--southring::before { background-position: 72% 50%; }
.ds-hero { padding-block: 84px 72px; }
.ds-hero .jhero__title { max-width: 17ch; }
.ds-hero .jhero__lede { max-width: 62ch; }
.ds-dl { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ds-dl small { font-weight: 400; opacity: .75; margin-left: 6px; }
.jhero .btn--line { --bd: var(--glass-line); color: #fff; background: rgba(255, 255, 255, .06); }
.jhero .btn--line:hover { --bd: #fff; color: #fff; }
.ds-meta { margin-top: 18px; color: #C9D0E6; font-size: .78rem; letter-spacing: .04em; }
.ds-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: -34px; position: relative; z-index: 2; }
.ds-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.ds-stat__v { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; margin-bottom: 10px;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ds-stat__v i { font-style: normal; opacity: .5; }
.ds-stat p:last-child { color: var(--ink-2); font-size: .94rem; }
.ds-sec { padding-block: clamp(56px, 7vw, 88px); }
.ds-band { background: var(--paper-2); border-block: 1px solid var(--line); }
.ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.ds-h2, .ds-prose h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.035em; font-weight: 500; line-height: 1.08; margin: 6px 0 20px; }
.ds-prose h2 { font-size: 1.35rem; letter-spacing: -.02em; margin: 26px 0 8px; }
.ds-prose h2:first-child { margin-top: 8px; }
.ds-prose p { color: var(--ink-2); font-size: 1.04rem; line-height: 1.65; }
.ds-fig { margin: 0; }
.ds-fig img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.ds-fig figcaption { margin-top: 12px; color: var(--ink-2); font-size: .92rem; }
.ur { font-family: "Noto Nastaliq Urdu", serif; }
.ds-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: .86rem; color: var(--ink-2); }
.ds-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.ds-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; margin-bottom: 22px; }
.ds-head > p { max-width: 52ch; color: var(--ink-2); }
.ds-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.ds-table table { border-collapse: collapse; width: 100%; min-width: 660px; font-variant-numeric: tabular-nums; }
.ds-table th, .ds-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--ink); }
.ds-table thead th { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #4A5178; font-weight: 500; }
.ds-table tbody th { font-weight: 550; }
.ds-table .grp { border-left: 1px solid var(--line); }
.ds-table tr.tot { background: rgba(63, 91, 245, .06); }
.ds-table tr.tot th, .ds-table tr.tot td { font-weight: 600; border-bottom: 0; }
.ds-note { margin-top: 14px; color: var(--ink-2); font-size: .92rem; }
.ds-steps { list-style: none; counter-reset: s; display: grid; gap: 12px; padding: 0; }
.ds-steps li { counter-increment: s; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 16px 62px; }
.ds-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 16px; top: 15px; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; font: 500 .74rem var(--font-mono); color: #fff; background: var(--grad-brand); }
.ds-steps b { display: block; font-weight: 600; margin-bottom: 3px; }
.ds-steps span { color: var(--ink-2); }
.ds-cards { display: grid; gap: 12px; }
.ds-cards .pcard { gap: 8px; padding: 20px 22px; }
.ds-cards .pcard > .mono { color: #3346C9; }
.ds-cards .pcard p:not(.mono) { color: var(--ink-2); }
.ds-fields { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; }
.ds-fields dt { font-family: var(--font-mono); font-size: .82rem; color: #3346C9; padding-top: 2px; }
.ds-fields dd { color: var(--ink-2); margin: 0; }
.ds-code { background: var(--night); background-image: var(--grad-aurora); color: #E4E8FA; border: 1px solid rgba(157, 178, 255, .2); border-radius: var(--radius);
  padding: 22px 24px; overflow-x: auto; font: .84rem/1.75 var(--font-mono); box-shadow: var(--shadow); }
.ds-code .k { color: #9DB2FF; }
.ds-code .ur { font-size: 1rem; line-height: 1.9; }
.ds-cta { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 56px); color: #fff;
  background: var(--grad-aurora), linear-gradient(135deg, #0B1033, #1A2580 55%, #2238C9); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.ds-cta::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; z-index: -1; background: url("/brand/mark-512.webp") center / contain no-repeat; opacity: .16; }
.ds-cta .eyebrow { color: #9DB2FF; }
.ds-cta h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: -.04em; font-weight: 500; line-height: 1.06; max-width: 20ch; margin: 6px 0 12px; }
.ds-cta h2 .serif { background: linear-gradient(95deg, #C9D0DF, #fff 40%, #9DB2FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ds-cta p:not(.eyebrow) { color: #D3D9F2; max-width: 58ch; }
.ds-cta__act { display: flex; flex-direction: column; gap: 10px; }
.ds-cta .btn--line { --bd: rgba(255, 255, 255, .35); color: #fff; }
@media (max-width: 900px) { .ds-grid { grid-template-columns: 1fr; } .ds-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ds-stats { grid-template-columns: 1fr; } .ds-hero { padding-block: 56px 60px; } }
.ds-cta { align-items: flex-start; }
.ds-cta__copy { flex: 1 1 420px; }
.ds-cta__form { flex: 1 1 380px; max-width: 480px; }
.ds-ticks { list-style: none; padding: 0; margin: 20px 0 22px; display: grid; gap: 10px; }
.ds-ticks li { padding-left: 28px; position: relative; color: #E4E8FA; }
.ds-ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 6px; background: rgba(157, 178, 255, .18) var(--check-white) center / 12px no-repeat; }
.ds-cta__link { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .4); }
.ds-cta__k { color: #9DB2FF; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }

/* ---------- Lead form (shareable pages) ---------- */
.lead { background: var(--card); color: var(--ink); border-radius: 20px; padding: 24px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.lead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.lead__full { grid-column: 1 / -1; }
.lead .field { margin: 0; }
.lead .field label { color: var(--ink); font-size: .86rem; font-weight: 550; }
.lead .field em { font-style: normal; color: #4A5178; font-weight: 400; }
.lead__consent { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 6px; font-size: .88rem; color: var(--ink-2); }
.lead__consent input { margin-top: 3px; accent-color: var(--blue); }
.lead__consent a { color: #2B3FC4; text-decoration: underline; }
.lead__btn { width: 100%; justify-content: center; margin-top: 10px; }
.lead__fine { margin-top: 10px; font-size: .82rem; color: #4A5178; text-align: center; }
.lead__done { text-align: center; padding: 24px 8px; }
.lead__done img { margin: 0 auto 12px; }
.lead__done h3 { font-size: 1.4rem; letter-spacing: -.02em; margin-bottom: 6px; }
.lead__done p { color: var(--ink-2); }
@media (max-width: 520px) { .lead__grid { grid-template-columns: 1fr; } .lead { padding: 18px; } }