:root {
  /* "Bold Blue" theme: deep navy header/hero/footer, royal-blue buttons,
     bright lime call-to-action green, on a soft blue-gray page. */
  --blue-primary: #2a64e0;
  --blue-primary-hover: #1f5ad6;
  --blue-glow: rgba(47, 111, 237, 0.3);
  --blue-tint: #eaf1ff;
  --navy: #0f2b55;
  --navy-2: #1a448f;
  --navy-deep: #0a1f42;
  --lime: #00ff95;
  --lime-hover: #00e886;
  --lime-ink: #0f2b55;
  --money: #00ff95;
  --ink: #14213d;
  --ink-soft: #4b5875;
  --bg: #ffffff;
  --page-bg: #f4f7fb;
  --surface: #f7f9fc;
  --border: #e1e7f0;
  --border-strong: #b9c6dc;
  --on-accent: #ffffff;
  --green: #00804b;
  --bonus-bg: #d6fff0;
  --bonus-text: #00804b;
}

/* Light mode only — no automatic dark-mode switch, regardless of the
   visitor's OS/browser color-scheme preference. */
/* Tell the browser this page is light-only, so phones/computers set to
   dark mode don't paint form boxes gray or checkboxes black. */
:root { color-scheme: light only; }

/* Saved-answer autofill: keep the box white with dark text instead of the
   browser's gray/blue autofill tint. */
input.text-input:-webkit-autofill,
input.text-input:-webkit-autofill:hover,
input.text-input:-webkit-autofill:focus,
select.text-input:-webkit-autofill,
textarea.text-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  box-shadow: 0 0 0 1000px var(--bg) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}
input.text-input:autofill { background: var(--bg); color: var(--ink); }

* { box-sizing: border-box; }

html {
  /* Stop phones from blowing up text size when turned sideways. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

a { color: inherit; }

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  /* Deep navy on the left sweeping to bright royal blue on the right, with
     a soft sheen along the top, instead of a flat single color. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%),
    linear-gradient(100deg, #0a1f42 0%, #123672 32%, #1b4fb4 68%, #2a64e0 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 18px -10px rgba(10, 31, 66, 0.6);
}

.brand-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.brand {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

/* Small logo mark in front of the wordmark (footer only -- the navbar
   wordmark has no icon). Kept as an inline-block pseudo-element -- not a
   flex container on .brand -- so the "Refer" / "A" / "Driver" pieces still
   flow as one unbroken word. */
.footer-brand .brand::before {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.35em;
  vertical-align: -0.2em;
  border-radius: 0.3em;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a448f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='12' r='4.2'/%3E%3Ccircle cx='15' cy='12' r='4.2'/%3E%3C/svg%3E") center / 78% no-repeat;
}

.brand span { color: var(--lime); }

.brand-tagline {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}

.nav-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover, .nav-link:focus-visible { color: #fff; }
.nav-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.site-nav .nav-link[href="login2.html"] {
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  padding: 7px 16px;
  color: #fff;
}

.site-nav .nav-link[href="login2.html"]:hover,
.site-nav .nav-link[href="login2.html"]:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}

.btn-earn {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--lime-ink);
  background: var(--lime);
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.btn-earn:hover,
.btn-earn:focus-visible {
  background: var(--lime-hover);
  box-shadow: 0 0 0 5px rgba(0, 255, 149, 0.25);
  transform: translateY(-1px);
}

.btn-earn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn-earn:active { transform: translateY(0); }

.btn-earn svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.btn-earn:hover svg { transform: translateX(2px); }

.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.user-menu-trigger svg { width: 20px; height: 20px; }

.user-menu-trigger:hover,
.user-menu-trigger:focus-visible,
.user-menu.is-open .user-menu-trigger {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  border-color: #fff;
}

.user-menu-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 36px -16px rgba(15, 23, 42, 0.35);
  padding: 8px;
  z-index: 30;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.user-menu:hover .user-menu-dropdown,
.user-menu:focus-within .user-menu-dropdown,
.user-menu.is-open .user-menu-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.user-menu-label {
  padding: 10px 12px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.user-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

.user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.user-menu-item:hover, .user-menu-item:focus-visible {
  background: var(--blue-tint);
  color: var(--blue-primary);
}

.user-menu-item:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: -2px; }

.user-menu-item.user-menu-logout { color: #dc2626; }
.user-menu-item.user-menu-logout:hover, .user-menu-item.user-menu-logout:focus-visible {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

/* Mobile-only line-break spacer between the header CTA and the Menu button;
   invisible and inert on desktop. */
.header-break { display: none; }

/* Mobile-only hamburger menu trigger + dropdown, hidden on desktop by default */
.hamburger-btn {
  display: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hamburger-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.hamburger-btn:hover,
.hamburger-btn:focus-visible,
.hamburger-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  border-color: #fff;
}

.hamburger-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.hamburger-menu {
  display: none;
  flex-direction: column;
  gap: 8px;
}

.hamburger-menu-item {
  text-align: center;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* "Share Your Job" at the top of the phone menu: the same green as the
   header button it replaces on phones. */
.hamburger-menu-item.hamburger-share { display: none; }
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .hamburger-menu-item.hamburger-share { display: flex; }
  /* Phones: taller menu items so they're easy to tap. */
  .hamburger-menu { gap: 10px; }
  .hamburger-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 16px 12px;
    font-size: 1.02rem;
  }
}
.hamburger-menu-item.hamburger-share {
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--grad-lime, var(--lime));
  color: var(--lime-ink);
  border-color: transparent;
}
.hamburger-menu-item.hamburger-share svg { width: 16px; height: 16px; flex: none; }
.hamburger-menu-item.hamburger-share:hover,
.hamburger-menu-item.hamburger-share:focus-visible {
  background: var(--grad-lime-hover, var(--lime-hover));
  color: var(--lime-ink);
  border-color: transparent;
}

.hamburger-menu-item:hover, .hamburger-menu-item:focus-visible {
  background: var(--blue-tint);
  color: var(--blue-primary);
  border-color: var(--blue-primary);
}

main {
  padding: 64px 24px 96px;
  max-width: 1080px;
  margin-inline: auto;
  /* Keeps the navy footer at the bottom of the screen on short pages
     (login, placeholders) instead of leaving a gap beneath it. */
  min-height: calc(100vh - 280px);
}

.placeholder {
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-soft);
}

.placeholder h1 {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 0 0 10px;
  text-wrap: balance;
}

.placeholder p { margin: 0; font-size: 0.98rem; line-height: 1.6; }

/* Job search results grid: 4 per row on desktop, 3 on tablet, 2 on phones
   (phones get the compact card styles further down). */
.job-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1099px) {
  .job-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 640px) {
  /* Stretch the two columns out toward the screen edges (8px from each
     side instead of the page's usual 24px) so each card is a bit wider. */
  .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-inline: -16px; }
}

.job-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.job-card:hover, .job-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -14px rgba(37, 99, 235, 0.35);
  border-color: var(--blue-primary);
}

.job-card:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; }

/* ---- Grid job-card photo header: freight-type illustration + badges ----
   Only the .job-card GRID cards use this (jobs.html/state.html/matches.html/
   index.html Hot Jobs). .job-list-row and the dashboard's dash-post-card
   keep the older flat layout, so this bleeds out of .job-card's own 18px
   padding with a negative margin rather than changing that padding, which
   would otherwise affect those other layouts too. */
