/* ============================================================
 * CROSSFADE — Connext brand overlay · v9.6.0
 *
 * Brand kit: D:\Code\connext-brand\
 * Philosophy: "Two becoming three" — the pivotal interval where
 * violet and cyan meet through gradient and a pink third frequency
 * is born. Dark-mode native. Single crossing event per composition.
 *
 * This stylesheet applies ONLY to the login gate + cookie banner
 * + persistent privacy elements. The in-app surfaces (workflow,
 * employer dash, etc.) keep their original styling untouched.
 *
 * Scoping rule: every selector here is prefixed with .cf- or
 * targets the gate via .cf-gate / .cf-body. No accidental overrides.
 * ============================================================ */

:root {
  /* Crossfade palette — restricted to two emissives + true blacks + bone */
  --cf-violet: #6D28FF;
  --cf-cyan:   #22E1FF;
  --cf-pink:   #FF7AD9;        /* the third frequency, the crossing seed */
  --cf-ink:    #07080F;
  --cf-panel:  #0C0E1A;
  --cf-bone:   #F4F2EE;
  --cf-bone-mute: rgba(244, 242, 238, 0.66);
  --cf-bone-dim:  rgba(244, 242, 238, 0.36);
  --cf-line:   rgba(244, 242, 238, 0.08);
  --cf-line-strong: rgba(244, 242, 238, 0.18);

  /* Crossfade type stack */
  --cf-display:  'Big Shoulders Display', 'Outfit', system-ui, sans-serif;
  --cf-ui:       'Outfit', 'Inter', system-ui, sans-serif;
  --cf-mono:     'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --cf-italic:   'Instrument Serif', 'Fraunces', serif;
}

/* ───────────────────────────────────────────────────────────
 * Body when the gate is active
 * ─────────────────────────────────────────────────────────── */
body.cf-body.is-auth-gate {
  background: var(--cf-ink) !important;
  color: var(--cf-bone) !important;
  font-family: var(--cf-ui) !important;
  /* iOS safe-area-inset for notched devices */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  overflow-x: hidden;
}

/* ───────────────────────────────────────────────────────────
 * Crossfade backdrop — two fields meeting through gradient
 * ─────────────────────────────────────────────────────────── */
.cf-cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--cf-ink);
}
.cf-cosmos__field {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.55;
  mix-blend-mode: screen;
}
.cf-cosmos__field--violet {
  background: radial-gradient(circle at 30% 30%, var(--cf-violet) 0%, transparent 55%);
  animation: cf-drift-1 28s ease-in-out infinite alternate;
}
.cf-cosmos__field--cyan {
  background: radial-gradient(circle at 70% 70%, var(--cf-cyan) 0%, transparent 55%);
  animation: cf-drift-2 32s ease-in-out infinite alternate;
}
.cf-cosmos__seam {
  /* The third frequency — pink/magenta seed at the diagonal */
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(60vmin, 480px);
  height: min(60vmin, 480px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center,
    rgba(255, 122, 217, 0.45) 0%,
    rgba(255, 122, 217, 0.10) 30%,
    transparent 70%);
  filter: blur(40px);
  opacity: 0.7;
  animation: cf-seam-pulse 6s ease-in-out infinite;
}
.cf-cosmos__grid {
  /* Disciplined Swiss-broadsheet grid, fine lines */
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244, 242, 238, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 242, 238, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center center;
  mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 75%);
}
.cf-cosmos__x {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(85vmin, 720px);
  height: min(85vmin, 720px);
  opacity: 0.7;
  filter: drop-shadow(0 0 40px rgba(109, 40, 255, 0.35));
}

@keyframes cf-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5%, -3%) scale(1.05); }
}
@keyframes cf-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-4%, 4%) scale(1.08); }
}
@keyframes cf-seam-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.95); }
  50%      { opacity: 0.8;  transform: translate(-50%, -50%) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .cf-cosmos__field, .cf-cosmos__seam { animation: none; }
}

/* ───────────────────────────────────────────────────────────
 * Gate container — center the panel over the cosmos
 * ─────────────────────────────────────────────────────────── */
.cf-gate {
  position: relative;
  z-index: 10;
  min-height: 100dvh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  padding-top: max(clamp(16px, 4vw, 48px), env(safe-area-inset-top));
  padding-bottom: max(clamp(16px, 4vw, 48px), env(safe-area-inset-bottom));
}

/* Editorial caption rails — scientific-plate annotations */
.cf-rail {
  position: fixed;
  z-index: 11;
  font-family: var(--cf-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--cf-bone-dim);
  text-transform: uppercase;
  pointer-events: none;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.cf-rail__k { color: var(--cf-cyan); }
.cf-rail__v { color: var(--cf-bone-mute); }
.cf-rail--top { top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); }

@media (max-width: 640px) {
  .cf-rail { font-size: 9px; gap: 8px; }
}

/* ───────────────────────────────────────────────────────────
 * The panel — glass card with restraint, not ornament
 * ─────────────────────────────────────────────────────────── */
.cf-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: clamp(28px, 5vw, 42px) clamp(24px, 5vw, 38px);
  background: linear-gradient(180deg, rgba(12, 14, 26, 0.78), rgba(7, 8, 15, 0.92));
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--cf-line-strong);
  border-radius: 18px;
  box-shadow:
    0 40px 120px -30px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(109, 40, 255, 0.15) inset,
    0 0 80px -20px rgba(34, 225, 255, 0.18);
  color: var(--cf-bone);
}

/* Logo slot — refined, doesn't dominate */
.cf-panel__logo {
  text-align: center;
  margin-bottom: 24px;
}
.cf-panel__logo-img {
  width: auto;
  height: clamp(28px, 5vw, 34px);
  filter: drop-shadow(0 4px 12px rgba(109, 40, 255, 0.3));
}

/* ───────────────────────────────────────────────────────────
 * Headline — Match. Meet. Move. — big sculptural display
 * ─────────────────────────────────────────────────────────── */
.cf-headline {
  font-family: var(--cf-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  text-align: center;
  color: var(--cf-bone);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cf-headline__line {
  font-size: clamp(44px, 9vw, 72px);
}
.cf-headline__line--accent {
  /* Single italic accent per page — the brand-philosophy rule */
  font-family: var(--cf-italic);
  font-style: italic;
  text-transform: none;
  font-weight: 400;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--cf-violet) 0%, var(--cf-pink) 50%, var(--cf-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: clamp(48px, 10vw, 84px);
  line-height: 0.95;
  margin-top: 4px;
}

/* Tagline — Outfit body, with italic rare-accent in middle */
.cf-panel__tagline {
  font-family: var(--cf-ui);
  font-size: clamp(13px, 1.6vw, 14.5px);
  line-height: 1.55;
  text-align: center;
  color: var(--cf-bone-mute);
  margin: 0 0 24px;
}
.cf-italic {
  font-family: var(--cf-italic);
  font-style: italic;
  color: var(--cf-pink);
  font-size: 1.05em;
}

/* Eyebrow — mono label, scientific-plate detail */
.cf-panel__eyebrow {
  font-family: var(--cf-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--cf-cyan);
  text-align: center;
  margin: 0 0 18px;
  text-transform: uppercase;
}

/* ───────────────────────────────────────────────────────────
 * Forms inside the cf-panel — inherit Outfit, brand palette
 * Defensive overrides — keep the existing form structure but
 * align colors + radii + focus rings with Crossfade.
 * ─────────────────────────────────────────────────────────── */
.cf-panel .gate__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  background: rgba(244, 242, 238, 0.04);
  border-radius: 999px;
  border: 1px solid var(--cf-line);
}
.cf-panel .gate__tab {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--cf-bone-mute);
  font-family: var(--cf-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.02em;
  min-height: 44px;
  transition: color .2s ease, background .2s ease;
}
.cf-panel .gate__tab.is-active {
  background: linear-gradient(135deg, var(--cf-violet) 0%, var(--cf-cyan) 100%);
  color: var(--cf-bone);
  box-shadow: 0 6px 20px -8px rgba(109, 40, 255, 0.5);
}
.cf-panel .gate__tab:hover:not(.is-active) {
  color: var(--cf-bone);
}

.cf-panel .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.cf-panel .field > span {
  font-family: var(--cf-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--cf-bone-mute);
  text-transform: uppercase;
}
.cf-panel .field > span em {
  font-family: var(--cf-ui);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--cf-bone-dim);
  font-style: normal;
}
.cf-panel .field input,
.cf-panel .field select,
.cf-panel .field textarea {
  background: rgba(244, 242, 238, 0.04);
  border: 1px solid var(--cf-line-strong);
  color: var(--cf-bone);
  font-family: var(--cf-ui);
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  min-height: 44px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.cf-panel .field input::placeholder,
.cf-panel .field textarea::placeholder {
  color: rgba(244, 242, 238, 0.32);
}
.cf-panel .field input:focus,
.cf-panel .field select:focus,
.cf-panel .field textarea:focus {
  outline: none;
  border-color: var(--cf-cyan);
  background: rgba(34, 225, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(34, 225, 255, 0.18);
}

/* Primary button — the crossing gradient as a call to action */
.cf-panel .btn--primary,
.cf-panel .btn--wide {
  font-family: var(--cf-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 14px 20px;
  min-height: 48px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--cf-violet) 0%, var(--cf-pink) 50%, var(--cf-cyan) 100%);
  color: var(--cf-bone);
  box-shadow:
    0 10px 30px -8px rgba(109, 40, 255, 0.45),
    0 0 0 1px rgba(244, 242, 238, 0.08) inset;
  transition: transform .2s ease, box-shadow .2s ease;
  width: 100%;
}
.cf-panel .btn--primary:hover,
.cf-panel .btn--wide:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 40px -8px rgba(255, 122, 217, 0.55),
    0 0 0 1px rgba(244, 242, 238, 0.14) inset;
}
.cf-panel .btn--primary:active,
.cf-panel .btn--wide:active {
  transform: translateY(0);
}

/* Social login row — refined dark buttons with brand-glyph icons */
.cf-panel .btn--google,
.cf-panel .btn--social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(244, 242, 238, 0.04);
  border: 1px solid var(--cf-line-strong);
  color: var(--cf-bone);
  font-family: var(--cf-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 14px;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.cf-panel .btn--google {
  width: 100%;
  margin-bottom: 10px;
}
.cf-panel .btn--google:hover,
.cf-panel .btn--social:hover {
  background: rgba(244, 242, 238, 0.08);
  border-color: var(--cf-cyan);
  transform: translateY(-1px);
}
.cf-panel .social-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.cf-panel .gate__divider {
  position: relative;
  text-align: center;
  margin: 18px 0;
  font-family: var(--cf-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--cf-bone-dim);
  text-transform: uppercase;
}
.cf-panel .gate__divider::before,
.cf-panel .gate__divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 60px);
  height: 1px;
  background: var(--cf-line-strong);
}
.cf-panel .gate__divider::before { left: 0; }
.cf-panel .gate__divider::after  { right: 0; }

.cf-panel .gate__link {
  background: transparent;
  border: 0;
  color: var(--cf-cyan);
  font-family: var(--cf-ui);
  font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
  margin-top: 12px;
  padding: 8px;
  min-height: 36px;
  display: block;
  text-align: center;
}
.cf-panel .gate__link:hover { color: var(--cf-pink); }

/* Role-selector cards — sign-up chooser */
.cf-panel .role-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: rgba(244, 242, 238, 0.04);
  border: 1px solid var(--cf-line-strong);
  border-radius: 12px;
  color: var(--cf-bone);
  text-align: left;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
  min-height: 64px;
}
.cf-panel .role-card:hover {
  background: rgba(109, 40, 255, 0.08);
  border-color: var(--cf-violet);
  transform: translateY(-1px);
}
.cf-panel .role-card__icon { font-size: 22px; }
.cf-panel .role-card__body { flex: 1; }
.cf-panel .role-card__name { font-weight: 700; font-size: 14px; }
.cf-panel .role-card__desc { font-size: 12px; color: var(--cf-bone-mute); margin-top: 2px; }
.cf-panel .role-card__hint { font-size: 11px; color: var(--cf-cyan); margin-top: 4px; font-family: var(--cf-mono); }
.cf-panel .role-card__arrow { color: var(--cf-bone-dim); }