.job-card-photo {
  position: relative;
  margin: -18px -18px 12px;
  /* One third shorter than the original 16:11 photo box (11 x 0.67 = 7.37) */
  aspect-ratio: 16 / 7.37;
  border-radius: 13px 13px 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.job-card-photo-van { background: linear-gradient(150deg, #4f8ff7, #1e3a8a); }
/* The shorter box crops the photos top/bottom; each vertical position keeps
   that photo's truck (and the dry van's mountain peak) in frame. */
.job-card-photo-tanker { background: #334155 url("photo-tanker.jpg") center 62% / cover no-repeat; }
.job-card-photo-flatbed { background: #b45309 url("photo-flatbed.jpg") center 85% / cover no-repeat; }
.job-card-photo-reefer { background: #0e7490 url("photo-reefer.jpg") center 75% / cover no-repeat; }

/* Road-and-mountain photo: every Dry Van job, plus any OTR job whose
   freight type doesn't have its own photo (tanker, flatbed and reefer keep
   theirs).
   Two classes, so it wins over the single-class freight backgrounds above. */
.job-card-photo.job-card-photo-dryvan { background: #1a448f url("photo-dryvan.jpg") center 80% / cover no-repeat; }

/* City-truck-and-trailer photo: any van-group freight type on a Local route
   (other than LTL P&D / LTL Linehaul, which have their own photo below). */
.job-card-photo.job-card-photo-local { background: #1a3a5c url("photo-local.jpg") center 60% / cover no-repeat; }

/* LTL P&D / LTL Linehaul photo (any route). */
.job-card-photo.job-card-photo-ltl { background: #163a2e url("photo-ltl.jpg") center 70% / cover no-repeat; }

/* Carhauler photo: overrides the shared flatbed-group background. */
.job-card-photo.job-card-photo-carhauler { background: #1e5b8f url("photo-carhauler.jpg") center 63% / cover no-repeat; }

/* Intermodal container photo: overrides the shared van-group gradient. */
.job-card-photo.job-card-photo-intermodal { background: #142d4d url("photo-intermodal.jpg") center 55% / cover no-repeat; }

/* Oversize / Heavy Haul photo: overrides the shared flatbed-group background. */
.job-card-photo.job-card-photo-oversize { background: #7c8896 url("photo-oversize.jpg") center 37% / cover no-repeat; }

/* Class B photo: replaces every other freight-type photo/class on any job
   posted as Class B, no exceptions (see photoVariant()/photoClasses in each
   listing page's script, which skip the freightGroup class entirely here). */
.job-card-photo-classb { background: #4a5568 url("photo-classb.jpg") center 54% / cover no-repeat; }

/* Food Service photo (any route). */
.job-card-photo.job-card-photo-foodservice { background: #2f4a3a url("photo-foodservice.jpg") center 41% / cover no-repeat; }

/* Freight types that have a real photo don't need the drawn truck on top */
.job-card-photo-tanker .job-card-truck-illus,
.job-card-photo-flatbed .job-card-truck-illus,
.job-card-photo-reefer .job-card-truck-illus,
.job-card-photo-dryvan .job-card-truck-illus,
.job-card-photo-local .job-card-truck-illus,
.job-card-photo-ltl .job-card-truck-illus,
.job-card-photo-foodservice .job-card-truck-illus,
.job-card-photo-carhauler .job-card-truck-illus,
.job-card-photo-intermodal .job-card-truck-illus,
.job-card-photo-oversize .job-card-truck-illus,
.job-card-photo-classb .job-card-truck-illus { display: none; }

.job-card-truck-illus {
  width: auto;
  height: 60%;
  position: relative;
  z-index: 1;
  /* Nudged right of center so the black price box in the bottom-left
     corner doesn't cover the truck's wheels in the shorter photo box. */
  left: 18%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
}

.job-card-type-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 7px;
}

.job-card-photo .shift-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 14px;
  height: 14px;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 999px;
  padding: 5px;
  color: #fff;
  opacity: 1;
}

.job-card-photo .shift-badge svg { width: 100%; height: 100%; display: block; }

/* Tucked into the photo's bottom-left corner (flush with both edges),
   slightly see-through, with only the inner top-right corner rounded. */
.job-card-price-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 7px 13px 7px 12px;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 0 10px 0 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.job-card-price-overlay .job-pay {
  margin: 0;
  color: var(--lime);
  /* Green gradient text (falls back to solid green where unsupported) */
  background: linear-gradient(135deg, #4dffb4 0%, #00f590 50%, #00d488 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Semibold-bold with tight tracking reads cleaner and more "financial"
     than the chunky 800 weight used elsewhere. */
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.32rem;
  line-height: 1.15;
}

.job-card-price-unit {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  font-weight: 500;
}

.job-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.job-card-facts {
  list-style: none;
  margin: 8px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.job-card-facts li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink);
}

.jcf-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--blue-primary); }

.job-card-divider { height: 1px; background: var(--border); margin: auto 0 12px; }

.job-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  background: linear-gradient(135deg, #4d8bff 0%, #2a64e0 50%, #1a47c2 100%);
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  padding: 16px 10px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 12px 22px -12px rgba(31, 79, 209, 0.85), inset 0 -3px 0 rgba(0, 0, 0, 0.12);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.job-card-cta svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 2.4; }

.job-card:hover .job-card-cta, .job-card:focus-visible .job-card-cta {
  filter: brightness(1.08);
  box-shadow: 0 16px 26px -12px rgba(31, 79, 209, 0.95), inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .job-card-cta { transition: none; }
}

.job-company {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--blue-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.job-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
}

.job-loc { margin: 0; color: var(--ink-soft); font-size: 0.85rem; }
.job-pay { margin: 4px 0 0; color: var(--green); font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.job-hr { margin: -2px 0 0; color: var(--ink-soft); font-size: 0.85rem; }
.job-meta { margin: 0; font-size: 0.85rem; color: var(--ink); }

/* Union/Driving/Endorsements/Experience/Freight are still in the data and
   shown on the job detail page, but hidden on card/list previews so more
   posts fit on screen at once. */
.job-meta-x { display: none; }

.bonus-tag {
  margin-top: 6px;
  background: var(--bonus-bg);
  color: var(--bonus-text);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  padding: 7px 10px 6px;
  border-radius: 10px;
  border: 2px solid var(--bonus-text);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(21, 128, 61, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.bonus-tag:hover, .bonus-tag:focus-visible {
  transform: translateY(-1px);
  background: var(--bonus-text);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.4);
  outline: none;
}

.bonus-tag::after {
  content: "Tap for details \203A";
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.82;
}

/* Referral-bonus info popup, opened by clicking a .bonus-tag anywhere on the site */
.bonus-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
}

.bonus-info-modal {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 52px 28px 26px;
  text-align: center;
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.45);
}

.bonus-info-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.3rem;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
}

.bonus-info-close:hover { background: var(--surface); color: var(--ink); }

.bonus-info-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--bonus-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.bonus-referral-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  padding: 16px;
  border: 2px solid var(--bonus-text);
  border-radius: 14px;
  background: var(--bonus-bg);
}

.bonus-referral-highlight .bonus-info-icon {
  margin: 0;
  background: var(--bg);
}

.bonus-referral-name {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--bonus-text);
}

.bonus-info-modal h2 {
  margin: 4px 0 14px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
}

.bonus-info-copy {
  margin: 0 0 22px;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.55;
}

.bonus-info-copy strong { color: var(--bonus-text); }

.referral {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.avatar svg { width: 14px; height: 14px; }

.avatar-blue { background: #3b82f6; }
.avatar-green { background: #22c55e; }
.avatar-pink { background: #f472b6; }
.avatar-orange { background: #f97316; }
.avatar-purple { background: #a78bfa; }
.avatar-teal { background: #2dd4bf; }

.form-page { max-width: 760px; padding: 56px 24px 96px; }

.form-hero { text-align: center; margin-bottom: 48px; }

.form-hero h1 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  margin: 0 0 14px;
  text-wrap: balance;
}

.form-hero p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin: 0;
  line-height: 1.6;
}

.form-group { margin-bottom: 32px; }

.field-label {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 10px;
}

/* A small inline qualifier next to a field-label, e.g. "(Select Multiple)" --
   lighter weight/color so it reads as a note, not part of the question. */
.field-label-note {
  font-weight: 500;
  font-size: 0.85em;
  color: var(--ink-soft);
}

.text-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.98rem;
}

textarea.text-input {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}

.followup {
  margin-top: 14px;
  padding-left: 16px;
  border-left: 3px solid var(--blue-tint);
}

.field-hint {
  margin: -4px 0 14px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.input-prefix-group {
  position: relative;
}

.input-prefix-group .prefix-symbol {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  font-weight: 600;
  pointer-events: none;
}

.input-prefix-group .text-input {
  padding-left: 30px;
}

.text-input::placeholder { color: #cbd5e1; }
:root:not([data-theme="light"]) .text-input::placeholder { color: #475569; }
:root[data-theme="dark"] .text-input::placeholder { color: #475569; }

.text-input:focus-visible {
  outline: 2px solid var(--blue-primary);
  outline-offset: 1px;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.check-row-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.check-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
}

.check-item input[type="checkbox"] {
  width: 24px;
  height: 24px;
  accent-color: var(--blue-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.check-item.is-faded {
  opacity: 0.45;
}

.check-item.is-faded,
.check-item input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

/* Checkboxes are the easiest thing to mis-tap/mis-click on any device, so
   every check-item is a tappable pill/button with the label text inside it,
   on every screen size -- instead of a small square + text row -- the whole
   button is the tap target, not just the checkbox square. The real checkbox
   stays in the DOM (for form semantics/validation) but is stretched
   invisibly over the entire button; .is-checked (kept in sync with the
   checkbox's real state by shared.js, since single-select/exclusive-option
   groups un-check siblings programmatically without a native change event)
   drives the selected look. This used to be a mobile-only (max-width: 640px)
   treatment, with desktop/tablet left as plain square-checkbox rows; it's
   now unconditional so the design is consistent everywhere. */
.check-item {
  position: relative;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 12px 14px;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg);
  font-weight: 700;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.check-item input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.check-item.is-checked {
  border-color: var(--navy-2);
  background: var(--blue-primary);
  color: var(--on-accent);
}

/* .check-list: a vertical stack of full-width option buttons. */
.check-list { gap: 10px; }
.check-list .check-item { width: 100%; }

/* .check-row-inline: a horizontal row of pill buttons that wraps onto
   additional rows when there isn't room for all of them. */
.check-row-inline {
  row-gap: 10px;
  column-gap: 8px;
}
.check-row-inline .check-item { flex: 1 1 auto; min-width: 0; }

/* Is Your Job Local, Regional, or OTR? -- asked identically in
   post-job.html's 3-question wizard (#routeTypeGroup) and
   create-post.html's fuller questionnaire (.cp-route-type-group) --
   always has exactly 3 short options and needs to read as one row with
   no wrap; otherwise the last option drops below the fold and needs a
   scroll to even find, let alone select. */
#routeTypeGroup,
.cp-route-type-group {
  flex-wrap: nowrap;
}
#routeTypeGroup .check-item,
.cp-route-type-group .check-item {
  flex: 1 1 0;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 0.92rem;
}

.btn-submit {
  display: block;
  margin: 8px auto 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--on-accent);
  background: var(--blue-primary);
  border: none;
  border-radius: 8px;
  padding: 14px 48px;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

.btn-submit:hover, .btn-submit:focus-visible {
  background: var(--blue-primary-hover);
  box-shadow: 0 0 0 6px var(--blue-glow);
  transform: translateY(-1px);
}

.btn-submit:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 3px; }
.btn-submit:active { transform: translateY(0); }

.submit-success {
  text-align: center;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
  font-weight: 600;
  font-size: 0.95rem;
}

/* State-page topbar: back button + a quick state search, shown above the state heading */
.page-topbar {
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 24px 0;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Above mobile widths, .page-back-btn stays in .page-topbar (shared.js only
   relocates it into the header at mobile widths -- see .header-back-btn).
   Taking it out of flow here is what lets .page-state-search below center
   on the page's true midpoint instead of being skewed right by the back
   button's own width sitting to its left. */
@media (min-width: 641px) {
  .page-topbar { position: relative; }
  .page-back-btn { position: absolute; left: 24px; top: 24px; }
}

/* Desktop/tablet: on the jobs/state/matches listing pages, shared.js
   relocates the back button out of .page-topbar (above) and into that
   page's .toggle-collapse-bar instead, as .tcb-back-btn, so it lines up
   with "Show/Hide Filters" rather than floating alone above the search bar.
   Needs position:static to override the absolute positioning set above --
   this higher-specificity descendant selector wins regardless of source
   order. The exact left/center placement is finished by each listing page's
   own .toggle-collapse-bar grid layout (defined in that page's own styles). */
@media (min-width: 641px) {
  .toggle-collapse-bar .tcb-back-btn {
    position: static;
    margin: 0;
  }
}

.page-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.page-back-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.page-back-btn:hover, .page-back-btn:focus-visible {
  border-color: var(--blue-primary);
  color: var(--blue-primary);
  background: var(--blue-tint);
}

.page-back-btn:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; }

.page-state-search {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 240px;
}

.page-state-search-wrap {
  position: relative;
  width: 100%;
  max-width: 280px;
}

.page-state-search-input {
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  box-sizing: border-box;
}

.page-state-search-input::placeholder { color: #94a3b8; }

.page-state-search-input:focus-visible {
  outline: 2px solid var(--blue-primary);
  outline-offset: 2px;
}

.page-state-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 32px -14px rgba(15, 23, 42, 0.3);
  max-height: 240px;
  overflow-y: auto;
  text-align: left;
  z-index: 20;
}

.page-state-suggestions[hidden] { display: none; }

.page-state-suggestion {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
}

.page-state-suggestion:hover,
.page-state-suggestion.is-active {
  background: var(--blue-tint);
  color: var(--blue-primary);
}

.page-search-btn {
  flex-shrink: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--on-accent);
  background: var(--blue-primary);
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.page-search-btn:hover, .page-search-btn:focus-visible {
  background: var(--blue-primary-hover);
  box-shadow: 0 0 0 6px var(--blue-glow);
}

.page-search-btn:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 3px; }
.page-search-btn:active { transform: translateY(0); }

@media (max-width: 640px) {
  .page-topbar { justify-content: center; padding: 20px 16px 0; }
  .page-state-search { justify-content: center; }
  .page-search-btn { width: 100%; }
  .page-state-search-wrap { max-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-back-btn, .page-search-btn { transition: none; }
}

/* Width-based alone would let a phone rotated to landscape cross back over
   this threshold and "flip" into the full desktop nav/header layout. The
   added (max-height + landscape) clause keeps short, wide phone screens in
   the mobile layout regardless of orientation. */
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .site-header { flex-wrap: wrap; row-gap: 10px; }

  /* Post Your Job / the account menu is pulled out of normal flow and
     pinned to the header's own top-right corner. This (rather than
     `display: contents` on .header-right, which some mobile Safari
     versions render unreliably and can make header content vanish
     entirely) is what keeps the CTA next to the logo on row 1. The
     .site-header's `position: sticky` already gives it a positioning
     context for this. */
  /* Phones: the menu is a plain hamburger icon pinned to the header's
     top-right corner, and "Share Your Job" gets the full-size button on
     its own row underneath. */
  .hamburger-btn, .user-menu {
    position: absolute;
    top: 16px;
    right: 24px;
  }
  .hamburger-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    font-size: 0; /* hides the word "Menu" -- the icon (and aria-label) remain */
    gap: 0;
  }
  .hamburger-btn svg { width: 24px; height: 24px; }

  /* Phones: no "Share Your Job" button in the header (tablet and desktop
     keep it). */
  .site-header .btn-earn { display: none; }
  /* With that button gone, pages without a back button have nothing on the
     header's second row, so drop the gap that row used to need. */
  .site-header:not(:has(.header-back-btn)) { row-gap: 0; }
  .site-header:not(:has(.header-back-btn)) .hamburger-menu:not([hidden]) { margin-top: 10px; }

  .btn-earn {
    padding: 13px 28px;
    font-size: 1.02rem;
    gap: 8px;
    border-radius: 10px;
  }
  .btn-earn svg { width: 16px; height: 16px; }

  /* Leaves clear space so the brand text never runs under the
     hamburger icon in the corner. */
  .brand-block { min-width: 0; max-width: calc(100% - 60px); }
  .brand-tagline { white-space: normal; }

  /* header-right now only needs to lay out the Menu button (the CTA left
     it via position: absolute above, and the full nav is hidden below),
     centered on its own row under the brand/CTA row. When the current page
     has its own "back" link (job.html's .jd-back, or .page-back-btn on the
     jobs/state/matches listing pages), shared.js moves it in here too, as
     the first child, so it sits directly to the left of Menu on that same
     row instead of stacking as a separate centered row further down. */
  .header-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px;
  }

  /* The full text nav is replaced by the hamburger menu on mobile */
  .site-nav { display: none; }

  .hamburger-btn { display: inline-flex; }

  .hamburger-menu { width: 100%; }
  .hamburger-menu:not([hidden]) { display: flex; }

  /* Restyles whichever page-specific back link/button shared.js relocates
     into .header-right, as a compact pill matching the Menu button's
     weight -- overriding its original page-specific look (a plain text
     link for .jd-back, a bigger bordered pill for .page-back-btn) and any
     positioning meant for its original spot. The descendant selector
     out-specifies those single-class rules regardless of source order. */
  .header-right .header-back-btn {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
  }

  .header-right .header-back-btn:hover, .header-right .header-back-btn:focus-visible {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
    border-color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-earn, .btn-earn svg, .job-card, .btn-submit, .hamburger-btn { transition: none; }
}

@media (max-width: 480px) {
  .site-header { padding: 14px 16px; }
  .brand { font-size: 1.15rem; }
  .brand-tagline { font-size: 0.7rem; }
  .hamburger-btn, .user-menu { top: 12px; right: 16px; }
  .btn-earn { padding: 12px 24px; font-size: 0.98rem; }
}

/* Site footer, shared across every page */
.site-footer {
  background: var(--navy);
  color: #fff;
  padding: 40px 24px 28px;
  margin-top: 48px;
}

.footer-top {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-tagline {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 32ch;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
}

.footer-links a {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-links a:hover, .footer-links a:focus-visible { color: #fff; }
.footer-links a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.footer-copyright {
  max-width: 1180px;
  margin: 20px auto 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

@media (max-width: 640px) {
  .footer-top { flex-direction: column; gap: 20px; }
  .footer-links { gap: 12px 18px; }
}

/* Small uppercase label used above a section heading (e.g. "Questions"
   above an FAQ heading, "Simple & Straightforward" above "How it works"). */
.how-kicker {
  display: block;
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue-primary);
  margin: 0 0 10px;
}

/* FAQ section — shared by the homepage and the signup page */
.faq-section { max-width: 1000px; margin: 56px auto 0; scroll-margin-top: 90px; }

.faq-section h2 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
  margin: 0 0 22px;
}

.faq-list {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 43, 85, 0.04);
  transition: border-color 0.15s ease;
}

.faq-item[open] { border-color: var(--blue-primary); }

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--navy);
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  margin-left: auto;
  width: 22px;
  text-align: center;
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item summary:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: -2px; }

.faq-item p {
  margin: 0;
  padding: 0 18px 16px 37px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 0.93rem;
}

@media (max-width: 640px) {
  .faq-item summary { padding: 13px 14px; font-size: 0.92rem; }
  .faq-item p { padding: 0 14px 15px 33px; }
}

.page-footnote {
  max-width: 1180px;
  margin: 32px auto 0;
  padding: 0 20px;
  color: var(--ink-soft);
  opacity: 0.8;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ==========================================================================
   Shared marketing sections (homepage + sign-up page), "Bold Blue" design:
   video + three icon step cards, earnings calculator card with a green
   result box, compact plan cards with their own buttons, and a big lime
   "Sign Up Now" call to action. Everything is scoped under its section
   class so pages with their own similarly-named pieces (e.g. the plan
   cards inside post-job.html's signup popup) are never affected.
   ========================================================================== */

.btn-lime {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--lime-ink);
  background: var(--lime);
  border: none;
  border-radius: 8px;
  padding: 14px 26px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 22px -14px rgba(0, 150, 88, 0.9);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-lime svg { width: 17px; height: 17px; flex-shrink: 0; transition: transform 0.2s ease; }

.btn-lime:hover, .btn-lime:focus-visible {
  background: var(--lime-hover);
  box-shadow: 0 0 0 5px rgba(0, 255, 149, 0.28);
  transform: translateY(-1px);
}

.btn-lime:hover svg { transform: translateX(2px); }
.btn-lime:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.btn-lime:active { transform: translateY(0); }

.how-it-works,
.earnings-calc-section,
.pricing-section {
  max-width: 1000px;
  margin: 56px auto 0;
  scroll-margin-top: 90px;
}

.how-it-works h2,
.earnings-calc-section h2,
.pricing-section h2 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
  margin: 0 0 22px;
}

.earnings-calc-section .value-sub,
.pricing-section .value-sub {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.97rem;
  margin: -12px 0 22px;
}

/* ---- How it works: video thumbnail ---- */
.how-it-works .how-video-wrap { max-width: 640px; margin: 0 auto; }

.how-it-works .how-video {
  position: relative;
  display: block;
  /* Matches the thumbnail image's own proportions exactly, so the
     play button laid over it lines up with the picture underneath. */
  aspect-ratio: 350 / 133;
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy) url("how-it-works-thumb.jpg") center / cover no-repeat;
  box-shadow: 0 18px 40px -24px rgba(10, 31, 66, 0.6);
  cursor: pointer;
}

.how-it-works .how-video-play {
  position: absolute;
  left: 50%;
  top: 63.9%;
  width: 18.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #0b0d12;
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}

.how-it-works .how-video-play svg { width: 36%; height: 36%; margin-left: 7%; color: #fff; }

.how-it-works .how-video:hover .how-video-play { transform: translate(-50%, -50%) scale(1.06); }

.how-it-works .how-video-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 14px 10px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.how-it-works .how-video-bar svg { width: 12px; height: 12px; flex-shrink: 0; }

.how-it-works .how-video-progress {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.45);
}

/* ---- How it works: three step cards, each led by an illustration ---- */
.how-it-works .steps-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.how-it-works .step {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px 22px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 43, 85, 0.04);
}

.how-it-works .step-illus { margin: 0 auto 8px; }

/* Vector drawings, so they stay sharp at any size and on any screen */
.how-it-works .step-illus-svg {
  display: block;
  width: 100%;
  max-width: 210px;
  height: auto;
  margin: 0 auto;
}

.how-it-works .step h3 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 8px;
}

.how-it-works .step p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .how-it-works .steps-list { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .how-it-works .step-illus-svg { max-width: 190px; }
}

/* ---- Earnings calculator ---- */
.earnings-calc-section .earnings-calc-card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px 18px;
  align-items: end;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px 24px;
  box-shadow: 0 1px 2px rgba(15, 43, 85, 0.04);
}

.earnings-calc-section .earnings-calc-field .field-label {
  display: block;
  margin: 0 0 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.earnings-calc-section .text-input { padding: 13px 14px; border-radius: 8px; font-size: 1rem; }
.earnings-calc-section .input-prefix-group .text-input { padding-left: 30px; }

.earnings-calc-section .earnings-calc-result {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #d6fff0;
  border: 1px solid #8ff5cb;
  border-radius: 12px;
  padding: 12px 14px;
}

.earnings-calc-section .stat-value {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.earnings-calc-section .stat-label {
  margin: 2px 0 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--green);
}

.earnings-calc-section .stat-caption {
  margin: 4px 0 0;
  font-size: 0.74rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

@media (max-width: 760px) {
  .earnings-calc-section .earnings-calc-card { grid-template-columns: 1fr 1fr; padding: 20px 18px; }
  .earnings-calc-section .earnings-calc-result { grid-column: 1 / -1; padding: 16px 14px; }
}

@media (max-width: 420px) {
  .earnings-calc-section .earnings-calc-card { grid-template-columns: 1fr; }
}

/* ---- Membership plans ---- */
.pricing-section { text-align: center; }

.pricing-section .plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

.pricing-section .plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 18px 20px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 43, 85, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pricing-section .plan-card:hover { border-color: var(--blue-primary); }

.pricing-section .plan-card.is-selected {
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 3px var(--blue-tint), 0 12px 24px -18px rgba(47, 111, 237, 0.6);
}

.pricing-section .plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue-primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.pricing-section .plan-card-free .plan-badge { background: var(--green); }

.pricing-section .plan-card-name {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 10px;
}

.pricing-section .plan-card-price {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--ink);
}

.pricing-section .plan-card-price small { font-size: 1rem; font-weight: 700; }

.pricing-section .plan-card-note {
  display: block;
  margin-top: 6px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}

.pricing-section .plan-card-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 18px;
  flex: 1;
}

.pricing-section .plan-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.pricing-section .plan-feature svg { width: 13px; height: 13px; color: var(--green); flex-shrink: 0; }

.pricing-section .plan-card-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
}

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

/* ---- Final "Sign Up Now" call to action ---- */
.final-cta {
  max-width: 1000px;
  margin: 40px auto 0;
  text-align: center;
}

.final-cta .btn-lime {
  width: 100%;
  max-width: 460px;
  padding: 17px 26px;
  font-size: 1.2rem;
}

.final-cta-sub {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .btn-lime, .btn-lime svg, .how-it-works .how-video-play { transition: none; }
}

/* Visually hidden but still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ---- Compact job cards: two per row on phones ----
   Search results (.job-grid) and the homepage Hot Jobs grid. Everything is
   scaled down so a card fits in half the screen width without clipping. */
@media (max-width: 640px) {
  .job-grid .job-card,
  .hot-jobs-row .job-card {
    padding: 10px;
    gap: 2px;
    border-radius: 12px;
    min-width: 0;
  }
  .job-grid .job-card:hover,
  .hot-jobs-row .job-card:hover { transform: none; }
  .job-grid .job-card-photo,
  .hot-jobs-row .job-card-photo {
    margin: -10px -10px 8px;
    border-radius: 11px 11px 0 0;
  }
  .job-grid .job-card-type-badge,
  .hot-jobs-row .job-card-type-badge {
    top: 6px;
    left: 6px;
    font-size: 0.54rem;
    letter-spacing: 0.03em;
    padding: 3px 6px;
    border-radius: 5px;
    max-width: calc(100% - 40px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .job-grid .job-card-photo .shift-badge,
  .hot-jobs-row .job-card-photo .shift-badge {
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    padding: 4px;
  }
  .job-grid .job-card-price-overlay,
  .hot-jobs-row .job-card-price-overlay {
    left: 0;
    bottom: 0;
    padding: 4px 8px 4px 7px;
    border-radius: 0 8px 0 0;
    gap: 2px;
  }
  .job-grid .job-card-price-overlay .job-pay,
  .hot-jobs-row .job-card-price-overlay .job-pay { font-size: 0.92rem; letter-spacing: -0.01em; }
  .job-grid .job-card-price-unit,
  .hot-jobs-row .job-card-price-unit { font-size: 0.62rem; }
  .job-grid .job-company,
  .hot-jobs-row .job-company {
    font-size: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .job-grid .job-title,
  .hot-jobs-row .job-title { font-size: 0.86rem; line-height: 1.25; }
  .job-grid .job-card-facts,
  .hot-jobs-row .job-card-facts { margin: 6px 0 8px; gap: 4px; }
  .job-grid .job-card-facts li,
  .hot-jobs-row .job-card-facts li { font-size: 0.7rem; gap: 5px; line-height: 1.25; min-width: 0; }
  .job-grid .jcf-icon,
  .hot-jobs-row .jcf-icon { width: 12px; height: 12px; }
  .job-grid .job-card-divider,
  .hot-jobs-row .job-card-divider { margin-bottom: 8px; }
  .job-grid .referral,
  .hot-jobs-row .referral { margin-top: 0; gap: 5px; font-size: 0.66rem; line-height: 1.25; min-width: 0; }
  .job-grid .referral .avatar,
  .hot-jobs-row .referral .avatar { width: 18px; height: 18px; }
  .job-grid .referral .avatar svg,
  .hot-jobs-row .referral .avatar svg { width: 10px; height: 10px; }
  .job-grid .bonus-tag,
  .hot-jobs-row .bonus-tag { font-size: 0.66rem; padding: 5px 4px 4px; border-radius: 8px; border-width: 1.5px; }
  .job-grid .bonus-tag::after,
  .hot-jobs-row .bonus-tag::after { font-size: 0.54rem; }
  .job-grid .job-card-cta,
  .hot-jobs-row .job-card-cta {
    margin-top: 10px;
    padding: 13px 4px;
    font-size: 0.86rem;
    border-radius: 10px;
    gap: 5px;
  }
  .job-grid .job-card-cta svg,
  .hot-jobs-row .job-card-cta svg { width: 14px; height: 14px; }
}


/* ---- Gradient buttons ----
   Green: "Post Your Job" + every "Start" button.
   Blue: every "Search Jobs" button + the Post Your Job wizard's
   Continue / Start button. */
:root {
  --grad-lime: linear-gradient(135deg, #5cffbd 0%, #00ff95 42%, #00cf86 100%);
  --grad-lime-hover: linear-gradient(135deg, #2dffa8 0%, #00ea89 42%, #00b877 100%);
  --grad-blue: linear-gradient(135deg, #5b93ff 0%, #2a64e0 48%, #1c4cc0 100%);
  --grad-blue-hover: linear-gradient(135deg, #4a85fb 0%, #2560d8 48%, #173fa3 100%);
}

.btn-earn,
.btn-lime {
  background: var(--grad-lime);
  box-shadow: 0 6px 16px -8px rgba(0, 150, 88, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-earn:hover, .btn-earn:focus-visible,
.btn-lime:hover, .btn-lime:focus-visible {
  background: var(--grad-lime-hover);
}

.btn-search,
.page-search-btn,
#pjWizardContinueBtn {
  color: #fff;
  background: var(--grad-blue);
  box-shadow: 0 6px 16px -8px rgba(29, 78, 216, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-search:hover, .btn-search:focus-visible,
.page-search-btn:hover, .page-search-btn:focus-visible,
#pjWizardContinueBtn:hover, #pjWizardContinueBtn:focus-visible {
  background: var(--grad-blue-hover);
  box-shadow: 0 0 0 5px var(--blue-glow);
}


/* ---- "No jobs available" message + Clear Filters button (listing pages) ---- */
.no-jobs {
  max-width: 520px;
  margin: 12px auto 8px;
  padding: 34px 24px 30px;
  text-align: center;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 16px;
}
.no-jobs[hidden] { display: none; }
/* "Be the first to post a job" card inside the no-jobs box */
.no-jobs-post {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 26px 0 0;
  padding: 18px 20px;
  border: 2px dashed var(--border-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue-tint) 45%, var(--bg));
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.no-jobs-post:hover, .no-jobs-post:focus-visible { border-color: var(--blue-primary); background: var(--blue-tint); }
.no-jobs-post:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 3px; }
.no-jobs-post-plus {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--blue-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px -10px rgba(47, 111, 237, 0.7);
}
.no-jobs-post-plus svg { width: 28px; height: 28px; }
.no-jobs-post-text { display: flex; flex-direction: column; gap: 6px; }
.no-jobs-post-title { font-family: "Inter", system-ui, sans-serif; font-weight: 800; font-size: 1.08rem; color: var(--ink); }
.no-jobs-post-sub { font-size: 0.92rem; color: var(--ink-soft); }
.no-jobs-post-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.95rem; color: var(--blue-primary); }
.no-jobs-post-cta svg { width: 15px; height: 15px; }
@media (max-width: 420px) {
  .no-jobs-post { flex-direction: column; text-align: center; }
  .no-jobs-post-text { align-items: center; }
}
.no-jobs-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-tint);
  color: var(--blue-primary);
}
.no-jobs-icon svg { width: 26px; height: 26px; }
.no-jobs-title {
  margin: 0 0 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
}
.no-jobs-text {
  margin: 0 auto 20px;
  max-width: 400px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.btn-clear-filters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--navy);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 9px 20px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.btn-clear-filters:hover, .btn-clear-filters:focus-visible {
  border-color: var(--blue-primary);
  color: var(--blue-primary);
  background: var(--blue-tint);
}
.btn-clear-filters-lg {
  font-size: 0.95rem;
  padding: 12px 26px;
  color: #fff;
  border: none;
  background: var(--grad-blue);
  box-shadow: 0 6px 16px -8px rgba(29, 78, 216, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-clear-filters-lg:hover, .btn-clear-filters-lg:focus-visible {
  color: #fff;
  background: var(--grad-blue-hover);
}


/* ---- List view, tablet & desktop: fuller job rows ----
   Layout: [title/company/location] [grid of labeled facts] [pay]
           [referral · bonus ............................ View Details]
   The facts grid and View Details button are added by shared.js; phones
   keep the compact list (they're hidden below 641px). */
.jlr-facts, .jlr-cta { display: none; }

@media (min-width: 641px) {
  .job-list .job-list-row {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 2.5fr) auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "main  facts pay"
      "ref   facts pay"
      "bonus facts cta";
    align-items: start;
    gap: 8px 28px;
    padding: 18px 46px 18px 20px;
  }
  .job-list .job-list-row[hidden] { display: none; }
  .job-list .job-list-row .jlr-main { grid-area: main; }
  .job-list .job-list-row .jlr-pay-block { grid-area: pay; min-width: 130px; }
  .job-list .job-list-row .jlr-details { display: none; }
  /* Let the referral, bonus and button sit in the grid themselves */
  .job-list .job-list-row .jlr-bottom { display: contents; }
  .job-list .job-list-row .referral { grid-area: ref; margin-top: 4px; }
  .job-list .job-list-row .bonus-tag { grid-area: bonus; justify-self: start; margin-top: 2px; }
  .job-list .job-list-row .jlr-cta { grid-area: cta; justify-self: end; align-self: end; }

  .job-list .jlr-title { font-size: 1.02rem; }
  .job-list .jlr-main .job-company { margin-top: 3px; }
  .job-list .jlr-loc { margin-top: 5px; font-size: 0.84rem; }
  .job-list .jlr-pay-block .job-pay { font-size: 1.3rem; }
  .job-list .jlr-pay-block .job-hr { font-size: 0.8rem; margin-top: 3px; }

  .jlr-facts {
    grid-area: facts;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 0;
  }
  .jlr-fact { min-width: 0; }
  .jlr-fact dt {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    opacity: 0.85;
  }
  .jlr-fact dd {
    margin: 2px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
  }

  .jlr-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.86rem;
    color: #fff;
    background: var(--grad-blue);
    padding: 9px 18px;
    border-radius: 9px;
    white-space: nowrap;
    box-shadow: 0 6px 14px -8px rgba(29, 78, 216, 0.8);
  }
  .jlr-cta svg { width: 14px; height: 14px; }
  .job-list-row:hover .jlr-cta { background: var(--grad-blue-hover); }
}

@media (min-width: 641px) and (max-width: 1099px) {
  .jlr-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .job-list .job-list-row { grid-template-columns: minmax(170px, 1fr) minmax(0, 2fr) auto; gap: 12px 20px; }
}

@media (min-width: 641px) and (max-width: 860px) {
  /* Narrow tablets: facts drop under the title/pay row, full width */
  .job-list .job-list-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    grid-template-areas:
      "main  pay"
      "facts facts"
      "ref   cta"
      "bonus cta";
    gap: 10px 20px;
  }
  .job-list .job-list-row .jlr-cta { align-self: center; }
}

/* ---- "See What It's Worth" + "Not Sure" (referral bonus question) ----
   Green money-gradient for the calculator, a clean outlined button for
   Not Sure that turns solid navy (with a check) once it's selected. */
.referral-bonus-row .btn-calc {
  color: var(--navy);
  background: var(--grad-lime);
  border: none;
  font-weight: 800;
  box-shadow: 0 6px 16px -8px rgba(0, 150, 88, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.referral-bonus-row .btn-calc:hover,
.referral-bonus-row .btn-calc:focus-visible {
  color: var(--navy);
  background: var(--grad-lime-hover);
}
.referral-bonus-row .btn-calc:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.referral-bonus-row .btn-not-sure {
  color: var(--navy);
  background: #fff;
  border: 1.5px solid #c7d2e4;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 43, 85, 0.06);
}
.referral-bonus-row .btn-not-sure:hover {
  border-color: var(--navy-2);
  background: #f4f7fb;
  color: var(--navy);
}
.referral-bonus-row .btn-not-sure[aria-pressed="true"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #1f4fa8 0%, #143a7c 50%, #0a1f42 100%);
  box-shadow: 0 6px 16px -8px rgba(10, 31, 66, 0.8);
}
.referral-bonus-row .btn-not-sure[aria-pressed="true"]::before {
  content: "\2713";
  margin-right: 6px;
  font-weight: 800;
}

/* "Sample post" note shown in the job popups for made-up sample listings. */
.rad-sample-notice {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left;
}
.rad-sample-notice[hidden] { display: none; }

/* "By continuing, you agree to our Terms and Privacy Policy" under submit buttons */
.rad-legal-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}
.rad-legal-note a { color: var(--blue-primary); font-weight: 600; }
.rad-send-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: left;
}
.rad-send-error[hidden] { display: none; }


/* Terms / Privacy shown in a pop-up over the page (opening a new tab
   is blocked in some places, and this keeps people on their form). */
.rad-doc-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(10, 31, 66, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.rad-doc-overlay[hidden] { display: none; }
.rad-doc-box {
  background: var(--bg, #fff);
  border-radius: 14px;
  width: 100%; max-width: 820px; height: min(86vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
}
.rad-doc-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border, #dde3ee);
  font-weight: 700; color: var(--ink, #0a1f42);
}
.rad-doc-close {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--blue-primary, #2a64e0); color: #fff;
  border: 0; border-radius: 8px; padding: 8px 16px;
}
.rad-doc-frame { flex: 1; width: 100%; border: 0; }

html.rad-in-viewer .site-header,
html.rad-in-viewer .site-footer { display: none !important; }

/* Bigger, easier-to-tap X buttons on every pop-up. Kept tucked in the
   corner (8px) so the larger size doesn't push into the pop-up content. */
button.bonus-info-close,
button.calc-modal-close,
button.referral-modal-close,
button.pjg-close {
  top: 8px !important;
  right: 8px !important;
  width: 42px !important;
  height: 42px !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px !important;
  z-index: 2;
}

.rad-turnstile { display: flex; justify-content: center; margin: 0 0 10px; }
.rad-turnstile:empty { margin: 0; }

/* Faster, cleaner taps on phones: no grey/blue rectangle flash from the
   hidden checkbox, no double-tap zoom delay, and an instant pressed look. */
.check-item, .check-item input, button, a, .btn-submit, .btn-earn, select {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.check-item input[type="checkbox"] { border-radius: inherit; }
.check-item { transition: border-color 0.08s ease, background-color 0.08s ease, color 0.08s ease, transform 0.08s ease; }
.check-item:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .check-item:active { transform: none; } }

/* ---- "How Much Could You Make?" earnings table ---- */
.earn-table-section { max-width: 1100px; margin: 56px auto 0; scroll-margin-top: 90px; container-type: inline-size; }
.earn-table-section .et-wrap {
  background: linear-gradient(135deg, #eef5ff 0%, #e8f6fb 100%);
  border: 1px solid var(--border); border-radius: 24px;
  padding: 24px 12px 18px; display: grid; gap: 22px;
}
.earn-table-section .et-kicker { margin: 0 0 8px; color: var(--green); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; }
.earn-table-section .et-intro h2 {
  margin: 0 0 12px; text-align: left; font-family: "Inter", system-ui, sans-serif;
  font-weight: 800; font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.06; letter-spacing: -0.02em; color: var(--navy);
}
.earn-table-section .et-intro h2 span { display: block; color: var(--blue-primary); }
.earn-table-section .et-copy { margin: 0 0 18px; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; max-width: 34em; }
.earn-table-section .et-toggle { display: flex; gap: 10px; max-width: 380px; }
.earn-table-section .et-toggle button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 10px; border-radius: 12px; border: 1px solid var(--border); background: #fff;
  color: var(--navy); font: inherit; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.earn-table-section .et-toggle button strong { font-size: 0.98rem; font-weight: 700; }
.earn-table-section .et-toggle button small { font-size: 0.8rem; opacity: 0.8; }
.earn-table-section .et-toggle button.is-active { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 8px 20px rgba(15,43,85,.25); }
.earn-table-section .et-card {
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 14px 36px rgba(15,43,85,.10); padding: 6px; overflow: hidden;
}
.earn-table-section .et-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.earn-table-section .et-table thead th {
  background: #f1f5fb; color: var(--ink); font-weight: 700; font-size: 0.8rem; line-height: 1.2;
  padding: 10px 2px; text-align: center;
}
.earn-table-section .et-table thead th small { display: block; font-weight: 500; font-size: 0.62rem; color: var(--ink-soft); }
.earn-table-section .et-table thead th.et-row { font-size: 0.68rem; font-weight: 600; }
.earn-table-section .et-c1 { width: 29%; }
.earn-table-section .et-table thead th:first-child { border-radius: 12px 0 0 12px; }
.earn-table-section .et-table thead th:last-child { border-radius: 0 12px 12px 0; }
.earn-table-section .et-table td,
.earn-table-section .et-table tbody th {
  padding: 14px 2px; border-top: 1px solid var(--border); text-align: center;
  font-weight: 800; font-size: 0.82rem; color: var(--navy); font-variant-numeric: tabular-nums;
}
.earn-table-section .et-table tbody tr:first-child td,
.earn-table-section .et-table tbody tr:first-child th { border-top: 0; }
.earn-table-section .et-table .et-row { text-align: left; padding-left: 8px; }
.earn-table-section .et-table tbody .et-row { font-weight: 700; font-size: 0.76rem; color: var(--ink); overflow-wrap: anywhere; }
.earn-table-section .et-table .et-row small { display: block; margin-top: 2px; font-weight: 500; font-size: 0.6rem; color: var(--ink-soft); }
.earn-table-section .et-table td.et-g { color: var(--green); }
.earn-table-section .et-table tr.et-hl td,
.earn-table-section .et-table tr.et-hl th { background: #e6fbee; border-top-color: #c9f0d8; }
.earn-table-section .et-table tr.et-hl td { font-size: 0.86rem; }
.earn-table-section .et-table tr.et-hl th { border-radius: 12px 0 0 12px; }
.earn-table-section .et-table tr.et-hl td:last-child { border-radius: 0 12px 12px 0; }
.earn-table-section .et-note { margin: 12px 4px 0; text-align: center; font-size: 0.8rem; color: var(--ink-soft); }
@container (min-width: 560px) {
  .earn-table-section .et-wrap { padding: 32px 28px 28px; }
  .earn-table-section .et-table thead th { font-size: 0.95rem; padding: 14px 8px; }
  .earn-table-section .et-table thead th small { font-size: 0.74rem; }
  .earn-table-section .et-table thead th.et-row { font-size: 0.82rem; }
  .earn-table-section .et-c1 { width: 28%; }
  .earn-table-section .et-table tbody .et-row { white-space: nowrap; }
  .earn-table-section .et-card { padding: 8px; }
  .earn-table-section .et-table td, .earn-table-section .et-table tbody th { padding: 20px 8px; font-size: 1.3rem; }
  .earn-table-section .et-table tbody .et-row { font-size: 1rem; padding-left: 14px; }
  .earn-table-section .et-table thead .et-row { padding-left: 14px; }
  .earn-table-section .et-table .et-row small { font-size: 0.74rem; }
  .earn-table-section .et-table tr.et-hl td { font-size: 1.45rem; }
}
@container (min-width: 900px) {
  .earn-table-section .et-wrap { grid-template-columns: minmax(330px, 360px) 1fr; align-items: center; gap: 34px; padding: 42px 38px; }
  .earn-table-section .et-intro h2 { font-size: 2.45rem; }
}
.plan-page-card .earn-table-section { margin: 24px 0 26px; }

/* ---- How it works: real explainer video ---- */
.how-it-works .how-video-wrap:has(.how-video-real) { max-width: 760px; }
.how-it-works .how-video-real { aspect-ratio: 16 / 9; background: #000; cursor: default; }
.how-it-works .how-video-real video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.how-it-works .how-video-real .how-video-cover {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; margin: 0;
  background: rgba(0,0,0,.18);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.how-it-works .how-video-real .how-video-tri {
  height: 36%; width: auto; margin-left: 3%; color: #fff; opacity: .92;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.55)); transition: transform .2s ease, opacity .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .how-it-works .how-video-real .how-video-cover:hover .how-video-tri { transform: scale(1.08); opacity: 1; }
}
.how-it-works .how-video-real .how-video-cover:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.how-it-works .how-video-real.is-playing .how-video-cover { display: none; }

.earn-table-section .et-plan { display: inline-block; margin: 0; padding: 11px 18px; border-radius: 12px; background: var(--navy); color: #fff; font-size: 0.95rem; box-shadow: 0 8px 20px rgba(15,43,85,.22); }
.plan-grid.plan-grid-1 { grid-template-columns: minmax(0, 380px); justify-content: center; }
.pricing-section .plan-grid.plan-grid-2 { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
@media (max-width: 640px) { .pricing-section .plan-grid.plan-grid-2 { grid-template-columns: 1fr; } }

/* ---- How It Works in 3 Sentences: three steps beside the video ----
   Desktop: steps on the left, video on the right. Below 860px they stack
   (heading, steps, then video). The thin line links the three circles. */
.how-it-works .hiw-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}
.how-it-works .hiw-split h2 { text-align: left; margin: 0 0 16px; text-wrap: balance; font-size: clamp(2rem, 3.4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; }
.how-it-works .hiw-split .how-video-wrap { max-width: none; margin: 0; min-width: 0; }
.hiw-list { list-style: none; margin: 0; padding: 0; }
.hiw-step { position: relative; display: flex; align-items: flex-start; gap: 18px; padding: 16px 0; }
.hiw-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 45px;
  width: 4px;
  height: 100%;
  border-radius: 4px;
}
.hiw-o::after { background: linear-gradient(180deg, #00a862, #e5484d); }
.hiw-p::after { background: linear-gradient(180deg, #e5484d, var(--blue-primary)); }
.hiw-circle {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hiw-circle svg { width: 28px; height: 28px; display: block; }
.hiw-o .hiw-circle { background: #00a862; }
.hiw-p .hiw-circle { background: #e5484d; }
.hiw-s .hiw-circle { background: var(--blue-primary); }
.hiw-text { min-width: 0; padding-top: 6px; }
.hiw-text h3 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 4px;
}
.hiw-text p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.5; overflow-wrap: anywhere; }
.hiw-text strong { color: var(--ink); font-weight: 800; }

@media (max-width: 860px) {
  .how-it-works .hiw-split { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .how-it-works .hiw-split h2 { text-align: center; margin-bottom: 10px; font-size: clamp(1.85rem, 5vw, 2.3rem); }
  .hiw-list { max-width: 560px; margin: 0 auto; }
  .how-it-works .hiw-split .how-video-wrap { max-width: 760px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
  .hiw-step { gap: 14px; padding: 13px 0; }
  .hiw-circle { width: 50px; height: 50px; }
  .hiw-circle svg { width: 24px; height: 24px; }
  .hiw-step:not(:last-child)::after { left: 23px; top: 38px; }
  .hiw-text { padding-top: 3px; }
  .hiw-text h3 { font-size: 1.15rem; }
  .hiw-text p { font-size: 1rem; }
}

/* ==========================================================================
   Simple job cards (Oct 2026): city replaces the company line, no fact list,
   and jobs with a bonus split are tinted green with a corner tab.
   ========================================================================== */
.job-company.job-city { display: flex; align-items: center; gap: 4px; min-width: 0; }
.job-company.job-city span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-city-icon { width: 13px; height: 13px; flex: none; }
.job-card .job-title { margin-bottom: 10px; }

.job-card.has-bonus {
  border: 2px solid #16a35a;
  background: #effcf4;
  box-shadow: 0 0 0 4px rgba(0, 255, 149, 0.16), 0 16px 30px -18px rgba(11, 138, 80, 0.55);
}
.job-card.has-bonus .job-card-divider { background: #bfe9d1; border-color: #bfe9d1; }
.job-card.has-bonus .job-card-photo .shift-badge { top: 44px; }
.bonus-corner {
  position: absolute; top: 0; right: 0; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100% - 70px);
  background: linear-gradient(135deg, #5cffbd 0%, #00ff95 45%, #00cf86 100%);
  color: var(--navy);
  font-weight: 800; font-size: 14px; line-height: 1.1; letter-spacing: 0.01em; white-space: nowrap;
  padding: 8px 14px 8px 12px;
  border-radius: 0 12px 0 14px;
  box-shadow: 0 6px 14px -6px rgba(0, 90, 50, 0.6);
  pointer-events: none;
}
.bonus-corner svg { width: 15px; height: 15px; flex: none; }

/* List view rows */
.job-list-row.has-bonus { border-color: #16a35a; background: #effcf4; }
.jlr-bonus-pill {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; width: fit-content;
  margin-top: 6px;
  background: linear-gradient(135deg, #5cffbd 0%, #00ff95 45%, #00cf86 100%);
  color: var(--navy);
  font-weight: 800; font-size: 0.8rem; line-height: 1.1; white-space: nowrap;
  padding: 5px 10px 5px 8px; border-radius: 999px;
}
.jlr-bonus-pill svg { width: 13px; height: 13px; flex: none; }
@media (min-width: 641px) {
  .job-list .job-list-row .jlr-bonus-pill { grid-area: bonus; justify-self: start; margin-top: 2px; }
}

@media (max-width: 640px) {
  .job-grid .job-city-icon,
  .hot-jobs-row .job-city-icon { width: 10px; height: 10px; }
  .job-grid .job-company.job-city,
  .hot-jobs-row .job-company.job-city { gap: 3px; }
  .job-grid .job-card .job-title,
  .hot-jobs-row .job-card .job-title { margin-bottom: 6px; }
  .bonus-corner { font-size: 11px; padding: 6px 9px 6px 8px; gap: 4px; border-radius: 0 10px 0 11px; max-width: calc(100% - 52px); }
  .bonus-corner svg { width: 12px; height: 12px; }
  .job-card.has-bonus .job-card-photo .shift-badge { top: 32px; }
  .jlr-bonus-pill { font-size: 0.7rem; padding: 4px 8px 4px 7px; }
  .jlr-bonus-pill svg { width: 11px; height: 11px; }
}
@media (max-width: 360px) {
  .bonus-corner { font-size: 10px; padding: 5px 7px 5px 6px; }
}

/* ==========================================================================
   Job quick view: opens when a job card is clicked. Same box switches to the
   "Message [name]" form, then a "Message sent" view.
   ========================================================================== */
.qv-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(10, 20, 40, 0.58);
  animation: qv-fade 0.16s ease;
}
.qv-overlay[hidden] { display: none; }
.qv-box {
  position: relative;
  width: 540px; max-width: 100%;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
  animation: qv-pop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  color: var(--ink);
  text-align: left;
}
.qv-box.qv-sizing { transition: height 0.2s ease; overflow-y: hidden; }
.qv-view { animation: qv-in 0.2s ease; }
.qv-view[hidden] { display: none; }
@keyframes qv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qv-pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes qv-in { from { opacity: 0; transform: translateX(var(--qv-dir, 14px)); } to { opacity: 1; transform: none; } }

.qv-hero { position: relative; background: linear-gradient(135deg, #123672, #1b4fb4); color: #fff; padding: 22px 24px 20px; }
.qv-grab { display: none; }
.qv-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.16); color: #fff;
}
.qv-x:hover, .qv-x:focus-visible { background: rgba(255, 255, 255, 0.28); }
.qv-x svg { width: 18px; height: 18px; }
.qv-who { display: flex; gap: 14px; align-items: center; padding-right: 44px; min-width: 0; }
.qv-av {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--blue-primary); font-weight: 800; font-size: 19px; letter-spacing: 0.02em;
}
.qv-who > div { min-width: 0; }
.qv-who small { display: block; font-size: 12.5px; opacity: 0.82; line-height: 1.3; }
.qv-who b { display: block; font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.qv-quote { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 12px 14px; overflow-wrap: anywhere; }
.qv-quote::before { content: "\201C"; font-size: 28px; line-height: 0; vertical-align: -10px; margin-right: 4px; color: var(--lime); }

.qv-bonus {
  display: flex; gap: 10px; align-items: center;
  background: linear-gradient(135deg, #5cffbd, #00ff95 45%, #00cf86);
  color: var(--navy); padding: 10px 24px; font-size: 14px; font-weight: 600; line-height: 1.35;
}
.qv-bonus b { font-weight: 900; }
.qv-bonus svg { width: 22px; height: 22px; flex: none; }

.qv-body { padding: 18px 24px 22px; }
.qv-title { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.qv-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; font-size: 14px; color: var(--ink-soft); }
.qv-loc svg { width: 15px; height: 15px; flex: none; }
.qv-samp { display: inline-block; background: #1f2937; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.qv-payline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 10px 0 14px; }
.qv-payline b { font-size: 26px; font-weight: 900; color: var(--green); }
.qv-payline b small { font-size: 14px; color: var(--ink-soft); font-weight: 700; }
.qv-payline span { font-size: 13.5px; color: var(--ink-soft); }
.qv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.qv-grid.qv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qv-f { display: flex; gap: 9px; align-items: flex-start; min-width: 0; background: #f5f8fd; border: 1px solid #e8eef8; border-radius: 12px; padding: 11px 10px; color: var(--blue-primary); }
.qv-f svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.qv-f div { min-width: 0; }
.qv-f b { display: block; font-size: 14px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.qv-f small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--ink-soft); margin-top: 2px; overflow-wrap: anywhere; }

.qv-btns { display: grid; gap: 10px; }
.qv-btn-msg, .qv-send, .qv-btn-g {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  border: 0; border-radius: 12px; padding: 15px 18px; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 17px; line-height: 1.2; color: var(--navy); text-align: center;
  background: linear-gradient(135deg, #5cffbd 0%, #00ff95 42%, #00cf86 100%);
  box-shadow: 0 12px 24px -14px rgba(0, 140, 80, 0.8);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.qv-btn-msg:hover, .qv-send:hover, .qv-btn-g:hover { filter: brightness(0.97); transform: translateY(-1px); }
.qv-btn-msg svg, .qv-send svg { width: 19px; height: 19px; flex: none; }
.qv-send[disabled] { opacity: 0.7; cursor: default; transform: none; }
.qv-btn-full, .qv-btn-o {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 16px; background: #fff; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--navy); text-decoration: none; text-align: center;
}
.qv-btn-full:hover, .qv-btn-o:hover { border-color: var(--border-strong); background: var(--surface); }
.qv-btn-full svg, .qv-btn-o svg { width: 16px; height: 16px; flex: none; }
.qv-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: #6b7894; text-align: center; }

/* Message form view */
.qv-top { display: flex; align-items: center; margin-bottom: 14px; padding-right: 44px; }
.qv-back {
  display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; cursor: pointer;
  padding: 8px 14px 8px 11px; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.1;
  background: rgba(255, 255, 255, 0.16); color: #fff;
}
.qv-back:hover, .qv-back:focus-visible { background: rgba(255, 255, 255, 0.28); }
.qv-back svg { width: 18px; height: 18px; flex: none; }
.qv-mwho { display: flex; gap: 12px; align-items: center; min-width: 0; }
.qv-mwho .qv-av { width: 46px; height: 46px; font-size: 16px; }
.qv-mwho > div { min-width: 0; }
.qv-mwho b { display: block; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.qv-mwho small { display: block; font-size: 13px; opacity: 0.82; margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
.qv-form { margin: 0; }
.qv-lbl { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.qv-inp, .qv-ta {
  display: block; width: 100%; box-sizing: border-box;
  border: 1.5px solid #d6deeb; border-radius: 12px; padding: 12px 13px;
  font-family: inherit; font-size: 16px; line-height: 1.45; color: var(--ink); background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qv-ta { min-height: 112px; resize: none; }
.qv-inp:focus, .qv-ta:focus { outline: none; border-color: var(--blue-primary); box-shadow: 0 0 0 4px rgba(42, 100, 224, 0.12); }
.qv-inp.has-error, .qv-ta.has-error { border-color: #dc2626; }
.qv-help { display: flex; align-items: center; gap: 5px; margin: 6px 0 14px; font-size: 12.5px; color: var(--ink-soft); }
.qv-help svg { width: 14px; height: 14px; flex: none; }
.qv-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin: 6px 0 16px; min-height: 18px; }
.qv-count { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qv-count.is-full { color: #b45309; font-weight: 700; }
.qv-err { margin: 0; font-size: 13px; font-weight: 600; color: #dc2626; }
.qv-err[hidden] { display: none; }
.qv-help + .qv-err { margin: -8px 0 12px; }
.qv-senderr { margin: 10px 0 0; text-align: center; }
.qv-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Sent view */
.qv-done { text-align: center; padding: 6px 4px 2px; }
.qv-ok {
  width: 72px; height: 72px; border-radius: 50%; margin: 4px auto 14px;
  display: flex; align-items: center; justify-content: center; color: var(--navy);
  background: linear-gradient(135deg, #5cffbd, #00ff95 45%, #00cf86);
  box-shadow: 0 0 0 10px rgba(0, 255, 149, 0.16);
}
.qv-ok svg { width: 36px; height: 36px; }
.qv-done h3 { margin: 0; font-size: 24px; font-weight: 900; color: var(--ink); }
.qv-done p { margin: 8px auto 18px; max-width: 400px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.qv-done p b { color: var(--ink); }
.qv-recap { background: #f5f8fd; border: 1px solid #e8eef8; border-radius: 12px; padding: 12px 14px; text-align: left; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); margin-bottom: 16px; overflow-wrap: anywhere; white-space: pre-line; }
.qv-recap b { display: block; color: var(--ink); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; white-space: normal; }
.qv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qv-row2 .qv-btn-g { font-size: 15px; padding: 14px; box-shadow: none; }

@media (max-width: 640px) {
  .qv-overlay { align-items: flex-end; padding: 0; }
  .qv-box {
    width: 100%; max-width: 100%;
    max-height: 94vh; max-height: 94dvh;
    border-radius: 20px 20px 0 0;
    animation: qv-up 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @keyframes qv-up { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
  .qv-hero { padding: 10px 16px 16px; }
  .qv-grab { display: block; width: 44px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.35); margin: 0 auto 10px; }
  .qv-x { top: 12px; right: 12px; }
  .qv-av { width: 50px; height: 50px; font-size: 17px; }
  .qv-who b { font-size: 19px; }
  .qv-quote { font-size: 13.5px; padding: 10px 12px; margin-top: 10px; }
  .qv-bonus { padding: 9px 16px; font-size: 13px; }
  .qv-body { padding: 14px 16px 18px; }
  .qv-title { font-size: 21px; }
  .qv-payline b { font-size: 23px; }
  .qv-grid, .qv-grid.qv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .qv-f { padding: 9px; }
  .qv-btn-msg { font-size: 16px; padding: 15px 12px; }
  .qv-mwho b { font-size: 18px; }
  .qv-ta { min-height: 100px; }
  .qv-done h3 { font-size: 22px; }
}
@media (max-width: 360px) {
  .qv-row2 { grid-template-columns: 1fr; }
  .qv-grid, .qv-grid.qv-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qv-f { gap: 6px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .qv-overlay, .qv-box, .qv-view { animation: none; }
  .qv-box.qv-sizing { transition: none; }
}
.jd-msg-count { margin: 4px 0 0; text-align: right; font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Job alert banner (matches.html): replaces the "No jobs" box when the
   Perfect Job Generator finds nothing.
   ========================================================================== */
.ja-banner {
  display: flex; align-items: center; gap: 22px;
  max-width: 1100px; margin: 4px auto 28px; padding: 24px 28px;
  border-radius: 20px; color: #fff;
  background: linear-gradient(150deg, #123672 0%, #0f2b55 60%, #0a1f42 100%);
  box-shadow: 0 20px 34px -22px rgba(10, 31, 66, 0.9);
}
.ja-banner[hidden], .best-jobs-banner[hidden] { display: none; }
.ja-banner-icon {
  flex: none; width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 255, 149, 0.14); color: var(--lime);
}
.ja-banner-icon svg { width: 30px; height: 30px; }
.ja-banner-text { flex: 1 1 0; min-width: 0; }
.ja-banner-title { margin: 0; font-size: 1.3rem; font-weight: 900; line-height: 1.25; color: #fff; }
.ja-banner-sub { margin: 4px 0 0; font-size: 0.95rem; line-height: 1.45; color: #c9d6f2; }
.ja-banner-form { flex: 1.15 1 0; min-width: 0; }
.ja-banner-row { display: flex; gap: 10px; }
.ja-banner-input {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 14px; border-radius: 12px; background: #fff; color: #8a97b1;
  border: 2px solid transparent;
}
.ja-banner-input svg { width: 18px; height: 18px; flex: none; }
.ja-banner-input input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--ink);
}
.ja-banner-input:focus-within { border-color: var(--lime); }
.ja-banner-input:has(input.has-error) { border-color: #ff6b6f; }
.ja-banner-btn {
  flex: none; height: 52px; padding: 0 24px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 900; color: var(--navy); white-space: nowrap;
  background: linear-gradient(135deg, #5cffbd 0%, #00ff95 45%, #00cf86 100%);
  box-shadow: 0 10px 20px -12px rgba(0, 160, 90, 0.8);
  transition: filter 0.15s ease;
}
.ja-banner-btn:hover { filter: brightness(1.05); }
.ja-banner-btn[disabled] { opacity: 0.75; cursor: default; }
.ja-banner-error { margin: 8px 0 0; font-size: 0.86rem; font-weight: 700; color: #ffb3b5; }
.ja-banner-error[hidden] { display: none; }
.ja-banner-fine { margin: 8px 0 0; font-size: 0.78rem; color: #93a6cc; }
.ja-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.ja-done { padding-top: 40px; }
.ja-done-check {
  width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--navy);
  background: linear-gradient(135deg, #5cffbd, #00ff95 45%, #00cf86);
  box-shadow: 0 0 0 10px rgba(0, 255, 149, 0.16);
}
.ja-done-check svg { width: 34px; height: 34px; }
.ja-done h2 { margin: 0 0 8px; font-size: 1.45rem; }
.ja-done p { margin: 0 0 8px; font-size: 0.98rem; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.ja-done p strong { color: var(--ink); }
.ja-done .ja-done-small { font-size: 0.85rem; margin-bottom: 18px; }
.ja-done .ja-done-ok { width: 100%; }

@media (max-width: 860px) {
  .ja-banner { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px; margin: 0 0 22px; text-align: left; }
  .ja-banner-icon { width: 48px; height: 48px; }
  .ja-banner-icon svg { width: 24px; height: 24px; }
  .ja-banner-text, .ja-banner-form { flex: none; }
}
@media (max-width: 480px) {
  .ja-banner-row { flex-direction: column; }
  .ja-banner-input { flex: none; width: 100%; }
  .ja-banner-btn { width: 100%; }
  .ja-banner-title { font-size: 1.15rem; }
}


/* ---- "Is your company here?" referral-program search (referral-programs.html + signup.html) ---- */
/* Search pill with the Search button inside it */
.rp-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 540px;
  margin: 0 auto;
  padding: 6px 6px 6px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 10px 26px -16px rgba(10, 31, 66, 0.45);
}
.rp-search:focus-within { border-color: var(--blue-primary); box-shadow: 0 0 0 4px rgba(42, 100, 224, 0.14), 0 10px 26px -16px rgba(10, 31, 66, 0.45); }
.rp-search > svg { width: 18px; height: 18px; flex-shrink: 0; color: #8a94a8; }
.rp-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 10px 0;
  outline: none;
}
.rp-input::placeholder { color: #8a94a8; }
/* No clear (x) button in the box */
.rp-input::-webkit-search-cancel-button, .rp-input::-ms-clear { display: none; -webkit-appearance: none; }
/* Search button: same lime as the "A" in ReferADriver */
.rp-search-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: 999px;
  background: var(--grad-lime, var(--lime));
  color: var(--lime-ink);
  font: inherit;
  font-weight: 900;
  font-size: 0.98rem;
  padding: 11px 16px 11px 20px;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(0, 150, 88, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.rp-search-btn svg { width: 17px; height: 17px; flex-shrink: 0; transition: transform 0.2s ease; }
.rp-search-btn:hover, .rp-search-btn:focus-visible { background: var(--grad-lime-hover, var(--lime-hover)); }
.rp-search-btn:hover svg { transform: translateX(2px); }
.rp-search-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* "Hit Search" nudge: plays when they stop typing and nothing on the list matches */
.rp-search-btn.is-nudging { animation: rpNudge 1.1s ease-in-out 3; }
.rp-search-btn.is-nudging svg { animation: rpArrow 1.1s ease-in-out 3; }
@keyframes rpNudge {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 16px -8px rgba(0, 150, 88, 0.75), 0 0 0 0 rgba(0, 255, 149, 0.55); }
  45% { transform: scale(1.07); box-shadow: 0 6px 16px -8px rgba(0, 150, 88, 0.75), 0 0 0 10px rgba(0, 255, 149, 0); }
}
@keyframes rpArrow { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(5px); } }


/* Chip cloud */
.rp-chips {
  list-style: none;
  margin: 22px auto 0;
  padding: 0;
  max-width: 880px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.rp-chips li[hidden], .rp-chips[hidden] { display: none; }
.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--navy);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 6px 16px -12px rgba(10, 31, 66, 0.5);
}
.rp-chip svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--blue-primary); }
/* Chips stay white -- no color change or animation on hover / while searching */
.rp-chip:hover { border-color: #b8c3d6; }
.rp-chip:focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; }
.rp-chip-search { border-style: dashed; }

.rp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rp-chips { margin-top: 26px; }
.rp-legend { margin: 18px auto 0; font-size: 0.85rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.rp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rp-legend svg { width: 13px; height: 13px; color: var(--blue-primary); }
.rp-note { max-width: 640px; margin: 30px auto 0; font-size: 0.8rem; line-height: 1.55; color: #64748b; }

@media (max-width: 640px) {
  .rp-search { padding-left: 14px; }
  .rp-search-btn { padding: 11px 16px; }
  .rp-chips { gap: 8px; }
  .rp-chip { font-size: 0.92rem; padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-search-btn, .rp-search-btn svg { transition: none; }
  .rp-search-btn.is-nudging, .rp-search-btn.is-nudging svg { animation: none; }
}
/* Featured chips shown before typing (signup page): fewer on phones */
@media (max-width: 640px) {
  .rp-chips:not(.is-filtering) li.rp-desk-only { display: none; }
}