.cf-panel .gate__error {
  color: var(--cf-pink);
  font-family: var(--cf-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  margin: 10px 0 0;
  min-height: 14px;
  text-align: center;
}

.cf-panel .gate__back {
  background: transparent;
  border: 0;
  color: var(--cf-bone-mute);
  font-family: var(--cf-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  padding: 6px 0;
  margin-bottom: 14px;
  min-height: 36px;
}
.cf-panel .gate__back:hover { color: var(--cf-cyan); }

.cf-panel .gate__form-title {
  font-family: var(--cf-display);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--cf-bone);
  margin: 0 0 6px;
}
.cf-panel .gate__form-sub {
  font-family: var(--cf-ui);
  font-size: 12px;
  color: var(--cf-bone-mute);
  margin: 0 0 18px;
  line-height: 1.5;
}
.cf-panel .gate__choose-hint {
  font-family: var(--cf-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cf-cyan);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px;
}
.cf-panel .gate__hint-text {
  font-family: var(--cf-ui);
  font-size: 11.5px;
  color: var(--cf-bone-dim);
  text-align: center;
  margin: 12px 0 0;
  line-height: 1.5;
}
.cf-panel .check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--cf-ui);
  font-size: 12px;
  color: var(--cf-bone-mute);
  line-height: 1.5;
  margin: 14px 0;
}
.cf-panel .check-row input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--cf-violet);
  width: 18px;
  height: 18px;
}
.cf-panel .check-row a {
  color: var(--cf-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cf-panel .check-row a:hover { color: var(--cf-pink); }

/* ───────────────────────────────────────────────────────────
 * Responsive — mobile / tablet / web
 * ─────────────────────────────────────────────────────────── */

/* iPhone (≤ 480px) — edge-respecting card */
@media (max-width: 480px) {
  .cf-panel {
    padding: 26px 22px;
    border-radius: 16px;
    max-width: none;
  }
  .cf-headline__line { font-size: clamp(40px, 12vw, 56px); }
  .cf-headline__line--accent { font-size: clamp(44px, 13vw, 60px); }
  .cf-panel .social-row { grid-template-columns: 1fr 1fr 1fr; }
  /* Caption rail collapses to corner mark only on phones */
  .cf-rail__v { display: none; }
}

/* Tablet (481–900px) — slightly wider card */
@media (min-width: 481px) and (max-width: 900px) {
  .cf-panel { max-width: 520px; }
}

/* Desktop (≥ 901px) — full vitrine treatment */
@media (min-width: 901px) {
  .cf-panel { max-width: 460px; }
  .cf-cosmos__x { opacity: 0.55; }
}

/* Tall mobile (iPhone 13+ portrait) — give the headline more room */
@media (min-height: 800px) and (max-width: 480px) {
  .cf-panel { margin-block: auto; }
  .cf-headline { margin-bottom: 22px; }
}

/* Landscape phone — cap the panel height + scroll inside */
@media (orientation: landscape) and (max-height: 500px) {
  .cf-gate { align-items: flex-start; }
  .cf-panel { max-height: calc(100vh - 32px); overflow-y: auto; }
  .cf-headline__line { font-size: 32px; }
  .cf-headline__line--accent { font-size: 36px; }
}

/* High-DPI / Retina — extra subtle on the gradients */
@media (-webkit-min-device-pixel-ratio: 2) {
  .cf-cosmos__field { filter: blur(140px); }
}

/* Reduced motion — kill all animated layers */
@media (prefers-reduced-motion: reduce) {
  .cf-cosmos__field,
  .cf-cosmos__seam { animation: none !important; }
  .cf-panel .btn--primary:hover,
  .cf-panel .role-card:hover { transform: none; }
}

/* ============================================================
 * v9.6.1 — LINKEDIN-INSPIRED 2-COLUMN LAYOUT + TOP NAV
 * Pre-auth experience: top nav (logo · 4 nav · Sign in / Join now)
 * + two-column hero (editorial copy + auth panel | cinematic visual).
 * Caps at 1280px and centers. Below 900px collapses to single column
 * with the visual above the copy. Below 560px the visual hides.
 * ============================================================ */

/* TOP NAV — sticky bar above the grid */
.cf-topnav {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px clamp(16px, 3vw, 36px);
  padding-top: max(14px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--cf-line);
}
.cf-topnav__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-height: 44px;
}
.cf-topnav__brand-img {
  width: auto;
  height: 28px;
  filter: drop-shadow(0 2px 8px rgba(109, 40, 255, 0.35));
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.cf-topnav__brand:hover .cf-topnav__brand-img {
  transform: translateY(-1px) scale(1.02);
}
.cf-topnav__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 1.8vw, 20px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.cf-topnav__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  color: var(--cf-bone-mute);
  text-decoration: none;
  font-family: var(--cf-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 8px;
  min-height: 44px;
  transition: color .18s ease, background .18s ease;
}
.cf-topnav__link svg { display: block; }
.cf-topnav__link:hover,
.cf-topnav__link:focus-visible {
  color: var(--cf-bone);
  background: rgba(34, 225, 255, 0.06);
  outline: none;
}
.cf-topnav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cf-topnav__btn {
  font-family: var(--cf-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 9px 18px;
  min-height: 40px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .15s ease, box-shadow .18s ease;
}
.cf-topnav__btn--ghost {
  background: transparent;
  border: 1px solid var(--cf-line-strong);
  color: var(--cf-bone);
}
.cf-topnav__btn--ghost:hover {
  border-color: var(--cf-cyan);
  color: var(--cf-cyan);
  background: rgba(34, 225, 255, 0.06);
}
.cf-topnav__btn--filled {
  background: linear-gradient(135deg, var(--cf-violet) 0%, var(--cf-pink) 50%, var(--cf-cyan) 100%);
  border: 0;
  color: var(--cf-bone);
  box-shadow: 0 6px 20px -8px rgba(109, 40, 255, 0.55);
}
.cf-topnav__btn--filled:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -8px rgba(255, 122, 217, 0.55);
}
@media (max-width: 900px) {
  .cf-topnav { padding: 12px clamp(12px, 3vw, 24px); }
  .cf-topnav__link span { display: none; }
  .cf-topnav__link { padding: 8px; }
}
@media (max-width: 560px) {
  .cf-topnav__links { display: none; }
  .cf-topnav { grid-template-columns: 1fr auto; gap: 12px; }
  /* v9.6.1 audit fix: WCAG 2.5.5 min hit target 44×44 on phones */
  .cf-topnav__btn { padding: 11px 16px; font-size: 12.5px; min-height: 44px; }
}

/* GATE: change behaviour when in two-col mode */
.cf-gate--two-col {
  display: block !important;
  min-height: 100dvh;
  min-height: 100svh;
  padding: 0 !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}

/* TWO-COLUMN GRID */
.cf-gate-grid {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  padding: clamp(32px, 6vw, 64px) clamp(16px, 3vw, 36px);
  padding-bottom: max(clamp(32px, 6vw, 64px), env(safe-area-inset-bottom));
  align-items: center;
}
.cf-gate-grid__col { min-width: 0; }
.cf-gate-grid__col--copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cf-gate-grid__col--visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Left-column headline (different from centered headline) */
.cf-headline--left {
  text-align: left;
  margin: 0;
  font-size: clamp(34px, 5.2vw, 56px);
  letter-spacing: -0.015em;
  text-transform: none;
  line-height: 1.04;
  display: block;
  font-family: var(--cf-display);
  font-weight: 800;
  color: var(--cf-bone);
}
.cf-headline--left .cf-headline__line {
  font-size: inherit;
  display: block;
}
.cf-headline--left .cf-headline__line--accent {
  font-family: var(--cf-italic);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--cf-violet) 0%, var(--cf-pink) 50%, var(--cf-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cf-lead {
  font-family: var(--cf-ui);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55;
  color: var(--cf-bone-mute);
  margin: 0;
  max-width: 52ch;
}

.cf-panel--inline {
  margin: 0;
  max-width: 460px;
  width: 100%;
  padding: clamp(22px, 3vw, 30px);
}

/* RIGHT-COLUMN cinematic visual */
.cf-visual {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cf-visual__stage {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 30px 80px rgba(109, 40, 255, 0.3));
}
.cf-visual__line {
  animation: cf-visual-line-pulse 6s ease-in-out infinite;
}
.cf-visual__line--cyan { animation-delay: 1.5s; }
.cf-visual__seam {
  transform-origin: 400px 400px;
  animation: cf-visual-seam-pulse 4s ease-in-out infinite;
}
.cf-visual__node {
  animation: cf-visual-node-float 10s ease-in-out infinite;
}
.cf-visual__node--n2 { animation-delay: -1.5s; animation-duration: 12s; }
.cf-visual__node--n3 { animation-delay: -3s; animation-duration: 11s; }
.cf-visual__node--n4 { animation-delay: -4.5s; animation-duration: 13s; }
.cf-visual__node--n5 { animation-delay: -6s; animation-duration: 9s; }
.cf-visual__node--n6 { animation-delay: -7.5s; animation-duration: 14s; }

@keyframes cf-visual-line-pulse {
  0%, 100% { stroke-width: 3; opacity: 0.85; }
  50%      { stroke-width: 4; opacity: 1; }
}
@keyframes cf-visual-seam-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.75; }
  50%      { transform: scale(1.05); opacity: 1; }
}
@keyframes cf-visual-node-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(6px, -8px); }
}

.cf-visual__caption {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-top: clamp(12px, 2vw, 20px);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--cf-bone-mute);
  text-transform: uppercase;
}
.cf-visual__caption-k { color: var(--cf-cyan); }

@media (prefers-reduced-motion: reduce) {
  .cf-visual__line,
  .cf-visual__seam,
  .cf-visual__node { animation: none; }
}

/* Responsive collapse — visual moves above copy on tablet, hides on phone */
@media (max-width: 900px) {
  .cf-gate-grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
    padding: 24px clamp(16px, 3vw, 28px) 32px;
    text-align: left;
  }
  .cf-gate-grid__col--visual {
    order: -1;
    margin: 0 auto;
  }
  .cf-visual { max-width: 320px; }
  .cf-headline--left { font-size: clamp(32px, 8vw, 46px); }
  .cf-headline--left .cf-headline__line--accent { font-size: clamp(34px, 8.5vw, 50px); }
  .cf-lead { max-width: none; }
  .cf-panel--inline { max-width: none; margin: 0 auto; }
}
@media (max-width: 560px) {
  .cf-gate-grid__col--visual { display: none; }
  .cf-gate-grid { padding: 20px 16px 28px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .cf-headline--left { font-size: clamp(30px, 9vw, 40px); }
  .cf-rail--top { display: none; }
}

/* Calm the cosmos backdrop in two-col mode so the right-col visual reads */
body:has(.cf-gate--two-col) .cf-cosmos__x { opacity: 0.32; }
body:has(.cf-gate--two-col) .cf-cosmos__field { opacity: 0.35; }


/* ───────────────────────────────────────────────────────────
 * Defensive end-of-file declarations (per skill 04)
 * Lock layout-critical properties so any upstream parse failure
 * in styles.css doesn't collapse the gate.
 * ─────────────────────────────────────────────────────────── */
body.cf-body.is-auth-gate .cf-cosmos { position: fixed !important; inset: 0 !important; z-index: 0 !important; }
body.cf-body.is-auth-gate .cf-gate   { position: relative !important; z-index: 10 !important; min-height: 100dvh !important; }
body.cf-body.is-auth-gate .cf-panel  { position: relative !important; z-index: 11 !important; }
body.cf-body.is-auth-gate .cf-topnav { position: relative !important; z-index: 12 !important; }
body.cf-body.is-auth-gate .cf-gate-grid { width: 100% !important; max-width: 1280px !important; margin: 0 auto !important; display: grid !important; }
body.cf-body.is-auth-gate .cf-gate--two-col { display: block !important; padding: 0 !important; }


/* ============================================================
 * v9.6.2 — AUDIT FIXES
 *  (1) Headline color — was rendering dark on dark because legacy
 *      styles.css color: var(--ink) was winning. Force cf-bone.
 *  (2) Mono B&W brand mark from connext-mono-dark.png — size up to
 *      ~36px, no drop-shadow filter (mono mark looks cleaner clean).
 *  (3) Caption rail removed in HTML; defensive CSS to hide it too.
 *  (4) Social row dropped to 2 columns after LinkedIn removal so the
 *      grid doesn't leave a hole.
 *  (5) Sharper alignment on the left column — gap rhythm + max-width
 *      on the lead so it doesn't sprawl.
 * ============================================================ */

/* Force the headline + lead light against the dark backdrop */
body.cf-body.is-auth-gate .cf-headline,
body.cf-body.is-auth-gate .cf-headline--left,
body.cf-body.is-auth-gate .cf-headline__line {
  color: var(--cf-bone) !important;
}
body.cf-body.is-auth-gate .cf-headline__line--accent {
  /* keep the gradient — background-clip already handles the color */
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
body.cf-body.is-auth-gate .cf-lead {
  color: var(--cf-bone-mute) !important;
}

/* B&W mono brand mark — slightly larger, no copper-glow halo */
.cf-topnav__brand-img--mono {
  height: 36px !important;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)) !important;
}
@media (max-width: 900px) {
  .cf-topnav__brand-img--mono { height: 32px !important; }
}
@media (max-width: 560px) {
  .cf-topnav__brand-img--mono { height: 30px !important; }
}

/* Hide the caption rail across the board — was overlapping the logo.
   If we ever want it back, it must move to a different corner or below the nav. */
.cf-rail--top { display: none !important; }

/* Social row → 2 columns after LinkedIn removal (was 3) */
.cf-panel .social-row { grid-template-columns: 1fr 1fr !important; }

/* Tighter left-column rhythm — pull the lead closer to the headline,
   and bound the lead so it doesn't sprawl past the panel width */
.cf-gate-grid__col--copy {
  gap: 18px !important;
}
.cf-headline--left {
  margin-bottom: 4px !important;
}
.cf-lead {
  max-width: 460px !important;
}

/* Defensive eyebrow color — [ ENTER ] must stay cyan/light per user feedback */
.cf-panel__eyebrow {
  color: var(--cf-cyan) !important;
}


/* ============================================================
 * v9.6.3 — CRITICAL FIXES
 *  (1) BLANK-PAGE BUG: legacy `.gate { animation: gateIn 0.6s var(--ease) }`
 *      has keyframe `from { opacity: 0 }` + no `animation-fill-mode`.
 *      Combined with the reduced-motion override making animation last
 *      0.01ms, the resolved opacity stays at 0 forever. Force opacity 1
 *      and kill the animation entirely for the two-col gate.
 *  (2) [ ENTER ] eyebrow REMOVED (user request) — hide it everywhere.
 *  (3) Header uses the CONNXEXT WORDMARK (brand-kit primary). The asset
 *      is black-on-transparent so we invert it to read white on the
 *      dark canvas. Sizing tuned for the topnav rail.
 * ============================================================ */

/* (1) Show the gate. Always. No animation, no opacity ramp, no surprises. */
body.cf-body.is-auth-gate .cf-gate,
body.cf-body.is-auth-gate .cf-gate--two-col {
  opacity: 1 !important;
  animation: none !important;
  visibility: visible !important;
}
body.cf-body.is-auth-gate #loginGate {
  opacity: 1 !important;
  animation: none !important;
  visibility: visible !important;
}

/* (2) [ ENTER ] eyebrow hidden — also blocks the JS that re-text-injects it */
.cf-panel__eyebrow,
.cf-panel__eyebrow[id="gateEyebrow"],
#gateEyebrow {
  display: none !important;
}

/* (3) CONNXEXT wordmark in topnav — invert black→white for dark canvas */
.cf-topnav__brand-img--wordmark {
  height: 26px !important;
  width: auto;
  filter: invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)) !important;
}
@media (max-width: 900px) { .cf-topnav__brand-img--wordmark { height: 24px !important; } }
@media (max-width: 560px) { .cf-topnav__brand-img--wordmark { height: 22px !important; } }

/* The wordmark is ~2.8:1 aspect — give the topnav brand column room */
.cf-topnav__brand { min-width: 0; max-width: 220px; }
@media (max-width: 560px) {
  .cf-topnav__brand { max-width: 140px; }
  .cf-topnav__brand-img--wordmark { height: 20px !important; }
}


/* ============================================================
 * v9.6.4 — B&W THEME + SCROLL-BUG FIX
 *
 * (A) Activate the B&W palette as the default theme of the gate.
 *     The variant lives at D:\Code\connext-brand\palette\PALETTE-BW.md
 *     and is documented there. Pure black canvas, white text, mid-grey
 *     for "the third frequency". Keeps the Crossfade GESTURE without
 *     the chroma.
 *
 * (B) Blank-scroll bug: legacy styles.css `body.is-locked .rail,
 *     .workflow, .toast { visibility: hidden }` keeps the box in
 *     flow (873px below the gate). Force display:none on the auth-gate
 *     body so the page stops at the bottom of the gate.
 * ============================================================ */

/* (A) B&W palette — applied always on the auth gate */
body.cf-body.is-auth-gate {
  --cf-ink:        #000000;
  --cf-panel:      #0A0A0A;
  --cf-violet:     #FFFFFF;          /* first emissive ← white */
  --cf-cyan:       #E8E8E8;          /* second emissive ← light grey */
  --cf-pink:       #9A9A9A;          /* third frequency ← mid grey */
  --cf-bone:       #FFFFFF;
  --cf-bone-mute:  rgba(255, 255, 255, 0.66);
  --cf-bone-dim:   rgba(255, 255, 255, 0.36);
  --cf-line:        rgba(255, 255, 255, 0.08);
  --cf-line-strong: rgba(255, 255, 255, 0.20);
}

/* Override the colored gradients to their B&W equivalents */
body.cf-body.is-auth-gate .cf-headline--left .cf-headline__line--accent {
  background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 50%, #FFFFFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
body.cf-body.is-auth-gate .cf-topnav__btn--filled {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  color: #000000 !important;
  box-shadow: 0 6px 20px -8px rgba(255, 255, 255, 0.35) !important;
}
body.cf-body.is-auth-gate .cf-topnav__btn--filled:hover {
  box-shadow: 0 10px 26px -8px rgba(255, 255, 255, 0.45) !important;
}
body.cf-body.is-auth-gate .cf-panel .btn--primary,
body.cf-body.is-auth-gate .cf-panel .btn--wide {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  color: #000000 !important;
  box-shadow: 0 10px 30px -8px rgba(255, 255, 255, 0.30),
              0 0 0 1px rgba(0, 0, 0, 0.08) inset !important;
}
body.cf-body.is-auth-gate .cf-panel .btn--primary:hover,
body.cf-body.is-auth-gate .cf-panel .btn--wide:hover {
  background: linear-gradient(135deg, #FFFFFF 0%, #D8D8D8 50%, #FFFFFF 100%) !important;
}
body.cf-body.is-auth-gate .cf-panel .gate__tab.is-active {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  color: #000000 !important;
  box-shadow: 0 6px 20px -8px rgba(255, 255, 255, 0.35) !important;
}

/* Cosmos backdrop — desaturate to greys for the B&W theme */
body.cf-body.is-auth-gate .cf-cosmos__field--violet {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18) 0%, transparent 55%) !important;
}
body.cf-body.is-auth-gate .cf-cosmos__field--cyan {
  background: radial-gradient(circle at 70% 70%, rgba(200, 200, 200, 0.14) 0%, transparent 55%) !important;
}
body.cf-body.is-auth-gate .cf-cosmos__seam {
  background: radial-gradient(circle at center,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.05) 30%,
    transparent 70%) !important;
}

/* Right-column SVG visual — recolor lines + seam + nodes to grayscale */
body.cf-body.is-auth-gate .cf-visual__stage line[stroke="url(#cfV_x1)"],
body.cf-body.is-auth-gate .cf-visual__stage line[stroke="url(#cfV_x2)"] {
  stroke: #C8C8C8 !important;
  opacity: 0.95;
}
body.cf-body.is-auth-gate .cf-visual__seam {
  fill: rgba(255, 255, 255, 0.35) !important;
}
body.cf-body.is-auth-gate .cf-visual__node-core {
  fill: #FFFFFF !important;
}
body.cf-body.is-auth-gate .cf-visual__node {
  fill: rgba(255, 255, 255, 0.45) !important;
}
body.cf-body.is-auth-gate .cf-visual__labels text {
  fill: rgba(255, 255, 255, 0.62) !important;
}

/* The X-glyph in the cf-cosmos behind the gate — recolor for B&W */
body.cf-body.is-auth-gate .cf-cosmos__x line {
  stroke: rgba(255, 255, 255, 0.55) !important;
}
body.cf-body.is-auth-gate .cf-cosmos__x circle {
  fill: rgba(255, 255, 255, 0.45) !important;
}


/* (B) SCROLL BUG FIX — collapse the workflow / rail / toast so
 *     nothing takes flow space below the gate. The legacy
 *     visibility:hidden keeps them in flow; display:none doesn't. */
body.cf-body.is-auth-gate .rail,
body.cf-body.is-auth-gate .workflow,
body.cf-body.is-auth-gate .toast,
body.cf-body.is-auth-gate main.workflow {
  display: none !important;
}

/* v9.7.11: CRITICAL FIX — the html.cf-html-lock class is set in HTML markup
   and NEVER removed after authentication. Previously this rule applied
   `overflow:hidden` to html unconditionally, which made the post-login
   workflow scrollless — user saw only the hero and couldn't reach the
   pipeline steps (location / résumé upload / API key / submit). THE FREEZE.

   Fix: scope the overflow-lock to only fire when body STILL has is-auth-gate
   class (pre-login). Post-login, body.is-auth-gate is removed → this rule
   no longer matches → html scrolls normally. */
html.cf-html-lock:has(body.cf-body.is-auth-gate),
body.cf-body.is-auth-gate {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: none !important;
}

/* Post-login: explicitly restore scroll on html + body — belts and braces
   in case any browser doesn't support :has() selector */
body.cf-body:not(.is-auth-gate) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: auto !important;
  height: auto !important;
  min-height: 100dvh !important;
}
html:not(:has(body.cf-body.is-auth-gate)),
body.cf-body:not(.is-auth-gate) {
  overflow-y: auto !important;
}

/* If the gate's content is taller than viewport, let it scroll INSIDE the gate
   rather than the page — keeps the cosmos fixed and the topnav anchored. */
body.cf-body.is-auth-gate .cf-gate--two-col {
  max-height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}


/* ============================================================
 * v9.6.5 — PRICING MODAL · PUBLIC JOBS MODAL · B&W COOKIE SYNC
 *
 * (A) Reusable .cf-modal pattern — centered card, dark backdrop,
 *     close button, eyebrow + title + content.
 * (B) Pricing-specific: 2-tab toggle + 3-tier grid + B&W tier cards.
 * (C) Jobs-specific: list of job cards with Apply now CTAs.
 * (D) Cookie banner re-skinned to match the B&W gate theme.
 * ============================================================ */

/* (A) Generic modal pattern */
.cf-modal {
  position: fixed;
  inset: 0;
  z-index: 950;                /* above gate (10), above cookie (150) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 36px);
  padding-top: max(clamp(16px, 3vw, 36px), env(safe-area-inset-top));
  padding-bottom: max(clamp(16px, 3vw, 36px), env(safe-area-inset-bottom));
  animation: cf-modal-in .25s cubic-bezier(.2,.7,.2,1);
}
.cf-modal[hidden] { display: none !important; }
.cf-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.cf-modal__card {
  position: relative;
  width: min(900px, 100%);
  max-height: calc(100dvh - clamp(32px, 6vw, 72px));
  overflow-y: auto;
  background: linear-gradient(180deg, #0F0F0F 0%, #050505 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  box-shadow:
    0 40px 120px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  padding: clamp(28px, 4vw, 44px);
  color: var(--cf-bone);
}
.cf-modal__card--wide { width: min(1080px, 100%); }
.cf-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.6);
  color: var(--cf-bone);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  z-index: 2;
}
.cf-modal__close:hover {
  transform: rotate(90deg);
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
}
.cf-modal__eyebrow {
  font-family: var(--cf-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 12px;
}
.cf-modal__title {
  font-family: var(--cf-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.cf-modal__title em.cf-italic {
  font-family: var(--cf-italic);
  font-style: italic;
  text-transform: none;
  font-weight: 400;
  background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 50%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cf-modal__lead {
  font-family: var(--cf-ui);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 12px 0 24px;
  max-width: 60ch;
}
.cf-modal__fineprint {
  margin-top: 24px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.38);
  text-transform: uppercase;
}
@keyframes cf-modal-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

/* (B) Pricing toggle */
.cf-pricing-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  margin: 20px 0 28px;
}
.cf-pricing-toggle__btn {
  font-family: var(--cf-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 9px 18px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  transition: color .18s, background .18s;
}
.cf-pricing-toggle__btn:hover { color: var(--cf-bone); }
.cf-pricing-toggle__btn.is-active {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%);
  color: #000000;
  box-shadow: 0 4px 14px -4px rgba(255, 255, 255, 0.35);
}

/* Pricing tier grid */
.cf-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.cf-pricing-grid[hidden] { display: none !important; }
.cf-tier {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cf-tier--featured {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 0 30px -8px rgba(255, 255, 255, 0.18);
}
.cf-tier__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cf-tier__head h3 {
  font-family: var(--cf-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.02em;
  margin: 0;
}
.cf-tier__badge {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
}
.cf-tier__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cf-tier__price-n {
  font-family: var(--cf-display);
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.cf-tier__price-u {
  font-family: var(--cf-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}
.cf-tier__feat {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--cf-ui);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
  flex-grow: 1;
}
.cf-tier__feat li {
  position: relative;
  padding-left: 18px;
}
.cf-tier__feat li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--cf-mono);
  color: rgba(255, 255, 255, 0.42);
}
.cf-tier__cta {
  font-family: var(--cf-ui);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 12px 16px;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  transition: transform .15s, background .15s, border-color .15s, color .15s;
}
.cf-tier__cta--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--cf-bone);
}
.cf-tier__cta--ghost:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}
.cf-tier__cta--filled {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%);
  border: 0;
  color: #000000;
  box-shadow: 0 8px 24px -8px rgba(255, 255, 255, 0.4);
}
.cf-tier__cta--filled:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -8px rgba(255, 255, 255, 0.55);
}

@media (max-width: 760px) {
  .cf-pricing-grid { grid-template-columns: 1fr; }
}

/* (C) Jobs list */
.cf-jobs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}
.cf-job {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "head head"
    "co   apply"
    "meta apply"
    "sum  apply";
  gap: 6px 16px;
  align-items: center;
  transition: border-color .18s, background .18s;
}
.cf-job:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); }
.cf-job__head {
  grid-area: head;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cf-job__title {
  font-family: var(--cf-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 0.01em;
  margin: 0;
}
.cf-job__badge {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.66);
}
.cf-job__co   { grid-area: co;   margin: 0; font-family: var(--cf-ui); font-size: 13px; color: rgba(255,255,255,0.78); }
.cf-job__meta { grid-area: meta; margin: 0; font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); }
.cf-job__sum  { grid-area: sum;  margin: 4px 0 0; font-family: var(--cf-ui); font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.66); }
.cf-job__apply {
  grid-area: apply;
  font-family: var(--cf-ui);
  font-weight: 700;
  font-size: 12.5px;
  padding: 10px 16px;
  min-height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%);
  border: 0;
  color: #000000;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s, box-shadow .15s;
}
.cf-job__apply:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(255, 255, 255, 0.5);
}
@media (max-width: 560px) {
  .cf-job {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "co"
      "meta"
      "sum"
      "apply";
    gap: 6px;
  }
  .cf-job__apply { width: 100%; margin-top: 8px; }
}

/* (D) COOKIE BANNER — B&W sync (override the legacy violet/cream tint) */
body.cf-body.is-auth-gate #cookieBanner.cookie-banner {
  background: linear-gradient(180deg, rgba(15, 15, 15, 0.97) 0%, rgba(5, 5, 5, 0.98) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 -12px 40px -8px rgba(0, 0, 0, 0.7) !important;
  z-index: 940 !important;     /* below the cf-modal layer (950) so pricing modal sits on top */
}
body.cf-body.is-auth-gate #cookieBanner .cookie-banner__icon {
  filter: grayscale(1);
  opacity: 0.7;
}
body.cf-body.is-auth-gate #cookieBanner .cookie-banner__text {
  color: rgba(255, 255, 255, 0.72) !important;
  font-family: var(--cf-ui) !important;
}
body.cf-body.is-auth-gate #cookieBanner .cookie-banner__text strong {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
body.cf-body.is-auth-gate #cookieBanner .cookie-banner__text a {
  color: #FFFFFF !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
body.cf-body.is-auth-gate #cookieBanner .btn--primary,
body.cf-body.is-auth-gate #cookieBanner #cookieAccept {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  color: #000000 !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px -4px rgba(255, 255, 255, 0.35) !important;
}
body.cf-body.is-auth-gate #cookieBanner .btn--ghost,
body.cf-body.is-auth-gate #cookieBanner #cookieDecline {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  color: #FFFFFF !important;
}
body.cf-body.is-auth-gate #cookieBanner .btn--ghost:hover {
  border-color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* JS opens the modals — keep page-lock from breaking when they appear */
body.cf-modal-open { overflow: hidden !important; }


/* ============================================================
 * v9.6.6 — Three fixes
 *  (A) Logo alignment in the topnav · use the wordmark cleanly
 *  (B) Powered-by footer always visible at the bottom of the page
 *  (C) Upstream pricing markup (.tier, .pricing-grid, .audience-toggle,
 *      .pricing-controls, .byok-promo, etc.) restyled for the B&W theme
 *      so it inherits our cf-modal aesthetic.
 * ============================================================ */

/* (A) Logo alignment in topnav */
.cf-topnav__brand {
  display: inline-flex !important;
  align-items: center !important;
  height: 44px !important;
  padding: 0 !important;
  line-height: 0 !important;
}
.cf-topnav__brand-img--wordmark {
  display: block !important;
  height: 26px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  filter: invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) !important;
  vertical-align: middle !important;
}
@media (max-width: 900px) {
  .cf-topnav__brand-img--wordmark { height: 22px !important; max-width: 150px !important; }
}
@media (max-width: 560px) {
  .cf-topnav__brand { max-width: 160px !important; }
  .cf-topnav__brand-img--wordmark { height: 20px !important; max-width: 130px !important; }
}

/* (B) Powered-by footer */
.cf-poweredby {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 8px 16px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  text-align: center;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
}
.cf-poweredby__txt {
  display: inline-block;
  font-family: var(--cf-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
  pointer-events: auto;
}
.cf-poweredby__txt strong { color: #FFFFFF; font-weight: 600; }
@media (max-width: 560px) {
  .cf-poweredby__txt { font-size: 9.5px; letter-spacing: 0.12em; }
}
body.cf-body.is-auth-gate .cf-gate--two-col { padding-bottom: 46px !important; }
body.cf-body.is-auth-gate #cookieBanner.cookie-banner { bottom: 32px !important; }


/* (C) Upstream pricing markup restyled (scoped inside .cf-modal) */
.cf-modal .pricing-hero { text-align: center; margin-bottom: 22px; }
.cf-modal .pricing-hero__badge {
  display: inline-block;
  font-family: var(--cf-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.62);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: 18px;
}
.cf-modal .pricing-hero__title {
  font-family: var(--cf-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  color: #FFFFFF;
}
.cf-modal .pricing-hero__title .grad-text,
.cf-modal .pricing-hero__title .grad-text--biz {
  font-family: var(--cf-italic);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 50%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cf-modal .pricing-hero__sub {
  font-family: var(--cf-ui);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 60ch;
  margin: 0 auto 18px;
}
.cf-modal .pricing-hero__byok {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--cf-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 18px;
}
.cf-modal .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cf-modal .dot--ok { background: #FFFFFF; box-shadow: 0 0 8px rgba(255,255,255,0.6); }
.cf-modal .dot--cyan { background: #E8E8E8; box-shadow: 0 0 8px rgba(232,232,232,0.5); }

/* Pricing controls (billing + currency) */
.cf-modal .pricing-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 14px 0 22px;
}
.cf-modal .pricing-controls__bill {
  position: relative;
  display: inline-flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 4px;
}
.cf-modal .pricing-controls__bill-btn {
  font-family: var(--cf-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cf-modal .pricing-controls__bill-btn.is-active {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%);
  color: #000000;
}
.cf-modal .pricing-controls__save-tag {
  font-size: 9px;
  background: rgba(0, 0, 0, 0.15);
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.08em;
}
.cf-modal .pricing-controls__cur {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cf-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.66);
}
.cf-modal .pricing-controls__cur-label { text-transform: uppercase; letter-spacing: 0.14em; }
.cf-modal .pricing-controls__cur-select {
  background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 7px 10px;
  font-family: var(--cf-mono);
  font-size: 12px;
  min-height: 36px;
  cursor: pointer;
}
.cf-modal .pricing-controls__cur-badge {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
}

/* Audience toggle (upstream class) */
.cf-modal .audience-toggle {
  position: relative;
  display: inline-flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 4px;
  margin: 6px 0 24px;
}
.cf-modal .audience-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cf-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  border-radius: 999px;
}
.cf-modal .audience-toggle__btn.is-active {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%);
  color: #000000;
  box-shadow: 0 4px 14px -4px rgba(255, 255, 255, 0.4);
}
.cf-modal .audience-toggle__ic { font-size: 16px; }
.cf-modal .audience-toggle__pill { display: none; }

/* Tier grid */
.cf-modal .pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.cf-modal .pricing-block { margin-top: 6px; }
.cf-modal .tier {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  color: var(--cf-bone);
}
.cf-modal .tier--popular {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 30px -8px rgba(255, 255, 255, 0.18);
}
.cf-modal .tier__ribbon,
.cf-modal .tier__ribbon--byok,
.cf-modal .tier__ribbon--biz {
  position: absolute;
  top: -10px;
  right: 14px;
  font-family: var(--cf-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  padding: 4px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #000000;
  font-weight: 700;
}
.cf-modal .tier__head h3,
.cf-modal .tier__name {
  font-family: var(--cf-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
  color: #FFFFFF;
}
.cf-modal .tier__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 0 0 6px;
}
.cf-modal .tier__currency {
  font-family: var(--cf-display);
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}
.cf-modal .tier__amount {
  font-family: var(--cf-display);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #FFFFFF;
}
.cf-modal .tier__period {
  margin-left: 5px;
  font-family: var(--cf-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}
.cf-modal .tier__pitch {
  font-family: var(--cf-ui);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0;
}
.cf-modal .tier__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--cf-ui);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
  flex-grow: 1;
}
.cf-modal .tier__list li { position: relative; padding-left: 16px; }
.cf-modal .tier__list li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--cf-mono);
  color: rgba(255, 255, 255, 0.5);
}
.cf-modal .tier__list li b { color: #FFFFFF; font-weight: 700; }
.cf-modal .tier__cta,
.cf-modal .tier .btn {
  font-family: var(--cf-ui);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 12px 16px;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
}
.cf-modal .tier .btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #FFFFFF;
}
.cf-modal .tier .btn--ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
.cf-modal .tier .btn--aurora,
.cf-modal .tier .btn--byok,
.cf-modal .tier .btn--platinum,
.cf-modal .tier .btn--biz {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%);
  border: 0;
  color: #000000;
  box-shadow: 0 6px 18px -6px rgba(255, 255, 255, 0.4);
}
.cf-modal .tier__foot {
  font-family: var(--cf-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
  text-align: center;
  margin-top: 2px;
}

/* Employer + BYOK + biz-explainer */
.cf-modal .employer-hero,
.cf-modal .byok-section,
.cf-modal .biz-explainer {
  margin: 24px 0 8px;
  padding: 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.cf-modal .employer-hero { text-align: center; }
.cf-modal .employer-hero__title {
  font-family: var(--cf-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 38px);
  margin: 0 0 10px;
  color: #FFFFFF;
}
.cf-modal .employer-hero__sub {
  font-family: var(--cf-ui);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  max-width: 60ch;
  margin: 0 auto 12px;
}
.cf-modal .employer-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--cf-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}
.cf-modal .byok-section__inner,
.cf-modal .biz-explainer { display: flex; gap: 14px; align-items: flex-start; }
.cf-modal .byok-section__icon,
.cf-modal .biz-explainer__icon { font-size: 22px; opacity: 0.85; }
.cf-modal .byok-section__title,
.cf-modal .biz-explainer__title {
  font-family: var(--cf-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  margin: 0 0 6px;
  color: #FFFFFF;
}
.cf-modal .byok-section__sub,
.cf-modal .biz-explainer__sub {
  font-family: var(--cf-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Discount pills */
.cf-modal .discount-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--cf-mono);
  font-size: 11px;
  color: #FFFFFF;
  margin: 4px 6px 8px;
}

/* Tier grid responsive collapse */
@media (max-width: 760px) {
  .cf-modal .pricing-grid { grid-template-columns: 1fr; }
  .cf-modal .audience-toggle { width: 100%; }
  .cf-modal .audience-toggle__btn { flex: 1; justify-content: center; }
}


/* ============================================================
 * v9.6.7 — PURPLE-BLEED BUG FIXES
 * The upstream view-pricing CSS in styles.css uses violet/cyan/aurora
 * gradients on .audience-toggle__btn.is-active, .pricing-controls__bill-btn,
 * .pricing-controls__bill-pill, .pricing-controls__cur-badge,
 * .pricing-hero__title default color, .cf-job__title color, etc.
 * Force B&W everywhere those classes appear inside our cf-modal scope.
 * Also hide the empty .byok-promo placeholder gradient bars.
 * ============================================================ */

/* Audience toggle — kill purple "is-active" tint */
.cf-modal .audience-toggle__btn,
.cf-modal .audience-toggle__btn.is-active {
  background: transparent !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: none !important;
}
.cf-modal .audience-toggle__btn.is-active {
  background: #FFFFFF !important;
  color: #000000 !important;
  box-shadow: 0 4px 14px -4px rgba(255, 255, 255, 0.4) !important;
}
.cf-modal .audience-toggle__pill {
  background: transparent !important;
  display: none !important;
}

/* Billing toggle — same treatment */
.cf-modal .pricing-controls__bill {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.cf-modal .pricing-controls__bill-btn {
  background: transparent !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: none !important;
}
.cf-modal .pricing-controls__bill-btn.is-active {
  background: #FFFFFF !important;
  color: #000000 !important;
}
.cf-modal .pricing-controls__bill-pill {
  background: transparent !important;
  display: none !important;
}
.cf-modal .pricing-controls__save-tag {
  background: rgba(0, 0, 0, 0.18) !important;
  color: inherit !important;
}
.cf-modal .pricing-controls__cur-badge {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
/* Currency selector wrap (whole row) */
.cf-modal .pricing-controls__cur {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* BYOK promo banner — empty placeholder divs were showing gradient bars.
   Hide the banner if .byok-promo__main is empty so we don't render junk
   until the JS writes real copy into it. */
.cf-modal .byok-promo__main,
.cf-modal .byok-promo__sub {
  background: transparent !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.cf-modal .byok-promo__main:empty,
.cf-modal .byok-promo__sub:empty {
  display: none !important;
}
.cf-modal #byokPromoBanner:not([style*="display: none"]):has(.byok-promo__main:empty):has(.byok-promo__sub:empty) {
  display: none !important;
}

/* BYOK tier card price — gradient placeholder was bleeding under "/15 days" */
.cf-modal .tier--byok .tier__amount {
  background: transparent !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Pricing hero title — was rendering violet from the upstream theme */
.cf-modal .pricing-hero__title { color: #FFFFFF !important; }

/* Jobs modal — job titles were rendering in upstream violet */
.cf-modal .cf-job__title,
.cf-modal .cf-jobs-list .cf-job__title {
  background: transparent !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Jobs modal title "Jobs hiring right now." — was purple,
   only the italic "right now." should be the gradient */
.cf-modal #cfJobsTitle {
  background: transparent !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.cf-modal #cfJobsTitle em.cf-italic {
  background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 50%, #FFFFFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Generic guard — any element inside .cf-modal that the upstream theme
   set to color: var(--violet)/var(--cyan)/var(--accent) gets reset to white.
   The upstream uses CSS custom props so we can rewire at the modal root. */
.cf-modal {
  --violet:     #FFFFFF;
  --accent:     #FFFFFF;
  --accent-soft:#FFFFFF;
  --accent-deep:rgba(255,255,255,0.32);
  --cyan:       #E8E8E8;
  --ink-0:      #FFFFFF;
  --ink-1:      rgba(255,255,255,0.78);
}


/* ============================================================
 * v9.6.8 — KILL ALL REMAINING PURPLE BLEED
 *
 * Three confirmed culprits after grepping upstream styles.css:
 *
 *  (1) Line 6819:   .pricing-hero h1 / .pricing-hero__title {
 *                     background: var(--brand-grad) !important;
 *                     background-clip: text;     /* no !important — vulnerable */
 *                   }
 *      My color:white !important won the cascade for the TEXT, but the
 *      gradient BACKGROUND still rendered as a full-width bar behind it
 *      because background-clip:text wasn't !important.
 *      → Force background: none on the title itself. Gradient lives only
 *        on the .grad-text span inside.
 *
 *  (2) Line 6827:   .byok-promo { background: linear-gradient(…) !important }
 *      Inline style="display:none" is overridden by JS at runtime even
 *      pre-login. The gradient placeholder bars inside .byok-promo__main
 *      and .byok-promo__sub render as bars.
 *      → Force the whole banner to display:none unconditionally in modal scope.
 *
 *  (3) Line 7072:   .pricing-controls {
 *                     background: var(--bg-soft) !important;
 *                     border: 1px solid var(--line) !important;
 *                   }
 *      That's the cream/white pill bar around Monthly+Annual+CURRENCY.
 *      → Force transparent + no border in modal scope.
 *
 * Plus: rewire the upstream gradient vars (--brand-grad, --aurora-grad-*)
 * at the .cf-modal root so any other element that uses them inherits B&W.
 * ============================================================ */

/* Rewire upstream gradient vars at the modal root */
.cf-modal {
  --brand-grad:         linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%);
  --brand-grad-soft:    linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%);
  --aurora-grad:        linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 100%);
  --aurora-grad-soft:   linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.06) 100%);
  --aurora-grad-full:   linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%);
  --aurora-grad-platinum: linear-gradient(135deg, #FFFFFF 0%, #E0E0E0 50%, #FFFFFF 100%);
  --aurora-text-muted:  rgba(255, 255, 255, 0.7);
  --bg-soft:            transparent;
  --bg-canvas:          #FFFFFF;
  --line:               rgba(255,255,255,0.18);
  --ink-2:              rgba(255,255,255,0.66);
}

/* (1) Kill the gradient BAR behind "Without the bullsh*t." */
.cf-modal .pricing-hero,
.cf-modal .pricing-hero h1,
.cf-modal .pricing-hero__title {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
/* The italic .grad-text span inside KEEPS the gradient as text-clipped */
.cf-modal .pricing-hero__title .grad-text,
.cf-modal .pricing-hero__title .grad-text--biz,
.cf-modal .grad-text,
.cf-modal .grad-text--biz {
  display: inline !important;
  background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 50%, #FFFFFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* (2) Hide the BYOK promo banner entirely — JS keeps re-showing it */
.cf-modal #byokPromoBanner,
.cf-modal .byok-promo {
  display: none !important;
}

/* (3) Kill the cream/white bar around Monthly + Annual + CURRENCY */
.cf-modal .pricing-controls {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.cf-modal .pricing-controls__save-tag {
  background: rgba(0, 0, 0, 0.18) !important;
  background-image: none !important;
  color: inherit !important;
}

/* Defensive: any element inside .cf-modal that the upstream paints with
   --brand-grad or --aurora-grad-full as the LITERAL background — neutralize.
   This covers ribbons, hero badges, and other future surprises. */
.cf-modal .tier__ribbon,
.cf-modal .tier__ribbon--byok,
.cf-modal .tier__ribbon--biz {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #000000 !important;
}

/* Mobile: the white bar fix also applies in the responsive ladder */
@media (max-width: 760px) {
  .cf-modal .pricing-controls { background: transparent !important; border: 0 !important; }
}


/* ============================================================
 * v9.6.10 — TIER-CARD WHITEOUT FIX + COOKIE BANNER READABILITY
 *           + COMPREHENSIVE MOBILE AUDIT + INLINE CONNXEXT LOGO
 *
 *  ROOT CAUSE FOUND (grep of upstream styles.css):
 *
 *   styles.css:6678–6692 paints EVERY surface in the .tier list using:
 *     .step, .tier, .cookie-banner__inner, .modal__panel ... {
 *       background: var(--bg-canvas) !important;
 *       color: var(--ink-0) !important;
 *       border-color: var(--line) !important;
 *     }
 *   With global --bg-canvas: #FFFFFF and --ink-0: #0F0F23, every tier
 *   card and the cookie banner inner pill render as WHITE cards with
 *   near-black text — exactly what the user reported.
 *
 *   My v9.6.8 fix accidentally REINFORCED the bug by rewiring
 *     .cf-modal { --bg-canvas: #FFFFFF }
 *   inside the modal scope. The cards stayed white.
 *
 *   Fix is three layers, in order of cascade priority:
 *     (A) Rewire --bg-canvas + --ink-* tokens at .cf-modal root to
 *         dark-mode values so the upstream var() reads correctly.
 *     (B) Belt-and-braces: force every .tier variant to a dark gradient
 *         with !important and high specificity so it wins regardless
 *         of any future upstream rule.
 *     (C) Force every text node inside .tier (name, amount, currency,
 *         period, pitch, list items, foot) to white / off-white.
 *
 *  COOKIE BANNER FIX:
 *     .cookie-banner__inner gets painted via the same global rule at
 *     line 6689. It's outside .cf-modal scope so my modal-rewire
 *     doesn't reach it. Override it directly on #cookieBanner.
 *
 *  MOBILE AUDIT (375/414/560 widths):
 *     - Cookie banner stacks vertically, full-width buttons
 *     - Pricing controls stack (Monthly/Annual + currency row)
 *     - Audience toggle stacks for thumb-reach
 *     - Tier-card padding tightens
 *     - Modal card padding tightens
 *     - Topnav CTAs hit 44px tap-target floor
 *
 *  LOGO:
 *     Replaced the inverted PNG with an inline SVG that recreates the
 *     CONNXEXT-with-gradient-X reference exactly. No filter:invert hack.
 *     Crisp at any DPR. SVG class .cf-topnav__brand-svg below.
 * ============================================================ */

/* ── (A) Rewire upstream tokens INSIDE the modal scope ─────────── */
.cf-modal {
  --bg-canvas:   transparent;
  --bg-soft:     rgba(255, 255, 255, 0.04);
  --bg-muted:    rgba(255, 255, 255, 0.06);
  --bg-0:        #050505;
  --bg-1:        #0A0A0A;
  --ink-0:       #FFFFFF;
  --ink-1:       rgba(255, 255, 255, 0.85);
  --ink-2:       rgba(255, 255, 255, 0.65);
  --ink-3:       rgba(255, 255, 255, 0.4);
  --line:        rgba(255, 255, 255, 0.18);
  --line-strong: rgba(255, 255, 255, 0.32);
}

/* ── (B) Force every tier variant to a dark gradient ──────────── */
.cf-modal .tier,
.cf-modal article.tier,
.cf-modal .tier.tier--free,
.cf-modal .tier.tier--byok,
.cf-modal .tier.tier--silver,
.cf-modal .tier.tier--gold,
.cf-modal .tier.tier--platinum,
.cf-modal .tier.tier--biz,
.cf-modal .tier--biz.tier--silver,
.cf-modal .tier--biz.tier--gold,
.cf-modal .tier--biz.tier--platinum {
  background: linear-gradient(180deg, rgba(20, 20, 28, 0.94) 0%, rgba(8, 8, 12, 0.94) 100%) !important;
  background-image: linear-gradient(180deg, rgba(20, 20, 28, 0.94) 0%, rgba(8, 8, 12, 0.94) 100%) !important;
  background-color: rgba(8, 8, 12, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6) !important;
}
.cf-modal .tier.tier--popular,
.cf-modal .tier.tier--gold.tier--popular,
.cf-modal .tier--biz.tier--gold.tier--popular {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 0 30px -8px rgba(255, 255, 255, 0.18), 0 8px 24px -8px rgba(0, 0, 0, 0.6) !important;
}
.cf-modal .tier:hover {
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 14px 32px -8px rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-2px);
}

/* ── (C) Force every text node inside tiers to legible whites ──── */
.cf-modal .tier .tier__name,
.cf-modal .tier .tier__head h3,
.cf-modal article.tier .tier__name,
.cf-modal article.tier h3 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: transparent !important;
  background-image: none !important;
}
.cf-modal .tier .tier__amount,
.cf-modal article.tier .tier__amount {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
.cf-modal .tier .tier__currency,
.cf-modal .tier .tier__period,
.cf-modal article.tier .tier__currency,
.cf-modal article.tier .tier__period {
  color: rgba(255, 255, 255, 0.6) !important;
}
.cf-modal .tier .tier__pitch,
.cf-modal .tier .tier__desc,
.cf-modal article.tier .tier__pitch,
.cf-modal article.tier p {
  color: rgba(255, 255, 255, 0.78) !important;
}
.cf-modal .tier .tier__list,
.cf-modal .tier .tier__list li,
.cf-modal .tier .tier__features,
.cf-modal .tier .tier__features li,
.cf-modal article.tier ul,
.cf-modal article.tier ul li {
  color: rgba(255, 255, 255, 0.78) !important;
}
.cf-modal .tier .tier__list li b,
.cf-modal .tier .tier__features li b,
.cf-modal article.tier ul li b {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.cf-modal .tier .tier__list li::before,
.cf-modal .tier .tier__features li::before {
  color: rgba(255, 255, 255, 0.5) !important;
}
.cf-modal .tier .tier__foot,
.cf-modal article.tier .tier__foot {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Tier CTA buttons — white pill, black text, never invisible */
.cf-modal .tier .tier__cta,
.cf-modal .tier .btn--aurora,
.cf-modal .tier .btn--byok,
.cf-modal .tier .btn--platinum,
.cf-modal .tier .btn--biz,
.cf-modal .tier .btn--primary,
.cf-modal article.tier .tier__cta {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  background-image: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  background-color: #FFFFFF !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px -6px rgba(255, 255, 255, 0.4) !important;
}
.cf-modal .tier .tier__cta.btn--ghost,
.cf-modal .tier .btn--ghost,
.cf-modal article.tier .btn--ghost {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: none !important;
}
.cf-modal .tier .tier__cta.btn--ghost:hover,
.cf-modal .tier .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #FFFFFF !important;
}

/* ── COOKIE BANNER — kill the white inner pill, fully legible ──── */
body #cookieBanner .cookie-banner__inner,
body.cf-body #cookieBanner .cookie-banner__inner,
#cookieBanner .cookie-banner__inner {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#cookieBanner .cookie-banner__text {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--cf-ui) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
#cookieBanner .cookie-banner__text strong {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
#cookieBanner .cookie-banner__text a {
  color: #FFFFFF !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
#cookieBanner .cookie-banner__text a:hover {
  color: #C8C8C8 !important;
}
#cookieBanner .btn--primary,
#cookieBanner #cookieAccept {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  background-image: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  background-color: #FFFFFF !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 0 !important;
  font-weight: 700 !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 14px -4px rgba(255, 255, 255, 0.35) !important;
}
#cookieBanner .btn--ghost,
#cookieBanner #cookieDecline {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 600 !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
}
#cookieBanner .btn--ghost:hover,
#cookieBanner #cookieDecline:hover {
  border-color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ── INLINE CONNXEXT SVG LOGO — matches the brand-kit reference ── */
.cf-topnav__brand-svg {
  display: block;
  height: 38px;
  width: auto;
  vertical-align: middle;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}
.cf-topnav__brand { max-width: 240px !important; }
@media (max-width: 900px) {
  .cf-topnav__brand-svg { height: 34px; }
  .cf-topnav__brand { max-width: 210px !important; }
}
@media (max-width: 560px) {
  .cf-topnav__brand-svg { height: 28px; }
  .cf-topnav__brand { max-width: 170px !important; }
}
/* Hide the old PNG wordmark — superseded by the inline SVG */
.cf-topnav__brand-img--wordmark { display: none !important; }

/* ── MOBILE AUDIT — comprehensive pass at ≤ 560px ──────────────── */
@media (max-width: 560px) {
  /* Cookie banner: stacks vertically, full-width buttons, no clipping under poweredby */
  #cookieBanner.cookie-banner {
    padding: 14px 14px !important;
    bottom: 32px !important;
  }
  #cookieBanner .cookie-banner__inner {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    text-align: left !important;
  }
  #cookieBanner .cookie-banner__icon { display: none !important; }
  #cookieBanner .cookie-banner__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #cookieBanner .btn--primary,
  #cookieBanner .btn--ghost,
  #cookieBanner #cookieAccept,
  #cookieBanner #cookieDecline {
    width: 100% !important;
  }

  /* Pricing modal card breathes correctly */
  .cf-modal .cf-modal__card,
  .cf-modal .cf-modal__card--wide {
    padding: 22px 18px 26px !important;
    border-radius: 14px !important;
  }
  .cf-modal__title,
  .cf-modal .cf-modal__title {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.08 !important;
  }
  .cf-modal .pricing-hero__title {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.1 !important;
  }
  .cf-modal .pricing-hero__sub,
  .cf-modal__lead {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
  .cf-modal__close { top: 10px !important; right: 10px !important; }

  /* Pricing controls stack vertically — billing + currency on separate rows */
  .cf-modal .pricing-controls {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .cf-modal .pricing-controls__bill,
  .cf-modal .pricing-controls__cur {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* Audience toggle stacks for thumb-reach (kill horizontal cramping) */
  .cf-modal .audience-toggle {
    width: 100% !important;
    flex-direction: column !important;
    border-radius: 14px !important;
  }
  .cf-modal .audience-toggle__btn {
    width: 100% !important;
    flex: 1 1 100% !important;
    justify-content: center !important;
  }

  /* Tier cards: 1 column, comfortable padding, readable type */
  .cf-modal .pricing-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .cf-modal .tier {
    padding: 22px 18px !important;
    border-radius: 14px !important;
  }
  .cf-modal .tier__amount { font-size: 32px !important; }
  .cf-modal .tier__name { font-size: 17px !important; }

  /* Jobs modal cards stack apply-button below */
  .cf-modal .cf-job__title { font-size: 16px !important; }
  .cf-modal .cf-job__apply { width: 100% !important; margin-top: 8px !important; }

  /* Topnav CTAs at 44px tap-target floor */
  .cf-topnav__btn {
    min-height: 44px !important;
    padding: 11px 14px !important;
    font-size: 12.5px !important;
  }

  /* Gate panel: full-bleed with safe-area padding */
  .cf-panel--inline { padding: 22px 18px !important; }

  /* The big italic accent on the headline can sometimes overflow at narrow widths */
  body.cf-body.is-auth-gate .cf-headline--left {
    font-size: clamp(28px, 9vw, 38px) !important;
  }
  body.cf-body.is-auth-gate .cf-headline--left .cf-headline__line--accent {
    font-size: clamp(30px, 9.5vw, 42px) !important;
  }
}

/* Tablet 561–760px: pricing-grid stays 2-col, controls stay inline */
@media (min-width: 561px) and (max-width: 760px) {
  .cf-modal .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* Defensive: hide the old #gateEyebrow element + any FIG caption text — re-affirm v9.6.3/v9.6.7 */
.cf-panel__eyebrow,
#gateEyebrow,
.cf-visual__caption { display: none !important; }


/* ============================================================
 * v9.6.11 — B&W LOGO + TAGLINE · WORLD-CLASS HERO · ICON CLEANUP
 *
 *  Reported by user after v9.6.10 ship:
 *   (1) Header logo should be the ALL-WHITE CONNXEXT + tagline, not the
 *       colored gradient X. Use the B&W brand variant.
 *   (2) Facebook social-login button still shows Facebook brand-blue —
 *       breaks the B&W theme. Make it inherit the button's text color.
 *   (3) BYOK section card in pricing modal still has a colored teal/violet
 *       icon swatch — upstream styles.css:3617 paints it with
 *       var(--aurora-grad). Override to B&W inside .cf-modal scope.
 *   (4) Hero copy mentions "Gen Z" and "Claude" — user wants premium
 *       editorial voice that names neither. Headline + lead rewritten
 *       in index.html. This stylesheet adds .cf-lead-meta — the new
 *       metrics rail beneath the lead (15 matches / 4 docs / 30s).
 *
 *  Logo SVG is upsized: viewBox 0 0 400 80 (was 0 0 380 60) to fit the
 *  "A NEXT-GENERATION AI JOB MARKET" tagline. The CSS topnav heights
 *  bump correspondingly so the wordmark + tagline both stay legible.
 * ============================================================ */

/* ── (1) Logo: re-size topnav slot for the B&W SVG with tagline ── */
/* v9.7.16: heights shrunk an additional 25% per user request (vs v9.7.10's
   −20% baseline) — net total −40% from original v9.6.12 sizes. ViewBox in
   the SVG widened 80 → 88 with tagline font-size 12.1 → 18 so the larger
   tagline gets headroom and still reads visually larger after the −25%. */
.cf-topnav__brand-svg {
  display: block;
  height: 20px;                /* v9.7.16: 26 × 0.75 — user requested additional −25% */
  width: auto;
  vertical-align: middle;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}
.cf-topnav__brand { max-width: 126px !important; }   /* v9.7.16: 168 × 0.75 */
@media (max-width: 900px) {
  .cf-topnav__brand-svg { height: 18px; }            /* v9.7.16: 24 × 0.75 */
  .cf-topnav__brand { max-width: 108px !important; }
}
@media (max-width: 560px) {
  .cf-topnav__brand-svg { height: 16px; }            /* v9.7.16: 21 × 0.75 (≈) */
  .cf-topnav__brand { max-width: 87px !important; }
}

/* ── (2) Social login buttons: kill brand-blue Facebook icon ──── */
.cf-panel .btn--facebook svg,
.cf-panel .btn--facebook svg path,
.cf-panel .btn--social.btn--facebook svg path {
  fill: currentColor !important;
}
.cf-panel .btn--facebook,
.cf-panel .btn--x,
.cf-panel .btn--social {
  color: var(--cf-bone) !important;
}
/* Hover lifts the social-icon row gracefully */
.cf-panel .btn--social:hover svg path {
  fill: currentColor !important;
}

/* ── (3) BYOK section + biz-explainer icon: B&W swatch ─────────── */
.cf-modal .byok-section__icon,
.cf-modal .biz-explainer__icon {
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%) !important;
  background-color: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 8px 22px -8px rgba(255,255,255,0.18), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
  color: #FFFFFF !important;
  filter: grayscale(1);          /* belt — kills any colored emoji tint */
}

/* ── (4) Hero metrics rail beneath the lead paragraph ──────────── */
.cf-lead-meta {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  gap: clamp(18px, 3.2vw, 36px);
  flex-wrap: wrap;
  align-items: baseline;
}
.cf-lead-meta li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--cf-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--cf-bone-mute);
  text-transform: uppercase;
  white-space: nowrap;
}
.cf-lead-meta li > span {
  font-family: var(--cf-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  color: var(--cf-bone);
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1;
}
/* Subtle hairline divider between metrics on wide screens only */
@media (min-width: 720px) {
  .cf-lead-meta li + li {
    padding-left: clamp(18px, 3.2vw, 36px);
    border-left: 1px solid var(--cf-line);
  }
}
@media (max-width: 560px) {
  .cf-lead-meta {
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
  }
  .cf-lead-meta li > span { font-size: 20px; }
}


/* ============================================================
 * v9.6.11 — AUTH PANEL DARK-MODE FIX (regression caught during ship)
 *
 * Same root cause as the v9.6.10 tier-card whiteout: upstream
 * styles.css:6470 + 6517–6604 paint EVERY auth-gate child with
 * `var(--bg-canvas)` (white) + `var(--ink-0)` (near-black). The
 * .gate__panel, .gate__tabs, .field input, .gate__social-btn, etc.
 * all inherit those tokens.
 *
 * Fix: rewire the upstream tokens at the body.cf-body.is-auth-gate
 * scope — every selector that uses var(--bg-canvas) etc. now
 * inherits dark-mode values automatically. Plus explicit !important
 * overrides on the .gate__panel.cf-panel itself for belt-and-braces.
 *
 * Google button STAYS white-on-white per Google brand guidelines
 * (hardcoded #FFFFFF at upstream line 6537 — we don't touch it).
 * ============================================================ */

/* (A) Rewire upstream tokens at the gate-body scope */
body.cf-body.is-auth-gate {
  --bg-canvas:    rgba(12, 14, 26, 0.78);
  --bg-soft:      rgba(255, 255, 255, 0.06);
  --bg-muted:     rgba(255, 255, 255, 0.04);
  --bg-0:         #050505;
  --bg-1:         #0A0A0A;
  --ink-0:        #FFFFFF;
  --ink-1:        rgba(255, 255, 255, 0.85);
  --ink-2:        rgba(255, 255, 255, 0.62);
  --ink-3:        rgba(255, 255, 255, 0.4);
  --line:         rgba(255, 255, 255, 0.18);
  --line-strong:  rgba(255, 255, 255, 0.32);
  --brand-violet: #FFFFFF;
  --brand-violet-deep: rgba(255, 255, 255, 0.7);
  --accent:       #FFFFFF;
  --accent-soft:  rgba(255, 255, 255, 0.85);
  --accent-deep:  rgba(255, 255, 255, 0.32);
}

/* (B) Belt + braces — explicit dark-glass on the panel itself */
body.cf-body.is-auth-gate .gate__panel.cf-panel,
body.cf-body.is-auth-gate .gate__panel.cf-panel--inline,
body.cf-body.is-auth-gate .cf-panel--inline {
  background: linear-gradient(180deg, rgba(14, 16, 28, 0.85) 0%, rgba(7, 8, 15, 0.95) 100%) !important;
  background-image: linear-gradient(180deg, rgba(14, 16, 28, 0.85) 0%, rgba(7, 8, 15, 0.95) 100%) !important;
  background-color: rgba(8, 8, 14, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 40px 120px -30px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

/* (C) Tabs row — dark translucent pill */
body.cf-body.is-auth-gate .gate__tabs {
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
body.cf-body.is-auth-gate .gate__tab {
  color: rgba(255, 255, 255, 0.62) !important;
  background: transparent !important;
  background-image: none !important;
}
body.cf-body.is-auth-gate .gate__tab.is-active {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  background-image: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  color: #000000 !important;
  box-shadow: 0 4px 14px -4px rgba(255, 255, 255, 0.35) !important;
}
body.cf-body.is-auth-gate .gate__tab:hover:not(.is-active) {
  color: #FFFFFF !important;
}

/* (D) Form fields — dark glass with white text inside the gate scope */
body.cf-body.is-auth-gate .gate__panel .field input,
body.cf-body.is-auth-gate .gate__panel .field textarea,
body.cf-body.is-auth-gate .gate__panel .field select,
body.cf-body.is-auth-gate .cf-panel input[type="text"],
body.cf-body.is-auth-gate .cf-panel input[type="email"],
body.cf-body.is-auth-gate .cf-panel input[type="tel"],
body.cf-body.is-auth-gate .cf-panel input[type="password"],
body.cf-body.is-auth-gate .cf-panel input[type="url"],
body.cf-body.is-auth-gate .cf-panel select,
body.cf-body.is-auth-gate .cf-panel textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 10px !important;
}
body.cf-body.is-auth-gate .gate__panel .field input::placeholder,
body.cf-body.is-auth-gate .gate__panel .field textarea::placeholder,
body.cf-body.is-auth-gate .cf-panel input::placeholder,
body.cf-body.is-auth-gate .cf-panel textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
body.cf-body.is-auth-gate .gate__panel .field input:focus,
body.cf-body.is-auth-gate .gate__panel .field textarea:focus,
body.cf-body.is-auth-gate .gate__panel .field select:focus,
body.cf-body.is-auth-gate .cf-panel input:focus,
body.cf-body.is-auth-gate .cf-panel textarea:focus,
body.cf-body.is-auth-gate .cf-panel select:focus {
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
}
/* Field LABELS — mono caps in muted white */
body.cf-body.is-auth-gate .gate__panel .field > span,
body.cf-body.is-auth-gate .cf-panel .field > span {
  color: rgba(255, 255, 255, 0.66) !important;
}

/* (E) Social-row buttons (Facebook + X) — dark glass with white icons */
body.cf-body.is-auth-gate .gate__panel .btn--social,
body.cf-body.is-auth-gate .cf-panel .btn--social,
body.cf-body.is-auth-gate .gate__social-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}
body.cf-body.is-auth-gate .gate__panel .btn--social:hover,
body.cf-body.is-auth-gate .cf-panel .btn--social:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
}

/* (F) Google button — keep WHITE per Google brand guidelines, just round it */
body.cf-body.is-auth-gate .gate__panel .btn--google,
body.cf-body.is-auth-gate .cf-panel .btn--google {
  background: #FFFFFF !important;
  color: #1F1F1F !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  font-weight: 600 !important;
}
body.cf-body.is-auth-gate .gate__panel .btn--google:hover,
body.cf-body.is-auth-gate .cf-panel .btn--google:hover {
  background: #F4F2EE !important;
}

/* (G) OR-divider, links, role-cards inside the dark panel */
body.cf-body.is-auth-gate .gate__panel .gate__divider,
body.cf-body.is-auth-gate .cf-panel .gate__divider {
  color: rgba(255, 255, 255, 0.5) !important;
}
body.cf-body.is-auth-gate .gate__panel .gate__divider::before,
body.cf-body.is-auth-gate .gate__panel .gate__divider::after,
body.cf-body.is-auth-gate .cf-panel .gate__divider::before,
body.cf-body.is-auth-gate .cf-panel .gate__divider::after {
  background: rgba(255, 255, 255, 0.18) !important;
}
body.cf-body.is-auth-gate .gate__panel .gate__link,
body.cf-body.is-auth-gate .cf-panel .gate__link {
  color: rgba(255, 255, 255, 0.78) !important;
}
body.cf-body.is-auth-gate .gate__panel .gate__link:hover,
body.cf-body.is-auth-gate .cf-panel .gate__link:hover {
  color: #FFFFFF !important;
}
body.cf-body.is-auth-gate .gate__panel .gate__back,
body.cf-body.is-auth-gate .cf-panel .gate__back {
  color: rgba(255, 255, 255, 0.55) !important;
}
body.cf-body.is-auth-gate .gate__panel .gate__form-title,
body.cf-body.is-auth-gate .cf-panel .gate__form-title {
  color: #FFFFFF !important;
}
body.cf-body.is-auth-gate .gate__panel .gate__form-sub,
body.cf-body.is-auth-gate .gate__panel .gate__hint-text,
body.cf-body.is-auth-gate .cf-panel .gate__form-sub,
body.cf-body.is-auth-gate .cf-panel .gate__hint-text {
  color: rgba(255, 255, 255, 0.62) !important;
}
body.cf-body.is-auth-gate .gate__panel .role-card,
body.cf-body.is-auth-gate .cf-panel .role-card {
  background: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
}
body.cf-body.is-auth-gate .gate__panel .role-card:hover,
body.cf-body.is-auth-gate .cf-panel .role-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
}
body.cf-body.is-auth-gate .gate__panel .role-card__name,
body.cf-body.is-auth-gate .cf-panel .role-card__name {
  color: #FFFFFF !important;
}
body.cf-body.is-auth-gate .gate__panel .role-card__desc,
body.cf-body.is-auth-gate .cf-panel .role-card__desc {
  color: rgba(255, 255, 255, 0.62) !important;
}
body.cf-body.is-auth-gate .gate__panel .role-card__hint,
body.cf-body.is-auth-gate .cf-panel .role-card__hint {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* (H) Enter Connext primary button — preserve the white pill from v9.6.4 */
body.cf-body.is-auth-gate .gate__panel .btn--primary,
body.cf-body.is-auth-gate .gate__panel .btn--wide,
body.cf-body.is-auth-gate .cf-panel .btn--primary,
body.cf-body.is-auth-gate .cf-panel .btn--wide {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  background-image: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 30px -8px rgba(255, 255, 255, 0.30) !important;
}


/* ============================================================
 * v9.6.15 — REMOVE CF-VISUAL ASIDE · SINGLE-COLUMN GATE · SIGNUP POLISH
 *
 *  (1) The right-column <aside class="cf-gate-grid__col--visual"> with
 *      the X-cross + skill-node SVG has been deleted from index.html.
 *      Collapse the .cf-gate-grid from 2-col to 1-col so the headline
 *      + lead + metrics + panel center properly without the right
 *      column taking up half the viewport.
 *
 *  (2) Polish the Create-Account flow — role-chooser cards, form titles,
 *      back button, helper text — so each piece renders cleanly on the
 *      dark glass panel established in v9.6.11.
 *
 *  (3) The .cf-cosmos backdrop (subtle X + grid + cosmic fields) stays
 *      untouched — it's the only visual element left, providing brand
 *      texture behind the centered editorial column.
 * ============================================================ */

/* ── (1) Collapse gate-grid to single column ──────────────────── */
body.cf-body.is-auth-gate .cf-gate-grid,
.cf-gate-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: clamp(40px, 7vw, 80px) clamp(20px, 4vw, 40px) !important;
  padding-bottom: max(clamp(40px, 7vw, 80px), env(safe-area-inset-bottom)) !important;
  gap: 28px !important;
  align-items: start !important;
  justify-items: stretch !important;
}
.cf-gate-grid__col--copy {
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}
/* Headline at left scale up gracefully now that it has full width */
.cf-gate-grid__col--copy .cf-headline--left {
  font-size: clamp(36px, 6vw, 60px) !important;
}
.cf-gate-grid__col--copy .cf-headline--left .cf-headline__line--accent {
  font-size: clamp(38px, 6.4vw, 64px) !important;
}
.cf-gate-grid__col--copy .cf-lead {
  max-width: 60ch !important;
}
.cf-gate-grid__col--copy .cf-panel--inline {
  max-width: 100% !important;
}

/* Boost the cosmos backdrop slightly since it's the only visual now */
body:has(.cf-gate--two-col) .cf-cosmos__x,
body.cf-body.is-auth-gate .cf-cosmos__x {
  opacity: 0.42 !important;
}
body:has(.cf-gate--two-col) .cf-cosmos__field,
body.cf-body.is-auth-gate .cf-cosmos__field {
  opacity: 0.45 !important;
}

/* ── (2) Signup page polish — chooser + role cards + forms ────── */

/* Chooser hint: "Who are you signing up as?" — proper hierarchy */
body.cf-body.is-auth-gate .gate__panel .gate__choose-hint,
body.cf-body.is-auth-gate .cf-panel .gate__choose-hint {
  font-family: var(--cf-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 4px 0 14px !important;
}

/* Role cards — dark glass with white text + clean hover */
body.cf-body.is-auth-gate .gate__panel .role-card,
body.cf-body.is-auth-gate .cf-panel .role-card {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  width: 100% !important;
  padding: 16px 18px !important;
  margin: 8px 0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
}
body.cf-body.is-auth-gate .gate__panel .role-card:hover,
body.cf-body.is-auth-gate .cf-panel .role-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  transform: translateY(-1px);
}
body.cf-body.is-auth-gate .gate__panel .role-card__icon,
body.cf-body.is-auth-gate .cf-panel .role-card__icon {
  font-size: 26px !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}
body.cf-body.is-auth-gate .gate__panel .role-card__body,
body.cf-body.is-auth-gate .cf-panel .role-card__body {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
body.cf-body.is-auth-gate .gate__panel .role-card__name,
body.cf-body.is-auth-gate .cf-panel .role-card__name {
  font-family: var(--cf-display) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.01em !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
}
body.cf-body.is-auth-gate .gate__panel .role-card__desc,
body.cf-body.is-auth-gate .cf-panel .role-card__desc {
  font-family: var(--cf-ui) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}
body.cf-body.is-auth-gate .gate__panel .role-card__hint,
body.cf-body.is-auth-gate .cf-panel .role-card__hint {
  font-family: var(--cf-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-top: 4px !important;
}
body.cf-body.is-auth-gate .gate__panel .role-card__arrow,
body.cf-body.is-auth-gate .cf-panel .role-card__arrow {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
}

/* Back button on signup forms — minimal ghost link */
body.cf-body.is-auth-gate .gate__panel .gate__back,
body.cf-body.is-auth-gate .cf-panel .gate__back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 4px 0 !important;
  margin: 0 0 8px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: var(--cf-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
  width: auto !important;
  text-align: left !important;
}
body.cf-body.is-auth-gate .gate__panel .gate__back:hover,
body.cf-body.is-auth-gate .cf-panel .gate__back:hover {
  color: #FFFFFF !important;
}

/* Form titles — Create your X account — proper display hierarchy */
body.cf-body.is-auth-gate .gate__panel .gate__form-title,
body.cf-body.is-auth-gate .cf-panel .gate__form-title {
  font-family: var(--cf-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 22px !important;
  letter-spacing: 0.005em !important;
  color: #FFFFFF !important;
  margin: 4px 0 6px !important;
  line-height: 1.1 !important;
}
body.cf-body.is-auth-gate .gate__panel .gate__form-sub,
body.cf-body.is-auth-gate .cf-panel .gate__form-sub {
  font-family: var(--cf-ui) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 0 14px !important;
}

/* Helper text below social-signup options */
body.cf-body.is-auth-gate .gate__panel .gate__hint-text,
body.cf-body.is-auth-gate .cf-panel .gate__hint-text {
  font-family: var(--cf-ui) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-align: center !important;
  margin: 14px 0 0 !important;
}

/* Terms-checkbox row — proper alignment + readable text */
body.cf-body.is-auth-gate .gate__panel .check-row,
body.cf-body.is-auth-gate .cf-panel .check-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 8px 0 6px !important;
  font-family: var(--cf-ui) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.72) !important;
}
body.cf-body.is-auth-gate .gate__panel .check-row input[type="checkbox"],
body.cf-body.is-auth-gate .cf-panel .check-row input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  accent-color: #FFFFFF !important;
}
body.cf-body.is-auth-gate .gate__panel .check-row a,
body.cf-body.is-auth-gate .cf-panel .check-row a {
  color: #FFFFFF !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Field <em> emphasis text (e.g. "(8+ characters)") — softer secondary */
body.cf-body.is-auth-gate .gate__panel .field > span em,
body.cf-body.is-auth-gate .cf-panel .field > span em {
  font-style: normal !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin-left: 4px !important;
  font-size: 11px !important;
}

/* Error messages */
body.cf-body.is-auth-gate .gate__panel .gate__error,
body.cf-body.is-auth-gate .cf-panel .gate__error {
  color: #FF8B8B !important;
  font-family: var(--cf-ui) !important;
  font-size: 12.5px !important;
  margin: 6px 0 0 !important;
  min-height: 16px !important;
}


/* ============================================================
 * v9.6.16 — POST-LOGIN B&W THEME · COMPLETE TEMPLATE PARITY
 *
 *  User reported: "after login page not generated as per the hero page,
 *   fix all pages after log in check for bugs for all pages not just
 *   the hero page all pages should be the same template."
 *
 *  Root cause: every v9.6.0-v9.6.15 token rewire was scoped to
 *  `body.cf-body.is-auth-gate` — that selector only matches BEFORE the
 *  user signs in (when the `is-auth-gate` class is on body). Once auth
 *  completes, JS strips that class to reveal the workflow, and our
 *  dark-theme tokens stop applying. The upstream styles.css purple/
 *  violet aurora theme takes over the post-login UI.
 *
 *  Fix: rewire tokens at the BODY-WIDE scope (no `.is-auth-gate`
 *  qualifier) so they cascade across BOTH pre-login gate AND post-login
 *  workflow. Plus targeted overrides for:
 *    .workflow · .rail · .hero · .hero--aurora · .step · .step__num
 *    .drop-zone · .api-block · .field input/select/textarea
 *    .btn--primary · .btn--aurora · .btn--ghost · .btn--byok · .btn--biz
 *    .results-block · .job-result · .variant-card
 *    .emp-dash · .emp-stat · .emp-form · .verify-banner
 *    .pipeline-page · .pp-stage · .pipeline-progress__bar
 *    .board-hero · .board-card · .board-filter · .apply-modal
 *    .modal__panel · .builder-modal · .api-help-modal · .terms-body
 *    .notif-drawer · .notif-item · .account-modal
 *
 *  PLUS fix Cross-Origin-Opener-Policy warnings — handled in firebase.json
 *  via `Cross-Origin-Opener-Policy: same-origin-allow-popups` header so
 *  Firebase popup auth's window.closed polling works.
 * ============================================================ */

/* ── (A) BODY-WIDE token rewire — applies pre AND post login ───── */
body.cf-body {
  --bg-canvas:    rgba(12, 14, 26, 0.78);
  --bg-soft:      rgba(255, 255, 255, 0.06);
  --bg-muted:     rgba(255, 255, 255, 0.04);
  --bg-0:         #050505;
  --bg-1:         #0A0A0A;
  --bg-2:         #0F0F18;
  --ink-0:        #FFFFFF;
  --ink-1:        rgba(255, 255, 255, 0.85);
  --ink-2:        rgba(255, 255, 255, 0.62);
  --ink-3:        rgba(255, 255, 255, 0.4);
  --line:         rgba(255, 255, 255, 0.18);
  --line-strong:  rgba(255, 255, 255, 0.32);
  --brand-violet: #FFFFFF;
  --brand-violet-deep: rgba(255, 255, 255, 0.7);
  --brand-cyan:   #E8E8E8;
  --brand-cyan-mid: #D0D0D0;
  --brand-indigo: rgba(255, 255, 255, 0.6);
  --accent:       #FFFFFF;
  --accent-soft:  rgba(255, 255, 255, 0.85);
  --accent-deep:  rgba(255, 255, 255, 0.32);
  --brand-grad:         linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%);
  --brand-grad-soft:    linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%);
  --aurora-grad:        linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 100%);
  --aurora-grad-soft:   linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.06) 100%);
  --aurora-grad-full:   linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%);
  --aurora-grad-platinum: linear-gradient(135deg, #FFFFFF 0%, #E0E0E0 50%, #FFFFFF 100%);
  --aurora-text:        #FFFFFF;
  --aurora-text-muted:  rgba(255, 255, 255, 0.7);
  --aurora-text-dim:    rgba(255, 255, 255, 0.4);
  --aurora-surface:     rgba(255, 255, 255, 0.04);
  --aurora-border:      rgba(255, 255, 255, 0.18);
  --sky-300: #E8E8E8;
  --sky-400: #FFFFFF;
  --sky-500: #FFFFFF;
}
body.cf-body { background: #07080F !important; color: #FFFFFF !important; }

/* ── (B) Top rail (post-login top nav) ─────────────────────────── */
body.cf-body .rail {
  background: linear-gradient(180deg, rgba(8, 9, 16, 0.95) 0%, rgba(5, 6, 12, 0.98) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
}
body.cf-body .rail__lockup-img { filter: brightness(0) invert(1) !important; opacity: 0.95 !important; }
body.cf-body .rail__version,
body.cf-body .rail__user,
body.cf-body .rail__chip,
body.cf-body .rail__bell,
body.cf-body .rail__avatar { color: rgba(255, 255, 255, 0.85) !important; }
body.cf-body .rail__chip {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
}
body.cf-body .rail__chip:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
}
body.cf-body .rail__bell-badge {
  background: #FFFFFF !important;
  color: #000000 !important;
}

/* ── (C) Workflow shell ────────────────────────────────────────── */
body.cf-body .workflow {
  background: transparent !important;
  color: #FFFFFF !important;
}
body.cf-body .role-view { color: #FFFFFF !important; }

/* ── (D) Post-login hero (with stats) ──────────────────────────── */
body.cf-body .hero,
body.cf-body .hero--aurora {
  background: transparent !important;
  background-image: none !important;
  color: #FFFFFF !important;
  padding: 48px 0 32px !important;
}
body.cf-body .hero__badge,
body.cf-body .hero__badge--aurora {
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: var(--cf-mono, 'Geist Mono', monospace) !important;
  letter-spacing: 0.14em !important;
}
body.cf-body .hero__badge-dot {
  background: #FFFFFF !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}
body.cf-body .hero__title,
body.cf-body .hero__title--aurora {
  background: none !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
body.cf-body .hero__accent,
body.cf-body .hero__accent--aurora {
  background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 50%, #FFFFFF 100%) !important;
  background-image: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 50%, #FFFFFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
body.cf-body .hero__sub { color: rgba(255, 255, 255, 0.72) !important; }
body.cf-body .hero__stats {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.cf-body .hero__stat {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
}
body.cf-body .hero__stat-num { color: #FFFFFF !important; }
body.cf-body .hero__stat-lab { color: rgba(255, 255, 255, 0.6) !important; }
body.cf-body .hero__cta-row { gap: 12px !important; }

/* ── (E) Step cards — workflow sections ────────────────────────── */
body.cf-body .step {
  background: linear-gradient(180deg, rgba(14, 16, 28, 0.7) 0%, rgba(7, 8, 15, 0.85) 100%) !important;
  background-image: linear-gradient(180deg, rgba(14, 16, 28, 0.7) 0%, rgba(7, 8, 15, 0.85) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
  border-radius: 18px !important;
  margin: 16px 0 !important;
}
body.cf-body .step__head { gap: 16px !important; }
body.cf-body .step__num {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  background-image: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-weight: 700 !important;
}
body.cf-body .step__title { color: #FFFFFF !important; }
body.cf-body .step__sub { color: rgba(255, 255, 255, 0.65) !important; }
body.cf-body .step__status { color: rgba(255, 255, 255, 0.55) !important; }
body.cf-body .step__status.is-done { color: #7CFF9F !important; }
body.cf-body .step__status.is-working { color: #FFE17A !important; }
body.cf-body .step__status.is-error { color: #FF8B8B !important; }

/* ── (F) Drop zone + upload meta + API block ──────────────────── */
body.cf-body .drop-zone {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 2px dashed rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
body.cf-body .drop-zone:hover,
body.cf-body .drop-zone.is-dragover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #FFFFFF !important;
}
body.cf-body .drop-zone__title { color: #FFFFFF !important; }
body.cf-body .drop-zone__sub { color: rgba(255, 255, 255, 0.55) !important; }
body.cf-body .upload-meta {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}
body.cf-body .upload-meta__label { color: rgba(255, 255, 255, 0.6) !important; }
body.cf-body .upload-meta__val { color: #FFFFFF !important; }
body.cf-body .api-block .field input {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* ── (G) Buttons — global B&W treatment for primary/aurora/byok/biz/platinum ── */
body.cf-body .btn--primary,
body.cf-body .btn--aurora {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  background-image: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px -8px rgba(255, 255, 255, 0.4) !important;
}
body.cf-body .btn--primary:hover:not(:disabled),
body.cf-body .btn--aurora:hover:not(:disabled) {
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
}
body.cf-body .btn--ghost {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
body.cf-body .btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}
body.cf-body .btn--byok,
body.cf-body .btn--biz,
body.cf-body .btn--platinum {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  background-image: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 0 !important;
}

/* ── (H) Form fields globally — dark glass everywhere ──────────── */
body.cf-body .field input,
body.cf-body .field textarea,
body.cf-body .field select,
body.cf-body .bfield input,
body.cf-body .bfield textarea,
body.cf-body .bfield select,
body.cf-body input[type="text"],
body.cf-body input[type="email"],
body.cf-body input[type="tel"],
body.cf-body input[type="password"],
body.cf-body input[type="number"],
body.cf-body input[type="url"],
body.cf-body textarea,
body.cf-body select {
  background: rgba(255, 255, 255, 0.05) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 10px !important;
}
body.cf-body input::placeholder,
body.cf-body textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
body.cf-body input:focus,
body.cf-body textarea:focus,
body.cf-body select:focus {
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
  outline: none !important;
}
body.cf-body .field > span,
body.cf-body .bfield > span {
  color: rgba(255, 255, 255, 0.66) !important;
  text-transform: uppercase !important;
  font-family: var(--cf-mono, 'Geist Mono', monospace) !important;
  letter-spacing: 0.12em !important;
  font-size: 11px !important;
}

/* ── (I) Results blocks, variant cards, job results ────────────── */
body.cf-body .results-block { color: #FFFFFF !important; }
body.cf-body .results-block__title { color: #FFFFFF !important; }
body.cf-body .results-block__intro { color: rgba(255, 255, 255, 0.7) !important; }
body.cf-body .variant-card,
body.cf-body .job-result {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
}
body.cf-body .variant-card:hover,
body.cf-body .job-result:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}
body.cf-body .job-result__title { color: #FFFFFF !important; }
body.cf-body .job-result__co,
body.cf-body .job-result__meta { color: rgba(255, 255, 255, 0.7) !important; }
body.cf-body .job-result__sum { color: rgba(255, 255, 255, 0.65) !important; }

/* ── (J) Employer / Admin dashboards ──────────────────────────── */
body.cf-body .emp-dash { color: #FFFFFF !important; }
body.cf-body .emp-stat {
  background: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
  border-radius: 14px !important;
}
body.cf-body .emp-stat__num { color: #FFFFFF !important; }
body.cf-body .emp-stat__lab { color: rgba(255, 255, 255, 0.62) !important; }
body.cf-body .emp-form,
body.cf-body .admin-user-list {
  color: #FFFFFF !important;
}

/* ── (K) Pipeline page (progress UI) ──────────────────────────── */
body.cf-body .pipeline-page {
  background: linear-gradient(180deg, rgba(14, 16, 28, 0.7) 0%, rgba(7, 8, 15, 0.85) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}
body.cf-body .pipeline-page__title { color: #FFFFFF !important; }
body.cf-body .pipeline-page__sub,
body.cf-body .pipeline-page__eyebrow { color: rgba(255, 255, 255, 0.62) !important; }
body.cf-body .pipeline-progress__bar-track {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
}
body.cf-body .pipeline-progress__bar-fill {
  background: linear-gradient(90deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
}
body.cf-body .pp-stage {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}
body.cf-body .pp-stage__name { color: #FFFFFF !important; }
body.cf-body .pp-stage__desc { color: rgba(255, 255, 255, 0.6) !important; }

/* ── (L) Job board view ───────────────────────────────────────── */
body.cf-body .board-hero { color: #FFFFFF !important; }
body.cf-body .board-hero__title { color: #FFFFFF !important; }
body.cf-body .board-hero__sub { color: rgba(255, 255, 255, 0.72) !important; }
body.cf-body .board-hero__badge,
body.cf-body .board-hero__pill {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}
body.cf-body .board-filter {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}
body.cf-body .board-card,
body.cf-body .board-grid > * {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}

/* ── (M) Modals (terms, cookie-policy, account, builder, etc.) ── */
body.cf-body .modal,
body.cf-body .apply-modal,
body.cf-body .builder-modal,
body.cf-body .api-help-modal,
body.cf-body .api-confirm-modal,
body.cf-body .checkout-confirm {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(8px) !important;
}
body.cf-body .modal__panel,
body.cf-body .apply-modal__card,
body.cf-body .builder-modal__card,
body.cf-body .api-help-modal__card,
body.cf-body .api-confirm-modal__card,
body.cf-body .checkout-confirm__card {
  background: linear-gradient(180deg, rgba(14, 16, 28, 0.92) 0%, rgba(7, 8, 15, 0.96) 100%) !important;
  background-image: linear-gradient(180deg, rgba(14, 16, 28, 0.92) 0%, rgba(7, 8, 15, 0.96) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
}
body.cf-body .modal__title,
body.cf-body .apply-modal__title,
body.cf-body .builder-modal__title,
body.cf-body .api-help-modal__title { color: #FFFFFF !important; }
body.cf-body .modal__sub,
body.cf-body .apply-modal__sub,
body.cf-body .builder-modal__sub,
body.cf-body .api-help-modal__sub { color: rgba(255, 255, 255, 0.65) !important; }
body.cf-body .modal__close { color: rgba(255, 255, 255, 0.7) !important; }
body.cf-body .modal__close:hover { color: #FFFFFF !important; border-color: #FFFFFF !important; }
body.cf-body .terms-body h3 { color: #FFFFFF !important; }
body.cf-body .terms-body p,
body.cf-body .terms-body { color: rgba(255, 255, 255, 0.78) !important; }
body.cf-body .terms-body a { color: #FFFFFF !important; text-decoration: underline !important; }
body.cf-body .modal__body { color: rgba(255, 255, 255, 0.78) !important; }

/* ── (N) Verify banner + Notif drawer + Account modal ─────────── */
body.cf-body .verify-banner {
  background: linear-gradient(180deg, rgba(20, 22, 34, 0.92) 0%, rgba(10, 12, 22, 0.96) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}
body.cf-body .verify-banner__btn {
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 0 !important;
}
body.cf-body .notif-drawer,
body.cf-body .notif-item {
  background: rgba(14, 16, 28, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
}
body.cf-body .account-preview,
body.cf-body .account-section {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}
body.cf-body .account-preview__name { color: #FFFFFF !important; }
body.cf-body .account-preview__email { color: rgba(255, 255, 255, 0.6) !important; }

/* ── (O) Cookie banner — re-affirm v9.6.10 (no .is-auth-gate) ── */
body.cf-body #cookieBanner.cookie-banner {
  background: linear-gradient(180deg, rgba(15, 15, 15, 0.97) 0%, rgba(5, 5, 5, 0.98) 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* ── (P) Defensive: ANY .grad-text inside body.cf-body uses B&W gradient ── */
body.cf-body .grad-text,
body.cf-body .grad-text--biz {
  background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 50%, #FFFFFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}


/* ============================================================
 * v9.7.1 — KILL PURPLE BLEED IN COSMOS BACKDROP (post-login)
 *
 *  Issue caught during v9.7.0 sub-page audit: the cf-cosmos backdrop
 *  paints two radial gradients with raw brand violet (#6D28FF) and
 *  cyan (#22E1FF) at 0.55 opacity. On the pre-login gate that's
 *  intentional brand texture, but POST-LOGIN it bleeds purple/blue
 *  through every workflow surface — defeats the B&W theme parity.
 *
 *  Fix: regrayscale the cosmos field colors AND drop opacity hard in
 *  both pre and post login. Also override the cosmos X glyph's
 *  violet→cyan→pink SVG gradients to whites/greys via filter.
 *
 *  Plus belt: any other place where the upstream brand vars
 *  (--cf-violet, --cf-cyan, --cf-pink, --brand-grad with colors)
 *  bleed into post-login surfaces, force B&W replacements.
 * ============================================================ */

/* (1) Cosmos fields: replace violet/cyan radials with neutral white-tint radials */
body.cf-body .cf-cosmos__field--violet {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.14) 0%, transparent 55%) !important;
  opacity: 0.6 !important;
}
body.cf-body .cf-cosmos__field--cyan {
  background: radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.10) 0%, transparent 55%) !important;
  opacity: 0.6 !important;
}
body.cf-body .cf-cosmos__seam {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%) !important;
  opacity: 0.5 !important;
}

/* (2) Cosmos X glyph: grayscale the entire SVG so violet/cyan/pink stops render as greys */
body.cf-body .cf-cosmos__x {
  filter: grayscale(1) contrast(1.05) !important;
  opacity: 0.32 !important;
}

/* (3) Post-login: even further mute the cosmos so workflow content owns the page */
body.cf-body:not(.is-auth-gate) .cf-cosmos__field--violet,
body.cf-body:not(.is-auth-gate) .cf-cosmos__field--cyan {
  opacity: 0.25 !important;
}
body.cf-body:not(.is-auth-gate) .cf-cosmos__seam {
  opacity: 0.18 !important;
}
body.cf-body:not(.is-auth-gate) .cf-cosmos__x {
  opacity: 0.18 !important;
}
body.cf-body:not(.is-auth-gate) .cf-cosmos__grid {
  opacity: 0.4 !important;
}

/* (4) Belt: any element in post-login that still references the brand violet/cyan vars
       gets pre-empted by a neutralized cf-body token override. The vars are scoped at
       :root in upstream but we shadow them at body.cf-body scope. */
body.cf-body {
  --cf-violet: rgba(255, 255, 255, 0.62);
  --cf-cyan:   rgba(255, 255, 255, 0.55);
  --cf-pink:   rgba(255, 255, 255, 0.7);
}

/* (5) Post-login hero badge — explicit dark glass (catches .hero__badge--aurora
       inline-styled by upstream JS that might add violet rims) */
body.cf-body .hero__badge,
body.cf-body .hero__badge--aurora {
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  box-shadow: none !important;
}
body.cf-body .hero__badge-dot {
  background: #FFFFFF !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}

/* (6) Pricing-hero badge inside post-login view-pricing (separate from cfPricingModal) */
body.cf-body .pricing-hero__badge {
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}
body.cf-body .pricing-hero {
  background: transparent !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

/* (7) Discount pill, board-hero badge, employer-hero pill — all dark glass */
body.cf-body .discount-pill,
body.cf-body .board-hero__badge,
body.cf-body .employer-hero__pill {
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* (8) Tier amount inside view-pricing (post-login, not modal) */
body.cf-body #view-pricing .tier__amount {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: transparent !important;
}

/* (9) Apply-modal styles (post-login job-board apply flow) */
body.cf-body .apply-modal__card {
  background: linear-gradient(180deg, rgba(14, 16, 28, 0.92) 0%, rgba(7, 8, 15, 0.96) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
}
body.cf-body .apply-modal__icon {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}
body.cf-body .apply-modal__title { color: #FFFFFF !important; }
body.cf-body .apply-modal__sub { color: rgba(255, 255, 255, 0.7) !important; }
body.cf-body .apply-modal__note {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}
body.cf-body .apply-modal__profile { color: rgba(255, 255, 255, 0.85) !important; }
body.cf-body .apply-modal__close { color: rgba(255, 255, 255, 0.7) !important; }

/* (10) Skill cache status panel (shown after location set) */
body.cf-body .skill-cache-host {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* (11) Resume altrow (Create from scratch button area) */
body.cf-body .resume-altrow__divider {
  color: rgba(255, 255, 255, 0.5) !important;
}
body.cf-body .resume-altrow__hint {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* (12) API help block hyperlinks + note */
body.cf-body .api-block__help-btn {
  color: rgba(255, 255, 255, 0.78) !important;
  background: transparent !important;
  border: 0 !important;
}
body.cf-body .api-block__help-btn:hover { color: #FFFFFF !important; }
body.cf-body .api-block__direct {
  color: #FFFFFF !important;
  text-decoration: underline !important;
}
body.cf-body .api-block__sep { color: rgba(255, 255, 255, 0.4) !important; }
body.cf-body .api-note,
body.cf-body .api-note code {
  color: rgba(255, 255, 255, 0.62) !important;
}
body.cf-body .api-note code {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
}

/* (13) Loc actions + step status hint */
body.cf-body .loc-actions__hint {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* (14) Submit row status text */
body.cf-body .submit-status {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* (15) Branch status indicator + learnings panel */
body.cf-body .branch-status,
body.cf-body .learnings-panel,
body.cf-body .user-profile-card,
body.cf-body .profile-summary {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}

/* ============================================================
 * v9.7.1 (extension) — #view-pricing POST-LOGIN PAGE
 *
 *  All my v9.6.7-v9.6.10 pricing fixes were scoped to .cf-modal
 *  (the public pricing modal triggered from top-nav). The
 *  POST-LOGIN dedicated pricing page #view-pricing uses the
 *  SAME upstream markup (.pricing-hero, .pricing-controls,
 *  .audience-toggle, .tier, .byok-section) but lives outside
 *  the .cf-modal scope, so the upstream purple/cream bars
 *  bleed through unchecked.
 *
 *  Fix: mirror every .cf-modal pricing fix under
 *  `body.cf-body #view-pricing` scope.
 * ============================================================ */

/* Pricing hero — kill the grad-text bar behind the title */
body.cf-body #view-pricing,
body.cf-body #view-pricing .pricing-hero {
  background: transparent !important;
  background-image: none !important;
  color: #FFFFFF !important;
}
body.cf-body #view-pricing .pricing-hero h1,
body.cf-body #view-pricing .pricing-hero__title {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
body.cf-body #view-pricing .pricing-hero__title .grad-text,
body.cf-body #view-pricing .grad-text,
body.cf-body #view-pricing .grad-text--biz {
  background: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 50%, #FFFFFF 100%) !important;
  background-image: linear-gradient(90deg, #FFFFFF 0%, #B0B0B0 50%, #FFFFFF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
body.cf-body #view-pricing .pricing-hero__sub {
  color: rgba(255, 255, 255, 0.7) !important;
}
body.cf-body #view-pricing .pricing-hero__byok {
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* BYOK promo banner — same hide as modal */
body.cf-body #view-pricing #byokPromoBanner,
body.cf-body #view-pricing .byok-promo {
  display: none !important;
}

/* Pricing controls — kill the cream/white bar around Monthly+Annual+CURRENCY */
body.cf-body #view-pricing .pricing-controls {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.cf-body #view-pricing .pricing-controls__bill {
  background: rgba(255, 255, 255, 0.06) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
body.cf-body #view-pricing .pricing-controls__bill-btn {
  background: transparent !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: none !important;
}
body.cf-body #view-pricing .pricing-controls__bill-btn.is-active {
  background: #FFFFFF !important;
  color: #000000 !important;
}
body.cf-body #view-pricing .pricing-controls__bill-pill {
  background: transparent !important;
  display: none !important;
}
body.cf-body #view-pricing .pricing-controls__save-tag {
  background: rgba(0, 0, 0, 0.18) !important;
  background-image: none !important;
}
body.cf-body #view-pricing .pricing-controls__cur-badge {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
body.cf-body #view-pricing .pricing-controls__cur-select {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* Audience toggle — kill purple "is-active" tint, dark glass container */
body.cf-body #view-pricing .audience-toggle {
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
body.cf-body #view-pricing .audience-toggle__btn {
  background: transparent !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: none !important;
}
body.cf-body #view-pricing .audience-toggle__btn.is-active {
  background: #FFFFFF !important;
  color: #000000 !important;
  box-shadow: 0 4px 14px -4px rgba(255, 255, 255, 0.4) !important;
}
body.cf-body #view-pricing .audience-toggle__pill {
  background: transparent !important;
  display: none !important;
}

/* Tier cards — full B&W override mirroring .cf-modal .tier fix */
body.cf-body #view-pricing .tier,
body.cf-body #view-pricing article.tier,
body.cf-body #view-pricing .tier.tier--free,
body.cf-body #view-pricing .tier.tier--byok,
body.cf-body #view-pricing .tier.tier--silver,
body.cf-body #view-pricing .tier.tier--gold,
body.cf-body #view-pricing .tier.tier--platinum,
body.cf-body #view-pricing .tier.tier--biz,
body.cf-body #view-pricing .tier--biz.tier--silver,
body.cf-body #view-pricing .tier--biz.tier--gold,
body.cf-body #view-pricing .tier--biz.tier--platinum {
  background: linear-gradient(180deg, rgba(20, 20, 28, 0.94) 0%, rgba(8, 8, 12, 0.94) 100%) !important;
  background-image: linear-gradient(180deg, rgba(20, 20, 28, 0.94) 0%, rgba(8, 8, 12, 0.94) 100%) !important;
  background-color: rgba(8, 8, 12, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6) !important;
}
body.cf-body #view-pricing .tier.tier--popular,
body.cf-body #view-pricing .tier.tier--gold.tier--popular {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}
body.cf-body #view-pricing .tier__name,
body.cf-body #view-pricing article.tier .tier__name { color: #FFFFFF !important; }
body.cf-body #view-pricing .tier__amount,
body.cf-body #view-pricing article.tier .tier__amount {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: transparent !important;
  background-image: none !important;
}
body.cf-body #view-pricing .tier__currency,
body.cf-body #view-pricing .tier__period { color: rgba(255, 255, 255, 0.6) !important; }
body.cf-body #view-pricing .tier__pitch,
body.cf-body #view-pricing .tier__desc { color: rgba(255, 255, 255, 0.78) !important; }
body.cf-body #view-pricing .tier__list,
body.cf-body #view-pricing .tier__list li,
body.cf-body #view-pricing .tier__features li { color: rgba(255, 255, 255, 0.78) !important; }
body.cf-body #view-pricing .tier__list li b { color: #FFFFFF !important; }
body.cf-body #view-pricing .tier__list li::before { color: rgba(255, 255, 255, 0.5) !important; }
body.cf-body #view-pricing .tier__foot { color: rgba(255, 255, 255, 0.5) !important; }
body.cf-body #view-pricing .tier__ribbon,
body.cf-body #view-pricing .tier__ribbon--byok,
body.cf-body #view-pricing .tier__ribbon--biz {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #000000 !important;
}
body.cf-body #view-pricing .tier__cta,
body.cf-body #view-pricing .tier .btn--aurora,
body.cf-body #view-pricing .tier .btn--byok,
body.cf-body #view-pricing .tier .btn--platinum,
body.cf-body #view-pricing .tier .btn--biz {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  background-image: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 0 !important;
  font-weight: 700 !important;
}
body.cf-body #view-pricing .tier .btn--ghost {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #FFFFFF !important;
}

/* BYOK section + biz-explainer in #view-pricing — match .cf-modal treatment */
body.cf-body #view-pricing .byok-section,
body.cf-body #view-pricing .biz-explainer,
body.cf-body #view-pricing .employer-hero {
  background: rgba(255, 255, 255, 0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}
body.cf-body #view-pricing .byok-section__icon,
body.cf-body #view-pricing .biz-explainer__icon {
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%) !important;
  background-color: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  filter: grayscale(1);
  color: #FFFFFF !important;
}
body.cf-body #view-pricing .byok-section__title,
body.cf-body #view-pricing .biz-explainer__title,
body.cf-body #view-pricing .employer-hero__title { color: #FFFFFF !important; }
body.cf-body #view-pricing .byok-section__sub,
body.cf-body #view-pricing .biz-explainer__sub,
body.cf-body #view-pricing .employer-hero__sub { color: rgba(255, 255, 255, 0.7) !important; }
body.cf-body #view-pricing .employer-hero__pill {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Discount pills in #view-pricing */
body.cf-body #view-pricing .discount-pill {
  background: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

/* Dot indicators */
body.cf-body #view-pricing .dot--ok { background: #FFFFFF !important; box-shadow: 0 0 8px rgba(255,255,255,0.6) !important; }
body.cf-body #view-pricing .dot--cyan { background: #E8E8E8 !important; box-shadow: 0 0 8px rgba(232,232,232,0.5) !important; }

/* Pricing-foot (the small footer line on the post-login pricing page) */
body.cf-body #view-pricing .pricing-foot,
body.cf-body #view-pricing .pricing-foot__link,
body.cf-body #view-pricing .pricing-foot__dot {
  color: rgba(255, 255, 255, 0.6) !important;
}
body.cf-body #view-pricing .pricing-foot__link { color: #FFFFFF !important; }


/* ============================================================
 * v9.7.2 — POST-LOGIN SCREEN-FREEZE FIX (belt + braces CSS guard)
 *
 *  Bug: user signs in via Google, auth state fires, profile loads,
 *  body classes is-locked + is-auth-gate get removed... but the
 *  #loginGate element stays painted on screen, blocking the workflow.
 *
 *  Primary fix is in app.js (switch popup→redirect, kills COOP-driven
 *  spurious signOut). This CSS is the belt-and-braces guarantee that
 *  even if some upstream rule or animation keeps the gate rendered,
 *  we force it gone the instant is-auth-gate is removed from body.
 * ============================================================ */

body.cf-body:not(.is-auth-gate) #loginGate,
body.cf-body:not(.is-auth-gate) .cf-gate,
body.cf-body:not(.is-auth-gate) .cf-gate--two-col {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Once unlocked, the cf-cosmos backdrop's grid + X also dim further
   so the post-login workflow content owns the page completely. */
body.cf-body:not(.is-auth-gate) .cf-cosmos {
  pointer-events: none !important;
}

/* The workflow shell must be visible the moment auth succeeds */
body.cf-body:not(.is-auth-gate) .workflow {
  display: block !important;
}
body.cf-body:not(.is-auth-gate) .rail {
  display: flex !important;
}

/* The cookie-poweredby footer is only meaningful pre-login; hide it
   post-login so it doesn't compete with the rail. */
body.cf-body:not(.is-auth-gate) .cf-poweredby {
  display: none !important;
}


/* ============================================================
 * v9.7.3 — AUDIENCE TOGGLE TEXT VISIBILITY + HIDE CURRENCY DROPDOWN
 *
 *  Bug 1: Audience toggle text disappears when tab is selected.
 *    When .is-active fires, the pill background turns white-gradient
 *    BUT child <span> elements inherited the global body.cf-body
 *    `color: #FFFFFF` so they paint white-on-white → invisible.
 *    Fix: force color: #000 on .is-active button AND all descendants.
 *
 *  Bug 2: Currency dropdown is redundant — geo-detect already picks
 *    the right currency on modal/page mount via detectCurrency() in
 *    app.js:4020. Mapping is:
 *      • North America      → USD ($)
 *      • Europe             → EUR (€)
 *      • United Kingdom     → GBP (£)
 *      • South Asia / UAE / South Africa / Pacific → INR (₹)
 *    Hide the manual dropdown entirely. Detection logic stays — it
 *    still fires on cfPricingAPI.mount() and repaints all tier prices.
 * ============================================================ */

/* (1) Audience toggle ACTIVE state — force BLACK on button + every descendant */
body.cf-body .audience-toggle__btn.is-active,
body.cf-body .audience-toggle__btn.is-active *,
body.cf-body .audience-toggle__btn.is-active span,
body.cf-body .audience-toggle__btn.is-active .audience-toggle__ic,
.cf-modal .audience-toggle__btn.is-active,
.cf-modal .audience-toggle__btn.is-active *,
.cf-modal .audience-toggle__btn.is-active span,
#view-pricing .audience-toggle__btn.is-active,
#view-pricing .audience-toggle__btn.is-active *,
#view-pricing .audience-toggle__btn.is-active span {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
/* Inactive tab text stays muted white */
body.cf-body .audience-toggle__btn:not(.is-active),
body.cf-body .audience-toggle__btn:not(.is-active) span,
.cf-modal .audience-toggle__btn:not(.is-active),
.cf-modal .audience-toggle__btn:not(.is-active) span,
#view-pricing .audience-toggle__btn:not(.is-active),
#view-pricing .audience-toggle__btn:not(.is-active) span {
  color: rgba(255, 255, 255, 0.7) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}
body.cf-body .audience-toggle__btn:not(.is-active):hover,
.cf-modal .audience-toggle__btn:not(.is-active):hover,
#view-pricing .audience-toggle__btn:not(.is-active):hover {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* (1b) Same treatment for Monthly/Annual billing toggle to prevent same bug */
body.cf-body .pricing-controls__bill-btn.is-active,
body.cf-body .pricing-controls__bill-btn.is-active *,
body.cf-body .pricing-controls__bill-btn.is-active span,
.cf-modal .pricing-controls__bill-btn.is-active,
.cf-modal .pricing-controls__bill-btn.is-active *,
#view-pricing .pricing-controls__bill-btn.is-active,
#view-pricing .pricing-controls__bill-btn.is-active * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
/* SAVE tag inside Annual button — keep readable on the white pill */
body.cf-body .pricing-controls__bill-btn.is-active .pricing-controls__save-tag,
.cf-modal .pricing-controls__bill-btn.is-active .pricing-controls__save-tag,
#view-pricing .pricing-controls__bill-btn.is-active .pricing-controls__save-tag {
  background: rgba(0, 0, 0, 0.78) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* (2) HIDE the currency dropdown UI entirely — auto-detect handles it */
body.cf-body .pricing-controls__cur,
.cf-modal .pricing-controls__cur,
#view-pricing .pricing-controls__cur {
  display: none !important;
}
/* Keep the pricing-controls row centered with just the billing toggle now */
body.cf-body .pricing-controls,
.cf-modal .pricing-controls,
#view-pricing .pricing-controls {
  justify-content: center !important;
}


/* ============================================================
 * v9.7.4 — POST-AUTH BLANK-PAGE SAFETY NET (CSS layer)
 *
 *  Belt-and-braces backup to the JS safety net in app.js. If for any
 *  reason JS fails to set inline `style="display:block !important"` on
 *  #view-seeker after auth (Safari cssText parsing quirk, race
 *  condition, etc.), this CSS forces the seeker view visible whenever
 *  the body is unlocked AND no other role view is explicitly active.
 *
 *  The `:not([style*="display:block"])` checks prevent this rule from
 *  overriding employer/admin views when JS has correctly routed there.
 * ============================================================ */

/* When auth succeeds (is-auth-gate stripped) and no other view is
   force-shown via inline style, default to seeker view visible */
body.cf-body:not(.is-auth-gate) #view-seeker {
  display: block;
}
body.cf-body:not(.is-auth-gate) #view-employer[style*="display: block"],
body.cf-body:not(.is-auth-gate) #view-employer[style*="display:block"] {
  display: block !important;
}
body.cf-body:not(.is-auth-gate) #view-admin[style*="display: block"],
body.cf-body:not(.is-auth-gate) #view-admin[style*="display:block"] {
  display: block !important;
}

/* When EMP or ADMIN view is explicitly shown, hide seeker */
body.cf-body:not(.is-auth-gate):has(#view-employer[style*="display: block"]) #view-seeker:not([style*="display: block"]),
body.cf-body:not(.is-auth-gate):has(#view-employer[style*="display:block"]) #view-seeker:not([style*="display:block"]),
body.cf-body:not(.is-auth-gate):has(#view-admin[style*="display: block"]) #view-seeker:not([style*="display: block"]),
body.cf-body:not(.is-auth-gate):has(#view-admin[style*="display:block"]) #view-seeker:not([style*="display:block"]) {
  display: none;
}

/* Ensure the workflow main and the role-view containers can be
   visible in the first place (no inherited overflow:hidden or
   visibility:hidden from the gate-locked state) */
body.cf-body:not(.is-auth-gate) main.workflow,
body.cf-body:not(.is-auth-gate) .workflow {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* ============================================================
 * v9.7.13 — GLOBAL FOOTER (Privacy + Contact + Socials) on ALL pages
 * ============================================================ */

/* Show the footer on every page state (override v9.7.11 hide rule) */
body.cf-body:not(.is-auth-gate) .cf-poweredby,
body.cf-body:not(.is-auth-gate) .cf-footer {
  display: block !important;
  position: relative !important;    /* flow into the document, not fixed-overlay */
  pointer-events: auto !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.85) 100%) !important;
  padding: 28px 16px 32px !important;
  padding-bottom: max(32px, env(safe-area-inset-bottom)) !important;
  margin-top: 60px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Keep the pre-login footer fixed (gate is a single screen) */
body.cf-body.is-auth-gate .cf-footer {
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.92) 100%) !important;
  padding: 12px 16px !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  z-index: 50;
  pointer-events: none;
  border-top: 0 !important;
  margin-top: 0 !important;
}
body.cf-body.is-auth-gate .cf-footer__inner { pointer-events: auto; }

.cf-footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}

.cf-footer__copy {
  font-family: var(--cf-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
}
.cf-footer__copy strong {
  color: #FFFFFF;
  font-weight: 600;
}

.cf-footer__link {
  font-family: var(--cf-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background .15s, border-color .15s, color .15s;
  cursor: pointer;
}
.cf-footer__link:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

.cf-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.cf-footer__social svg { display: block; }
.cf-footer__social:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.55);
}

/* Mobile: footer stacks tighter */
@media (max-width: 560px) {
  body.cf-body:not(.is-auth-gate) .cf-footer { padding: 22px 12px 24px !important; }
  .cf-footer__inner { gap: 10px; }
  .cf-footer__copy { font-size: 9.5px; letter-spacing: 0.12em; flex-basis: 100%; text-align: center; margin-bottom: 4px; }
  .cf-footer__link { font-size: 9.5px; padding: 3px 9px; }
  .cf-footer__social { width: 26px; height: 26px; }
}


/* ============================================================
 * v9.7.13 — PRIVACY + CONTACT MODAL DARK THEMING
 * Re-use the existing modal stack but ensure visible on dark canvas
 * with white text + dark glass backdrop matching cf-modal aesthetic.
 * ============================================================ */
#privacyModal,
#contactModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-y: auto;
  padding: 40px 20px;
}
#privacyModal .modal__panel,
#contactModal .modal__panel {
  max-width: 760px !important;
  margin: 0 auto !important;
  background: linear-gradient(180deg, rgba(14, 16, 28, 0.96) 0%, rgba(7, 8, 15, 0.99) 100%) !important;
  background-image: linear-gradient(180deg, rgba(14, 16, 28, 0.96) 0%, rgba(7, 8, 15, 0.99) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 18px !important;
  padding: 36px 36px 28px !important;
  color: #FFFFFF !important;
  position: relative !important;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.85) !important;
}
#privacyModal .modal__panel--wide {
  max-width: 920px !important;
}
#privacyModal .modal__title,
#contactModal .modal__title {
  font-family: var(--cf-display, 'Big Shoulders Display', sans-serif) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: clamp(26px, 3.8vw, 36px) !important;
  color: #FFFFFF !important;
  margin: 0 0 6px !important;
}
#privacyModal .modal__sub,
#contactModal .modal__sub {
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: var(--cf-ui, 'Outfit', sans-serif) !important;
  font-size: 13.5px !important;
  margin: 0 0 22px !important;
}
#privacyModal .modal__close,
#contactModal .modal__close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  font-size: 18px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
#privacyModal .modal__close:hover,
#contactModal .modal__close:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}
#privacyModal .terms-body {
  color: rgba(255, 255, 255, 0.82) !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  padding-right: 12px !important;
  margin-bottom: 18px !important;
}
#privacyModal .terms-body h3 {
  color: #FFFFFF !important;
  font-family: var(--cf-display, 'Big Shoulders Display', sans-serif) !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 24px 0 8px !important;
  font-weight: 700 !important;
}
#privacyModal .terms-body p {
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: var(--cf-ui, 'Outfit', sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  margin: 0 0 10px !important;
}
#privacyModal .terms-body a {
  color: #FFFFFF !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
#privacyModal .btn--ghost,
#privacyModal .btn--wide {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  color: #000000 !important;
  border: 0 !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  width: 100% !important;
}
/* Contact form fields — same dark glass as gate inputs */
#contactModal .field { margin-bottom: 12px !important; }
#contactModal .field > span {
  display: block !important;
  font-family: var(--cf-mono, 'Geist Mono', monospace) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.66) !important;
  margin-bottom: 6px !important;
}
#contactModal .field input,
#contactModal .field select,
#contactModal .field textarea {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-family: var(--cf-ui, 'Outfit', sans-serif) !important;
  font-size: 14px !important;
}
/* v9.7.15: SELECT dropdown native picker — option text was rendering
   white-on-white when the user opened the picker (native OS dropdown
   doesn't inherit parent dark theming). Force solid dark background +
   white text on the option elements so the picker is readable. */
#contactModal .field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}
#contactModal .field select option,
#contactModal .field select optgroup {
  background-color: #0F0F18 !important;
  color: #FFFFFF !important;
  padding: 8px 10px !important;
  font-family: var(--cf-ui, 'Outfit', sans-serif) !important;
  font-size: 14px !important;
}
#contactModal .field select option:disabled,
#contactModal .field select option[value=""] {
  color: rgba(255, 255, 255, 0.42) !important;
}
#contactModal .field select option:checked,
#contactModal .field select option:hover {
  background-color: #1A1A28 !important;
  color: #FFFFFF !important;
}
/* Firefox: hide ugly dotted focus ring */
#contactModal .field select:-moz-focusring {
  color: transparent !important;
  text-shadow: 0 0 0 #FFFFFF !important;
}
#contactModal .field input::placeholder,
#contactModal .field textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
#contactModal .field input:focus,
#contactModal .field select:focus,
#contactModal .field textarea:focus {
  border-color: rgba(255, 255, 255, 0.5) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
}
/* Same global treatment for ALL select elements site-wide (account dashboard,
   admin form, employer form, signup forms, location step, board filter, etc.) */
body.cf-body select,
body.cf-body .field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
  padding-right: 36px !important;
}
body.cf-body select option,
body.cf-body select optgroup {
  background-color: #0F0F18 !important;
  color: #FFFFFF !important;
  padding: 8px 10px !important;
}
body.cf-body select option:disabled,
body.cf-body select option[value=""] {
  color: rgba(255, 255, 255, 0.42) !important;
}
body.cf-body select option:checked {
  background-color: #1A1A28 !important;
}
#contactModal #contactSubmitBtn {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  background-image: linear-gradient(135deg, #FFFFFF 0%, #C8C8C8 50%, #FFFFFF 100%) !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: 0 !important;
  font-weight: 700 !important;
  padding: 14px 24px !important;
  border-radius: 12px !important;
  width: 100% !important;
  margin-top: 8px !important;
  cursor: pointer !important;
}
#contactModal #contactSubmitBtn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}
#contactModal #contactError {
  color: #FF8B8B !important;
  font-family: var(--cf-ui, 'Outfit', sans-serif) !important;
  font-size: 13px !important;
  margin: 8px 0 0 !important;
  min-height: 18px !important;
  text-align: center !important;
}

/* Mobile: tighter modal padding */
@media (max-width: 560px) {
  #privacyModal,
  #contactModal { padding: 20px 12px !important; }
  #privacyModal .modal__panel,
  #contactModal .modal__panel { padding: 24px 20px 22px !important; border-radius: 14px !important; }
  #privacyModal .terms-body { max-height: 70vh !important; }
}